round19: Startseite aufgeraeumt, Favicon-Fallback ueber Ports, Favicon-Picker, Live-Status per Ping

2026-07-23 18:10:03 +02:00
parent bae9e48fc1
commit ec49534b60
16 changed files with 393 additions and 51 deletions
--- a/apps/frontend/src/hooks/useSettings.ts
+++ b/apps/frontend/src/hooks/useSettings.ts
@@ -4,6 +4,8 @@ export interface AppSettings {
  recentVisitsLimit: number;
  readLaterLimit: number;
  staleDeviceThresholdDays: number;
+  liveStatusEnabled: boolean;
+  liveStatusIntervalMinutes: number;
 }

 async function fetchSettings(): Promise<AppSettings> {
--- a/apps/frontend/src/routes/HomePage.tsx
+++ b/apps/frontend/src/routes/HomePage.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { SearchInput, StatusBadge, ResultsList, FavoritesBar, Favicon, Button } from "@launchpad/ui";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { faGear, faSun, faMoon, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { rankServices, type SearchResult } from "@launchpad/shared";
 import { useServices } from "../hooks/useServices.js";
 import { useBookmarks } from "../hooks/useBookmarks.js";
@@ -54,12 +54,15 @@ async function saveReadLaterRequest(url: string) {

 function ReadLaterBox() {
  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
  const [url, setUrl] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);

  const mutation = useMutation({
    mutationFn: () => saveReadLaterRequest(url.trim()),
    onSuccess: () => {
      setUrl("");
+      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["read-later"] });
    },
  });
@@ -70,18 +73,42 @@ function ReadLaterBox() {
    mutation.mutate();
  }

+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(true);
+          setTimeout(() => inputRef.current?.focus(), 0);
+        }}
+        className="flex items-center gap-1.5 text-xs text-black/40 transition-colors
+          hover:text-black/70 dark:text-white/40 dark:hover:text-white/70"
+      >
+        <FontAwesomeIcon icon={faPlus} className="text-[10px]" />
+        Link merken
+      </button>
+    );
+  }
+
  return (
-    <form onSubmit={handleSubmit} className="flex gap-2">
+    <form onSubmit={handleSubmit} className="flex w-full gap-2">
      <input
+        ref={inputRef}
        value={url}
        onChange={(e) => setUrl(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            setUrl("");
+            setOpen(false);
+          }
+        }}
        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
+        className="flex-1 rounded-xl border border-black/10 bg-white/70 px-3 py-1.5 text-sm
+          text-black outline-none placeholder:text-black/30 focus:border-indigo-400/60
          dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-white/30
-          dark:focus:border-white/30"
+          dark:focus:border-indigo-400/40"
      />
-      <Button type="submit" variant="secondary" disabled={mutation.isPending || !url.trim()}>
+      <Button type="submit" variant="secondary" size="sm" disabled={mutation.isPending || !url.trim()}>
        {mutation.isPending ? "…" : "Merken"}
      </Button>
    </form>
@@ -263,19 +290,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-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">
+      <div className="flex shrink-0 flex-col items-center gap-5 px-6 pb-4 pt-8 sm:pt-10">
+        <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
          </h1>
