diff --git a/frontend/src/pages/Mail.tsx b/frontend/src/pages/Mail.tsx index 3b4dac2..094617f 100644 --- a/frontend/src/pages/Mail.tsx +++ b/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([]); + const { data: savedFilters } = useSavedFilters('mail'); // Ref to track the current folder ID for async callbacks (prevents race conditions) const selectedFolderIdRef = useRef(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: ( - { - 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: , + 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: ( - - ), + icon: , + 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: () => {}, }, {