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

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> {

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>
-                    ) : null}
-                  </div>
-                );
-              })()}
-
-              {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>
+        {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={recentVisits}
+                    items={favoriteServices}
+                    label="Favoriten · Dienste"
                     categoryColors={categoryColors}
                     onOpen={(item) => {
-                      const original = recentVisits.find((r) => r.id === item.id);
-                      if (original) openItem(original);
+                      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 ? (
+              <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>
-              ) : null}
+              ) : (
+                <p className="text-xs text-black/30 dark:text-white/30">
+                  Noch nichts gemerkt.
+                </p>
+              )}
             </div>
-          ) : null}
-        </div>
+          </div>
+        ) : null}
       </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">

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>

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>

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)"