Kritische Bugfixes: Export/CA-Download (Service-Worker), Speichern-Bug bei Diensten/Lesezeichen, Dark-Mode-Direktlink, Favicon-Mixed-Content-Proxy, Live-Update Zuletzt-besucht, Kategorie-Farb-Picker, Startseite-Nav

2026-07-20 13:02:58 +02:00
parent 96cf29fef4
commit cc4b285aea
13 changed files with 286 additions and 65 deletions
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -15,6 +15,7 @@ import { bookmarkRoutes } from "./routes/bookmarks.js";
 import { recentVisitsRoutes } from "./routes/recentVisits.js";
 import { settingsRoutes } from "./routes/settings.js";
 import { readLaterRoutes } from "./routes/readLater.js";
+import { faviconProxyRoutes } from "./routes/faviconProxy.js";
 import { loadPlugins } from "./plugins/loader.js";
 import * as serviceRepo from "./db/repositories/services.js";
 import * as bookmarkRepo from "./db/repositories/bookmarks.js";
@@ -73,6 +74,7 @@ async function main() {
  await app.register(recentVisitsRoutes);
  await app.register(settingsRoutes);
  await app.register(readLaterRoutes);
+  await app.register(faviconProxyRoutes);

  app.get("/", async () => {
    return { name: "LaunchPad API", status: "running" };
--- a/apps/backend/src/routes/faviconProxy.ts
+++ b/apps/backend/src/routes/faviconProxy.ts
@@ -0,0 +1,90 @@
+import type { FastifyInstance } from "fastify";
+import http from "node:http";
+import https from "node:https";
+
+const MAX_BYTES = 2 * 1024 * 1024; // 2 MB reicht für jedes realistische Favicon
+const TIMEOUT_MS = 4000;
+
+function fetchImage(
+  targetUrl: string
+): Promise<{ statusCode: number; contentType: string; body: Buffer }> {
+  return new Promise((resolve, reject) => {
+    let parsed: URL;
+    try {
+      parsed = new URL(targetUrl);
+    } catch {
+      reject(new Error("Ungültige URL"));
+      return;
+    }
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+      reject(new Error("Nur http/https erlaubt"));
+      return;
+    }
+
+    const client = parsed.protocol === "https:" ? https : http;
+    const req = client.get(
+      parsed,
+      {
+        timeout: TIMEOUT_MS,
+        // Homelab-Geräte haben oft selbstsignierte Zertifikate.
+        rejectUnauthorized: false,
+      },
+      (res) => {
+        const statusCode = res.statusCode ?? 0;
+        if (statusCode >= 300 && statusCode < 400 && res.headers.location) {
+          res.resume();
+          fetchImage(new URL(res.headers.location, targetUrl).toString())
+            .then(resolve)
+            .catch(reject);
+          return;
+        }
+
+        const chunks: Buffer[] = [];
+        let size = 0;
+        res.on("data", (chunk: Buffer) => {
+          size += chunk.length;
+          if (size > MAX_BYTES) {
+            req.destroy();
+            reject(new Error("Bild zu groß"));
+            return;
+          }
+          chunks.push(chunk);
+        });
+        res.on("end", () => {
+          resolve({
+            statusCode,
+            contentType: res.headers["content-type"] ?? "image/x-icon",
+            body: Buffer.concat(chunks),
+          });
+        });
+        res.on("error", reject);
+      }
+    );
+
+    req.on("timeout", () => req.destroy(new Error("Zeitüberschreitung")));
+    req.on("error", reject);
+  });
+}
+
+export async function faviconProxyRoutes(app: FastifyInstance): Promise<void> {
+  app.get("/api/favicon-proxy", async (request, reply) => {
+    const { url } = request.query as { url?: string };
+    if (!url) {
+      return reply.code(400).send({ error: "url erforderlich" });
+    }
+
+    try {
+      const image = await fetchImage(url);
+      if (image.statusCode >= 400 || image.body.length === 0) {
+        return reply.code(404).send();
+      }
+      reply.header("Cache-Control", "public, max-age=86400");
+      reply.type(image.contentType);
+      return reply.send(image.body);
+    } catch {
+      // Icon nicht ladbar (Gerät offline, kaputte URL, ...) - 404 statt 500,
+      // damit das Frontend sauber auf den Buchstaben-Fallback zurückfällt.
+      return reply.code(404).send();
+    }
+  });
+}
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -8,6 +8,19 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <title>LaunchPad</title>
+    <script>
+      // Muss inline und vor jedem Bundle-Download laufen, sonst blitzt beim
+      // Direktaufruf einer Unterseite (z. B. /admin/dashboard) kurz das
+      // falsche Theme auf, bevor React mountet.
+      (function () {
+        var stored = localStorage.getItem("launchpad-theme");
+        var dark =
+          stored === "dark" ||
+          (stored !== "light" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        document.documentElement.classList.toggle("dark", dark);
+      })();
+    </script>
  </head>
  <body class="bg-white dark:bg-black">
    <div id="root"></div>
--- a/apps/frontend/src/routes/HomePage.tsx
+++ b/apps/frontend/src/routes/HomePage.tsx
@@ -11,13 +11,6 @@ import { useCategories } from "../hooks/useCategories.js";
 import { useRecentVisits, recordVisit } from "../hooks/useRecentVisits.js";
 import { useReadLater } from "../hooks/useReadLater.js";

-function openItem(item: SearchResult | { url: string; id?: string; kind?: "service" | "bookmark" }) {
-  window.open(item.url, "_blank", "noopener,noreferrer");
-  if ("kind" in item && item.kind && item.id) {
-    recordVisit(item.kind, item.id);
-  }
-}
-
 async function toggleFavoriteRequest(item: SearchResult): Promise<void> {
  const path = item.kind === "service" ? `/api/services/${item.id}` : `/api/bookmarks/${item.id}`;
  const res = await fetch(path, {
@@ -95,6 +88,7 @@ export function HomePage() {
  const [theme, toggleTheme] = useTheme();
  const [query, setQuery] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [resultsVisible, setResultsVisible] = useState(false);
  const { health, error: healthError } = useBackendHealth();
  const { data: services, isLoading: servicesLoading, isError: servicesError } = useServices();
  const { data: bookmarks, isLoading: bookmarksLoading } = useBookmarks();
@@ -102,10 +96,20 @@ export function HomePage() {
  const { data: recentVisits } = useRecentVisits();
  const { data: readLaterItems } = useReadLater();
  const inputRef = useRef<HTMLInputElement>(null);
+  const searchContainerRef = useRef<HTMLDivElement>(null);
  const queryClient = useQueryClient();
  const isSearching = query.trim().length > 0;
  const isLoading = servicesLoading || bookmarksLoading;

+  function openItem(item: SearchResult | { url: string; id?: string; kind?: "service" | "bookmark" }) {
+    window.open(item.url, "_blank", "noopener,noreferrer");
+    if ("kind" in item && item.kind && item.id) {
+      recordVisit(item.kind, item.id).then(() => {
+        queryClient.invalidateQueries({ queryKey: ["recent-visits"] });
+      });
+    }
+  }
+
  const categoryColors = useMemo(() => {
    const map: Record<string, string> = {};
    for (const c of categories ?? []) {
@@ -164,6 +168,25 @@ export function HomePage() {
    setSelectedIndex(0);
  }, [results.length, query]);

+  // Beim Tippen wieder einblenden (z. B. nachdem per Klick-außerhalb
+  // zugeklappt wurde und man weitertippt).
+  useEffect(() => {
+    if (isSearching) setResultsVisible(true);
+  }, [isSearching]);
+
+  // Klick außerhalb von Suchfeld+Trefferliste klappt das Dropdown wieder ein
+  // (Desktop-Verhalten, Text bleibt erhalten).
+  useEffect(() => {
+    function onPointerDown(e: MouseEvent) {
+      if (!searchContainerRef.current) return;
+      if (!searchContainerRef.current.contains(e.target as Node)) {
+        setResultsVisible(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, []);
+
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      const isSlash = e.key === "/" && document.activeElement !== inputRef.current;
@@ -223,19 +246,19 @@ export function HomePage() {
      </div>

      {/* Nicht-scrollender Kopfbereich: Titel, Favoriten, Suchfeld, Später-lesen, Zuletzt besucht */}
-      <div className="flex shrink-0 flex-col items-center gap-4 px-6 pb-3 pt-6 sm:pt-10">
-        <div className="flex flex-col items-center gap-0.5 text-center">
-          <h1 className="text-xl font-semibold tracking-tight text-black dark:text-white sm:text-2xl">
+      <div className="flex shrink-0 flex-col items-center gap-6 px-6 pb-4 pt-8 sm:pt-12">
+        <div className="flex flex-col items-center gap-1.5 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight text-black dark:text-white sm:text-3xl">
            LaunchPad
          </h1>
-          <p className="text-xs text-black/50 dark:text-white/50 sm:text-sm">
+          <p className="text-sm text-black/50 dark:text-white/50">
            Tippe, um deine Homelab-Dienste sofort zu öffnen.
          </p>
        </div>

-        <div className="w-full max-w-xl">
+        <div ref={searchContainerRef} className="w-full max-w-xl">
          {hasFavorites ? (
-            <div className="mb-3 flex flex-col gap-2">
+            <div className="mb-5 flex flex-col gap-4">
              {favoriteServices.length > 0 ? (
                <FavoritesBar
                  items={favoriteServices}
@@ -267,12 +290,17 @@ export function HomePage() {
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
+            onClear={() => {
+              setQuery("");
+              inputRef.current?.focus();
+            }}
+            onFocus={() => setResultsVisible(true)}
            placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
            hint="⌘K"
            autoFocus
          />

-          {!isSearching ? (
+          {!isSearching || !resultsVisible ? (
            <div className="mt-3 flex flex-col gap-3">
              <ReadLaterBox />

@@ -295,26 +323,15 @@ export function HomePage() {
              ) : null}

              {recentVisits && recentVisits.length > 0 ? (
-                <div>
-                  <div className="mb-1.5 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
-                    Zuletzt besucht
-                  </div>
-                  <div className="flex flex-wrap items-center justify-center gap-2">
-                    {recentVisits.map((item) => (
-                      <button
-                        key={`${item.kind}-${item.id}`}
-                        onClick={() => openItem(item)}
-                        title={item.displayName}
-                        className="flex items-center gap-1.5 rounded-full border border-black/10
-                          bg-white/50 px-2.5 py-1 text-xs text-black/60 hover:bg-black/5
-                          dark:border-white/10 dark:bg-white/5 dark:text-white/60 dark:hover:bg-white/10"
-                      >
-                        <Favicon src={item.favicon} fallbackLetter={item.displayName} size="sm" />
-                        <span className="max-w-[8rem] truncate">{item.displayName}</span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
+                <FavoritesBar
+                  items={recentVisits}
+                  label="Zuletzt besucht"
+                  categoryColors={categoryColors}
+                  onOpen={(item) => {
+                    const original = recentVisits.find((r) => r.id === item.id);
+                    if (original) openItem(original);
+                  }}
+                />
              ) : null}
            </div>
          ) : null}
@@ -322,7 +339,7 @@ export function HomePage() {
      </div>

      {/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
-      {isSearching ? (
+      {isSearching && resultsVisible ? (
        <div className="min-h-0 flex-1 px-6 pb-4">
          <div className="mx-auto h-full max-w-xl">
            {isLoading ? (
--- a/apps/frontend/src/routes/admin/AdminLayout.tsx
+++ b/apps/frontend/src/routes/admin/AdminLayout.tsx
@@ -4,6 +4,7 @@ import { StatusBadge } from "@launchpad/ui";
 import { useBackendHealth } from "../../hooks/useBackendHealth.js";

 const NAV_ITEMS = [
+  { to: "/", label: "Startseite", icon: "🏠" },
  { to: "/admin/dashboard", label: "Dashboard", icon: "📊" },
  { to: "/admin/devices", label: "Geräte", icon: "🖥️" },
  { to: "/admin/services", label: "Dienste", icon: "🔗" },
@@ -84,7 +85,7 @@ export function AdminLayout() {

        <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
          {NAV_ITEMS.map((item) => {
-            const active = pathname.startsWith(item.to);
+            const active = item.to === "/" ? pathname === "/" : pathname.startsWith(item.to);
            return (
              <Link
                key={item.to}
@@ -109,15 +110,6 @@ export function AdminLayout() {
              label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"}
            />
          </div>
-          <Link
-            to="/"
-            className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium
-              text-black/60 transition-colors hover:bg-black/5 hover:text-black
-              dark:text-white/60 dark:hover:bg-white/5 dark:hover:text-white"
-          >
-            <span aria-hidden>←</span>
-            Zurück zur Suche
-          </Link>
        </div>
      </aside>

--- a/apps/frontend/src/routes/admin/BookmarksPage.tsx
+++ b/apps/frontend/src/routes/admin/BookmarksPage.tsx
@@ -40,7 +40,8 @@ async function patchBookmark(id: string, patch: BookmarkPatch): Promise<Bookmark
    body: JSON.stringify(patch),
  });
  if (!res.ok) {
-    throw new Error(`Lesezeichen konnte nicht aktualisiert werden (HTTP ${res.status})`);
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error ?? `Lesezeichen konnte nicht aktualisiert werden (HTTP ${res.status})`);
  }
  return res.json();
 }
@@ -258,13 +259,16 @@ function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void
                dark:border-white/10 dark:bg-white/10 dark:text-white"
            />
          </div>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
            <Button size="sm" variant="primary" onClick={() => mutation.mutate()} disabled={mutation.isPending}>
              Speichern
            </Button>
            <Button size="sm" variant="ghost" onClick={onDone}>
              Abbrechen
            </Button>
+            {mutation.isError ? (
+              <span className="text-xs text-red-500">{(mutation.error as Error).message}</span>
+            ) : null}
          </div>
        </div>
      </td>
--- a/apps/frontend/src/routes/admin/CategoriesPage.tsx
+++ b/apps/frontend/src/routes/admin/CategoriesPage.tsx
@@ -5,11 +5,11 @@ import type { Category } from "@launchpad/shared";
 import { useCategories } from "../../hooks/useCategories.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";

-async function createCategory(name: string): Promise<Category> {
+async function createCategory(name: string, color?: string): Promise<Category> {
  const res = await fetch("/api/categories", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name }),
+    body: JSON.stringify({ name, color }),
  });
  if (!res.ok) {
    const body = await res.json().catch(() => ({}));
@@ -18,14 +18,15 @@ async function createCategory(name: string): Promise<Category> {
  return res.json();
 }

-async function renameCategory(id: string, name: string): Promise<Category> {
+async function patchCategory(id: string, patch: { name?: string; color?: string }): Promise<Category> {
  const res = await fetch(`/api/categories/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name }),
+    body: JSON.stringify(patch),
  });
  if (!res.ok) {
-    throw new Error(`Kategorie konnte nicht umbenannt werden (HTTP ${res.status})`);
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error ?? `Kategorie konnte nicht aktualisiert werden (HTTP ${res.status})`);
  }
  return res.json();
 }
@@ -67,13 +68,18 @@ function CategoryRow({
  const [name, setName] = useState(category.name);

  const renameMutation = useMutation({
-    mutationFn: () => renameCategory(category.id, name.trim()),
+    mutationFn: () => patchCategory(category.id, { name: name.trim() }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["categories"] });
      setEditing(false);
    },
  });

+  const colorMutation = useMutation({
+    mutationFn: (color: string) => patchCategory(category.id, { color }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["categories"] }),
+  });
+
  const deleteMutation = useMutation({
    mutationFn: () => deleteCategoryRequest(category.id),
    onSuccess: () => {
@@ -96,6 +102,20 @@ function CategoryRow({
        ⠿⠿
      </span>

+      <label
+        title="Farbe wählen"
+        className="relative h-6 w-6 shrink-0 cursor-pointer overflow-hidden rounded-full border
+          border-black/10 dark:border-white/10"
+        style={{ backgroundColor: category.color ?? "transparent" }}
+      >
+        <input
+          type="color"
+          value={category.color ?? "#94a3b8"}
+          onChange={(e) => colorMutation.mutate(e.target.value)}
+          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+        />
+      </label>
+
      {editing ? (
        <>
          <input
@@ -131,13 +151,15 @@ export function CategoriesPage() {
  const { data: categories, isLoading, isError } = useCategories();
  const queryClient = useQueryClient();
  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState("#94a3b8");
  const [draggedId, setDraggedId] = useState<string | null>(null);
  const [localOrder, setLocalOrder] = useState<Category[] | null>(null);

  const createMutation = useMutation({
-    mutationFn: () => createCategory(newName.trim()),
+    mutationFn: () => createCategory(newName.trim(), newColor),
    onSuccess: () => {
      setNewName("");
+      setNewColor("#94a3b8");
      queryClient.invalidateQueries({ queryKey: ["categories"] });
    },
  });
@@ -193,10 +215,22 @@ export function CategoriesPage() {
    <div>
      <AdminPageHeader
        title="Kategorien"
-        description="Per Drag & Drop sortieren. Favoriten erscheinen in der Suche trotzdem immer zuerst."
+        description="Per Drag & Drop sortieren. Farbe erscheint als Punkt in der Suche und als Ring bei Favoriten. Favoriten erscheinen in der Suche trotzdem immer zuerst."
      />

      <form onSubmit={handleSubmit} className="mb-6 flex flex-wrap items-end gap-2">
+        <div>
+          <label className="mb-1 block text-xs font-medium text-black/50 dark:text-white/50">
+            Farbe
+          </label>
+          <input
+            type="color"
+            value={newColor}
+            onChange={(e) => setNewColor(e.target.value)}
+            className="h-9 w-12 cursor-pointer rounded-lg border border-black/10 bg-white
+              dark:border-white/10 dark:bg-white/5"
+          />
+        </div>
        <div>
          <label className="mb-1 block text-xs font-medium text-black/50 dark:text-white/50">
            Neue Kategorie
--- a/apps/frontend/src/routes/admin/ServicesPage.tsx
+++ b/apps/frontend/src/routes/admin/ServicesPage.tsx
@@ -27,7 +27,8 @@ async function patchService(id: string, patch: ServicePatch): Promise<Service> {
    body: JSON.stringify(patch),
  });
  if (!res.ok) {
-    throw new Error(`Dienst konnte nicht aktualisiert werden (HTTP ${res.status})`);
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error ?? `Dienst konnte nicht aktualisiert werden (HTTP ${res.status})`);
  }
  return res.json();
 }
@@ -218,13 +219,16 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
            Öffnet: <span className="font-mono">{previewUrl}</span>
          </div>

-          <div className="flex w-full gap-2 pt-1">
+          <div className="flex w-full items-center gap-2 pt-1">
            <Button size="sm" variant="primary" onClick={() => mutation.mutate()} disabled={mutation.isPending}>
              Speichern
            </Button>
            <Button size="sm" variant="ghost" onClick={onDone}>
              Abbrechen
            </Button>
+            {mutation.isError ? (
+              <span className="text-xs text-red-500">{(mutation.error as Error).message}</span>
+            ) : null}
          </div>
        </div>
      </td>
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -35,8 +35,15 @@ export default defineConfig({
        ],
      },
      workbox: {
-        // Zeigt beim Offline-Öffnen weiterhin die (gecachte) App-Shell an.
+        // Zeigt beim Offline-Öffnen weiterhin die (gecachte) App-Shell an -
+        // ABER NICHT für /api/* oder /ca.crt: ein <a href="/api/..." download>-
+        // oder <a href="/ca.crt" download>-Klick wird vom Browser als
+        // "Navigation" behandelt, und ohne dieses Denylist hätte der Service
+        // Worker dafür fälschlich die App-Shell (index.html) ausgeliefert
+        // statt die Anfrage ans Backend/an nginx durchzulassen (Ursache für
+        // "Export lädt weiße .htm-Seite" / "ca.crt enthält HTML-Code").
        navigateFallback: "/index.html",
+        navigateFallbackDenylist: [/^\/api\//, /^\/ca\.crt$/],
        runtimeCaching: [
          {
            // Zuletzt geladene Geräte/Dienste/Kategorien bleiben offline verfügbar