feat: list all rooms in sidebar

lib/slax_web/live/chat_room_live.ex

@@ -7,6 +7,21 @@ defmodule SlaxWeb.ChatRoomLive do
 
   def render(assigns) do
     ~H"""
+    <div class="flex flex-col flex-shrink-0 w-64 bg-slate-100">
+      <div class="flex justify-between items-center flex-shrink-0 h-16 border-b border-slate-300 px-4">
+        <div class="flex flex-col gap-1.5">
+          <h1 class="text-lg font-bold text-gray-800">Slax</h1>
+        </div>
+      </div>
+      <div clas="mt-4 overflow-auto">
+        <div class="flex items-center h-8 px-3 group">
+          <span class="ml-2 leading-none font-medium text-sm">Rooms</span>
+        </div>
+        <div id="rooms-list">
+          <.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} />
+        </div>
+      </div>
+    </div>
     <div class="flex flex-col flex-grow shadow-lg">
       <div class="flex justify-between items-center flex-shrink-0 h-16 bg-white border-b border-slate-300 px-4">
         <div class="flex flex-col gap-1.5">
@@ -25,11 +40,31 @@ defmodule SlaxWeb.ChatRoomLive do
   end
 
   def mount(_params, _session, socket) do
-    room = Room |> Repo.all() |> List.first()
+    [room | _] = rooms = Repo.all(Room)
-    {:ok, assign(socket, hide_topic?: false, room: room)}
+    {:ok, assign(socket, hide_topic?: false, room: room, rooms: rooms)}
   end
 
   def handle_event("toggle-topic", _params, socket) do
     {:noreply, update(socket, :hide_topic?, &(!&1))}
   end
+
+  attr :active, :boolean, required: true
+  attr :room, Room, required: true
+
+  defp room_link(assigns) do
+    ~H"""
+    <a
+      class={[
+        "flex items-center h-8 text-sm pl-8 pr-3",
+        (@active && "bg-slate-300") || "hover:bg-slate-300"
+      ]}
+      href="#"
+    >
+      <.icon name="hero-hashtag" class="h-4 w-4" />
+      <span class={["ml-2 leading-none", @active && "font-bold"]}>
+        <%= @room.name %>
+      </span>
+    </a>
+    """
+  end
 end