round20: Startseite ueberarbeitet, Favicon-Auswahl bereinigt und Icon-Datenbank integriert, Ping-Schalter repariert

2026-07-23 19:34:09 +02:00
parent ec49534b60
commit 68ca9ec5e1
14 changed files with 381 additions and 176 deletions
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -16,6 +16,7 @@ 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 { iconsRoutes } from "./routes/icons.js";
 import { loadPlugins } from "./plugins/loader.js";
 import { startLiveStatusHeartbeat } from "./liveStatus.js";
 import * as serviceRepo from "./db/repositories/services.js";
@@ -76,6 +77,7 @@ async function main() {
  await app.register(settingsRoutes);
  await app.register(readLaterRoutes);
  await app.register(faviconProxyRoutes);
+  await app.register(iconsRoutes);

  app.get("/", async () => {
    return { name: "LaunchPad API", status: "running" };
--- a/apps/backend/src/liveStatus.ts
+++ b/apps/backend/src/liveStatus.ts
@@ -44,6 +44,7 @@ export function startLiveStatusHeartbeat(): void {
        const online = await pingHost(device.ip);
        deviceRepo.updateDeviceOnlineStatus(device.id, online);
      }
+      settingsRepo.setSetting("liveStatusLastRunAt", new Date().toISOString());
    } finally {
      running = false;
    }
--- a/apps/backend/src/routes/icons.ts
+++ b/apps/backend/src/routes/icons.ts
@@ -0,0 +1,10 @@
+import type { FastifyInstance } from "fastify";
+import { searchIconDb } from "../scanner/iconDb.js";
+
+export async function iconsRoutes(app: FastifyInstance): Promise<void> {
+  app.get("/api/icons/search", async (request) => {
+    const { q } = request.query as { q?: string };
+    const results = await searchIconDb(q ?? "");
+    return { results };
+  });
+}
--- a/apps/backend/src/routes/settings.ts
+++ b/apps/backend/src/routes/settings.ts
@@ -10,6 +10,7 @@ export async function settingsRoutes(app: FastifyInstance): Promise<void> {
      staleDeviceThresholdDays: Number(all.staleDeviceThresholdDays ?? 7),
      liveStatusEnabled: all.liveStatusEnabled === "true",
      liveStatusIntervalMinutes: Number(all.liveStatusIntervalMinutes ?? 5),
+      liveStatusLastRunAt: all.liveStatusLastRunAt ?? null,
    };
  });

@@ -67,6 +68,7 @@ export async function settingsRoutes(app: FastifyInstance): Promise<void> {
      staleDeviceThresholdDays: Number(all.staleDeviceThresholdDays ?? 7),
      liveStatusEnabled: all.liveStatusEnabled === "true",
      liveStatusIntervalMinutes: Number(all.liveStatusIntervalMinutes ?? 5),
+      liveStatusLastRunAt: all.liveStatusLastRunAt ?? null,
    };
  });
 }
