fix: async race condition in loadMails — responses from old folder were overwriting current folder

- When user switches folders quickly, multiple fetchMails requests are in flight
- Responses arrive out of order, last response wins regardless of which folder it was for
- Now loadMails checks selectedFolderIdRef before applying results
- Only updates mails state if the response is for the currently selected folder

frontend/src/pages/Mail.tsx

@@ -152,23 +152,34 @@ export function MailPage() {
   // Load mails when folder or page changes
   const loadMails = useCallback(async () => {
     if (!selectedFolderId) return;
+    const currentFolderId = selectedFolderId;
     setLoadingMails(true);
     try {
       if (searchQuery.trim()) {
         const result = await searchMails(searchQuery);
+        // Only update if still on the same folder
+        if (selectedFolderIdRef.current === currentFolderId) {
           setMails(result.mails);
           setMailsTotal(result.total);
+        }
       } else {
-        const result = await fetchMails(selectedFolderId, mailsPage, sortBy, sortOrder);
+        const result = await fetchMails(currentFolderId, mailsPage, sortBy, sortOrder);
+        // Only update if still on the same folder
+        if (selectedFolderIdRef.current === currentFolderId) {
           setMails(result.mails);
           setMailsTotal(result.total);
         }
+      }
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
+      if (selectedFolderIdRef.current === currentFolderId) {
         setError(msg);
         setMails([]);
       }
+    }
+    if (selectedFolderIdRef.current === currentFolderId) {
       setLoadingMails(false);
+    }
   }, [selectedFolderId, mailsPage, searchQuery, sortBy, sortOrder]);
 
   useEffect(() => {