courrier multi account

app/courrier/components/DebugView.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+interface Account {
+  id: number | string;
+  name: string;
+  email: string;
+  color: string;
+  folders?: string[];
+}
+
+interface DebugViewProps {
+  accounts: Account[];
+  selectedAccount: Account | null;
+  mailboxes: string[];
+}
+
+export default function DebugView({ accounts, selectedAccount, mailboxes }: DebugViewProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  if (!isOpen) {
+    return (
+      <Button
+        className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-700 text-white z-50"
+        onClick={() => setIsOpen(true)}
+      >
+        Debug
+      </Button>
+    );
+  }
+  
+  return (
+    <div className="fixed inset-0 bg-black/80 z-50 overflow-auto flex flex-col p-4">
+      <div className="bg-white rounded-lg p-4 mb-4 max-w-3xl mx-auto w-full">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold">Debug View</h2>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>Close</Button>
+        </div>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Accounts ({accounts.length})</h3>
+            <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
+              {JSON.stringify(accounts, null, 2)}
+            </pre>
+          </div>
+          
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Selected Account</h3>
+            <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
+              {selectedAccount ? JSON.stringify(selectedAccount, null, 2) : 'None'}
+            </pre>
+          </div>
+        </div>
+        
+        <div className="mt-4">
+          <h3 className="text-lg font-semibold mb-2">Mailboxes ({mailboxes?.length || 0})</h3>
+          <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[150px]">
+            {JSON.stringify(mailboxes, null, 2)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+} 

app/courrier/page.tsx

@@ -72,6 +72,14 @@ interface Account {
   folders?: string[];
 }
 
+interface EmailWithFlags {
+  id: string;
+  read?: boolean;
+  flags?: {
+    seen?: boolean;
+  };
+}
+
 export default function CourrierPage() {
   const router = useRouter();
   const { data: session } = useSession();
@@ -156,8 +164,9 @@ export default function CourrierPage() {
     // Example: counting unread emails in the inbox
     const unreadInInbox = (emails || []).filter(email => {
       // Access the 'read' property safely, handling both old and new email formats
-      return (!email.read && email.read !== undefined) || 
+      const emailWithFlags = email as unknown as EmailWithFlags;
-             (email.flags && !email.flags.seen) || 
+      return (!emailWithFlags.read && emailWithFlags.read !== undefined) || 
+             (emailWithFlags.flags && !emailWithFlags.flags.seen) || 
              false;
     }).filter(email => currentFolder === 'INBOX').length;
     setUnreadCount(unreadInInbox);
@@ -219,7 +228,7 @@ export default function CourrierPage() {
             setPrefetchStarted(Boolean(data.prefetchStarted));
             
             // Update accounts with the default email as fallback
-            const updatedAccounts = [
+            const updatedAccounts: Account[] = [
               { id: 0, name: 'All', email: '', color: 'bg-gray-500' }
             ];
             
@@ -228,15 +237,17 @@ export default function CourrierPage() {
               console.log('Multiple accounts found:', data.allAccounts.length);
               
               // Add each account from the server
-              data.allAccounts.forEach((account, index) => {
+              data.allAccounts.forEach((account: any, index: number) => {
-                console.log(`[DEBUG] Processing account: ${account.email}, display_name: ${account.display_name}, has folders: ${!!data.mailboxes}`);
+                console.log(`[DEBUG] Processing account: ${account.email}, display_name: ${account.display_name}, has folders: ${account.folders ? account.folders.length : 0}`);
                 
                 // 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 : 
+                // Prioritize account-specific folders over global mailboxes
-                  (account.folders && account.folders.length > 0) ? 
+                const folderList = (account.folders && account.folders.length > 0) ? 
-                    account.folders : 
+                  account.folders : 
+                  (data.mailboxes && data.mailboxes.length > 0) ? 
+                    data.mailboxes : 
                     fallbackFolders;
                     
                 console.log(`[DEBUG] Using folders for ${account.email}:`, folderList);
@@ -257,16 +268,19 @@ export default function CourrierPage() {
               
               // Force include some hardcoded folders if none are present
               const fallbackFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Junk'];
+              
+              // Prioritize mailboxes from IMAP if available
               const folderList = (data.mailboxes && data.mailboxes.length > 0) ? 
                 data.mailboxes : fallbackFolders;
               
+              // Create account with mailboxes as folders (using type assertion to avoid TypeScript error)
               updatedAccounts.push({
                 id: 1,
                 name: data.email,
                 email: data.email,
                 color: 'bg-blue-500',
                 folders: folderList
-              });
+              } as Account);
             }
             
             console.log('Setting accounts:', updatedAccounts);