--- a/apps/backend/src/scanner/iconDb.ts
+++ b/apps/backend/src/scanner/iconDb.ts
@@ -0,0 +1,81 @@
+import { request } from "node:https";
+
+const TREE_URL = "https://raw.githubusercontent.com/homarr-labs/dashboard-icons/main/tree.json";
+const CDN_BASE = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png";
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 1 Tag
+
+let cachedNames: string[] | null = null;
+let cachedAt = 0;
+let inFlight: Promise<string[]> | null = null;
+
+function fetchJson(url: string): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const req = request(url, { timeout: 8000 }, (res) => {
+      if (res.statusCode && res.statusCode >= 400) {
+        reject(new Error(`HTTP ${res.statusCode}`));
+        res.resume();
+        return;
+      }
+      const chunks: Buffer[] = [];
+      res.on("data", (c) => chunks.push(c));
+      res.on("end", () => {
+        try {
+          resolve(JSON.parse(Buffer.concat(chunks).toString("utf-8")));
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+    req.on("timeout", () => req.destroy(new Error("Timeout")));
+    req.on("error", reject);
+    req.end();
+  });
+}
+
+/**
+ * Lädt (und cacht 24h im Speicher) die Liste aller Icon-Namen aus dem
+ * homarr-labs/dashboard-icons-Projekt (freie Icon-Sammlung speziell für
+ * Homelab-/Selfhosted-Dashboards, via jsDelivr-CDN ausgeliefert).
+ *
+ * Bewusst als einzige Stelle im Projekt, die tatsächlich einen externen
+ * Dienst kontaktiert (abgesehen vom eigentlichen Aufruf der Dienste selbst)
+ * - das Icon-Datenbank-Feature wurde ausdrücklich so gewünscht. Schlägt der
+ * Abruf fehl (kein Internetzugang, Dienst nicht erreichbar), liefert die
+ * Suche einfach keine Treffer statt einen Fehler zu werfen.
+ */
+async function getIconNames(): Promise<string[]> {
+  if (cachedNames && Date.now() - cachedAt < CACHE_TTL_MS) return cachedNames;
+  if (inFlight) return inFlight;
+
+  inFlight = (async () => {
+    try {
+      const tree = (await fetchJson(TREE_URL)) as { png?: string[] };
+      const names = (tree.png ?? []).map((f) => f.replace(/\.png$/, ""));
+      cachedNames = names;
+      cachedAt = Date.now();
+      return names;
+    } catch {
+      // Kein Absturz, nur keine Treffer - die restliche Favicon-Auswahl
+      // (bereits im System verwendete Favicons) funktioniert unabhängig davon weiter.
+      return cachedNames ?? [];
+    } finally {
+      inFlight = null;
+    }
+  })();
+
+  return inFlight;
+}
+
+export interface IconSearchResult {
+  name: string;
+  url: string;
+}
+
+export async function searchIconDb(query: string, limit = 24): Promise<IconSearchResult[]> {
+  const q = query.trim().toLowerCase();
+  if (q.length < 2) return [];
+
+  const names = await getIconNames();
+  const matches = names.filter((n) => n.includes(q)).slice(0, limit);
+  return matches.map((name) => ({ name, url: `${CDN_BASE}/${name}.png` }));
+}
--- a/apps/backend/src/scanner/networkScanner.ts
+++ b/apps/backend/src/scanner/networkScanner.ts
@@ -136,16 +136,19 @@ export async function scanDeviceServices(
    });
  }

-  // Fallback-Reihenfolge für Dienste ohne bestätigtes Favicon (kein
-  // <link rel="icon"> im HTML gefunden): zuerst das Favicon eines ANDEREN
-  // Dienstes auf demselben Gerät übernehmen (typischerweise dieselbe
-  // Software/dasselbe Gerät, das Icon passt meist trotzdem) - erst wenn auch
-  // das fehlt, wird als letzter Ausweg "/favicon.ico" am eigenen Port
-  // geraten (kann ins Leere laufen, ist aber besser als gar kein Versuch).
+  // Fallback für Dienste ohne bestätigtes Favicon (kein <link rel="icon">
+  // im HTML gefunden): das Favicon eines ANDEREN Dienstes auf demselben
+  // Gerät übernehmen (typischerweise dieselbe Software/dasselbe Gerät, das
+  // Icon passt meist trotzdem). Gibt es auch das nicht, bleibt favicon
+  // bewusst leer (Buchstaben-Fallback in der UI) statt blind auf
+  // "/favicon.ico" zu raten - eine geratene, unbestätigte Adresse sähe in
+  // der Favicon-Auswahl (Bearbeiten-Formular) wie ein echtes Icon aus,
+  // obwohl sie oft ins Leere läuft.
  const firstSiblingFavicon = found.find((s) => s.favicon)?.favicon;
+  if (firstSiblingFavicon) {
    for (const service of found) {
-    if (service.favicon) continue;
-    service.favicon = firstSiblingFavicon ?? `${service.url}/favicon.ico`;
+      if (!service.favicon) service.favicon = firstSiblingFavicon;
+    }
  }

  return { services: found, suggestedHostname };
