Commit 6: Adminbereich (TanStack Router, 8 Menüpunkte, Scan-Logs)

apps/frontend/src/routes/HomePage.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { SearchInput, StatusBadge, ResultsList } from "@launchpad/ui";
+import { rankServices, type Service } from "@launchpad/shared";
+import { useServices } from "../hooks/useServices.js";
+import { useBackendHealth } from "../hooks/useBackendHealth.js";
+import { useTheme } from "../hooks/useTheme.js";
+
+function openService(service: Service) {
+  window.open(service.url, "_blank", "noopener,noreferrer");
+}
+
+async function toggleServiceFavorite(service: Service): Promise<Service> {
+  const res = await fetch(`/api/services/${service.id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ favorite: !service.favorite }),
+  });
+  if (!res.ok) {
+    throw new Error(`Favorit konnte nicht aktualisiert werden (HTTP ${res.status})`);
+  }
+  return res.json();
+}
+
+export function HomePage() {
+  const [theme, toggleTheme] = useTheme();
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { health, error: healthError } = useBackendHealth();
+  const { data: services, isLoading, isError } = useServices();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
+
+  const toggleFavorite = useMutation({
+    mutationFn: toggleServiceFavorite,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["services"] });
+    },
+  });
+
+  const results = useMemo(
+    () => rankServices(services ?? [], query),
+    [services, query]
+  );
+
+  // Auswahl zurücksetzen, sobald sich die Trefferliste ändert
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [results.length, query]);
+
+  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();
+        return;
+      }
+
+      if (document.activeElement !== inputRef.current) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, Math.max(results.length - 1, 0)));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const target = results[selectedIndex];
+        if (target) openService(target);
+      } else if (e.key === "Escape") {
+        inputRef.current?.blur();
+        setQuery("");
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [results, selectedIndex]);
+
+  const isOnline = !healthError && health?.status === "ok";
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-start gap-8 bg-gradient-to-b from-white to-neutral-100 px-6 pt-[15vh] dark:from-black dark:to-neutral-950">
+      <div className="fixed right-6 top-6 flex items-center gap-2">
+        <Link
+          to="/admin"
+          aria-label="Adminbereich öffnen"
+          className="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"
+        >
+          ⚙️
+        </Link>
+        <button
+          onClick={toggleTheme}
+          aria-label="Theme wechseln"
+          className="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>
+
+      <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
+        />
+
+        {isLoading ? (
+          <p className="mt-4 text-center text-sm text-black/40 dark:text-white/40">
+            Lade Dienste …
+          </p>
+        ) : isError ? (
+          <p className="mt-4 text-center text-sm text-red-500">
+            Dienste konnten nicht geladen werden.
+          </p>
+        ) : (
+          <ResultsList
+            services={results}
+            selectedIndex={selectedIndex}
+            onHover={setSelectedIndex}
+            onOpen={openService}
+            onToggleFavorite={(service) => toggleFavorite.mutate(service)}
+            emptyLabel={
+              (services?.length ?? 0) === 0
+                ? "Noch keine Dienste angelegt. Füge welche im Adminbereich hinzu."
+                : "Keine Treffer für deine Suche."
+            }
+          />
+        )}
+      </div>
+
+      <div className="flex flex-col items-center gap-1 pb-8">
+        <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>
+  );
+}