all email views the same

frontend/src/components/email/EmailList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Mail, MailOpen, Star, Paperclip, ChevronRight, Trash2 } from 'lucide-react';
+import { Mail, MailOpen, Star, Paperclip, ChevronRight, Trash2, X } from 'lucide-react';
 import { CachedEmail, cachedEmailApi } from '../../services/api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAuth } from '../../context/AuthContext';
@@ -87,6 +87,23 @@ export default function EmailList({
     },
   });
 
+  const unassignMutation = useMutation({
+    mutationFn: (emailId: number) => cachedEmailApi.unassignFromContract(emailId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['emails'] });
+      toast.success('Vertragszuordnung aufgehoben');
+    },
+    onError: (error: Error) => {
+      console.error('Unassign error:', error);
+      toast.error(error.message || 'Fehler beim Aufheben der Zuordnung');
+    },
+  });
+
+  const handleUnassign = (e: React.MouseEvent, emailId: number) => {
+    e.stopPropagation();
+    unassignMutation.mutate(emailId);
+  };
+
   const handleDeleteClick = (e: React.MouseEvent, emailId: number) => {
     e.stopPropagation();
     setDeleteConfirmId(emailId);
@@ -229,10 +246,21 @@ export default function EmailList({
 
             {/* Contract Badge */}
             {email.contract && (
-              <div className="mt-1">
+              <div className="mt-1 flex items-center gap-1">
                 <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                   {email.contract.contractNumber}
                 </span>
+                {/* X-Button nur für INBOX oder manuell zugeordnete gesendete E-Mails */}
+                {(folder === 'INBOX' || (folder === 'SENT' && !email.isAutoAssigned)) && (
+                  <button
+                    onClick={(e) => handleUnassign(e, email.id)}
+                    className="p-0.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded"
+                    title="Zuordnung aufheben"
+                    disabled={unassignMutation.isPending}
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                )}
               </div>
             )}
           </div>