Erstes lauffähiges Grundgerüst: Monorepo, Fastify-API, React-Startseite, Docker

apps/frontend/src/App.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from "react";
+import { SearchInput, StatusBadge } from "@launchpad/ui";
+import type { HealthStatus } from "@launchpad/shared";
+
+type Theme = "light" | "dark";
+
+function useTheme(): [Theme, () => void] {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === "undefined") return "dark";
+    const stored = window.localStorage.getItem("launchpad-theme");
+    if (stored === "light" || stored === "dark") return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    window.localStorage.setItem("launchpad-theme", theme);
+  }, [theme]);
+
+  const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
+  return [theme, toggle];
+}
+
+function useBackendHealth() {
+  const [health, setHealth] = useState<HealthStatus | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function check() {
+      try {
+        const res = await fetch("/api/health");
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data: HealthStatus = await res.json();
+        if (!cancelled) {
+          setHealth(data);
+          setError(false);
+        }
+      } catch {
+        if (!cancelled) setError(true);
+      }
+    }
+
+    check();
+    const interval = setInterval(check, 10_000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+
+  return { health, error };
+}
+
+export default function App() {
+  const [theme, toggleTheme] = useTheme();
+  const [query, setQuery] = useState("");
+  const { health, error } = useBackendHealth();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
+      const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
+      if (isSlash || isCmdK) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === "Escape") {
+        inputRef.current?.blur();
+        setQuery("");
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const isOnline = !error && health?.status === "ok";
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 dark:from-black dark:to-neutral-950">
+      <button
+        onClick={toggleTheme}
+        aria-label="Theme wechseln"
+        className="fixed right-6 top-6 rounded-full border border-black/10 p-2 text-black/60
+          transition-colors hover:bg-black/5 dark:border-white/10 dark:text-white/60 dark:hover:bg-white/5"
+      >
+        {theme === "dark" ? "☀️" : "🌙"}
+      </button>
+
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="text-4xl font-semibold tracking-tight text-black dark:text-white">
+          LaunchPad
+        </h1>
+        <p className="text-black/50 dark:text-white/50">
+          Tippe, um deine Homelab-Dienste sofort zu öffnen.
+        </p>
+      </div>
+
+      <div className="w-full max-w-xl">
+        <SearchInput
+          ref={inputRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Dienst suchen … z. B. „frigate“"
+          hint="⌘K"
+          autoFocus
+        />
+      </div>
+
+      <div className="flex flex-col items-center gap-1">
+        <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
+        {health ? (
+          <span className="text-xs text-black/30 dark:text-white/30">
+            v{health.version} · läuft seit {health.uptimeSeconds}s
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/index.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}

apps/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.js";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);