courrier multi account

app/courrier/debug-tool.tsx

@@ -1,10 +1,62 @@
 'use client';
 
 import { EmailDebug } from '../components/debug/EmailDebug';
+import { useEffect, useState } from 'react';
+import { toast } from '@/components/ui/use-toast';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle } from 'lucide-react';
 
 export default function EmailDebugTool() {
+  const [isVisible, setIsVisible] = useState(false);
+  
+  useEffect(() => {
+    // Check if we have any accounts-related issue by looking for accounts div in the DOM
+    const checkAccounts = () => {
+      const accountsElements = document.querySelectorAll('.accounts-dropdown');
+      const foldersElements = document.querySelectorAll('.folder-item');
+      
+      if (accountsElements.length === 0 || foldersElements.length === 0) {
+        console.log('No accounts or folders found in DOM, showing quick fix button');
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    
+    // Check after a delay to allow the UI to render
+    const timer = setTimeout(checkAccounts, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+  
+  const handleQuickFix = async () => {
+    try {
+      // Force reload the page with a special param to trigger the fix
+      window.location.href = '/courrier?fix=folders&t=' + Date.now();
+    } catch (error) {
+      console.error('Error applying quick fix:', error);
+    }
+  };
+  
   if (process.env.NODE_ENV === 'production') {
     return null;
   }
+
+  // Show the quick fix button if necessary
+  if (isVisible) {
+    return (
+      <div className="fixed bottom-4 left-4 z-50">
+        <Button
+          size="sm"
+          variant="destructive"
+          className="bg-red-600 hover:bg-red-700 text-white shadow-lg flex items-center gap-1"
+          onClick={handleQuickFix}
+        >
+          <AlertTriangle className="h-4 w-4" />
+          <span>Quick Fix Folders</span>
+        </Button>
+      </div>
+    );
+  }
+  
   return <EmailDebug />;
 } 

app/courrier/page.tsx

@@ -65,7 +65,7 @@ function SimplifiedLoadingFix() {
 }
 
 interface Account {
-  id: number;
+  id: number | string;
   name: string;
   email: string;
   color: string;
@@ -231,12 +231,22 @@ export default function CourrierPage() {
               data.allAccounts.forEach((account, index) => {
                 console.log(`[DEBUG] Processing account: ${account.email}, display_name: ${account.display_name}, has folders: ${!!data.mailboxes}`);
                 
+                // Force include some hardcoded folders if none are present
+                const fallbackFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk'];
+                const folderList = (data.mailboxes && data.mailboxes.length > 0) ? 
+                  data.mailboxes : 
+                  (account.folders && account.folders.length > 0) ? 
+                    account.folders : 
+                    fallbackFolders;
+                    
+                console.log(`[DEBUG] Using folders for ${account.email}:`, folderList);
+                
                 const accountWithFolders = {
                   id: account.id || index + 1, 
                   name: account.display_name || account.email,
                   email: account.email,
                   color: account.color || 'bg-blue-500',
-                  folders: data.mailboxes || []
+                  folders: folderList
                 };
                 console.log(`[DEBUG] Adding account with ${accountWithFolders.folders.length} folders:`, accountWithFolders.folders);
                 updatedAccounts.push(accountWithFolders);
@@ -245,12 +255,17 @@ export default function CourrierPage() {
               // Fallback to single account if allAccounts is not available
               console.log(`[DEBUG] Fallback to single account: ${data.email}`);
               
+              // Force include some hardcoded folders if none are present
+              const fallbackFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk'];
+              const folderList = (data.mailboxes && data.mailboxes.length > 0) ? 
+                data.mailboxes : fallbackFolders;
+              
               updatedAccounts.push({
                 id: 1,
                 name: data.email,
                 email: data.email,
                 color: 'bg-blue-500',
-                folders: data.mailboxes || []
+                folders: folderList
               });
             }
             
@@ -727,9 +742,9 @@ export default function CourrierPage() {
                 )}
                 
                 {accountsDropdownOpen && (
-                  <div className="space-y-1 pl-2">
+                  <div className="space-y-1 pl-2 accounts-dropdown">
                     {accounts.map(account => (
-                      <div key={account.id} className="relative group">
+                      <div key={account.id} className="relative group account-item">
                         <Button
                           variant="ghost"
                           className="w-full justify-between px-2 py-1.5 text-sm group"
@@ -741,6 +756,21 @@ export default function CourrierPage() {
                               setShowFolders(true);
                             }
                             setSelectedAccount(account);
+                            
+                            // Force the account to have folders if it doesn't already
+                            if (account.id !== 0 && (!account.folders || account.folders.length === 0)) {
+                              const accountWithFolders = {
+                                ...account,
+                                folders: ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk']
+                              };
+                              setSelectedAccount(accountWithFolders);
+                              
+                              // Also update the account in the accounts array
+                              const newAccounts = accounts.map(a => 
+                                a.id === account.id ? accountWithFolders : a
+                              );
+                              setAccounts(newAccounts);
+                            }
                           }}
                         >
                           <div className="flex items-center gap-2">
@@ -756,17 +786,16 @@ export default function CourrierPage() {
                           </div>
                         </Button>
                         
-                        {/* Show folders for this account if it's selected and folders are shown 
+                        {/* Show folders for this account if it's selected and folders are shown */}
-                            OR if it's the first account and no account is selected */}
                         {((selectedAccount?.id === account.id && showFolders) || 
                           (!selectedAccount && account.id !== 0 && account.folders)) && (
-                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
+                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200 folder-container">
                             {account.folders && account.folders.length > 0 ? (
-                              account.folders.map((folder) => (
+                              account.folders.map((folder, folderIndex) => (
                                 <Button
                                   key={folder}
                                   variant="ghost"
-                                  className={`w-full justify-start py-1 px-2 text-xs ${
+                                  className={`w-full justify-start py-1 px-2 text-xs folder-item ${
                                     currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                                   }`}
                                   onClick={(e) => {