courrier multi account

app/courrier/page.tsx

@@ -133,6 +133,9 @@ export default function CourrierPage() {
   ]);
   const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
   
+  // Track expanded folders for each account
+  const [expandedAccounts, setExpandedAccounts] = useState<Record<string, boolean>>({});
+  
   // Update account folders when mailboxes change - update this to maintain account IDs
   useEffect(() => {
     console.log('Mailboxes updated:', mailboxes);
@@ -678,13 +681,20 @@ export default function CourrierPage() {
                   {/* Display all accounts */}
                   <div className="mt-1">
                     {accounts.map((account) => (
+                      <div key={account.id} className="mb-1">
                         <Button
-                        key={account.id}
                           variant="ghost"
-                        className={`w-full justify-start text-xs mb-1 ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
+                          className={`w-full justify-start text-xs ${selectedAccount?.id === account.id ? 'bg-gray-100' : ''}`}
                           onClick={() => {
                             setSelectedAccount(account);
                             setShowFolders(true);
+                            // Auto-expand this account when selected
+                            if (account.id !== 'all-accounts') {
+                              setExpandedAccounts(prev => ({
+                                ...prev,
+                                [account.id]: true
+                              }));
+                            }
                             if (account.id === 'all-accounts') {
                               handleMailboxChange('INBOX');
                             } else {
@@ -695,21 +705,33 @@ export default function CourrierPage() {
                           <div className="flex items-center w-full">
                             <div className={`w-3 h-3 rounded-full ${account.color?.startsWith('#') ? 'bg-blue-500' : account.color || 'bg-blue-500'} mr-2`}></div>
                             <span className="truncate text-gray-700">{account.name}</span>
+                            {account.id !== 'all-accounts' && (
+                              <button 
+                                className="ml-auto text-gray-400 hover:text-gray-600"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  // Toggle this specific account's expanded state
+                                  setExpandedAccounts(prev => ({
+                                    ...prev,
+                                    [account.id]: !prev[account.id]
+                                  }));
+                                }}
+                              >
+                                {expandedAccounts[account.id] ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+                              </button>
+                            )}
                           </div>
                         </Button>
-                    ))}
-                  </div>
-                </div>
                         
-                {/* Folders Section - Always Display */}
+                        {/* Show folders for this account if expanded */}
-                <div className="p-3">
+                        {expandedAccounts[account.id] && account.id !== 'all-accounts' && account.folders && (
-                  {/* Display folders if available */}
+                          <div className="pl-4">
-                  {selectedAccount?.folders?.map((folder) => (
+                            {account.folders.map((folder) => (
                               <Button
                                 key={folder}
                                 variant="ghost"
-                      className={`w-full justify-start text-xs mb-1 ${currentFolder === folder ? 'bg-gray-100' : ''}`}
+                                className={`w-full justify-start text-xs py-1 h-7 ${currentFolder === folder ? 'bg-gray-100' : ''}`}
-                      onClick={() => handleMailboxChange(folder, selectedAccount.id !== 'all-accounts' ? selectedAccount.id : undefined)}
+                                onClick={() => handleMailboxChange(folder, account.id !== 'all-accounts' ? account.id : undefined)}
                               >
                                 <div className="flex items-center w-full">
                                   {getFolderIcon(folder)}
@@ -722,14 +744,12 @@ export default function CourrierPage() {
                                 </div>
                               </Button>
                             ))}
-                  
-                  {/* Fallback if no folders */}
-                  {(!selectedAccount?.folders || selectedAccount.folders.length === 0) && (
-                    <div className="text-xs text-gray-500 italic p-2">
-                      No folders available for this account.
                           </div>
                         )}
                       </div>
+                    ))}
+                  </div>
+                </div>
               </div>
             </div>