feat(chat): add room index page

lib/slax_web/live/chat_room_live.ex

@@ -26,6 +26,22 @@ defmodule SlaxWeb.ChatRoomLive do
         </div>
         <div id="rooms-list">
           <.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} />
+          <button class="group relative flex items-center h-8 text-sm pl-8 pr-3 hover:bg-slate-300 cursor-pointer w-full">
+            <.icon name="hero-plus" class="h-4 w-4 relative top-px" />
+            <span class="ml-2 leading-none">Add rooms</span>
+            <div class="hidden group-focus:block cursor-default absolute top-8 right-2 bg-white border-slate-200 border py-3 rounded-lg">
+              <div class="w-full text-left">
+                <div class="hover:bg-sky-600">
+                  <div
+                    phx-click={JS.navigate(~p"/rooms")}
+                    class="cursor-pointer whitespace-nowrap text-gray-800 hover:text-withe px-6 py-1"
+                  >
+                    Browse rooms
+                  </div>
+                </div>
+              </div>
+            </div>
+          </button>
         </div>
         <div class="mt-4">
           <div class="flex items-center h-8 px-3 group">

lib/slax_web/live/chat_room_live/index.ex

@@ -0,0 +1,47 @@
+defmodule SlaxWeb.ChatRoomLive.Index do
+  use SlaxWeb, :live_view
+
+  alias Slax.Chat
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <main class="flex-1 p-6 max-w-4xl mx-auto">
+      <div class="mb-4">
+        <h1 class="text-xl font-semibold"><%= @page_title %></h1>
+      </div>
+      <div class="bg-slate-50 border rounded">
+        <div id="rooms" class="divide-y" phx-update="stream">
+          <div
+            :for={{id, room} <- @streams.rooms}
+            class="cursor-pointer p-4 flex justify-between items-center group first:rounded-t last:rounded-b"
+            id={id}
+            phx-click={JS.navigate(~p"/rooms/#{room}")}
+          >
+            <div>
+              <div class="font-medium mb-1">
+                #<%= room.name %>
+                <span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
+                  View room
+                </span>
+              </div>
+              <div class="text-gray-500 text-sm">
+                <%= if room.topic do %>
+                  <%= room.topic %>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    """
+  end
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    rooms = Chat.list_rooms()
+    socket = socket |> assign(page_title: "All rooms") |> stream(:rooms, rooms)
+    {:ok, socket}
+  end
+end

lib/slax_web/router.ex

@@ -61,6 +61,7 @@ defmodule SlaxWeb.Router do
     live_session :require_authenticated_user,
       on_mount: [{SlaxWeb.UserAuth, :ensure_authenticated}] do
       live "/", ChatRoomLive
+      live "/rooms", ChatRoomLive.Index
       live "/rooms/:id", ChatRoomLive
       live "/rooms/:id/edit", ChatRoomLive.Edit
       live "/users/settings", UserSettingsLive, :edit