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

packages/ui/src/Favicon.tsx

@@ -1,3 +1,5 @@
+import { useState, useEffect } from "react";
+
 export interface FaviconProps {
   src?: string | null;
   fallbackLetter: string;
@@ -12,13 +14,21 @@ const SIZE_CLASSES: Record<NonNullable<FaviconProps["size"]>, string> = {
 /**
  * Zeigt ein Favicon mit einem immer hellen Hintergrund (unabhängig vom
  * Dark/Light-Theme der App) – viele Favicons sind selbst dunkel/schwarz und
- * wären auf dunklem Hintergrund sonst kaum zu erkennen. Ohne Favicon wird
+ * wären auf dunklem Hintergrund sonst kaum zu erkennen. Ohne Favicon oder bei
+ * einem fehlgeschlagenen Ladeversuch (kaputte URL, 404, CORS) wird
  * stattdessen der erste Buchstabe des Namens gezeigt.
  */
 export function Favicon({ src, fallbackLetter, size = "md" }: FaviconProps) {
   const dimension = SIZE_CLASSES[size];
+  const [failed, setFailed] = useState(false);
 
-  if (!src) {
+  // Bei geändertem src (z. B. anderer Listeneintrag durch Virtualisierung/Key-Wiederverwendung)
+  // erneut versuchen statt dauerhaft im Fehlerzustand zu bleiben.
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+
+  if (!src || failed) {
     return (
       <span
         className={`flex ${dimension} shrink-0 items-center justify-center rounded
@@ -35,7 +45,12 @@ export function Favicon({ src, fallbackLetter, size = "md" }: FaviconProps) {
       className={`flex ${dimension} shrink-0 items-center justify-center rounded
         bg-white p-0.5 ring-1 ring-black/5`}
     >
-      <img src={src} alt="" className="h-full w-full object-contain" />
+      <img
+        src={src}
+        alt=""
+        className="h-full w-full object-contain"
+        onError={() => setFailed(true)}
+      />
     </span>
   );
 }