From 2df21f5d44bae21021bb55b8ae76a41bdd2501fd Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Thu, 15 Jan 2026 23:47:35 +0100
Subject: [PATCH] widget courrier refactor

---
 components/email.tsx | 58 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/components/email.tsx b/components/email.tsx
index 9379d62..e870834 100644
--- a/components/email.tsx
+++ b/components/email.tsx
@@ -62,12 +62,26 @@ export function Email() {
       if (response.ok) {
         const data = await response.json();
         if (data.accounts) {
-          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 => ({
+          const loadedAccounts = data.accounts.map((acc: any) => {
+            // If no color is set, generate a consistent color based on account ID
+            let accountColor = acc.color;
+            if (!accountColor && acc.id) {
+              // Generate a color hash from accountId
+              let hash = 0;
+              for (let i = 0; i < acc.id.length; i++) {
+                hash = acc.id.charCodeAt(i) + ((hash << 5) - hash);
+              }
+              const hue = Math.abs(hash % 360);
+              accountColor = `hsl(${hue}, 70%, 50%)`;
+            }
+            
+            return {
+              id: acc.id || acc.email,
+              email: acc.email,
+              color: accountColor || '#0082c9' // Fallback default color
+            };
+          });
+          console.log('[Email Widget] Loaded accounts with colors:', loadedAccounts.map(acc => ({
             id: acc.id,
             email: acc.email,
             color: acc.color
@@ -271,19 +285,35 @@ export function Email() {
           </div>
         ) : (
           <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) => {
+            {emails.map((email, index) => {
               // Find the account color for this email using the accountId
               const emailAccountId = (email as any).accountId;
               const account = emailAccountId ? accountMap.get(emailAccountId) : null;
-              const accountColor = account?.color || '#0082c9';
+              // Use account color, or generate a color based on accountId if not found
+              let accountColor = account?.color || '#0082c9';
               
-              // Debug log to verify account matching
-              if (!account && emailAccountId) {
-                console.warn('[Email Widget] Account not found for email', {
+              // If no color is set, generate a consistent color based on accountId
+              if (!account?.color && emailAccountId) {
+                // Generate a color hash from accountId
+                let hash = 0;
+                for (let i = 0; i < emailAccountId.length; i++) {
+                  hash = emailAccountId.charCodeAt(i) + ((hash << 5) - hash);
+                }
+                const hue = Math.abs(hash % 360);
+                accountColor = `hsl(${hue}, 70%, 50%)`;
+              }
+              
+              // Debug log for first few emails
+              if (index < 3) {
+                console.log('[Email Widget] Email account mapping', {
                   emailId: email.id,
-                  accountId: emailAccountId,
-                  availableAccountIds: Array.from(accountMap.keys()),
-                  accountEmail: (email as any)._accountEmail
+                  emailAccountId,
+                  accountFound: !!account,
+                  accountEmail: account?.email,
+                  accountColor: account?.color,
+                  finalColor: accountColor,
+                  allAccountIds: Array.from(accountMap.keys()),
+                  allAccounts: Array.from(accountMap.values()).map(a => ({ id: a.id, email: a.email, color: a.color }))
                 });
               }