-          <p className="text-sm text-black/50 dark:text-white/50">
+          <p className="text-sm text-black/40 dark:text-white/40">
            Tippe, um deine Homelab-Dienste sofort zu öffnen.
          </p>
        </div>

        <div ref={searchContainerRef} className="w-full max-w-xl">
          {hasFavorites ? (
-            <div className="mb-5 flex flex-col gap-4">
+            <div className="mb-4 flex flex-col gap-3 divide-y divide-black/5 dark:divide-white/5">
              {favoriteServices.length > 0 ? (
                <FavoritesBar
                  items={favoriteServices}
@@ -289,16 +316,18 @@ export function HomePage() {
                />
              ) : 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)}
-                />
+                <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}
@@ -318,41 +347,58 @@ export function HomePage() {
          />

          {!isSearching || !resultsVisible ? (
-            <div className="mt-3 flex flex-col gap-3">
-              <ReadLaterBox />
-
+            <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;
-                if (!readLaterItems || readLaterItems.length === 0 || readLaterLimit <= 0) return null;
+                const hasReadLaterChips =
+                  readLaterItems && readLaterItems.length > 0 && readLaterLimit > 0;
                return (
-                  <div className="flex flex-wrap items-center justify-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/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 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>
+                    ) : null}
                  </div>
                );
              })()}

              {recentVisits && recentVisits.length > 0 ? (
-                <FavoritesBar
-                  items={recentVisits}
-                  label="Zuletzt besucht"
-                  categoryColors={categoryColors}
-                  onOpen={(item) => {
-                    const original = recentVisits.find((r) => r.id === item.id);
-                    if (original) openItem(original);
-                  }}
-                />
+                <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}
+                    categoryColors={categoryColors}
+                    onOpen={(item) => {
+                      const original = recentVisits.find((r) => r.id === item.id);
+                      if (original) openItem(original);
+                    }}
+                  />
+                </div>
              ) : null}
            </div>
          ) : null}
--- a/apps/frontend/src/routes/admin/BookmarksPage.tsx
+++ b/apps/frontend/src/routes/admin/BookmarksPage.tsx
@@ -7,6 +7,7 @@ import { Button, Favicon } from "@launchpad/ui";
 import type { Bookmark } from "@launchpad/shared";
 import { suggestBookmarkCategory } from "@launchpad/shared";
 import { useBookmarks } from "../../hooks/useBookmarks.js";
+import { useServices } from "../../hooks/useServices.js";
 import { useCategories } from "../../hooks/useCategories.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";

