From 83039dcf8d409b514ef4490f88b01fee1b7e4a43 Mon Sep 17 00:00:00 2001
From: sysops <sysops@LenovoT14Gen5>
Date: Sun, 10 May 2026 22:18:43 +0200
Subject: [PATCH] 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>
---
 src/components/ocr-badge.tsx | 56 ++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/ocr-badge.tsx

diff --git a/src/components/ocr-badge.tsx b/src/components/ocr-badge.tsx
new file mode 100644
index 0000000..07295bd
--- /dev/null
+++ b/src/components/ocr-badge.tsx
@@ -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;
+  }
+}