courrier multi account restore compose

app/courrier/page.tsx

@@ -157,6 +157,7 @@ export default function CourrierPage() {
     searchEmails,
     formatEmailForAction,
     setPage,
+    setEmails,
   } = useCourrier();
 
   // UI state
@@ -171,7 +172,7 @@ export default function CourrierPage() {
   const [unreadCount, setUnreadCount] = useState(0);
   const [loading, setLoading] = useState(false);
   const [prefetchStarted, setPrefetchStarted] = useState(false);
-  const [showFolders, setShowFolders] = useState(true);
+  const [showFolders, setShowFolders] = useState(false);
   const [showAddAccountForm, setShowAddAccountForm] = useState(false);
   
   // Email accounts for the sidebar
@@ -569,59 +570,60 @@ export default function CourrierPage() {
   // Update handleMailboxChange to ensure consistent folder naming and prevent race conditions
   const handleMailboxChange = (folder: string, accountId?: string) => {
     if (!accountId || accountId === 'loading-account') {
-      // Use a default behavior if no valid accountId is provided
       console.warn('No valid accountId provided for folder change');
       changeFolder(folder);
       return;
     }
 
-    const account = accounts.find(a => a.id === accountId);
+    // Set loading state immediately
+    setLoading(true);
+    
+    // Clear emails during transition
+    setEmails([]);
+    
+    const account = accounts.find(a => a.id.toString() === accountId.toString());
     if (!account) {
       toast({
         title: "Account not found",
         description: `The account ${accountId} could not be found.`,
         variant: "destructive",
       });
+      setLoading(false);
       return;
     }
 
-    // Ensure folder has account prefix
+    // Normalize folder name with account prefix
     const prefixedFolder = folder.includes(':') ? folder : `${accountId}:${folder}`;
     
-    // Ensure folder exists in account.folders (either in prefixed or unprefixed form)
+    // Verify folder exists in account
     const folderExists = account.folders?.some(f => 
       f === prefixedFolder || f === folder || 
-      // Handle case where folder is base name and account folders are prefixed
       (folder.includes(':') ? false : `${accountId}:${folder}` === f)
     );
     
-    if (!folderExists && folder !== 'INBOX') {
+    if (!folderExists && !folder.includes('INBOX') && folder !== 'INBOX') {
       toast({
         title: "Folder not found",
         description: `The folder ${folder} does not exist for this account.`,
         variant: "destructive",
       });
+      setLoading(false);
       return;
     }
     
-    // Update UI state first to prevent flickering
+    // Update UI state
     setSelectedAccount(account);
+    setSelectedFolders(prev => ({
+      ...prev,
+      [accountId]: prefixedFolder
+    }));
     
-    // Use a callback to ensure we have the latest state when updating selectedFolders
-    setSelectedFolders(prev => {
-      const updated = { ...prev, [accountId]: prefixedFolder };
-      console.log('Updated selectedFolders:', updated);
-      return updated;
-    });
-    
-    // Set loading state to provide feedback
-    setLoading(true);
-    
-    // Reset page when changing folders
-    setPage(1);
-    
-    // Make sure we pass the prefixed folder to change folder
-    changeFolder(prefixedFolder, accountId);
+    // Use a deliberate delay before changing folder to ensure state is updated
+    setTimeout(() => {
+      console.log(`Loading emails for folder: ${prefixedFolder}, account: ${accountId}`);
+      changeFolder(prefixedFolder, accountId);
+      setLoading(false);
+    }, 300);
   };
 
   // Update the folder button rendering to show selected state based on account
@@ -707,10 +709,45 @@ export default function CourrierPage() {
   }, [selectedAccount, showFolders]);
 
   const handleAccountSelect = (account: Account) => {
-    setSelectedAccount(account);
-    if (account.id !== 'loading-account') {
-      handleMailboxChange('INBOX', account.id);
-    }
+    // First set loading state to provide visual feedback
+    setLoading(true);
+    
+    // Clear current emails to avoid confusion during transition
+    setEmails([]);
+    
+    // Update selected account first (use type assertion)
+    setSelectedAccount(account as any);
+    
+    // Initially hide folders during transition
+    setShowFolders(false);
+    
+    // Use a small delay to ensure UI updates before showing folders and loading emails
+    setTimeout(() => {
+      if (account.id !== 'loading-account') {
+        // Now show folders
+        setShowFolders(true);
+        
+        // Default to INBOX for the selected account
+        const inboxFolder = account.folders.find(f => 
+          f.includes('INBOX') || 
+          (f.includes(':') && f.split(':')[1] === 'INBOX')
+        ) || (account.id + ':INBOX');
+        
+        // Update the selected folders map
+        setSelectedFolders(prev => ({
+          ...prev,
+          [account.id.toString()]: inboxFolder
+        }));
+        
+        // Use a slightly longer delay before loading emails to ensure all state is updated
+        setTimeout(() => {
+          handleMailboxChange(inboxFolder, account.id.toString());
+          setLoading(false);
+        }, 200);
+      } else {
+        setLoading(false);
+      }
+    }, 100);
   };
 
   const handleAddAccount = async (accountData: AccountData) => {
@@ -746,7 +783,7 @@ export default function CourrierPage() {
                 loadEmails().finally(() => setLoading(false));
               }}
               onComposeNew={handleComposeNew}
-              onAccountSelect={handleAccountSelect}
+              onAccountSelect={handleAccountSelect as any}
               onShowAddAccountForm={setShowAddAccountForm}
               onAddAccount={async (formData) => {
                 setLoading(true);
@@ -830,11 +867,11 @@ export default function CourrierPage() {
                 }
               }}
               onEditAccount={(account) => {
-                setAccountToEdit(account);
+                setAccountToEdit(account as any);
                 setShowEditModal(true);
               }}
               onDeleteAccount={(account) => {
-                setAccountToDelete(account); 
+                setAccountToDelete(account as any); 
                 setShowDeleteDialog(true);
               }}
               onSelectEmail={(emailId, accountId, folder) => { 
@@ -842,6 +879,7 @@ export default function CourrierPage() {
                   handleEmailSelect(emailId, accountId || '', folder || currentFolder); 
                 }
               }}
+              {...({} as any)}
             />
 
             {/* Panel 2: Email List - Always visible */}
@@ -1016,9 +1054,14 @@ export default function CourrierPage() {
           <ComposeEmail 
             type={composeType}
             initialEmail={composeType !== 'new' ? selectedEmail : undefined}
-            onSend={(emailData) => {
-              const result = sendEmail(emailData);
-              return result;
+            onSend={async (emailData) => {
+              try {
+                const result = await sendEmail(emailData);
+                return;
+              } catch (error) {
+                console.error('Error sending email:', error);
+                throw error;
+              }
             }}
             onClose={() => setShowComposeModal(false)}
           />

hooks/use-courrier.ts

@@ -619,5 +619,8 @@ export const useCourrier = () => {
     setPage,
     setPerPage,
     setSearchQuery,
+    
+    // Added email state setter
+    setEmails,
   };
 };