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

frontend/index.html

@@ -10,63 +10,45 @@
 
 <body class="lv-body">
   <main class="viewer-shell" aria-label="Live player and chat">
-    <section class="viewer-main" aria-label="Video stream panel">
-      <header class="viewer-header">
-        <div class="viewer-brand-group">
-          <div class="brand-badge" aria-hidden="true">LV</div>
-          <div>
-            <h1 class="viewer-title">Linear Void</h1>
-            <p class="viewer-subtitle">24/7 Synchronized Channel • Live</p>
-          </div>
+    <header class="viewer-header">
+      <div class="viewer-brand-group">
+        <div class="brand-badge" aria-hidden="true">LV</div>
+        <div>
+          <h1 class="viewer-title">Linear Void</h1>
+          <p class="viewer-subtitle">24/7 Synchronized Channel • Live</p>
         </div>
-        <div class="now-playing-pill" aria-live="polite">
-          <span class="live-dot" aria-hidden="true"></span>
-          <span id="now-playing">Loading schedule...</span>
-        </div>
-      </header>
+      </div>
+      <button id="chat-toggle" type="button" class="btn btn-secondary chat-toggle-btn" onclick="toggleChatPanel()" aria-controls="chat-panel" aria-expanded="true">Hide Chat</button>
+    </header>
 
+    <section class="viewer-content" aria-label="Live stream and chat layout">
       <section class="player-stage" aria-label="Video stage">
         <video id="player" class="player" controls autoplay muted playsinline></video>
-        <div id="now-playing-overlay" class="now-playing-overlay hidden" aria-live="polite">
-          <div class="now-playing-overlay-inner">
-            <span class="live-label">LIVE</span>
-            <span id="overlay-title" class="overlay-title"></span>
-          </div>
-        </div>
       </section>
 
-      <footer class="viewer-footer">
-        <div>Latency: ~25s • Synced</div>
-        <nav class="room-links" aria-label="Quick room switch">
-          <a href="#" onclick="switchRoom('main'); return false;">Main Channel</a>
-          <a href="#" onclick="switchRoom('chill'); return false;">Chill Room</a>
-          <a href="#" onclick="switchRoom('talk'); return false;">Talk Room</a>
-        </nav>
-      </footer>
+      <aside id="chat-panel" class="chat-sidebar" aria-label="Chat panel">
+        <header class="chat-header">
+          <div class="chat-room-title">
+            <span class="chat-live-marker" aria-hidden="true">●</span>
+            <span id="room-name">Main Channel</span>
+          </div>
+          <button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
+        </header>
+
+        <section id="messages" class="chat-messages" aria-live="polite" aria-label="Message stream"></section>
+
+        <div class="chat-input-area">
+          <div class="chat-input-row">
+            <label for="message-input" class="sr-only">Message input</label>
+            <input id="message-input" type="text" placeholder="Type a message..." class="input" onkeydown="if(event.key === 'Enter') sendMessage()" />
+            <button type="button" class="btn btn-primary" onclick="sendMessage()">Send</button>
+          </div>
+          <p class="chat-note">
+            Synced with video • Moderation active
+          </p>
+        </div>
+      </aside>
     </section>
-
-    <aside class="chat-sidebar" aria-label="Chat panel">
-      <header class="chat-header">
-        <div class="chat-room-title">
-          <span class="chat-live-marker" aria-hidden="true">●</span>
-          <span id="room-name">Main Channel</span>
-        </div>
-        <button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
-      </header>
-
-      <section id="messages" class="chat-messages" aria-live="polite" aria-label="Message stream"></section>
-
-      <div class="chat-input-area">
-        <div class="chat-input-row">
-          <label for="message-input" class="sr-only">Message input</label>
-          <input id="message-input" type="text" placeholder="Type a message..." class="input" onkeydown="if(event.key === 'Enter') sendMessage()" />
-          <button type="button" class="btn btn-primary" onclick="sendMessage()">Send</button>
-        </div>
-        <p class="chat-note">
-          Synced with video • Moderation active
-        </p>
-      </div>
-    </aside>
   </main>
 
   <script type="module" src="/src/main.ts"></script>