fix: mail filter as dropdown like contacts (sort + saved filters), remove inline custom components

frontend/src/pages/Mail.tsx

@@ -18,10 +18,9 @@ import { MailDetail } from '@/components/mail/MailDetail';
 import { MailComposeForm, type ComposeMode } from '@/components/mail/MailComposeForm';
 import { useWindowStore } from '@/store/windowStore';
 import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
-import { ArrowRight, Check, ChevronLeft, ExternalLink, Loader2, Plus, Redo2, Trash2, TrendingUp, Undo2 } from 'lucide-react';
-import { SavedFilterBar } from '@/components/common/SavedFilterBar';
-import { TagSelector } from '@/components/tags/TagSelector';
+import { ArrowRight, ArrowUpDown, Bookmark, Check, ChevronLeft, ExternalLink, Loader2, Plus, Redo2, Trash2, TrendingUp, Undo2 } from 'lucide-react';
 import type { Tag } from '@/api/tags';
+import { useSavedFilters } from '@/api/savedFilters';
 import {
   fetchAccounts,
   fetchFolders,
@@ -87,6 +86,7 @@ export function MailPage() {
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
   const [isSyncing, setIsSyncing] = useState(false);
   const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
+  const { data: savedFilters } = useSavedFilters('mail');
 
   // Ref to track the current folder ID for async callbacks (prevents race conditions)
   const selectedFolderIdRef = useRef<string | null>(null);
@@ -594,41 +594,44 @@ export function MailPage() {
         onSearch: handleSearch,
         onClick: () => {},
       },
-      // FilterPanel — SavedFilterBar + TagSelector
+      // Filter dropdown — sort + saved filters (like Contacts)
       {
-        id: 'filter-panel',
+        id: 'filter-sort',
         plugin: 'mail',
-        label: 'Filter',
-        type: 'custom' as const,
+        label: 'Sortieren',
+        type: 'dropdown' as const,
         group: 'filter',
-        customComponent: (
-          <SavedFilterBar
-            entityType="mail"
-            currentFilters={{ search: searchQuery, sortBy, sortOrder, folderId: selectedFolderId }}
-            onApplyFilter={(criteria) => {
-              if (criteria.search !== undefined) handleSearch(criteria.search);
-              if (criteria.sortBy) setSortBy(criteria.sortBy as 'date' | 'from' | 'subject');
-              if (criteria.sortOrder) setSortOrder(criteria.sortOrder as 'asc' | 'desc');
-            }}
-          />
-        ),
+        icon: <ArrowUpDown className="w-3.5 h-3.5" strokeWidth={2} />,
+        menuWidth: '200px',
+        menuOptions: [
+          { value: 'date-desc', label: 'Datum ↓ (neueste zuerst)', active: sortBy === 'date' && sortOrder === 'desc', onClick: () => { setSortBy('date'); setSortOrder('desc'); } },
+          { value: 'date-asc', label: 'Datum ↑ (älteste zuerst)', active: sortBy === 'date' && sortOrder === 'asc', onClick: () => { setSortBy('date'); setSortOrder('asc'); } },
+          { value: 'from-asc', label: 'Absender A-Z', active: sortBy === 'from' && sortOrder === 'asc', onClick: () => { setSortBy('from'); setSortOrder('asc'); } },
+          { value: 'from-desc', label: 'Absender Z-A', active: sortBy === 'from' && sortOrder === 'desc', onClick: () => { setSortBy('from'); setSortOrder('desc'); } },
+          { value: 'subject-asc', label: 'Betreff A-Z', active: sortBy === 'subject' && sortOrder === 'asc', onClick: () => { setSortBy('subject'); setSortOrder('asc'); } },
+          { value: 'subject-desc', label: 'Betreff Z-A', active: sortBy === 'subject' && sortOrder === 'desc', onClick: () => { setSortBy('subject'); setSortOrder('desc'); } },
+        ],
         onClick: () => {},
       },
       {
-        id: 'tag-filter',
+        id: 'filter-saved',
         plugin: 'mail',
-        label: 'Tags',
-        type: 'custom' as const,
+        label: 'Gespeicherte Filter',
+        type: 'dropdown' as const,
         group: 'filter',
-        customComponent: (
-          <TagSelector
-            entityType="file"
-            entityId={selectedMail?.id ?? ''}
-            selectedTags={selectedTags}
-            onChange={setSelectedTags}
-            placeholder={t('tags.selectPlaceholder', 'Tags filtern...')}
-          />
-        ),
+        icon: <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />,
+        menuWidth: '220px',
+        menuOptions: (savedFilters || []).length > 0
+          ? savedFilters.map((f: any) => ({
+              value: f.id,
+              label: f.name,
+              onClick: () => {
+                if (f.filter_criteria?.search !== undefined) handleSearch(f.filter_criteria.search);
+                if (f.filter_criteria?.sortBy) setSortBy(f.filter_criteria.sortBy);
+                if (f.filter_criteria?.sortOrder) setSortOrder(f.filter_criteria.sortOrder);
+              },
+            }))
+          : [{ value: 'none', label: 'Keine gespeicherten Filter', disabled: true, onClick: () => {} }],
         onClick: () => {},
       },
       {