--- a/apps/frontend/src/hooks/useSettings.ts
+++ b/apps/frontend/src/hooks/useSettings.ts
@@ -6,6 +6,7 @@ export interface AppSettings {
  staleDeviceThresholdDays: number;
  liveStatusEnabled: boolean;
  liveStatusIntervalMinutes: number;
+  liveStatusLastRunAt: string | null;
 }

 async function fetchSettings(): Promise<AppSettings> {
--- a/apps/frontend/src/routes/HomePage.tsx
+++ b/apps/frontend/src/routes/HomePage.tsx
@@ -267,9 +267,16 @@ export function HomePage() {

  const isOnline = !healthError && health?.status === "ok";
  const hasFavorites = favoriteServices.length > 0 || favoriteBookmarks.length > 0;
+  const readLaterLimit = settings?.readLaterLimit ?? 5;
+  const hasReadLaterChips = readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
+  const showShelf = !isSearching || !resultsVisible;
+  const showResults = isSearching && resultsVisible;

  return (
-    <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={`flex flex-col bg-gradient-to-b from-white to-neutral-100 dark:from-black
+        dark:to-neutral-950 ${showResults ? "h-dvh overflow-hidden" : "min-h-dvh"}`}
+    >
      <div className="fixed right-6 top-6 z-10 flex items-center gap-2">
        <Link
          to="/admin"
@@ -289,8 +296,12 @@ export function HomePage() {
        </button>
      </div>

-      {/* Nicht-scrollender Kopfbereich: Titel, Favoriten, Suchfeld, Später-lesen, Zuletzt besucht */}
-      <div className="flex shrink-0 flex-col items-center gap-5 px-6 pb-4 pt-8 sm:pt-10">
+      {/* Kopfbereich: Titel, Suchfeld, Favoriten/Später-lesen/Zuletzt-besucht.
+          Nur im "aktiv suchend"-Zustand shrink-0 + scrollender Bereich
+          darunter - sonst normaler Dokumentfluss, damit der Footer direkt
+          nach dem Inhalt folgt statt mit einer riesigen Lücke ganz unten zu
+          kleben (siehe showResults-Fallunterscheidung oben). */}
+      <div className={`flex flex-col items-center gap-6 px-6 pb-6 pt-10 sm:pt-14 ${showResults ? "shrink-0" : ""}`}>
        <div className="flex flex-col items-center gap-1 text-center">
          <h1 className="text-xl font-semibold tracking-tight text-black dark:text-white sm:text-2xl">
            LaunchPad
@@ -301,37 +312,6 @@ export function HomePage() {
        </div>

        <div ref={searchContainerRef} className="w-full max-w-xl">
-          {hasFavorites ? (
-            <div className="mb-4 flex flex-col gap-3 divide-y divide-black/5 dark:divide-white/5">
-              {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 ? (
-                <div className={favoriteServices.length > 0 ? "pt-3" : ""}>
-                  <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)}
-                  />
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-
          <SearchInput
            ref={inputRef}
            value={query}
@@ -345,68 +325,93 @@ export function HomePage() {
            hint="⌘K"
            autoFocus
          />
+        </div>

-          {!isSearching || !resultsVisible ? (
-            <div
-              className="mt-4 divide-y divide-black/5 rounded-2xl border border-black/5
-                bg-black/[0.015] dark:divide-white/5 dark:border-white/5 dark:bg-white/[0.02]"
-            >
-              {(() => {
-                const readLaterLimit = settings?.readLaterLimit ?? 5;
-                const hasReadLaterChips =
-                  readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
-                return (
-                  <div className="flex flex-col gap-2 px-4 py-3">
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
-                        Später lesen
-                      </span>
-                      <ReadLaterBox />
-                    </div>
-                    {hasReadLaterChips ? (
-                      <div className="flex flex-wrap items-center gap-2">
-                        {readLaterItems!.slice(0, readLaterLimit).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/60 px-2.5 py-1 text-xs text-black/60 transition-colors
-                              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>
+        {showShelf ? (
+          <div className="flex w-full max-w-xl flex-col gap-6">
+            {hasFavorites ? (
+              <div className="flex flex-col gap-4">
+                {favoriteServices.length > 0 ? (
+                  <FavoritesBar
+                    items={favoriteServices}
+                    label="Favoriten · 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="Favoriten · 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}

            {recentVisits && recentVisits.length > 0 ? (
-                <div className="px-4 py-3">
-                  <span className="mb-2 block text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
-                    Zuletzt besucht
-                  </span>
              <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>
+              <div className="mb-2.5 flex items-center justify-between gap-2">
+                <span className="text-xs font-medium uppercase tracking-wide text-black/35 dark:text-white/35">
+                  Später lesen
+                </span>
+                <ReadLaterBox />
+              </div>
+              {hasReadLaterChips ? (
+                <div className="flex flex-wrap gap-2.5">
+                  {readLaterItems!.slice(0, readLaterLimit).map((item) => (
+                    <button
+                      key={item.id}
+                      onClick={() => window.open(item.url, "_blank", "noopener,noreferrer")}
+                      title={item.displayName}
+                      className="group flex w-16 flex-col items-center gap-1.5 rounded-xl p-1.5
+                        transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+                    >
+                      <span
+                        className="flex h-11 w-11 items-center justify-center rounded-xl border
+                          border-black/10 bg-white/80 shadow-sm transition-transform
+                          group-hover:scale-105 dark:border-white/10 dark:bg-white/5"
+                      >
+                        <Favicon src={item.favicon} fallbackLetter={item.displayName} size="md" />
+                      </span>
+                      <span className="w-full truncate text-center text-[11px] leading-tight text-black/55 dark:text-white/55">
+                        {item.displayName}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-black/30 dark:text-white/30">
+                  Noch nichts gemerkt.
+                </p>
+              )}
+            </div>
          </div>
        ) : null}
      </div>
-          ) : null}
-        </div>
-      </div>

      {/* Scrollender Bereich: NUR die Trefferliste scrollt, nicht die ganze Seite */}
-      {isSearching && resultsVisible ? (
+      {showResults ? (
        <div className="min-h-0 flex-1 px-6 pb-4">
          <div className="mx-auto h-full max-w-xl">
            {isLoading ? (
@@ -432,11 +437,9 @@ export function HomePage() {
            )}
          </div>
        </div>
-      ) : (
-        <div className="flex-1" />
-      )}
+      ) : null}

-      <div className="flex shrink-0 flex-col items-center gap-1 pb-4">
+      <div className={`flex flex-col items-center gap-1 pb-6 pt-2 ${showResults ? "shrink-0" : "mt-4"}`}>
        <StatusBadge online={isOnline} label={isOnline ? "Backend verbunden" : "Backend nicht erreichbar"} />
        {health ? (
          <span className="text-xs text-black/30 dark:text-white/30">
--- a/apps/frontend/src/routes/admin/BookmarksPage.tsx
+++ b/apps/frontend/src/routes/admin/BookmarksPage.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFloppyDisk, faPen, faTrash, faXmark, faSort, faSortUp, faSortDown, faStar as faStarSolid, faEye, faEyeSlash, faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Favicon } from "@launchpad/ui";
+import { Button, Favicon, FaviconPicker } from "@launchpad/ui";
 import type { Bookmark } from "@launchpad/shared";
 import { suggestBookmarkCategory } from "@launchpad/shared";
 import { useBookmarks } from "../../hooks/useBookmarks.js";
@@ -216,7 +216,6 @@ function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void

  const [favicon, setFavicon] = useState<string | null | undefined>(undefined);
  const [faviconError, setFaviconError] = useState<string | null>(null);
-  const [pickerOpen, setPickerOpen] = useState(false);
  const FAVICON_MAX_BYTES = 300 * 1024;

  const existingFavicons = useMemo(() => {
@@ -283,16 +282,7 @@ function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void
                  onChange={(e) => handleFaviconFile(e.target.files?.[0])}
                />
              </label>
-              {existingFavicons.length > 0 ? (
-                <button
-                  type="button"
-                  onClick={() => setPickerOpen((v) => !v)}
-                  className="rounded-lg border border-black/10 px-2 py-1 text-xs text-black/70
-                    hover:bg-black/5 dark:border-white/10 dark:text-white/70 dark:hover:bg-white/10"
-                >
-                  Vorhandenes wählen
-                </button>
-              ) : null}
+              <FaviconPicker existingFavicons={existingFavicons} onSelect={(url) => setFavicon(url)} />
              {faviconPreview ? (
                <button
                  type="button"
@@ -304,25 +294,6 @@ function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void
              ) : null}
            </div>
            {faviconError ? <p className="mt-1 text-xs text-red-500">{faviconError}</p> : null}
-            {pickerOpen ? (
-              <div className="mt-2 flex max-w-xs flex-wrap gap-1.5 rounded-lg border border-black/10 p-2
-                dark:border-white/10">
-                {existingFavicons.map(([iconUrl, name]) => (
-                  <button
-                    key={iconUrl}
-                    type="button"
-                    title={name}
-                    onClick={() => {
-                      setFavicon(iconUrl);
-                      setPickerOpen(false);
-                    }}
-                    className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
-                  >
-                    <Favicon src={iconUrl} fallbackLetter={name} size="sm" />
-                  </button>
-                ))}
-              </div>
-            ) : null}
          </div>
          <div>
            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Name</label>
--- a/apps/frontend/src/routes/admin/ServicesPage.tsx
+++ b/apps/frontend/src/routes/admin/ServicesPage.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFloppyDisk, faPen, faTrash, faXmark, faSort, faSortUp, faSortDown, faStar as faStarSolid, faEye, faEyeSlash, faArrowLeft, faSignature } from "@fortawesome/free-solid-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Favicon } from "@launchpad/ui";
+import { Button, Favicon, FaviconPicker } from "@launchpad/ui";
 import type { Service } from "@launchpad/shared";
 import { useServices } from "../../hooks/useServices.js";
 import { useBookmarks } from "../../hooks/useBookmarks.js";
@@ -125,7 +125,6 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
  // string = neu hochgeladenes Favicon als data:-URL.
  const [favicon, setFavicon] = useState<string | null | undefined>(undefined);
  const [faviconError, setFaviconError] = useState<string | null>(null);
-  const [pickerOpen, setPickerOpen] = useState(false);

  // Bereits verwendete Favicons (Dienste + Lesezeichen), zur Auswahl im
  // "Vorhandenes Favicon wählen"-Picker - z. B. wenn mehrere Dienste
@@ -211,16 +210,7 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
                  onChange={(e) => handleFaviconFile(e.target.files?.[0])}
                />
              </label>
-              {existingFavicons.length > 0 ? (
-                <button
-                  type="button"
-                  onClick={() => setPickerOpen((v) => !v)}
-                  className="rounded-lg border border-black/10 px-2 py-1 text-xs text-black/70
-                    hover:bg-black/5 dark:border-white/10 dark:text-white/70 dark:hover:bg-white/10"
-                >
-                  Vorhandenes wählen
-                </button>
-              ) : null}
+              <FaviconPicker existingFavicons={existingFavicons} onSelect={(url) => setFavicon(url)} />
              {faviconPreview ? (
                <button
                  type="button"
@@ -232,25 +222,6 @@ function EditForm({ service, onDone }: { service: Service; onDone: () => void })
              ) : null}
            </div>
            {faviconError ? <p className="mt-1 text-xs text-red-500">{faviconError}</p> : null}
-            {pickerOpen ? (
-              <div className="mt-2 flex max-w-xs flex-wrap gap-1.5 rounded-lg border border-black/10 p-2
-                dark:border-white/10">
-                {existingFavicons.map(([iconUrl, name]) => (
-                  <button
-                    key={iconUrl}
-                    type="button"
-                    title={name}
-                    onClick={() => {
-                      setFavicon(iconUrl);
-                      setPickerOpen(false);
-                    }}
-                    className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
-                  >
-                    <Favicon src={iconUrl} fallbackLetter={name} size="sm" />
-                  </button>
-                ))}
-              </div>
-            ) : null}
          </div>
          <div>
            <label className="mb-1 block text-xs text-black/50 dark:text-white/50">Name</label>
--- a/apps/frontend/src/routes/admin/SettingsPage.tsx
+++ b/apps/frontend/src/routes/admin/SettingsPage.tsx
@@ -46,8 +46,8 @@ function LiveStatusToggle({ enabled }: { enabled: boolean }) {
        }`}
      >
        <span
-          className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
-            enabled ? "translate-x-[22px]" : "translate-x-0.5"
+          className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+            enabled ? "translate-x-[20px]" : "translate-x-0"
          }`}
        />
      </button>
@@ -385,6 +385,16 @@ export function SettingsPage() {
            vorbehalten. Standardmäßig aus.
          </p>
          <LiveStatusToggle enabled={settings?.liveStatusEnabled ?? false} />
+          {settings?.liveStatusEnabled ? (
+            <p className="mb-2 text-xs text-black/30 dark:text-white/30">
+              {settings.liveStatusLastRunAt
+                ? `Letzter Durchlauf: ${new Date(settings.liveStatusLastRunAt).toLocaleString("de-DE", {
+                    dateStyle: "medium",
+                    timeStyle: "short",
+                  })}`
+                : "Noch kein Durchlauf seit dem Aktivieren."}
+            </p>
+          ) : null}
          {settings?.liveStatusEnabled ? (
            <LimitSetting
              label="Prüfintervall (Minuten)"
--- a/packages/ui/src/FaviconPicker.tsx
+++ b/packages/ui/src/FaviconPicker.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from "react";
+import { Favicon } from "./Favicon.js";
+
+export interface FaviconPickerProps {
+  /** Bereits im System verwendete Favicons: [url, Anzeigename-für-Tooltip][], dedupliziert. */
+  existingFavicons: [string, string][];
+  onSelect: (url: string) => void;
+}
+
+interface IconDbResult {
+  name: string;
+  url: string;
+}
+
+/**
+ * Ein Button, der einen Picker öffnet, der ZWEI Favicon-Quellen kombiniert:
+ * bereits im System verwendete Favicons (z. B. von anderen Diensten) und
+ * eine Live-Suche in der externen Icon-Datenbank (homarr-labs/dashboard-
+ * icons, kuratierte Icons für Selfhosted-Software). Bewusst EIN Button statt
+ * zwei getrennter, damit die Bearbeiten-Formulare nicht mit noch einem
+ * weiteren Button überladen werden.
+ */
+export function FaviconPicker({ existingFavicons, onSelect }: FaviconPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [dbResults, setDbResults] = useState<IconDbResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: MouseEvent) {
+      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+
+  useEffect(() => {
+    const q = query.trim();
+    if (q.length < 2) {
+      setDbResults([]);
+      return;
+    }
+    setSearching(true);
+    const handle = setTimeout(() => {
+      fetch(`/api/icons/search?q=${encodeURIComponent(q)}`)
+        .then((res) => (res.ok ? res.json() : { results: [] }))
+        .then((body) => setDbResults(body.results ?? []))
+        .catch(() => setDbResults([]))
+        .finally(() => setSearching(false));
+    }, 300);
+    return () => clearTimeout(handle);
+  }, [query]);
+
+  const showingSearch = query.trim().length >= 2;
+
+  return (
+    <div ref={containerRef} className="relative inline-block">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="rounded-lg border border-black/10 px-2 py-1 text-xs text-black/70
+          hover:bg-black/5 dark:border-white/10 dark:text-white/70 dark:hover:bg-white/10"
+      >
+        Favicon wählen
+      </button>
+
+      {open ? (
+        <div
+          className="absolute left-0 top-full z-20 mt-1 w-72 rounded-xl border border-black/10
+            bg-white p-2 shadow-lg dark:border-white/10 dark:bg-neutral-900"
+        >
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Icon-Datenbank durchsuchen … z. B. „plex“"
+            className="mb-2 w-full rounded-lg border border-black/10 bg-white px-2 py-1 text-xs
+              text-black outline-none placeholder:text-black/30 focus:border-black/30
+              dark:border-white/10 dark:bg-white/10 dark:text-white dark:placeholder:text-white/30"
+          />
+
+          <div className="max-h-48 overflow-y-auto">
+            {showingSearch ? (
+              searching ? (
+                <p className="p-2 text-xs text-black/40 dark:text-white/40">Suche …</p>
+              ) : dbResults.length > 0 ? (
+                <div className="flex flex-wrap gap-1.5">
+                  {dbResults.map((r) => (
+                    <button
+                      key={r.name}
+                      type="button"
+                      title={r.name}
+                      onClick={() => {
+                        onSelect(r.url);
+                        setOpen(false);
+                        setQuery("");
+                      }}
+                      className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
+                    >
+                      <Favicon src={r.url} fallbackLetter={r.name} size="sm" />
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <p className="p-2 text-xs text-black/40 dark:text-white/40">Keine Treffer.</p>
+              )
+            ) : existingFavicons.length > 0 ? (
+              <>
+                <p className="mb-1 px-1 text-[10px] font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
+                  Bereits im System verwendet
+                </p>
+                <div className="flex flex-wrap gap-1.5">
+                  {existingFavicons.map(([iconUrl, name]) => (
+                    <button
+                      key={iconUrl}
+                      type="button"
+                      title={name}
+                      onClick={() => {
+                        onSelect(iconUrl);
+                        setOpen(false);
+                      }}
+                      className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
+                    >
+                      <Favicon src={iconUrl} fallbackLetter={name} size="sm" />
+                    </button>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <p className="p-2 text-xs text-black/40 dark:text-white/40">
+                Noch keine anderen Favicons vorhanden. Tippe oben, um die Icon-Datenbank zu durchsuchen.
+              </p>
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/packages/ui/src/FavoritesBar.tsx
+++ b/packages/ui/src/FavoritesBar.tsx
@@ -16,13 +16,15 @@ export interface FavoritesBarProps {
  /** Kategoriename -> Hex-Farbe, zeigt sich als Ring um das Icon. */
  categoryColors?: Record<string, string>;
  onOpen: (item: FavoriteItem) => void;
-  /** Wenn gesetzt, sind die Chips per Drag & Drop sortierbar. */
+  /** Wenn gesetzt, sind die Kacheln per Drag & Drop sortierbar. */
  onReorder?: (orderedIds: string[]) => void;
 }

 /**
- * Zeigt Favoriten als kompakte, nur-Icon-Chips – Name erscheint als Tooltip
- * beim Hover, nicht als sichtbarer Text (bewusst platzsparend). Anklickbar,
+ * Zeigt Einträge als Icon-Kacheln mit sichtbarer Beschriftung darunter
+ * (Launchpad-/Homescreen-Stil) statt als reine Icon-Chips mit Tooltip -
+ * lesbarer und wirkt strukturierter, wenn mehrere Gruppen (Favoriten,
+ * Zuletzt besucht, Später lesen) auf derselben Seite stehen. Anklickbar,
 * per Drag & Drop sortierbar. Dienste und Lesezeichen werden über getrennte
 * FavoritesBar-Instanzen gerendert (siehe HomePage), daher rein generisch
 * über FavoriteItem statt fest an Service gebunden.
@@ -72,15 +74,11 @@ export function FavoritesBar({
  return (
    <div>
      {label ? (
-        <div className="mb-2 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
+        <div className="mb-2.5 text-xs font-medium uppercase tracking-wide text-black/35 dark:text-white/35">
          {label}
        </div>
      ) : null}
-      <div
-        role="toolbar"
-        aria-label={label ?? "Favoriten"}
-        className="flex flex-wrap items-center justify-center gap-2"
-      >
+      <div role="toolbar" aria-label={label ?? "Favoriten"} className="flex flex-wrap gap-2.5">
        {list.map((item) => {
          const ringColor = item.category ? categoryColors?.[item.category] : undefined;
          return (
@@ -97,14 +95,22 @@ export function FavoritesBar({
                  ? `${item.displayName} (${item.hostname}:${item.port})`
                  : `${item.displayName} (${item.hostname})`
              }
-              style={ringColor ? { boxShadow: `0 0 0 2px ${ringColor}` } : undefined}
-              className={`flex h-11 w-11 items-center justify-center rounded-xl border
-                border-black/10 bg-white/70 shadow-sm transition-colors hover:bg-black/5
-                dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 ${
+              className={`group flex w-16 flex-col items-center gap-1.5 rounded-xl p-1.5
+                transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06] ${
                  onReorder ? "cursor-grab active:cursor-grabbing" : ""
                } ${draggedId === item.id ? "opacity-40" : ""}`}
+            >
+              <span
+                style={ringColor ? { boxShadow: `0 0 0 2px ${ringColor}` } : undefined}
+                className="flex h-11 w-11 items-center justify-center rounded-xl border
+                  border-black/10 bg-white/80 shadow-sm transition-transform
+                  group-hover:scale-105 dark:border-white/10 dark:bg-white/5"
              >
                <Favicon src={item.favicon} fallbackLetter={item.displayName} size="md" />
+              </span>
+              <span className="w-full truncate text-center text-[11px] leading-tight text-black/55 dark:text-white/55">
+                {item.displayName}
+              </span>
            </button>
          );
        })}
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -15,3 +15,6 @@ export type { FavoritesBarProps } from "./FavoritesBar.js";

 export { Favicon } from "./Favicon.js";
 export type { FaviconProps } from "./Favicon.js";
+
+export { FaviconPicker } from "./FaviconPicker.js";
+export type { FaviconPickerProps } from "./FaviconPicker.js";