fixed lsp via npm. Minor header formatting fix

frontend/package.json

@@ -23,6 +23,7 @@
         "@catppuccin/tailwindcss": "^1.0.0",
         "@eslint/js": "^9.39.4",
         "@rolldown/plugin-babel": "^0.2.2",
+        "@tailwindcss/language-server": "^0.14.29",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.1",
@@ -32,6 +33,7 @@
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
         "prettier": "^3.8.3",
+        "typescript-language-server": "^5.3.0",
         "vite": "^8.0.4",
         "vscode-langservers-extracted": "^4.10.0"
     }

frontend/src/components/Header.jsx

@@ -7,11 +7,8 @@ export default function Header({ theme }) {
         { label: "Nextcloud", url: "https://nextcloud.aramjonghu.nl" },
         { label: "Navidrome", url: "https://music.aramjonghu.nl" },
         { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
-        { label: "Stream (broken at this moment)", url: "/stream" },
-        {
-            label: "Omnisearch",
-            url: "https://xng.aramjonghu.nl",
-        },
+        { label: "Stream", url: "/stream" },
+        { label: "Omnisearch", url: "https://xng.aramjonghu.nl" },
         { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" },
     ];
 

frontend/src/pages/Stream.jsx

@@ -1,17 +1,53 @@
+import { useState, useRef, useEffect } from "react";
+
+const streams = [
+    { id: "aramstream", label: "Aram" },
+    { id: "generalstream", label: "General" },
+    { id: "gueststream", label: "Guest" },
+];
+
 export default function Stream() {
+    const [activeStream, setActiveStream] = useState("aramstream");
+    const headerRef = useRef(null);
+
+    useEffect(() => {
+        headerRef.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+        });
+    }, []);
+
     return (
         <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
             <div className="w-full text-center flex flex-col flex-1">
-                <h1 className="text-4xl font-bold text-ctp-mauve mb-6">
+                <h1
+                    ref={headerRef}
+                    className="text-4xl font-bold text-ctp-mauve mb-6"
+                >
                     Stream
                 </h1>
 
+                <div className="flex justify-center gap-2 mb-4">
+                    {streams.map((s) => (
+                        <button
+                            key={s.id}
+                            onClick={() => setActiveStream(s.id)}
+                            className={
+                                activeStream === s.id
+                                    ? "ui-btn bg-ctp-surface0 text-ctp-text"
+                                    : "ui-btn ui-btn:hover"
+                            }
+                        >
+                            {s.label}
+                        </button>
+                    ))}
+                </div>
+
                 <div className="stream-frame w-full mx-auto flex-1 max-h-[85vh]">
                     <iframe
-                        src="https://stream.aramjonghu.nl"
-                        title="Stream"
+                        src={`https://stream.aramjonghu.nl/${activeStream}`}
+                        title={activeStream}
                         allow="autoplay; fullscreen; picture-in-picture"
-                        loading="lazy"
                         className="w-full h-full border-0 rounded-lg"
                     />
                 </div>