courrier multi account restore compose

app/courrier/page.tsx

@@ -124,10 +124,7 @@ export default function CourrierPage() {
   const [showAddAccountForm, setShowAddAccountForm] = useState(false);
   
   // Email accounts for the sidebar
-  const [accounts, setAccounts] = useState<Account[]>([
-    { id: 'all-accounts', name: 'All', email: '', color: 'bg-gray-500', folders: [] },
-    { id: 'loading-account', name: 'Loading...', email: '', color: 'bg-blue-500', folders: [] }
-  ]);
+  const [accounts, setAccounts] = useState<Account[]>([]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   
   // Track expanded folders for each account
@@ -136,24 +133,20 @@ export default function CourrierPage() {
   // Add state to track selected folder per account
   const [selectedFolders, setSelectedFolders] = useState<Record<string, string>>({});
   
-  // Update account folders when mailboxes change - update this to maintain account IDs
+  // Update account folders individually
   useEffect(() => {
-    console.log('Mailboxes updated:', mailboxes);
-    setAccounts(prev => {
-      const updated = [...prev];
-      if (updated.length > 1) {
-        // Only update folders, preserve other properties including ID
-        if (updated[1]) {
-          updated[1] = {
-            ...updated[1],
+    if (mailboxes && selectedAccount) {
+      setAccounts(prev => prev.map(account => {
+        if (account.id === selectedAccount.id) {
+          return {
+            ...account,
             folders: mailboxes
           };
         }
-        console.log('Updated accounts with new mailboxes:', updated);
-      }
-      return updated;
-    });
-  }, [mailboxes]);
+        return account;
+      }));
+    }
+  }, [mailboxes, selectedAccount]);
   
   // Debug accounts state
   useEffect(() => {
@@ -550,7 +543,7 @@ export default function CourrierPage() {
     // Reset to page 1 when changing folders
     setPage(1);
     
-    // If we have a specific accountId, validate the folder exists for that account
+    // Validate folder exists for account before changing
     if (accountId && accountId !== 'all-accounts') {
       const account = accounts.find(a => a.id === accountId);
       if (!account) {
@@ -559,38 +552,37 @@ export default function CourrierPage() {
       }
       
       // Check if the folder exists for this account
-      if (!account.folders?.includes(folder)) {
+      const accountFolder = account.folders?.find(f => 
+        f === folder || f.startsWith(`${folder}-`)
+      );
+      
+      if (!accountFolder) {
         console.error(`Folder ${folder} does not exist for account ${accountId}`);
-        // Fall back to INBOX if the folder doesn't exist
-        folder = 'INBOX';
+        return;
       }
       
       // Update the selected folder for this account
       setSelectedFolders(prev => ({
         ...prev,
-        [accountId]: folder
+        [accountId]: accountFolder
       }));
       
-      // Log the folder change with account ID
-      console.log(`Changing folder to ${folder} for account ${accountId}`);
-    }
-    
-    // Change folder in the state, passing the clean folder name and accountId separately
-    changeFolder(folder, accountId);
-    setCurrentView(folder);
-    
-    // Start prefetching additional pages for this folder
-    if (session?.user?.id && folder) {
-      // First two pages are most important - prefetch immediately
-      prefetchFolderEmails(session.user.id, folder, 3, 1, accountId).catch(err => {
-        console.error(`Error prefetching ${folder}:`, err);
-      });
+      // Change folder in state with the correct account-specific folder name
+      changeFolder(accountFolder, accountId);
+      setCurrentView(accountFolder);
+    } else {
+      // Handle "All Accounts" view
+      changeFolder(folder);
+      setCurrentView(folder);
     }
   };
 
   // Update the folder button rendering to show selected state based on account
   const renderFolderButton = (folder: string, accountId: string) => {
+    // Remove account ID suffix for display
+    const displayFolder = folder.split('-')[0];
     const isSelected = selectedFolders[accountId] === folder;
+    
     return (
       <Button
         key={folder}
@@ -599,9 +591,9 @@ export default function CourrierPage() {
         onClick={() => handleMailboxChange(folder, accountId !== 'all-accounts' ? accountId : undefined)}
       >
         <div className="flex items-center w-full">
-          {getFolderIcon(folder)}
-          <span className="ml-2 truncate text-gray-700">{formatFolderName(folder)}</span>
-          {folder === 'INBOX' && unreadCount > 0 && (
+          {getFolderIcon(displayFolder)}
+          <span className="ml-2 truncate text-gray-700">{formatFolderName(displayFolder)}</span>
+          {displayFolder === 'INBOX' && unreadCount > 0 && (
             <span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
               {unreadCount}
             </span>