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

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" };

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();
+    }
+  });
+}

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>

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 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-0.5 text-center">
+        <div className="flex flex-col items-center gap-1.5 text-center">
-          <h1 className="text-xl font-semibold tracking-tight text-black dark:text-white sm:text-2xl">
+          <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>
+                <FavoritesBar
-                  <div className="mb-1.5 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
+                  items={recentVisits}
-                    Zuletzt besucht
+                  label="Zuletzt besucht"
-                  </div>
+                  categoryColors={categoryColors}
-                  <div className="flex flex-wrap items-center justify-center gap-2">
+                  onOpen={(item) => {
-                    {recentVisits.map((item) => (
+                    const original = recentVisits.find((r) => r.id === item.id);
-                      <button
+                    if (original) openItem(original);
-                        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}
@@ -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 ? (

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>
 

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>

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

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>

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

packages/shared/src/schemas.ts

@@ -46,7 +46,18 @@ export type ServiceCreateInput = z.infer<typeof ServiceCreateSchema>;
 
 export const ServiceUpdateSchema = ServiceCreateSchema.omit({
   deviceId: true,
-}).partial();
+})
+  .partial()
+  .extend({
+    // Frontend schickt beim Leeren eines Felds bewusst null (nicht nur
+    // "Feld weglassen") - .partial() allein akzeptiert dafür nur
+    // string|undefined, ein PATCH mit category:null schlug daher bisher mit
+    // 400 fehl, ohne dass das Formular das sichtbar gemacht hätte.
+    category: z.string().nullable().optional(),
+    description: z.string().nullable().optional(),
+    icon: z.string().nullable().optional(),
+    favicon: z.string().nullable().optional(),
+  });
 export type ServiceUpdateInput = z.infer<typeof ServiceUpdateSchema>;
 
 /** Für Drag & Drop: neue Reihenfolge mehrerer Dienste auf einmal setzen. */
@@ -98,7 +109,14 @@ export const BookmarkCreateSchema = z.object({
 });
 export type BookmarkCreateInput = z.infer<typeof BookmarkCreateSchema>;
 
-export const BookmarkUpdateSchema = BookmarkCreateSchema.partial();
+export const BookmarkUpdateSchema = BookmarkCreateSchema.partial().extend({
+  // Siehe Kommentar bei ServiceUpdateSchema: null muss erlaubt sein, damit
+  // sich Kategorie/Beschreibung/Icons im Bearbeiten-Formular leeren lassen.
+  category: z.string().nullable().optional(),
+  description: z.string().nullable().optional(),
+  icon: z.string().nullable().optional(),
+  favicon: z.string().nullable().optional(),
+});
 export type BookmarkUpdateInput = z.infer<typeof BookmarkUpdateSchema>;
 
 /** Für Drag & Drop: neue Reihenfolge mehrerer Lesezeichen auf einmal setzen. */

packages/ui/src/Favicon.tsx

@@ -18,6 +18,18 @@ const SIZE_CLASSES: Record<NonNullable<FaviconProps["size"]>, string> = {
  * einem fehlgeschlagenen Ladeversuch (kaputte URL, 404, CORS) wird
  * stattdessen der erste Buchstabe des Namens gezeigt.
  */
+/**
+ * Externe/Geräte-Favicons laufen über den Backend-Proxy (/api/favicon-proxy):
+ * Ohne das würden auf der HTTPS-Seite viele http://-Favicons (typisch für
+ * Homelab-Geräte ohne eigenes TLS) vom Browser als "Mixed Content" blockiert
+ * und nie angezeigt - das Backend selbst fetcht sie ohne diese Einschränkung.
+ * Data-URLs (z. B. selbst hochgeladene Icons) werden direkt durchgereicht.
+ */
+function resolveFaviconSrc(src: string): string {
+  if (src.startsWith("data:")) return src;
+  return `/api/favicon-proxy?url=${encodeURIComponent(src)}`;
+}
+
 export function Favicon({ src, fallbackLetter, size = "md" }: FaviconProps) {
   const dimension = SIZE_CLASSES[size];
   const [failed, setFailed] = useState(false);
@@ -46,7 +58,7 @@ export function Favicon({ src, fallbackLetter, size = "md" }: FaviconProps) {
         bg-white p-0.5 ring-1 ring-black/5`}
     >
       <img
-        src={src}
+        src={resolveFaviconSrc(src)}
         alt=""
         className="h-full w-full object-contain"
         onError={() => setFailed(true)}

packages/ui/src/FavoritesBar.tsx

@@ -72,7 +72,7 @@ export function FavoritesBar({
   return (
     <div>
       {label ? (
-        <div className="mb-1.5 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
+        <div className="mb-2 text-center text-xs font-medium uppercase tracking-wide text-black/30 dark:text-white/30">
           {label}
         </div>
       ) : null}
@@ -98,8 +98,8 @@ export function FavoritesBar({
                   : `${item.displayName} (${item.hostname})`
               }
               style={ringColor ? { boxShadow: `0 0 0 2px ${ringColor}` } : undefined}
-              className={`flex h-10 w-10 items-center justify-center rounded-full border
+              className={`flex h-11 w-11 items-center justify-center rounded-xl border
-                border-black/10 bg-white/70 transition-colors hover:bg-black/5
+                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 ${
                   onReorder ? "cursor-grab active:cursor-grabbing" : ""
                 } ${draggedId === item.id ? "opacity-40" : ""}`}

packages/ui/src/SearchInput.tsx

@@ -3,6 +3,8 @@ import { forwardRef, type InputHTMLAttributes } from "react";
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
   /** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
   hint?: string;
+  /** Zeigt ein X zum Leeren des Felds, sobald Text eingegeben wurde. */
+  onClear?: () => void;
 }
 
 /**
@@ -10,7 +12,9 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
  * Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
  */
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ hint, className = "", ...props }, ref) => {
+  ({ hint, onClear, className = "", ...props }, ref) => {
+    const hasValue = typeof props.value === "string" && props.value.length > 0;
+
     return (
       <div
         className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
@@ -40,6 +44,30 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
             dark:text-white dark:placeholder:text-white/30"
           {...props}
         />
+        {hasValue && onClear ? (
+          <button
+            type="button"
+            onClick={onClear}
+            aria-label="Suche leeren"
+            className="shrink-0 rounded-full p-1 text-black/30 transition-colors
+              hover:bg-black/5 hover:text-black/60 dark:text-white/30
+              dark:hover:bg-white/10 dark:hover:text-white/60"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-4 w-4"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        ) : null}
         {hint ? (
           <span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
             text-black/40 dark:border-white/10 dark:text-white/40">