feat: style participants list

client/src/components/ParticipantsList.tsx

@@ -5,10 +5,11 @@ function ParticipantList() {
 
   return (
     <>
-      <h3 className="text-lg font-semibold">Participants</h3>
       <ul>
         {state.participants.map((participant) => (
-          <li key={participant.userId}>{participant.name}</li>
+          <li key={participant.userId} className="p-4 border-b border-gray-200">
+            {participant.name}
+          </li>
         ))}
       </ul>
     </>

client/src/pages/Room.tsx

@@ -25,7 +25,7 @@ function Room() {
     );
   }
 
-  // is connected
+  // View when is connected to the room
   return (
     <Layout>
       <section className="w-full">

server/src/handleClientMessage.ts

@@ -6,6 +6,7 @@ import type {
   ServerMessageEditedMessage,
   ServerRegistrationConfirmed,
   ServerUserJoinedMessage,
+  ServerUserListMessage,
   User,
 } from "../../shared";
 import type { Room, WebSocketData } from "./types";
@@ -45,6 +46,19 @@ export default function handleClientMessage(
         socket.send(JSON.stringify(joinMessage));
       }
 
+      // send updated participants list
+      const userArray = Array.from(room.userConnections.values());
+      const userListMessage: ServerUserListMessage = {
+        type: "USER_LIST",
+        payload: {
+          users: userArray,
+        },
+      };
+
+      for (const [socket] of room.userConnections) {
+        socket.send(JSON.stringify(userListMessage));
+      }
+
       break;
 
     case "CHAT_MESSAGE":

server/src/index.ts

@@ -1,4 +1,8 @@
-import type { ClientMessage, ServerUserLeftMessage } from "../../shared.ts";
+import type {
+  ClientMessage,
+  ServerUserLeftMessage,
+  ServerUserListMessage,
+} from "../../shared.ts";
 import handleClientMessage from "./handleClientMessage.ts";
 import type { Room, WebSocketData } from "./types.ts";
 
@@ -78,6 +82,21 @@ const server = Bun.serve<WebSocketData>({
         }
       }
 
+      room.userConnections.delete(ws);
+
+      // send updated user list
+      const userArray = Array.from(room.userConnections.values());
+      const userListMessage: ServerUserListMessage = {
+        type: "USER_LIST",
+        payload: {
+          users: userArray,
+        },
+      };
+
+      for (const [socket] of room.userConnections) {
+        socket.send(JSON.stringify(userListMessage));
+      }
+
       if (room.userConnections.size === 0) {
         rooms.delete(roomId);
         console.log("Cleaned up room", roomId);