feat(PROJ-9): implement labels frontend - LabelList, LabelPicker, search integration, admin UI

src/app/mail/[id]/page.tsx

@@ -7,11 +7,15 @@ import {
   downloadMailAttachment,
   downloadMailRaw,
   exportMailPDF,
+  getLabels,
+  getMailLabelIds,
   type MailDetail,
   type MailAttachment,
+  type MailLabel,
 } from "@/lib/api";
 import { useAuth } from "@/hooks/useAuth";
 import { Navbar } from "@/components/navbar";
+import { LabelPicker } from "@/components/LabelPicker";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -256,6 +260,10 @@ export default function MailViewPage({
   const [downloading, setDownloading] = useState(false);
   const [pdfLoading, setPdfLoading] = useState(false);
 
+  // Labels state
+  const [allLabels, setAllLabels] = useState<MailLabel[]>([]);
+  const [assignedLabelIds, setAssignedLabelIds] = useState<number[]>([]);
+
   useEffect(() => {
     if (!user) return;
     getMail(id)
@@ -264,8 +272,16 @@ export default function MailViewPage({
         setError(e instanceof Error ? e.message : "Unbekannter Fehler")
       )
       .finally(() => setLoading(false));
+    // Load labels
+    getLabels().then(setAllLabels).catch(() => {});
+    loadMailLabels();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, user]);
 
+  function loadMailLabels() {
+    getMailLabelIds(id).then(setAssignedLabelIds).catch(() => setAssignedLabelIds([]));
+  }
+
   async function handleEmlDownload() {
     setDownloading(true);
     try {
@@ -364,6 +380,20 @@ export default function MailViewPage({
               </CardHeader>
             </Card>
 
+            {/* Labels */}
+            {allLabels.length > 0 && (
+              <Card>
+                <CardContent className="pt-4 pb-4">
+                  <LabelPicker
+                    emailId={id}
+                    assignedLabelIds={assignedLabelIds}
+                    allLabels={allLabels}
+                    onUpdate={loadMailLabels}
+                  />
+                </CardContent>
+              </Card>
+            )}
+
             {/* Body */}
             <Card>
               <CardContent className="pt-6">