From 75432cbcfdbdb1da689c56fcce87e96cc5afff95 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Thu, 30 Jul 2026 13:29:08 +0200
Subject: [PATCH] fix: connect MailFilterPanel and MailSortPanel to MailList
 with useMemo

---
 frontend/src/pages/Mail.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/Mail.tsx b/frontend/src/pages/Mail.tsx
index ec853d1..203470f 100644
--- a/frontend/src/pages/Mail.tsx
+++ b/frontend/src/pages/Mail.tsx
@@ -4,7 +4,7 @@
  * Account selection is integrated into the folder tree (left pane).
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Card } from '@/components/ui/Card';
@@ -19,8 +19,8 @@ import { MailComposeForm, type ComposeMode } from '@/components/mail/MailCompose
 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 { MailFilterPanel, type FilterState as MailFilterState, emptyFilterState as emptyMailFilterState } from '@/components/mail/MailFilterPanel';
-import { MailSortPanel, type SortState as MailSortState, emptySortState as emptyMailSortState } from '@/components/mail/MailSortPanel';
+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 type { Tag } from '@/api/tags';
 import { useSavedFilters } from '@/api/savedFilters';
@@ -94,6 +94,18 @@ export function MailPage() {
   const [mailSortState, setMailSortState] = useState<MailSortState>(emptyMailSortState);
   const [mailGroupState, setMailGroupState] = useState<MailGroupState>(emptyMailGroupState);
 
+  // Apply filter + sort to mails before rendering
+  const processedMails = useMemo(() => {
+    let result = mails;
+    if (mailFilterState.conditions.length > 0) {
+      result = applyMailFilters(result, mailFilterState);
+    }
+    if (mailSortState.conditions.length > 0) {
+      result = applyMailSorting(result, mailSortState);
+    }
+    return result;
+  }, [mails, mailFilterState, mailSortState]);
+
   // Ref to track the current folder ID for async callbacks (prevents race conditions)
   const selectedFolderIdRef = useRef<string | null>(null);
   useEffect(() => {
@@ -876,7 +888,7 @@ export function MailPage() {
           data-testid="mail-list-pane"
         >
           <MailList
-            mails={mails}
+            mails={processedMails}
             selectedMailId={selectedMail?.id || null}
             onSelectMail={handleSelectMail}
             loading={loadingMails}