courrier multi account restore compose

app/courrier/page.tsx

@@ -626,6 +626,11 @@ export default function CourrierPage() {
     // Set loading state immediately
     setLoading(true);
     
+    // CRITICAL FIX: Clear email selection BEFORE changing folders
+    // This prevents stale emails from previous folders from being displayed
+    logEmailOp('MAILBOX-CHANGE', 'Clearing email selection before folder change');
+    handleEmailSelect('', '', '');
+    
     // Clear emails during transition to avoid UI flicker/confusion
     setEmails([]);
     
@@ -804,6 +809,19 @@ export default function CourrierPage() {
     // First set loading state to provide visual feedback
     setLoading(true);
     
+    // CRITICAL FIX: Clear current selection to prevent stale email from previous account
+    // This ensures no emails from the previous account remain selected
+    logEmailOp('ACCOUNT-SELECT', `CRITICAL FIX: Clearing all email selections to prevent cross-account UI contamination`);
+    
+    // Direct clearing of selected email for immediate UI effect 
+    // Clear the selected email in the UI - Panel 3
+    handleEmailSelect('', '', ''); 
+    
+    // Clear any multi-selected emails - Panel 2
+    if (selectedEmailIds.length > 0) {
+      toggleSelectAll(); 
+    }
+    
     // Clear current emails to avoid confusion during transition
     setEmails([]);
     

components/email/EmailPanel.tsx

@@ -125,8 +125,18 @@ export default function EmailPanel({
   // Load email content when selectedEmail changes
   useEffect(() => {
     if (selectedEmail) {
+      // CRITICAL FIX: Store the current account ID to check for changes
+      // This helps prevent race conditions during account switching
+      const currentAccountId = selectedEmail.accountId;
+      console.log(`EmailPanel: Loading email ${selectedEmail.emailId} from account ${currentAccountId}`);
+      
       debouncedFetchEmail(selectedEmail.emailId, selectedEmail.accountId, selectedEmail.folder);
       setIsComposing(false);
+      
+      // Return a cleanup function that can detect and handle account changes
+      return () => {
+        console.log(`EmailPanel: Cleaning up email fetch for account ${currentAccountId}`);
+      };
     }
   }, [selectedEmail, debouncedFetchEmail]);
   

hooks/use-email-fetch.ts

@@ -49,6 +49,16 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = {
       return;
     }
 
+    // CRITICAL FIX: Always abort any previous request when fetching a new email
+    // This prevents race conditions when switching accounts or folders
+    if (abortControllerRef.current) {
+      console.log(`useEmailFetch: Aborting previous request to fetch email ${emailId} from account ${accountId}`);
+      abortControllerRef.current.abort();
+    }
+    
+    // Create a new abort controller for this request
+    abortControllerRef.current = new AbortController();
+
     setState(prev => ({ ...prev, loading: true, error: null }));
 
     try {