From 6eb75594a40839694a9f14a71de25481f3d24a79 Mon Sep 17 00:00:00 2001
From: Noah <github.flatness700@passmail.com>
Date: Thu, 22 Jan 2026 00:08:27 +0100
Subject: [PATCH] Use session name for chat alignment

---
 frontend/src/App.tsx       | 32 ++++++++++++++++++++++++++++++--
 frontend/src/ChatPanel.tsx | 28 ++++++++++++++++++----------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ae1f8d5..d3fbc25 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -15,6 +15,8 @@ export function App({ socket }: AppProps) {
   const [rooms, setRooms] = useState<RoomSummary[]>([]);
   const [joinedRooms, setJoinedRooms] = useState<Set<string>>(new Set());
   const [messagesByRoom, setMessagesByRoom] = useState<Record<string, Chat[]>>({});
+  const [userName] = useState(() => createGuestName());
+  const [userToken] = useState(() => crypto.randomUUID());
 
   const handleListRooms = useCallback((response: Response) => {
     if (response.type === "list_rooms") {
@@ -28,9 +30,18 @@ export function App({ socket }: AppProps) {
   }, [listRoomsRequest]);
 
   const sendMessageRequest = useWsRequest(socket, undefined);
+  const connectRequest = useWsRequest(socket, undefined);
+
+  useEffect(() => {
+    if (!socket) {
+      return;
+    }
+
+    connectRequest({ type: "connect", token: userToken, name: userName });
+  }, [connectRequest, socket, userName, userToken]);
 
   const onMessageSent = (content: string) => {
-    const chat: Chat = { content, user: { name: "You" } };
+    const chat: Chat = { content, user: { name: userName } };
 
     if (!roomID) {
       return;
@@ -55,8 +66,25 @@ export function App({ socket }: AppProps) {
 
   return (
     <>
-      {roomID ? <ChatPanel messages={messagesByRoom[roomID] ?? []} onMessageSent={onMessageSent} /> : <EmptyChat />}
+      {roomID ? (
+        <ChatPanel
+          currentUserName={userName}
+          messages={messagesByRoom[roomID] ?? []}
+          onMessageSent={onMessageSent}
+        />
+      ) : (
+        <EmptyChat />
+      )}
       <Rooms roomID={roomID} rooms={rooms} joinedRooms={joinedRooms} setRoomID={setRoomID} joinRoom={joinRoom} />
     </>
   );
 }
+
+function createGuestName(): string {
+  const adjectives = ["Amber", "Brisk", "Golden", "Quiet", "Sandy", "Silver", "Sunny", "Velvet"];
+  const nouns = ["Comet", "Dawn", "Drift", "Ember", "Harbor", "Horizon", "Lumen", "Spark"];
+  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+  const noun = nouns[Math.floor(Math.random() * nouns.length)];
+  const suffix = Math.floor(100 + Math.random() * 900);
+  return `${adjective}${noun}${suffix}`;
+}
diff --git a/frontend/src/ChatPanel.tsx b/frontend/src/ChatPanel.tsx
index 2477ed1..eac9750 100644
--- a/frontend/src/ChatPanel.tsx
+++ b/frontend/src/ChatPanel.tsx
@@ -2,11 +2,12 @@ import { useState } from "react";
 import type { Chat } from "./api/types";
 
 type ChatPanelProps = {
+  currentUserName: string;
   messages: Chat[];
   onMessageSent: (message: string) => void;
 };
 
-export function ChatPanel({ messages, onMessageSent }: ChatPanelProps) {
+export function ChatPanel({ currentUserName, messages, onMessageSent }: ChatPanelProps) {
   const [draft, setDraft] = useState("");
 
   return (
@@ -14,16 +15,23 @@ export function ChatPanel({ messages, onMessageSent }: ChatPanelProps) {
       <div className="h-full w-full p-4 flex flex-col">
         <h2 className="text-lg font-semibold">Chat</h2>
         <div className="space-y-3 overflow-y-auto flex-1">
-          {messages.map((message, index) => (
-            <div className="chat chat-start" key={`${message.user.name ?? "unknown"}-${index}`}>
-              <div className="chat-header">
-                {message.user.name ?? "Anonymous"}
-                <time className="text-xs opacity-50">2 hours ago</time>
+          {messages.map((message, index) => {
+            const isOwnMessage = message.user.name === currentUserName;
+            const chatAlignment = isOwnMessage ? "chat-end" : "chat-start";
+            const bubbleTone = isOwnMessage ? "chat-bubble-primary" : "chat-bubble-secondary";
+            const footerText = isOwnMessage ? "Sent" : "Delivered";
+
+            return (
+              <div className={`chat ${chatAlignment}`} key={`${message.user.name ?? "unknown"}-${index}`}>
+                <div className="chat-header">
+                  {isOwnMessage ? "You" : (message.user.name ?? "Anonymous")}
+                  <time className="text-xs opacity-50">{isOwnMessage ? "Just now" : "Moments ago"}</time>
+                </div>
+                <div className={`chat-bubble ${bubbleTone}`}>{message.content}</div>
+                <div className="chat-footer opacity-50">{footerText}</div>
               </div>
-              <div className="chat-bubble">{message.content}</div>
-              <div className="chat-footer opacity-50">{index % 2 === 0 ? "Seen" : "Delivered"}</div>
-            </div>
-          ))}
+            );
+          })}
         </div>
         <form
           className="mt-3"