fix(frontend): consolidate chat sidebar and modal auth flow

frontend/src/main.ts

@@ -16,9 +16,7 @@ let ws: WebSocket | null = null;
 let currentRoom = "main";
 let username = "viewer" + Math.floor(Math.random() * 1000);
 let authenticated = false;
-let currentDMTarget = "";
 let chatVisible = true;
-let usersVisible = true;
 let typingUser = "";
 let lastTypingSent = 0;
 let typingTimeout: number | undefined;
@@ -38,7 +36,6 @@ export function resetViewerStateForTests() {
   username = "viewer";
   authenticated = false;
   chatVisible = true;
-  usersVisible = true;
   typingUser = "";
   lastTypingSent = 0;
   onlineUsers.clear();
@@ -79,6 +76,10 @@ export function resolveManifestUrl() {
 }
 
 function connectWebSocket(room: string) {
+  // Clear previous messages so reconnects render a fresh history instead of
+  // appending duplicates on top of the old log.
+  clearMessages();
+
   // Detach the old socket's close handler before closing it. Otherwise an
   // intentional reconnect (login/logout/room switch/session refresh) would
   // have the replaced socket schedule yet another reconnect, and each new
@@ -137,6 +138,11 @@ function connectWebSocket(room: string) {
   };
 }
 
+function clearMessages() {
+  const messages = document.getElementById("messages");
+  if (messages) messages.innerHTML = "";
+}
+
 function addMessage(type: string, text: string, sender = "", timestamp = new Date()) {
   const messages = document.getElementById("messages");
   if (!messages) return;
@@ -281,6 +287,9 @@ export async function initPlayerAndChat(loadHlsModule: () => Promise<{ default:
     }
   }
 
+  // Resolve the user session first so we connect once with the correct username
+  // (avoids pushing chat history twice on initial load).
+  await sessionReady;
   connectWebSocket("main");
 
   // Start schedule polling
@@ -337,50 +346,34 @@ function sendMessage() {
 
 function switchRoom(room: string) {
   currentRoom = room;
-  const isDM = room.startsWith("dm:");
   document.getElementById("room-name")!.textContent =
     room === "main" ? "Main Channel" : room.charAt(0).toUpperCase() + room.slice(1) + " Room";
-  addMessage("system", `Switched to ${room} room`);
-  const searchRow = document.getElementById("dm-search-row");
-  if (searchRow) searchRow.hidden = !isDM;
   connectWebSocket(room);
 }
 
 function togglePrivateDM() {
   const target = prompt("Enter username to start private chat with:");
   if (target && target !== username) {
-    currentDMTarget = target;
     const dmRoom = `dm:${[username, target].sort().join("-")}`;
     switchRoom(dmRoom);
   }
 }
 
-async function searchDM() {
-  const apiUrl = import.meta.env.VITE_PUBLIC_APP_URL?.trim() || window.location.origin;
-  const input = document.getElementById("dm-search-input") as HTMLInputElement;
-  const q = input.value.trim();
-  if (!q || !currentDMTarget) return;
-  try {
-    const res = await fetch(
-      `${apiUrl}/api/dm/search?with=${encodeURIComponent(currentDMTarget)}&q=${encodeURIComponent(q)}`,
-      { credentials: "include" },
-    );
-    if (!res.ok) return;
-    const results = await res.json();
-    addMessage("system", `Search results (${results.length}) for "${q}":`);
-    for (const m of results) {
-      addMessage(m.type || "private", m.text, m.username, m.timestamp);
-    }
-  } catch {
-    /* ignore */
-  }
-}
-
 window.switchRoom = switchRoom;
 window.sendMessage = sendMessage;
 window.togglePrivateDM = togglePrivateDM;
 window.toggleChatPanel = toggleChatPanel;
 
+function openAuthModal() {
+  const panel = document.getElementById("auth-panel");
+  if (panel) panel.hidden = false;
+}
+
+function closeAuthModal() {
+  const panel = document.getElementById("auth-panel");
+  if (panel) panel.hidden = true;
+}
+
 function updateAuthUI() {
   const label = document.getElementById("chat-user-label");
   const toggle = document.getElementById("auth-toggle-btn");
@@ -395,25 +388,26 @@ function updateAuthUI() {
   if (panel) panel.hidden = true;
 }
 
-async function refreshUserSession() {
-  try {
-    const apiUrl = import.meta.env.VITE_PUBLIC_APP_URL?.trim() || window.location.origin;
-    const res = await fetch(`${apiUrl}/api/auth/session`, { credentials: "include" });
-    if (!res.ok) return;
-    const data = await res.json();
-    const wasAnonymous = username.startsWith("viewer");
-    if (data.authenticated && data.username) {
-      authenticated = true;
-      username = data.username;
-      updateAuthUI();
-      if (wasAnonymous) connectWebSocket(currentRoom);
-    } else {
-      authenticated = false;
+let sessionReady: Promise<void> = Promise.resolve();
+
+function refreshUserSession(): void {
+  sessionReady = (async () => {
+    try {
+      const apiUrl = import.meta.env.VITE_PUBLIC_APP_URL?.trim() || window.location.origin;
+      const res = await fetch(`${apiUrl}/api/auth/session`, { credentials: "include" });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.authenticated && data.username) {
+        authenticated = true;
+        username = data.username;
+      } else {
+        authenticated = false;
+      }
       updateAuthUI();
+    } catch {
+      /* non-critical */
     }
-  } catch {
-    /* non-critical */
-  }
+  })();
 }
 
 async function submitAuth(path: string) {
@@ -476,15 +470,6 @@ async function logout() {
   connectWebSocket(currentRoom);
 }
 
-function toggleUserList() {
-  const panel = document.getElementById("presence-panel");
-  const btn = document.getElementById("users-toggle-btn");
-  if (!panel) return;
-  usersVisible = !usersVisible;
-  panel.hidden = !usersVisible;
-  if (btn) btn.setAttribute("aria-expanded", String(usersVisible));
-}
-
 function showTyping(name: string) {
   if (name === username) return;
   const el = document.getElementById("typing-indicator");
@@ -521,15 +506,14 @@ function sendTyping() {
 
 document.addEventListener("DOMContentLoaded", () => {
   void initPlayerAndChat();
-  void refreshUserSession();
+  refreshUserSession();
   document.getElementById("auth-toggle-btn")?.addEventListener("click", () => {
-    const panel = document.getElementById("auth-panel");
-    if (panel) panel.hidden = !panel.hidden;
+    if (!authenticated) openAuthModal();
   });
+  document.getElementById("auth-close-btn")?.addEventListener("click", closeAuthModal);
+  document.getElementById("auth-backdrop")?.addEventListener("click", closeAuthModal);
   document.getElementById("auth-login-btn")?.addEventListener("click", login);
   document.getElementById("auth-register-btn")?.addEventListener("click", register);
   document.getElementById("auth-logout-btn")?.addEventListener("click", logout);
-  document.getElementById("dm-search-btn")?.addEventListener("click", searchDM);
-  document.getElementById("users-toggle-btn")?.addEventListener("click", toggleUserList);
   document.getElementById("message-input")?.addEventListener("input", sendTyping);
 });