Lesezeichen, Import/Export, Favoriten-Sortierung im Frontend, Favicon-Fix, sortierbare Spalten, Kategorie-Dropdown

packages/ui/src/Favicon.tsx

@@ -0,0 +1,41 @@
+export interface FaviconProps {
+  src?: string | null;
+  fallbackLetter: string;
+  size?: "sm" | "md";
+}
+
+const SIZE_CLASSES: Record<NonNullable<FaviconProps["size"]>, string> = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+};
+
+/**
+ * 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
+ * stattdessen der erste Buchstabe des Namens gezeigt.
+ */
+export function Favicon({ src, fallbackLetter, size = "md" }: FaviconProps) {
+  const dimension = SIZE_CLASSES[size];
+
+  if (!src) {
+    return (
+      <span
+        className={`flex ${dimension} shrink-0 items-center justify-center rounded
+          bg-black/10 text-[10px] font-medium text-black/50 dark:bg-white/10
+          dark:text-white/50`}
+      >
+        {fallbackLetter.charAt(0).toUpperCase()}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      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" />
+    </span>
+  );
+}