feat(PROJ-44): OcrBadge-Komponente fuer Mail-Detail-Header

- Rendert OCR-Status als shadcn Badge mit passender Farbe (done=gruen, failed=rot, skipped=grau, pending=blau) - disabled und undefined rendern null, damit die Komponente unbedingt eingebunden werden kann Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-10 22:18:43 +02:00
parent 23a9a7ea37
commit 83039dcf8d
1 changed files with 56 additions and 0 deletions
@@ -0,0 +1,56 @@
+import { Badge } from "@/components/ui/badge";
+import type { OCRStatus } from "@/lib/api";
+
+interface OcrBadgeProps {
+  status?: OCRStatus | null;
+}
+
+/**
+ * OcrBadge renders a small status pill next to the mail-detail header,
+ * mirroring the verification badges. `disabled` and missing values render
+ * nothing, so the component is safe to drop in unconditionally.
+ */
+export function OcrBadge({ status }: OcrBadgeProps) {
+  if (!status || status === "disabled") return null;
+
+  switch (status) {
+    case "done":
+      return (
+        <Badge
+          className="border-transparent bg-green-100 text-green-800 hover:bg-green-100 dark:bg-green-900/40 dark:text-green-200"
+          title="Anhänge wurden per OCR erkannt"
+        >
+          OCR ✓
+        </Badge>
+      );
+    case "failed":
+      return (
+        <Badge
+          variant="destructive"
+          title="OCR fehlgeschlagen"
+        >
+          OCR ✗
+        </Badge>
+      );
+    case "skipped":
+      return (
+        <Badge
+          variant="secondary"
+          title="Keine OCR-fähigen Anhänge"
+        >
+          OCR n/a
+        </Badge>
+      );
+    case "pending":
+      return (
+        <Badge
+          className="border-transparent bg-blue-100 text-blue-800 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200"
+          title="OCR läuft noch"
+        >
+          OCR …
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}