widget courrier refactor

components/email.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { useSession } from "next-auth/react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -37,6 +37,11 @@ export function Email() {
   const [accounts, setAccounts] = useState<Array<{ id: string; email: string; color?: string }>>([]);
   const [unreadCount, setUnreadCount] = useState<number>(0);
   const [accountErrors, setAccountErrors] = useState<Record<string, string>>({});
+  
+  // Create a map for quick account lookup by ID (recalculated when accounts change)
+  const accountMap = useMemo(() => {
+    return new Map(accounts.map(acc => [acc.id, acc]));
+  }, [accounts]);
 
   useEffect(() => {
     if (status === 'authenticated') {
@@ -57,11 +62,17 @@ export function Email() {
       if (response.ok) {
         const data = await response.json();
         if (data.accounts) {
-          setAccounts(data.accounts.map((acc: any) => ({
+          const loadedAccounts = data.accounts.map((acc: any) => ({
             id: acc.id || acc.email,
             email: acc.email,
             color: acc.color || '#0082c9' // Default color if not set
+          }));
+          console.log('[Email Widget] Loaded accounts:', loadedAccounts.map(acc => ({
+            id: acc.id,
+            email: acc.email,
+            color: acc.color
           })));
+          setAccounts(loadedAccounts);
         }
       }
     } catch (err) {
@@ -99,7 +110,8 @@ export function Email() {
           // Add accountId to each email for proper identification
           return data.emails.map((email: any) => ({
             ...email,
-            accountId: account.id
+            accountId: account.id,
+            _accountEmail: account.email // Debug: store account email for verification
           }));
         } catch (err) {
           const errorMsg = `Error fetching emails for ${account.email}: ${err instanceof Error ? err.message : 'Unknown error'}`;
@@ -125,12 +137,20 @@ export function Email() {
           read: email.flags.seen,
           starred: email.flags.flagged,
           folder: email.folder,
-          accountId: email.accountId
+          accountId: email.accountId,
+          _accountEmail: email._accountEmail // Keep for debugging
         }))
         // Sort emails by date (most recent first)
         .sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime())
         .slice(0, 33); // Show up to 33 emails
       
+      console.log('[Email Widget] Transformed emails with accountIds:', transformedEmails.map(e => ({
+        id: e.id,
+        subject: e.subject,
+        accountId: (e as any).accountId,
+        accountEmail: (e as any)._accountEmail
+      })));
+      
       setEmails(transformedEmails);
       setMailUrl('/courrier');
 
@@ -252,17 +272,28 @@ export function Email() {
         ) : (
           <div className="space-y-3 max-h-[500px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
             {emails.map((email) => {
-              // Find the account color for this email
+              // Find the account color for this email using the accountId
-              const account = accounts.find(acc => acc.id === (email as any).accountId);
+              const emailAccountId = (email as any).accountId;
+              const account = emailAccountId ? accountMap.get(emailAccountId) : null;
               const accountColor = account?.color || '#0082c9';
               
+              // Debug log to verify account matching
+              if (!account && emailAccountId) {
+                console.warn('[Email Widget] Account not found for email', {
+                  emailId: email.id,
+                  accountId: emailAccountId,
+                  availableAccountIds: Array.from(accountMap.keys()),
+                  accountEmail: (email as any)._accountEmail
+                });
+              }
+              
               return (
                 <div key={email.id} className="flex items-start gap-3 py-1 border-b border-gray-100 last:border-0">
                   <div className="pt-1 flex-shrink-0">
                     <div 
-                      className="w-3 h-3 rounded-full"
+                      className="w-3 h-3 rounded-full border border-gray-300"
                       style={{ backgroundColor: accountColor }}
-                      title={account?.email || 'Unknown account'}
+                      title={account?.email || (email as any)._accountEmail || `Account ID: ${emailAccountId || 'unknown'}`}
                     />
                   </div>
                   <div className="flex-1 min-w-0">