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.

frontend/src/main.ts

@@ -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();
 });