courrier multi account restore compose

app/courrier/page.tsx

@@ -133,6 +133,9 @@ export default function CourrierPage() {
   // Track expanded folders for each account
   const [expandedAccounts, setExpandedAccounts] = useState<Record<string, boolean>>({});
   
+  // 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
   useEffect(() => {
     console.log('Mailboxes updated:', mailboxes);
@@ -545,7 +548,7 @@ export default function CourrierPage() {
     setShowComposeModal(true);
   };
   
-  // Handle mailbox change with prefetching
+  // Update handleMailboxChange to track selected folders per account
   const handleMailboxChange = (folder: string, accountId?: string) => {
     // Reset to page 1 when changing folders
     setPage(1);
@@ -565,6 +568,12 @@ export default function CourrierPage() {
         folder = 'INBOX';
       }
       
+      // Update the selected folder for this account
+      setSelectedFolders(prev => ({
+        ...prev,
+        [accountId]: folder
+      }));
+      
       // Store the current account ID with the folder change
       console.log(`Changing folder to ${folder} for account ${accountId}`);
     }
@@ -582,6 +591,29 @@ export default function CourrierPage() {
     }
   };
 
+  // Update the folder button rendering to show selected state based on account
+  const renderFolderButton = (folder: string, accountId: string) => {
+    const isSelected = selectedFolders[accountId] === folder;
+    return (
+      <Button
+        key={folder}
+        variant="ghost"
+        className={`w-full justify-start text-xs py-1 h-7 ${isSelected ? 'bg-gray-100' : ''}`}
+        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 && (
+            <span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
+              {unreadCount}
+            </span>
+          )}
+        </div>
+      </Button>
+    );
+  };
+
   // Handle sending email
   const handleSendEmail = async (emailData: EmailData) => {
     return await sendEmail(emailData);
@@ -951,24 +983,7 @@ export default function CourrierPage() {
                         {/* Show folders for this account if expanded */}
                         {expandedAccounts[account.id] && account.id !== 'all-accounts' && account.folders && (
                           <div className="pl-4">
-                            {account.folders.map((folder) => (
+                            {account.folders.map((folder) => renderFolderButton(folder, account.id))}
-                              <Button
-                                key={folder}
-                                variant="ghost"
-                                className={`w-full justify-start text-xs py-1 h-7 ${currentFolder === folder ? 'bg-gray-100' : ''}`}
-                                onClick={() => handleMailboxChange(folder, account.id !== 'all-accounts' ? account.id : 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 && (
-                                    <span className="ml-auto bg-blue-500 text-white text-[10px] px-1.5 rounded-full">
-                                      {unreadCount}
-                                    </span>
-                                  )}
-                                </div>
-                              </Button>
-                            ))}
                           </div>
                         )}
                       </div>