Refactor frontend: Enhance chat UI and player initialization

- Updated main.ts to streamline player and chat initialization, removing Alpine.js dependency. - Improved message rendering with new CSS classes for better styling and layout. - Added a function to simulate "now playing" titles at regular intervals. - Revamped style.css with a new design system using CSS variables for better maintainability. - Removed tailwind.config.js as Tailwind CSS is no longer used.
2026-08-04 19:36:11 +02:00
1 parent 7cfddfc7ef
commit fca4286d87
@@ -11,17 +11,21 @@
 - Added `/api/admin/media/{id}` GET/PUT/DELETE handlers for media metadata retrieval, updates, and file+record deletion.
 - Extended admin schedule and dashboard data endpoints with media duration totals, runtime strings, and media counts.
 - Added admin UI runtime display for schedule/dashboard plus media library edit/delete actions.
+- Added a dedicated plain TypeScript admin module for tab navigation, media CRUD actions, schedule/system analytics refresh, and moderation workflows without Alpine dependencies.

 ### Changed

 - Revised ADR-006 to reflect current implemented storage: PostgreSQL is the compose default and deployed primary backend, with SQLite retained as optional fallback.
 - Updated chat runtime image to include ffmpeg/ffprobe for media duration probing on upload.
+- Rebuilt viewer, admin, and admin-login pages around custom semantic class structures with accessibility-focused landmarks, tab semantics, and keyboard-focus behavior.
+- Replaced legacy and Tailwind-based stylesheet rules with a custom design-token CSS system covering responsive layouts, forms, tables, and reduced-motion behavior.

 ### Fixed

 - Started Admin UI Media Library backend implementation by adding the `Media` GORM model and AutoMigrate integration in chat startup.
 - Implemented media upload duration probing with ffprobe and persisted media metadata to the database alongside filesystem storage.
 - Updated media listing to read from the media table and return duration metadata with HH:MM:SS runtime formatting.
+- Removed Tailwind and Alpine runtime/build dependencies from the frontend package configuration and eliminated Tailwind directives/warnings during production build.

 ## [1.0.3] - 2026-08-03

@@ -5,30 +5,27 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Linear Void Admin Login</title>
-    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../../src/style.css" />
 </head>

-<body class="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center px-6">
-    <main class="w-full max-w-md bg-slate-900 border border-slate-800 rounded-[2rem] shadow-2xl p-8">
-        <div class="mb-8">
-            <div class="text-xs uppercase tracking-[0.3em] text-slate-500 mb-3">Linear Void</div>
-            <h1 class="text-4xl font-semibold text-white mb-2">Admin Login</h1>
-            <p class="text-sm text-slate-400">Authenticate to access protected admin controls.</p>
-        </div>
+<body class="auth-body">
+    <main class="auth-shell" aria-label="Admin authentication">
+        <section class="auth-card" aria-labelledby="auth-title">
+            <p class="auth-kicker">Linear Void</p>
+            <h1 id="auth-title">Admin Login</h1>
+            <p class="auth-subtitle">Authenticate to access protected admin controls.</p>

-        <form id="login-form" class="space-y-4">
-            <label class="block text-sm">
-                <span class="block text-slate-400 mb-2">Username</span>
-                <input id="username" type="text" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500" autocomplete="username" required />
-            </label>
-            <label class="block text-sm">
-                <span class="block text-slate-400 mb-2">Password</span>
-                <input id="password" type="password" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 focus:outline-none focus:border-blue-500" autocomplete="current-password" required />
-            </label>
-            <button id="submit" type="submit" class="w-full bg-blue-600 hover:bg-blue-500 px-4 py-3 rounded-xl font-medium text-white">Sign in</button>
-            <div id="status" class="text-sm text-slate-400 min-h-6"></div>
-        </form>
+            <form id="login-form" class="form-stack" novalidate>
+                <label for="username">Username</label>
+                <input id="username" type="text" class="text-input" autocomplete="username" required />
+
+                <label for="password">Password</label>
+                <input id="password" type="password" class="text-input" autocomplete="current-password" required />
+
+                <button id="submit" type="submit" class="btn btn-primary btn-block">Sign in</button>
+                <p id="status" class="status-line" aria-live="polite"></p>
+            </form>
+        </section>
    </main>

    <script>
@@ -42,7 +39,7 @@
            event.preventDefault();
            submit.disabled = true;
            status.textContent = 'Signing in...';