@@ -205,6 +206,8 @@ const EDIT_FORM_COLSPAN = 7;

 function EditForm({ bookmark, onDone }: { bookmark: Bookmark; onDone: () => void }) {
  const queryClient = useQueryClient();
+  const { data: allBookmarks } = useBookmarks();
+  const { data: allServices } = useServices();
  const [displayName, setDisplayName] = useState(bookmark.displayName);
  const [url, setUrl] = useState(bookmark.url);
  const [category, setCategory] = useState(bookmark.category ?? "");
@@ -213,8 +216,20 @@ 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(() => {
+    const seen = new Map<string, string>();
+    for (const b of allBookmarks ?? []) {
+      if (b.favicon && b.id !== bookmark.id && !seen.has(b.favicon)) seen.set(b.favicon, b.displayName);
+    }
+    for (const s of allServices ?? []) {
+      if (s.favicon && !seen.has(s.favicon)) seen.set(s.favicon, s.displayName);
+    }
+    return Array.from(seen.entries());
+  }, [allBookmarks, allServices, bookmark.id]);
+
  function handleFaviconFile(file: File | undefined) {
    setFaviconError(null);
    if (!file) return;
@@ -268,6 +283,16 @@ 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}
              {faviconPreview ? (
                <button
                  type="button"
@@ -279,6 +304,25 @@ 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
@@ -6,6 +6,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button, Favicon } from "@launchpad/ui";
 import type { Service } from "@launchpad/shared";
 import { useServices } from "../../hooks/useServices.js";
+import { useBookmarks } from "../../hooks/useBookmarks.js";
 import { useCategories } from "../../hooks/useCategories.js";
 import { useDevices } from "../../hooks/useDevices.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";
@@ -110,6 +111,8 @@ const EDIT_FORM_COLSPAN = 12;

 function EditForm({ service, onDone }: { service: Service; onDone: () => void }) {
  const queryClient = useQueryClient();
+  const { data: allServices } = useServices();
+  const { data: allBookmarks } = useBookmarks();
  const [displayName, setDisplayName] = useState(service.displayName);
  const [category, setCategory] = useState(service.category ?? "");
  const [alias, setAlias] = useState(service.alias.join(", "));
@@ -122,6 +125,22 @@ 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
+  // desselben Geräts eigentlich dasselbe Icon zeigen sollten, der Scan aber
+  // nur bei einem davon eins gefunden hat.
+  const existingFavicons = useMemo(() => {
+    const seen = new Map<string, string>(); // favicon-URL -> Anzeigename für Tooltip
+    for (const s of allServices ?? []) {
+      if (s.favicon && s.id !== service.id && !seen.has(s.favicon)) seen.set(s.favicon, s.displayName);
+    }
+    for (const b of allBookmarks ?? []) {
+      if (b.favicon && !seen.has(b.favicon)) seen.set(b.favicon, b.displayName);
+    }
+    return Array.from(seen.entries());
+  }, [allServices, allBookmarks, service.id]);

  const FAVICON_MAX_BYTES = 300 * 1024;

@@ -192,6 +211,16 @@ 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}
              {faviconPreview ? (
                <button
                  type="button"
@@ -203,6 +232,25 @@ 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
@@ -17,6 +17,44 @@ function InfoRow({ label, value }: { label: string; value: string }) {
  );
 }

+function LiveStatusToggle({ enabled }: { enabled: boolean }) {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (next: boolean) => {
+      const res = await fetch("/api/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ liveStatusEnabled: next }),
+      });
+      if (!res.ok) throw new Error(`Speichern fehlgeschlagen (HTTP ${res.status})`);
+      return res.json();
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["settings"] }),
+  });
+
+  return (
+    <div className="flex items-center justify-between py-1">
+      <span className="text-sm text-black/50 dark:text-white/50">Aktiviert</span>
+      <button
+        onClick={() => mutation.mutate(!enabled)}
+        disabled={mutation.isPending}
+        role="switch"
+        aria-checked={enabled}
+        className={`relative h-6 w-11 rounded-full transition-colors ${
+          enabled ? "bg-indigo-500" : "bg-black/15 dark:bg-white/15"
+        }`}
+      >
+        <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"
+          }`}
+        />
+      </button>
+    </div>
+  );
+}
+
 function LimitSetting({
  label,
  hint,
@@ -26,7 +64,7 @@ function LimitSetting({
 }: {
  label: string;
  hint: string;
-  settingKey: "recentVisitsLimit" | "readLaterLimit" | "staleDeviceThresholdDays";
+  settingKey: "recentVisitsLimit" | "readLaterLimit" | "staleDeviceThresholdDays" | "liveStatusIntervalMinutes";
  value: number | undefined;
  max?: number;
 }) {
@@ -338,6 +376,26 @@ export function SettingsPage() {
          />
        </div>

+        <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
+          <h2 className="mb-1 font-medium text-black dark:text-white">Live-Status</h2>
+          <p className="mb-2 text-xs text-black/40 dark:text-white/40">
+            Prüft in regelmäßigem Abstand per Ping, ob ein Gerät erreichbar ist, und
+            aktualisiert nur dessen Online-Punkt. Legt nie neue Dienste an und schlägt nie
+            Namen/Kategorien vor – das bleibt weiterhin ausschließlich manuellen Scans
+            vorbehalten. Standardmäßig aus.
+          </p>
+          <LiveStatusToggle enabled={settings?.liveStatusEnabled ?? false} />
+          {settings?.liveStatusEnabled ? (
+            <LimitSetting
+              label="Prüfintervall (Minuten)"
+              hint="Wie oft alle Geräte angepingt werden."
+              settingKey="liveStatusIntervalMinutes"
+              value={settings?.liveStatusIntervalMinutes}
+              max={1440}
+            />
+          ) : null}
+        </div>
+
        <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
          <h2 className="mb-2 font-medium text-black dark:text-white">HTTPS</h2>
          <p className="mb-3 text-sm text-black/50 dark:text-white/50">