feat: mail grouping with group headers in MailList, connected to GroupPanel

frontend/src/pages/Mail.tsx

@@ -21,7 +21,7 @@ import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
 import { ArrowRight, Check, ChevronLeft, ExternalLink, Loader2, Plus, Redo2, Trash2, TrendingUp, Undo2 } from 'lucide-react';
 import { MailFilterPanel, type FilterState as MailFilterState, emptyFilterState as emptyMailFilterState, applyFilters as applyMailFilters } from '@/components/mail/MailFilterPanel';
 import { MailSortPanel, type SortState as MailSortState, emptySortState as emptyMailSortState, applySorting as applyMailSorting } from '@/components/mail/MailSortPanel';
-import { MailGroupPanel, type GroupState as MailGroupState, emptyGroupState as emptyMailGroupState } from '@/components/mail/MailGroupPanel';
+import { MailGroupPanel, type GroupState as MailGroupState, emptyGroupState as emptyMailGroupState, applyGrouping as applyMailGrouping, type GroupedMails } from '@/components/mail/MailGroupPanel';
 import type { Tag } from '@/api/tags';
 import { useSavedFilters } from '@/api/savedFilters';
 import {
@@ -106,6 +106,12 @@ export function MailPage() {
     return result;
   }, [mails, mailFilterState, mailSortState]);
 
+  // Apply grouping after filter+sort
+  const groupedMails = useMemo(() => {
+    if (mailGroupState.conditions.length === 0) return null;
+    return applyMailGrouping(processedMails, mailGroupState);
+  }, [processedMails, mailGroupState]);
+
   // Ref to track the current folder ID for async callbacks (prevents race conditions)
   const selectedFolderIdRef = useRef<string | null>(null);
   useEffect(() => {
@@ -890,6 +896,7 @@ export function MailPage() {
         >
           <MailList
             mails={processedMails}
+            groupedMails={groupedMails}
             selectedMailId={selectedMail?.id || null}
             onSelectMail={handleSelectMail}
             loading={loadingMails}
@@ -960,6 +967,7 @@ export function MailPage() {
             </div>
             <MailList
               mails={processedMails}
+              groupedMails={groupedMails}
               selectedMailId={selectedMail?.id || null}
               onSelectMail={handleSelectMail}
               loading={loadingMails}