feat: implement dark mode theme and refactor viewer layout for improved responsiveness

frontend/src/main.ts

@@ -1,12 +1,13 @@
 import "./style.css";
 
-type HlsClass = typeof import("hls.js")["default"];
+type HlsClass = (typeof import("hls.js"))["default"];
 
 declare global {
   interface Window {
     switchRoom: (room: string) => void;
     sendMessage: () => void;
     togglePrivateDM: () => void;
+    toggleChatPanel: () => void;
   }
 }
 
@@ -14,6 +15,7 @@ let hls: InstanceType<HlsClass> | null = null;
 let ws: WebSocket | null = null;
 let currentRoom = "main";
 let username = "viewer" + Math.floor(Math.random() * 1000);
+let chatVisible = true;
 
 function resolveWebSocketBaseUrl() {
   const configuredUrl = import.meta.env.VITE_PUBLIC_WS_URL?.trim();
@@ -134,25 +136,22 @@ async function initPlayerAndChat() {
 
   connectWebSocket("main");
 
-  setInterval(() => {
-    const titles = [
-      "Midnight Jazz Lounge",
-      "Synthwave Nights",
-      "Classic Cinema",
-      "Ambient Void",
-    ];
-    const title = titles[Math.floor(Math.random() * titles.length)];
-    document.getElementById("now-playing")!.textContent = title;
-    const overlay = document.getElementById("now-playing-overlay")!;
-    overlay.classList.remove("hidden");
-    document.getElementById("overlay-title")!.textContent = title;
-  }, 15000);
-
   console.log(
     "Linear Void Frontend initialized - HLS Player + Chat Sidebar ready",
   );
 }
 
+function toggleChatPanel() {
+  const shell = document.querySelector(".viewer-shell");
+  const toggle = document.getElementById("chat-toggle");
+  if (!shell || !toggle) return;
+
+  chatVisible = !chatVisible;
+  shell.classList.toggle("chat-collapsed", !chatVisible);
+  toggle.textContent = chatVisible ? "Hide Chat" : "Show Chat";
+  toggle.setAttribute("aria-expanded", String(chatVisible));
+}
+
 function sendMessage() {
   const input = document.getElementById("message-input") as HTMLInputElement;
   const text = input.value.trim();
@@ -190,6 +189,7 @@ function togglePrivateDM() {
 window.switchRoom = switchRoom;
 window.sendMessage = sendMessage;
 window.togglePrivateDM = togglePrivateDM;
+window.toggleChatPanel = toggleChatPanel;
 
 document.addEventListener("DOMContentLoaded", () => {
   void initPlayerAndChat();