feat(chat): add messages

lib/slax_web/live/chat_room_live.ex

@@ -3,6 +3,7 @@ defmodule SlaxWeb.ChatRoomLive do
   use SlaxWeb, :live_view
 
   alias Slax.Chat
+  alias Slax.Chat.Message
   alias Slax.Chat.Room
 
   @impl Phoenix.LiveView
@@ -85,6 +86,9 @@ defmodule SlaxWeb.ChatRoomLive do
           <% end %>
         </ul>
       </div>
+      <div class="flex flex-col flex-grow overflow-auto">
+        <.message :for={message <- @messages} message={message} />
+      </div>
     </div>
     """
   end
@@ -107,7 +111,15 @@ defmodule SlaxWeb.ChatRoomLive do
           Chat.get_first_room!()
       end
 
-    {:noreply, assign(socket, hide_topic?: false, page_title: "# #{room.name}", room: room)}
+    messages = Chat.list_messages_in_room(room)
+
+    {:noreply,
+     assign(socket,
+       hide_topic?: false,
+       messages: messages,
+       page_title: "# #{room.name}",
+       room: room
+     )}
   end
 
   @impl Phoenix.LiveView
@@ -135,4 +147,22 @@ defmodule SlaxWeb.ChatRoomLive do
     </.link>
     """
   end
+
+  attr :message, Message, required: true
+
+  defp message(assigns) do
+    ~H"""
+    <div class="relative flex px-4 py-3">
+      <div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div>
+      <div class="ml-2">
+        <div class="-mt-1">
+          <.link class="text-sm font-semibold hover:underline">
+            <span>User</span>
+          </.link>
+          <p class="text-sm"><%= @message.body %></p>
+        </div>
+      </div>
+    </div>
+    """
+  end
 end