-            status.className = 'text-sm text-slate-400 min-h-6';
+            status.className = 'status-line';

            try {
                const response = await fetch('/api/admin/login', {
@@ -59,7 +56,7 @@
            } catch (error) {
                console.error('Failed to sign in', error);
                status.textContent = 'Login failed. Check your credentials.';
-                status.className = 'text-sm text-rose-400 min-h-6';
+                status.className = 'status-line status-error';
            } finally {
                submit.disabled = false;
            }
@@ -5,76 +5,69 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Linear Void - 24/7 Synchronized Channel</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <link rel="stylesheet" href="/src/style.css" />
 </head>

-<body class="bg-slate-950 text-slate-200">
-  <div class="flex h-screen">
-    <!-- Video Player -->
-    <div class="flex-1 flex flex-col">
-      <div class="p-4 border-b border-slate-800 flex items-center justify-between bg-slate-900">
-        <div class="flex items-center gap-3">
-          <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">LV</div>
+<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="text-2xl font-bold text-white">Linear Void</h1>
-            <p class="text-xs text-emerald-400">24/7 Synchronized Channel • Live</p>
+            <h1 class="viewer-title">Linear Void</h1>
+            <p class="viewer-subtitle">24/7 Synchronized Channel • Live</p>
          </div>
        </div>
-        <div class="now-playing px-4 py-1 rounded-full text-sm font-medium flex items-center gap-2">
-          <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></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>
-      </div>
+      </header>

-      <div class="flex-1 flex items-center justify-center p-8 bg-black relative">
-        <video id="player" class="max-h-full rounded-xl shadow-2xl" controls autoplay muted playsinline></video>
-        <div id="now-playing-overlay" class="absolute bottom-8 left-8 bg-black/70 backdrop-blur-md px-6 py-3 rounded-2xl text-sm hidden">
-          <div class="flex items-center gap-3">
-            <div class="text-emerald-400">● LIVE</div>
-            <div id="overlay-title" class="font-medium"></div>
+      <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>
-      </div>
+      </section>

-      <div class="p-4 bg-slate-900 border-t border-slate-800 text-xs text-slate-400 flex justify-between">
+      <footer class="viewer-footer">
        <div>Latency: ~25s • Synced</div>
-        <div class="flex gap-6">
-          <a href="#" onclick="switchRoom('main')" class="hover:text-white">Main Channel</a>
-          <a href="#" onclick="switchRoom('chill')" class="hover:text-white">Chill Room</a>
-          <a href="#" onclick="switchRoom('talk')" class="hover:text-white">Talk Room</a>
-        </div>
-      </div>
-    </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>
+    </section>

-    <!-- Chat Sidebar -->
-    <div class="w-96 flex flex-col border-l border-slate-800 bg-slate-900 chat-sidebar">
-      <div class="p-4 border-b border-slate-700 font-medium flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <span class="text-emerald-400">●</span>
+    <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 onclick="togglePrivateDM()" class="text-xs px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg">New DM</button>
-      </div>
+        <button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
+      </header>

-      <!-- Messages -->
-      <div id="messages" class="flex-1 p-4 overflow-y-auto space-y-4 text-sm">
-        <!-- Messages populated by JS -->
-      </div>
+      <section id="messages" class="chat-messages" aria-live="polite" aria-label="Message stream"></section>

-      <!-- Input -->
-      <div class="p-4 border-t border-slate-700">
-        <div class="flex gap-2">
-          <input id="message-input" type="text" placeholder="Type a message..." class="input flex-1 px-4 py-3 rounded-2xl text-sm focus:outline-none" onkeydown="if(event.key === 'Enter') sendMessage()">
-          <button onclick="sendMessage()" class="bg-blue-600 hover:bg-blue-500 px-6 rounded-2xl text-sm font-medium">Send</button>
+      <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>
-        <div class="text-[10px] text-slate-500 mt-2 text-center">
+        <p class="chat-note">
          Synced with video • Moderation active
-        </div>
+        </p>
      </div>
-    </div>
-  </div>
+    </aside>
+  </main>

  <script type="module" src="/src/main.ts"></script>
 </body>
@@ -8,11 +8,7 @@
      "name": "frontend",
      "version": "0.0.0",
      "dependencies": {
-        "alpinejs": "^3.15.12",
-        "autoprefixer": "^10.5.4",
-        "hls.js": "^1.6.16",
-        "postcss": "^8.5.25",
-        "tailwindcss": "^4.3.3"
+        "hls.js": "^1.6.16"
      },
      "devDependencies": {
        "typescript": "~6.0.2",
@@ -375,131 +371,6 @@
        "tslib": "^2.4.0"
      }
    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
-      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/shared": "3.1.5"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
-      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
-      "license": "MIT"
-    },
-    "node_modules/alpinejs": {
-      "version": "3.15.12",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.12.tgz",
-      "integrity": "sha512-nJvPAQVNPdZZ0NrExJ/kzQco3ijR8LwvCOadQecllESiqT4NyZ/57sN9V2XyvhlBGAbmlKYgeWZvYdKq99ij/Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/reactivity": "~3.1.1"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.5.4",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz",
-      "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.6",
-        "caniuse-lite": "^1.0.30001806",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.11.10",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.10.tgz",
-      "integrity": "sha512-35JEvJ5/KKlbCHjMCsONI2w6HE88STjVdHk+C7d8LtcFxUjZR1KeLP9izofn2qs0KUxX5r4z73bwH/rd+JHacw==",
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.28.7",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz",
-      "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.10.44",
-        "caniuse-lite": "^1.0.30001806",
-        "electron-to-chromium": "^1.5.393",
-        "node-releases": "^2.0.51",
-        "update-browserslist-db": "^1.2.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001806",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
-      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
    "node_modules/detect-libc": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -510,21 +381,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.399",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.399.tgz",
-      "integrity": "sha512-lEcqhErbHjXRvd41rnWLpzbyU/IXfIYo7QwaFWmxGeLiLyY2TBCdHnWY88vB+p3ubnihRypDm66panXl7TylLA==",
-      "license": "ISC"
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/fdir": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -543,19 +399,6 @@
        }
      }
    },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -854,6 +697,7 @@
      "version": "3.3.16",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -868,19 +712,11 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
