Bugfixes (Dark Mode, Dropdown-Kontrast, IP-Suche), Lesezeichen-Ausbau (Farbe, Beschreibung, Favicon), Zuletzt-besucht, Spaeter-lesen, kombinierter Import-Export, Scanner-Reconciliation, Admin-Ueberarbeitung

apps/frontend/src/routes/HomePage.tsx

@@ -1,15 +1,21 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
-import { SearchInput, StatusBadge, ResultsList, FavoritesBar } from "@launchpad/ui";
+import { SearchInput, StatusBadge, ResultsList, FavoritesBar, Favicon, Button } from "@launchpad/ui";
 import { rankServices, type SearchResult } from "@launchpad/shared";
 import { useServices } from "../hooks/useServices.js";
 import { useBookmarks } from "../hooks/useBookmarks.js";
 import { useBackendHealth } from "../hooks/useBackendHealth.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useCategories } from "../hooks/useCategories.js";
+import { useRecentVisits, recordVisit } from "../hooks/useRecentVisits.js";
+import { useReadLater } from "../hooks/useReadLater.js";
 
-function openItem(item: SearchResult) {
+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> {
@@ -36,6 +42,55 @@ async function reorderRequest(kind: "service" | "bookmark", orderedIds: string[]
   }
 }
 
+async function saveReadLaterRequest(url: string) {
+  const res = await fetch("/api/read-later", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ url }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error ?? `Konnte nicht gespeichert werden (HTTP ${res.status})`);
+  }
+  return res.json();
+}
+
+function ReadLaterBox() {
+  const queryClient = useQueryClient();
+  const [url, setUrl] = useState("");
+
+  const mutation = useMutation({
+    mutationFn: () => saveReadLaterRequest(url.trim()),
+    onSuccess: () => {
+      setUrl("");
+      queryClient.invalidateQueries({ queryKey: ["read-later"] });
+    },
+  });
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!url.trim()) return;
+    mutation.mutate();
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2">
+      <input
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        placeholder="Link zum Später-Lesen hier einfügen …"
+        className="flex-1 rounded-xl border border-black/10 bg-white/70 px-3 py-2 text-sm
+          text-black outline-none placeholder:text-black/30 focus:border-black/30
+          dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/30
+          dark:focus:border-white/30"
+      />
+      <Button type="submit" variant="secondary" disabled={mutation.isPending || !url.trim()}>
+        {mutation.isPending ? "…" : "Merken"}
+      </Button>
+    </form>
+  );
+}
+
 export function HomePage() {
   const [theme, toggleTheme] = useTheme();
   const [query, setQuery] = useState("");
@@ -43,11 +98,22 @@ export function HomePage() {
   const { health, error: healthError } = useBackendHealth();
   const { data: services, isLoading: servicesLoading, isError: servicesError } = useServices();
   const { data: bookmarks, isLoading: bookmarksLoading } = useBookmarks();
+  const { data: categories } = useCategories();
+  const { data: recentVisits } = useRecentVisits();
+  const { data: readLaterItems } = useReadLater();
   const inputRef = useRef<HTMLInputElement>(null);
   const queryClient = useQueryClient();
   const isSearching = query.trim().length > 0;
   const isLoading = servicesLoading || bookmarksLoading;
 
+  const categoryColors = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const c of categories ?? []) {
+      if (c.color) map[c.name] = c.color;
+    }
+    return map;
+  }, [categories]);
+
   const toggleFavorite = useMutation({
     mutationFn: toggleFavoriteRequest,
     onSuccess: (_data, item) => {
@@ -136,8 +202,8 @@ export function HomePage() {
   const hasFavorites = favoriteServices.length > 0 || favoriteBookmarks.length > 0;
 
   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">
+    <div className="flex h-dvh flex-col overflow-hidden bg-gradient-to-b from-white to-neutral-100 dark:from-black dark:to-neutral-950">
+      <div className="fixed right-6 top-6 z-10 flex items-center gap-2">
         <Link
           to="/admin"
           aria-label="Adminbereich öffnen"
@@ -156,75 +222,137 @@ export function HomePage() {
         </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">
-        {hasFavorites ? (
-          <div className="mb-4 flex flex-col gap-3">
-            {favoriteServices.length > 0 ? (
-              <FavoritesBar
-                items={favoriteServices}
-                label="Dienste"
-                onOpen={(item) => {
-                  const service = favoriteServices.find((s) => s.id === item.id);
-                  if (service) openItem({ ...service, kind: "service" });
-                }}
-                onReorder={(ids) => reorderServices.mutate(ids)}
-              />
-            ) : null}
-            {favoriteBookmarks.length > 0 ? (
-              <FavoritesBar
-                items={favoriteBookmarks}
-                label="Lesezeichen"
-                onOpen={(item) => {
-                  const bookmark = favoriteBookmarks.find((b) => b.id === item.id);
-                  if (bookmark) openItem({ ...bookmark, kind: "bookmark" });
-                }}
-                onReorder={(ids) => reorderBookmarks.mutate(ids)}
-              />
-            ) : null}
-          </div>
-        ) : null}
-
-        <SearchInput
-          ref={inputRef}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
-          hint="⌘K"
-          autoFocus
-        />
-
-        {!isSearching ? null : isLoading ? (
-          <p className="mt-4 text-center text-sm text-black/40 dark:text-white/40">Lade …</p>
-        ) : servicesError ? (
-          <p className="mt-4 text-center text-sm text-red-500">
-            Dienste konnten nicht geladen werden.
+      {/* 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">
+            LaunchPad
+          </h1>
+          <p className="text-xs text-black/50 dark:text-white/50 sm:text-sm">
+            Tippe, um deine Homelab-Dienste sofort zu öffnen.
           </p>
-        ) : (
-          <ResultsList
-            results={results}
-            selectedIndex={selectedIndex}
-            onHover={setSelectedIndex}
-            onOpen={openItem}
-            onToggleFavorite={(item) => toggleFavorite.mutate(item)}
-            emptyLabel={
-              allItems.length === 0
-                ? "Noch nichts angelegt. Füge Dienste oder Lesezeichen im Adminbereich hinzu."
-                : "Keine Treffer für deine Suche."
-            }
+        </div>
+
+        <div className="w-full max-w-xl">
+          {hasFavorites ? (
+            <div className="mb-3 flex flex-col gap-2">
+              {favoriteServices.length > 0 ? (
+                <FavoritesBar
+                  items={favoriteServices}
+                  label="Dienste"
+                  categoryColors={categoryColors}
+                  onOpen={(item) => {
+                    const service = favoriteServices.find((s) => s.id === item.id);
+                    if (service) openItem({ ...service, kind: "service" });
+                  }}
+                  onReorder={(ids) => reorderServices.mutate(ids)}
+                />
+              ) : null}
+              {favoriteBookmarks.length > 0 ? (
+                <FavoritesBar
+                  items={favoriteBookmarks}
+                  label="Lesezeichen"
+                  categoryColors={categoryColors}
+                  onOpen={(item) => {
+                    const bookmark = favoriteBookmarks.find((b) => b.id === item.id);
+                    if (bookmark) openItem({ ...bookmark, kind: "bookmark" });
+                  }}
+                  onReorder={(ids) => reorderBookmarks.mutate(ids)}
+                />
+              ) : null}
+            </div>
+          ) : null}
+
+          <SearchInput
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Dienst oder Lesezeichen suchen … z. B. „frigate“"
+            hint="⌘K"
+            autoFocus
           />
-        )}
+
+          {!isSearching ? (
+            <div className="mt-3 flex flex-col gap-3">
+              <ReadLaterBox />
+
+              {readLaterItems && readLaterItems.length > 0 ? (
+                <div className="flex flex-wrap items-center justify-center gap-2">
+                  {readLaterItems.slice(0, 6).map((item) => (
+                    <button
+                      key={item.id}
+                      onClick={() => window.open(item.url, "_blank", "noopener,noreferrer")}
+                      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>
+              ) : 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>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
       </div>
 
-      <div className="flex flex-col items-center gap-1 pb-8">
+      {/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
+      {isSearching ? (
+        <div className="min-h-0 flex-1 px-6 pb-4">
+          <div className="mx-auto h-full max-w-xl">
+            {isLoading ? (
+              <p className="text-center text-sm text-black/40 dark:text-white/40">Lade …</p>
+            ) : servicesError ? (
+              <p className="text-center text-sm text-red-500">
+                Dienste konnten nicht geladen werden.
+              </p>
+            ) : (
+              <ResultsList
+                results={results}
+                selectedIndex={selectedIndex}
+                categoryColors={categoryColors}
+                onHover={setSelectedIndex}
+                onOpen={openItem}
+                onToggleFavorite={(item) => toggleFavorite.mutate(item)}
+                emptyLabel={
+                  allItems.length === 0
+                    ? "Noch nichts angelegt. Füge Dienste oder Lesezeichen im Adminbereich hinzu."
+                    : "Keine Treffer für deine Suche."
+                }
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1" />
+      )}
+
+      <div className="flex shrink-0 flex-col items-center gap-1 pb-4">
         <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
         {health ? (
           <span className="text-xs text-black/30 dark:text-white/30">