all email views the same

frontend/src/components/email/TrashEmailList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Undo2, Trash2, ChevronRight, Inbox, Send } from 'lucide-react';
+import { Undo2, Trash2, ChevronRight, Inbox, Send, X } from 'lucide-react';
 import { CachedEmail, cachedEmailApi } from '../../services/api';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import Button from '../ui/Button';
@@ -75,6 +75,23 @@ export default function TrashEmailList({
     },
   });
 
+  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 handleRestoreClick = (e: React.MouseEvent, emailId: number) => {
     e.stopPropagation();
     setActionConfirmId(emailId);
@@ -201,6 +218,26 @@ export default function TrashEmailList({
             <div className="text-xs text-red-500 mt-1">
               {formatDeletedAt(email.deletedAt)}
             </div>
+
+            {/* Contract Badge */}
+            {email.contract && (
+              <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 ursprüngliche INBOX oder manuell zugeordnete gesendete E-Mails */}
+                {(email.folder === 'INBOX' || (email.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>
 
           {/* Chevron */}