-    "node_modules/node-releases": {
-      "version": "2.0.51",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
-      "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
      "license": "ISC"
    },
    "node_modules/picomatch": {
@@ -900,6 +736,7 @@
      "version": "8.5.25",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.25.tgz",
      "integrity": "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==",
+      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -924,12 +761,6 @@
        "node": "^10 || ^12 || >=14"
      }
    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "license": "MIT"
-    },
    "node_modules/rolldown": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.1.tgz",
@@ -968,17 +799,12 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
      }
    },
-    "node_modules/tailwindcss": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
-      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
-      "license": "MIT"
-    },
    "node_modules/tinyglobby": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -1018,36 +844,6 @@
        "node": ">=14.17"
      }
    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
    "node_modules/vite": {
      "version": "8.2.0",
      "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.0.tgz",
@@ -13,10 +13,6 @@
    "vite": "^8.2.0"
  },
  "dependencies": {
-    "alpinejs": "^3.15.12",
-    "autoprefixer": "^10.5.4",
-    "hls.js": "^1.6.16",
-    "postcss": "^8.5.25",
-    "tailwindcss": "^4.3.3"
+    "hls.js": "^1.6.16"
  }
 }
@@ -0,0 +1,604 @@
+import "./style.css";
+
+type ServiceHealth = {
+  name: string;
+  status: string;
+  detail: string;
+  checked: string;
+};
+
+type MediaEntry = {
+  id?: number;
+  name: string;
+  title?: string;
+  status?: string;
+  size?: number;
+  runtime?: string;
+  modifiedAt?: string;
+  tags?: string;
+};
+
+const bodyDataset = document.body.dataset;
+const moderationLogLimit = Number.parseInt(
+  bodyDataset.adminModerationLogLimit || "",
+  10,
+);
+
+const adminConfig = {
+  defaultModerator: bodyDataset.adminDefaultModerator || "admin",
+  defaultRoom: bodyDataset.adminDefaultRoom || "main",
+  moderationLogLimit:
+    Number.isFinite(moderationLogLimit) && moderationLogLimit > 0
+      ? moderationLogLimit
+      : 50,
+};
+
+const state = {
+  mediaUploading: false,
+  moderationSubmitting: false,
+  playlistSaving: false,
+};
+
+const setText = (id: string, text: string) => {
+  const el = document.getElementById(id);
+  if (el) el.textContent = text;
+};
+
+const setStatus = (id: string, text: string, isError = false) => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.textContent = text;
+  el.classList.toggle("status-error", isError);
+};
+
+const fmtSize = (value?: number) => {
+  if (!value || value <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  let size = value;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+  return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+};
+
+function switchTab(tabName: string) {
+  const triggers = document.querySelectorAll<HTMLButtonElement>(".tab-trigger");
+  const panels = document.querySelectorAll<HTMLElement>(".tab-panel");
+
+  triggers.forEach((trigger) => {
+    const active = trigger.dataset.tab === tabName;
+    trigger.classList.toggle("is-active", active);
+    trigger.setAttribute("aria-selected", String(active));
+  });
+
+  panels.forEach((panel) => {
+    const active = panel.id === `tab-${tabName}`;
+    panel.hidden = !active;
+    panel.classList.toggle("is-active", active);
+  });
+
+  if (tabName === "upload") refreshMediaLibrary();
+  if (tabName === "playlist") refreshPlaylist();
+  if (tabName === "schedule") refreshSchedule();
+  if (tabName === "moderation") refreshModerationLogs();
+  if (tabName === "users") refreshUsers();
+  if (tabName === "analytics") refreshAnalytics();
+  if (tabName === "system") refreshSystemSummary();
+}
+
+async function refreshOverview() {
+  try {
+    const response = await fetch("/api/admin/overview");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    setText("stat-viewers", String(payload.viewers ?? 0));
+    setText("stat-stored-messages", String(payload.storedMessages ?? 0));
+    setText("stat-moderation-actions", String(payload.moderationActions ?? 0));
+    setText("stat-media-runtime", payload.mediaTotalRuntime || "00:00:00");
+    setText("stat-media-count", `${payload.mediaCount || 0} files`);
+
+    setText("system-stored-messages", String(payload.storedMessages ?? 0));
+    setText("system-redis-clients", String(payload.redisClients ?? 0));
+    setText("system-redis-enabled", payload.redisEnabled ? "yes" : "no");
+    setText("system-redis-memory", payload.redisMemoryUsed || "unavailable");
+    setText("system-db-driver", payload.databaseDriver || "unavailable");
+    setText("system-generated-at", payload.generatedAt || "unavailable");
+
+    setStatus("overview-status", `Live data loaded at ${payload.generatedAt}`);
+  } catch (error) {
+    console.error("Failed to load admin overview", error);
+    setStatus("overview-status", "Failed to load live admin data.", true);
+  }
+}
+
+async function refreshAnalytics() {
+  setStatus("analytics-status", "Loading analytics...");
+  try {
+    const response = await fetch("/api/admin/analytics");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    setText("analytics-total-messages", String(payload.totalMessages ?? 0));
+    setText("analytics-messages-24h", String(payload.messagesLast24Hours ?? 0));
+    setText("analytics-distinct-rooms", String(payload.distinctRooms ?? 0));
+    setText(
+      "analytics-moderation-actions",
+      String(payload.moderationActions ?? 0),
+    );
+    setText("analytics-generated-at", payload.generatedAt || "unavailable");
+
+    const tbody = document.getElementById("analytics-table-body");
+    if (!tbody) return;
+    tbody.innerHTML = "";
+
+    const rows = (payload.topRooms || []) as Array<{
+      room: string;
+      messageCount: number;
+    }>;
+    if (rows.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="2">No room analytics available yet.</td></tr>`;
+    } else {
+      rows.forEach((row) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `<td>${row.room}</td><td>${row.messageCount}</td>`;
+        tbody.appendChild(tr);
+      });
+    }
+
+    setStatus("analytics-status", "Analytics loaded.");
+  } catch (error) {
+    console.error("Failed to load analytics", error);
+    setStatus("analytics-status", "Failed to load analytics.", true);
+  }
+}
+
+async function refreshPlaylist() {
+  setStatus("playlist-status", "Loading playlist...");
+  try {
+    const response = await fetch("/api/admin/playlist");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    const textarea = document.getElementById(
+      "playlist-content",
+    ) as HTMLTextAreaElement | null;
+    if (textarea) textarea.value = payload.content || "";
+    setStatus("playlist-status", "Playlist loaded.");
+  } catch (error) {
+    console.error("Failed to load playlist", error);
+    setStatus("playlist-status", "Failed to load playlist.", true);
+  }
+}
+
+async function savePlaylist() {
+  if (state.playlistSaving) return;
+  state.playlistSaving = true;
+  setStatus("playlist-status", "Saving playlist...");
+
+  try {
+    const textarea = document.getElementById(
+      "playlist-content",
+    ) as HTMLTextAreaElement | null;
+    const content = textarea?.value || "";
+
+    const response = await fetch("/api/admin/playlist", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    setStatus("playlist-status", "Playlist saved.");
+  } catch (error) {
+    console.error("Failed to save playlist", error);
+    setStatus("playlist-status", "Failed to save playlist.", true);
+  } finally {
+    state.playlistSaving = false;
+  }
+}
+
+async function refreshSchedule() {
+  setStatus("schedule-status", "Loading schedule...");
+  try {
+    const response = await fetch("/api/admin/schedule");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    setText("schedule-total-entries", String(payload.totalEntries ?? 0));
+    setText("schedule-matched-entries", String(payload.matchedEntries ?? 0));
+    setText("schedule-total-runtime", payload.totalRuntime || "00:00:00");
+
+    const tbody = document.getElementById("schedule-table-body");
+    if (!tbody) return;
+    tbody.innerHTML = "";
+
+    const entries = payload.entries || [];
+    if (entries.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="5">No schedule entries found.</td></tr>`;
+    } else {
+      entries.forEach((entry: any) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `<td>${entry.index}</td><td>${entry.label}</td><td>${entry.runtime || "00:00:00"}</td><td>${entry.status || "missing"}</td><td>${entry.path}</td>`;
+        tbody.appendChild(tr);
+      });
+    }
+
+    setStatus(
+      "schedule-status",
+      `Schedule loaded. Total runtime ${payload.totalRuntime || "00:00:00"}.`,
+    );
+  } catch (error) {
+    console.error("Failed to load schedule", error);
+    setStatus("schedule-status", "Failed to load schedule.", true);
+  }
+}
+
+async function refreshSystemSummary() {
+  setStatus("system-status", "Loading system summary...");
+  try {
+    const response = await fetch("/api/admin/system");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    setText("system-db-driver", payload.databaseDriver || "unavailable");
+    setText("system-playlist-path", payload.playlistPath || "unavailable");
+    setText("system-playlist-present", payload.playlistExists ? "yes" : "no");
+    setText("system-redis-enabled", payload.redisEnabled ? "yes" : "no");
+    setText("system-redis-memory", payload.redisMemoryUsed || "unavailable");
+    setText("system-generated-at", payload.generatedAt || "unavailable");
+
+    const servicesEl = document.getElementById("system-services");
+    if (servicesEl) {
+      servicesEl.innerHTML = "";
+      const services = (payload.services || []) as ServiceHealth[];
+      services.forEach((service) => {
+        const row = document.createElement("article");
+        row.className = "service-row";
+        row.innerHTML = `
+          <div>
+            <h3>${service.name}</h3>
+            <p class="small-muted">${service.checked}</p>
+          </div>
+          <div class="service-row-right">
+            <p class="service-status service-status-${service.status}">${service.status}</p>
+            <p>${service.detail}</p>
+          </div>
+        `;
+        servicesEl.appendChild(row);
+      });
+    }
+
+    setStatus("system-status", "System summary loaded.");
+  } catch (error) {
+    console.error("Failed to load system summary", error);
+    setStatus("system-status", "Failed to load system summary.", true);
+  }
+}
+
+function renderMediaRows(files: MediaEntry[]) {
+  const tbody = document.getElementById("media-table-body");
+  if (!tbody) return;
+  tbody.innerHTML = "";
+
+  if (files.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="7">No media files available.</td></tr>`;
+    return;
+  }
+
+  files.forEach((file) => {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `
+      <td>${file.name}</td>
+      <td>${file.title || "-"}</td>
+      <td>${file.runtime || "00:00:00"}</td>
+      <td>${file.status || "unknown"}</td>
+      <td>${fmtSize(file.size)}</td>
+      <td>${file.modifiedAt || "-"}</td>
+      <td class="action-cell">
+        <button type="button" class="btn btn-secondary btn-small" data-action="edit" data-id="${file.id || ""}">Edit</button>
+        <button type="button" class="btn btn-danger btn-small" data-action="delete" data-id="${file.id || ""}">Delete</button>
+      </td>
+    `;
+    tr.querySelector('[data-action="edit"]')?.addEventListener("click", () =>
+      editMedia(file),
+    );
+    tr.querySelector('[data-action="delete"]')?.addEventListener("click", () =>
+      deleteMedia(file),
+    );
+    tbody.appendChild(tr);
+  });
+}
+
+async function refreshMediaLibrary() {
+  setStatus("media-status", "Loading media library...");
+  try {
+    const response = await fetch("/api/admin/media");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    renderMediaRows(payload.files || []);
+    setText("media-generated-at", payload.generatedAt || "unavailable");
+    setStatus("media-status", "Media library loaded.");
+  } catch (error) {
+    console.error("Failed to load media library", error);
+    setStatus("media-status", "Failed to load media library.", true);
+  }
+}
+
+async function uploadVideo(file: File) {
+  if (state.mediaUploading) return;
+  state.mediaUploading = true;
+  setStatus("media-status", `Uploading ${file.name}...`);
+
+  try {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await fetch("/api/admin/media", {
+      method: "POST",
+      body: formData,
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    renderMediaRows(payload.files || []);
+    setText("media-generated-at", payload.generatedAt || "unavailable");
+    setStatus("media-status", `${file.name} uploaded.`);
+    await refreshOverview();
+    await refreshSchedule();
+  } catch (error) {
+    console.error("Failed to upload media", error);
+    setStatus("media-status", "Failed to upload media file.", true);
+  } finally {
+    state.mediaUploading = false;
+  }
+}
+
+async function editMedia(file: MediaEntry) {
+  if (!file.id) {
+    setStatus("media-status", "Cannot edit media item without id.", true);
+    return;
+  }
+
+  const title = window.prompt("Title", file.title || file.name || "");
+  if (title === null) return;
+  const status = window.prompt("Status", file.status || "ready");
+  if (status === null) return;
+  const tags = window.prompt("Tags (comma-separated)", file.tags || "");
+  if (tags === null) return;
+
+  setStatus("media-status", `Saving metadata for ${file.name}...`);
+  try {
+    const response = await fetch(`/api/admin/media/${file.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title, status, tags }),
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    setStatus("media-status", "Media metadata updated.");
+    await refreshMediaLibrary();
+    await refreshOverview();
+    await refreshSchedule();
+  } catch (error) {
+    console.error("Failed to update media metadata", error);
+    setStatus("media-status", "Failed to update media metadata.", true);
+  }
+}
+
+async function deleteMedia(file: MediaEntry) {
+  if (!file.id) {
+    setStatus("media-status", "Cannot delete media item without id.", true);
+    return;
+  }
+
+  if (!window.confirm(`Delete ${file.name}? This removes file and metadata.`)) {
+    return;
+  }
+
+  setStatus("media-status", `Deleting ${file.name}...`);
+  try {
+    const response = await fetch(`/api/admin/media/${file.id}`, {
+      method: "DELETE",
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    setStatus("media-status", `${file.name} deleted.`);
+    await refreshMediaLibrary();
+    await refreshOverview();
+    await refreshSchedule();
+  } catch (error) {
+    console.error("Failed to delete media", error);
+    setStatus("media-status", "Failed to delete media file.", true);
+  }
+}
+
+async function refreshModerationLogs() {
+  setStatus("moderation-status", "Loading moderation logs...");
+  try {
+    const response = await fetch(
+      `/api/admin/moderation/logs?limit=${adminConfig.moderationLogLimit}`,
+    );
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    const tbody = document.getElementById("moderation-table-body");
+    if (!tbody) return;
+    tbody.innerHTML = "";
+
+    const rows = payload.logs || [];
+    if (rows.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="5">No moderation actions logged yet.</td></tr>`;
+    } else {
+      rows.forEach((entry: any) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `<td>${entry.timestamp}</td><td>${entry.action}</td><td>${entry.target}</td><td>${entry.moderator}</td><td>${entry.reason}</td>`;
+        tbody.appendChild(tr);
+      });
+    }
+
+    setStatus("moderation-status", "Moderation logs loaded.");
+  } catch (error) {
+    console.error("Failed to load moderation logs", error);
+    setStatus("moderation-status", "Failed to load moderation logs.", true);
+  }
+}
+
+async function submitModerationAction(event: Event) {
+  event.preventDefault();
+  if (state.moderationSubmitting) return;
+
+  state.moderationSubmitting = true;
+  setStatus("moderation-status", "Submitting moderation action...");
+
+  const payload = {
+    action: (document.getElementById("mod-action") as HTMLSelectElement).value,
+    target: (document.getElementById("mod-target") as HTMLInputElement).value,
+    moderator: (document.getElementById("mod-moderator") as HTMLInputElement)
+      .value,
+    reason: (document.getElementById("mod-reason") as HTMLTextAreaElement)
+      .value,
+    room: (document.getElementById("mod-room") as HTMLInputElement).value,
+  };
+
+  try {
+    const response = await fetch("/api/admin/moderation/actions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    setStatus("moderation-status", "Moderation action recorded.");
+    (document.getElementById("mod-target") as HTMLInputElement).value = "";
+    (document.getElementById("mod-reason") as HTMLTextAreaElement).value = "";
+    await refreshModerationLogs();
+    await refreshOverview();
+  } catch (error) {
+    console.error("Failed to submit moderation action", error);
+    setStatus("moderation-status", "Failed to submit moderation action.", true);
+  } finally {
+    state.moderationSubmitting = false;
+  }
+}
+
+async function refreshUsers() {
+  setStatus("users-status", "Loading active users...");
+  try {
+    const response = await fetch("/api/admin/users");
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const payload = await response.json();
+    const tbody = document.getElementById("users-table-body");
+    if (!tbody) return;
+    tbody.innerHTML = "";
+
+    const users = payload.users || [];
+    if (users.length === 0) {
+      tbody.innerHTML = `<tr><td colspan="3">No active users reported.</td></tr>`;
+    } else {
+      users.forEach((user: any) => {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `<td>${user.username}</td><td>${user.room}</td><td>${user.online ? "yes" : "no"}</td>`;
+        tbody.appendChild(tr);
+      });
+    }
+
+    setStatus(
+      "users-status",
+      payload.redisEnabled
+        ? "Active users loaded."
+        : "Redis disabled; no live presence data available.",
+    );
+  } catch (error) {
+    console.error("Failed to load users", error);
+    setStatus("users-status", "Failed to load active users.", true);
+  }
+}
+
+function bindEvents() {
+  document
+    .querySelectorAll<HTMLButtonElement>(".tab-trigger")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        const tab = button.dataset.tab;
+        if (tab) switchTab(tab);
+      });
+    });
+
+  document.getElementById("logout-btn")?.addEventListener("click", async () => {
+    try {
+      await fetch("/api/admin/logout", { method: "POST" });
+    } finally {
+      window.location.href = "/admin/login/";
+    }
+  });
+
+  document
+    .getElementById("reload-media-btn")
+    ?.addEventListener("click", refreshMediaLibrary);
+  document
+    .getElementById("reload-schedule-btn")
+    ?.addEventListener("click", refreshSchedule);
+  document
+    .getElementById("reload-playlist-btn")
+    ?.addEventListener("click", refreshPlaylist);
+  document
+    .getElementById("save-playlist-btn")
+    ?.addEventListener("click", savePlaylist);
+  document
+    .getElementById("reload-moderation-btn")
+    ?.addEventListener("click", refreshModerationLogs);
+  document
+    .getElementById("reload-analytics-btn")
+    ?.addEventListener("click", refreshAnalytics);
+  document
+    .getElementById("reload-users-btn")
+    ?.addEventListener("click", refreshUsers);
+  document
+    .getElementById("reload-system-btn")
+    ?.addEventListener("click", refreshSystemSummary);
+
+  const uploadInput = document.getElementById(
+    "video-upload",
+  ) as HTMLInputElement | null;
+  document
+    .getElementById("upload-trigger-btn")
+    ?.addEventListener("click", () => uploadInput?.click());
+  uploadInput?.addEventListener("change", async (event) => {
+    const target = event.target as HTMLInputElement;
+    if (!target.files || target.files.length === 0) return;
+    await uploadVideo(target.files[0]);
+    target.value = "";
+  });
+
+  document
+    .getElementById("moderation-form")
+    ?.addEventListener("submit", submitModerationAction);
+
+  (document.getElementById("mod-moderator") as HTMLInputElement).value =
+    adminConfig.defaultModerator;
+  (document.getElementById("mod-room") as HTMLInputElement).value =
+    adminConfig.defaultRoom;
+}
+
+async function init() {
+  bindEvents();
+  await Promise.all([
+    refreshOverview(),
+    refreshAnalytics(),
+    refreshMediaLibrary(),
+    refreshPlaylist(),
+    refreshSchedule(),
+    refreshModerationLogs(),
+    refreshSystemSummary(),
+    refreshUsers(),
+  ]);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  init().catch((error) => console.error("Admin initialization failed", error));
+});
@@ -1,10 +1,8 @@
 import Hls from "hls.js";
 import "./style.css";

-// Main application state with Alpine.js
 declare global {
  interface Window {
-    app: () => any;
    switchRoom: (room: string) => void;
    sendMessage: () => void;
    togglePrivateDM: () => void;
@@ -89,17 +87,21 @@ function addMessage(
 ) {
  const messages = document.getElementById("messages")!;
  const div = document.createElement("div");
-  div.className = `message flex ${type === "system" ? "justify-center" : sender === username ? "justify-end" : "justify-start"}`;
+  div.className = "message-row";

  if (type === "system") {
-    div.innerHTML = `<div class="text-xs text-slate-400 bg-slate-800 px-3 py-1 rounded-full">${text}</div>`;
+    div.classList.add("message-system-row");
+    div.innerHTML = `<div class="message-system">${text}</div>`;
  } else {
+    div.classList.add(
+      sender === username ? "message-self-row" : "message-other-row",
+    );
    div.innerHTML = `
-      <div class="${sender === username ? "bg-blue-600" : "bg-slate-700"} px-4 py-2 rounded-3xl max-w-[75%]">
-        ${sender && sender !== username ? `<div class="text-xs text-blue-300">${sender}</div>` : ""}
-        <div>${text}</div>
-        <div class="text-[10px] text-slate-400 mt-1">${new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</div>
-      </div>
+      <article class="message-bubble ${sender === username ? "message-self" : "message-other"}">
+        ${sender && sender !== username ? `<div class="message-sender">${sender}</div>` : ""}
+        <div class="message-text">${text}</div>
+        <time class="message-time">${new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</time>
+      </article>
    `;
  }

@@ -107,6 +109,41 @@ function addMessage(
  messages.scrollTop = messages.scrollHeight;
 }

+function initPlayerAndChat() {
+  const video = document.getElementById("player") as HTMLVideoElement;
+  const manifestUrl = resolveManifestUrl();
+
+  if (Hls.isSupported()) {
+    hls = new Hls();
+    hls.loadSource(manifestUrl);
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
+  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = manifestUrl;
+    video.addEventListener("loadedmetadata", () => video.play());
+  }
+
+  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 sendMessage() {
  const input = document.getElementById("message-input") as HTMLInputElement;
  const text = input.value.trim();
@@ -141,64 +178,10 @@ function togglePrivateDM() {
  }
 }

-// Alpine.js app
-window.app = () => {
-  return {
-    init() {
-      // Initialize Tailwind
-      // @ts-ignore
-      tailwind.config = {
-        content: [],
-        theme: { extend: {} },
-      };
-
-      // Initialize HLS Player
-      const video = document.getElementById("player") as HTMLVideoElement;
-      const manifestUrl = resolveManifestUrl();
-
-      if (Hls.isSupported()) {
-        hls = new Hls();
-        hls.loadSource(manifestUrl);
-        hls.attachMedia(video);
-        hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
-      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = manifestUrl;
-        video.addEventListener("loadedmetadata", () => video.play());
-      }
-
-      // Connect to default chat room
-      connectWebSocket("main");
-
-      // Simulate now playing
-      setInterval(() => {
-        const titles = [
-          "Midnight Jazz Lounge",
-          "Synthwave Nights",
-          "Classic Cinema",
-          "Ambient Void",
-        ];
-        document.getElementById("now-playing")!.textContent =
-          titles[Math.floor(Math.random() * titles.length)];
-        const overlay = document.getElementById("now-playing-overlay")!;
-        overlay.classList.remove("hidden");
-        document.getElementById("overlay-title")!.textContent =
-          titles[Math.floor(Math.random() * titles.length)];
-      }, 15000);
-
-      console.log(
-        "Linear Void Frontend initialized - HLS Player + Chat Sidebar ready",
-      );
-    },
-  };
-};
-
-// Make functions global for onclick handlers
 window.switchRoom = switchRoom;
 window.sendMessage = sendMessage;
 window.togglePrivateDM = togglePrivateDM;

-// Auto initialize when loaded
 document.addEventListener("DOMContentLoaded", () => {
-  // @ts-ignore
-  window.app().init();
+  initPlayerAndChat();
 });
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};