feat(chat): use Phoenix.Presence to show online users

lib/slax_web/live/chat_room_live.ex

@@ -4,10 +4,12 @@ defmodule SlaxWeb.ChatRoomLive do
 
   require Logger
 
+  alias Slax.Accounts
   alias Slax.Accounts.User
   alias Slax.Chat
   alias Slax.Chat.Message
   alias Slax.Chat.Room
+  alias SlaxWeb.OnlineUsers
 
   @impl Phoenix.LiveView
   def render(assigns) do
@@ -25,6 +27,20 @@ defmodule SlaxWeb.ChatRoomLive do
         <div id="rooms-list">
           <.room_link :for={room <- @rooms} room={room} active={room.id == @room.id} />
         </div>
+        <div class="mt-4">
+          <div class="flex items-center h-8 px-3 group">
+            <div class="flex items-center flex-grow focus:outline-none">
+              <span class="ml-2 leading-none font-medium text-sm">Users</span>
+            </div>
+          </div>
+        </div>
+        <div id="users-list">
+          <.user
+            :for={user <- @users}
+            user={user}
+            online={OnlineUsers.online?(@online_users, user.id)}
+          />
+        </div>
       </div>
     </div>
     <div class="flex flex-col flex-grow shadow-lg">
@@ -133,10 +149,26 @@ defmodule SlaxWeb.ChatRoomLive do
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     rooms = Chat.list_rooms()
+    users = Accounts.list_users()
 
     timezone = get_connect_params(socket)["timezone"]
 
-    {:ok, assign(socket, hide_topic?: false, rooms: rooms, timezone: timezone)}
+    if connected?(socket) do
+      OnlineUsers.track(self(), socket.assigns.current_user)
+    end
+
+    OnlineUsers.subscribe()
+
+    socket =
+      assign(socket,
+        hide_topic?: false,
+        online_users: OnlineUsers.list(),
+        rooms: rooms,
+        timezone: timezone,
+        users: users
+      )
+
+    {:ok, socket}
   end
 
   @impl Phoenix.LiveView
@@ -213,6 +245,12 @@ defmodule SlaxWeb.ChatRoomLive do
     {:noreply, stream_delete(socket, :messages, message)}
   end
 
+  @impl Phoenix.LiveView
+  def handle_info(%{event: "presence_diff", payload: diff}, socket) do
+    online_users = OnlineUsers.update(socket.assigns.online_users, diff)
+    {:noreply, assign(socket, online_users: online_users)}
+  end
+
   attr :active, :boolean, required: true
   attr :room, Room, required: true
 
@@ -234,6 +272,24 @@ defmodule SlaxWeb.ChatRoomLive do
     """
   end
 
+  attr :user, User, required: true
+  attr :online, :boolean, default: false
+
+  defp user(assigns) do
+    ~H"""
+    <.link class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3" href="#">
+      <div class="flex justify-center w-4">
+        <%= if @online do %>
+          <span class="w-2 h-2 rounded-full bg-blue-500"></span>
+        <% else %>
+          <span class="w-2 h-2 rounded-full border-2 border-gray-500"></span>
+        <% end %>
+      </div>
+      <span class="ml-2 leading-none"><%= username(@user) %></span>
+    </.link>
+    """
+  end
+
   attr :current_user, User, required: true
   attr :dom_id, :string, required: true
   attr :message, Message, required: true