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

---
 components/email.tsx | 46 ++++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/email.tsx b/components/email.tsx
index 9418e65..bd74282 100644
--- a/components/email.tsx
+++ b/components/email.tsx
@@ -34,7 +34,7 @@ export function Email() {
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [mailUrl, setMailUrl] = useState<string | null>(null);
-  const [accounts, setAccounts] = useState<Array<{ id: string; email: string }>>([]);
+  const [accounts, setAccounts] = useState<Array<{ id: string; email: string; color?: string }>>([]);
   const [unreadCount, setUnreadCount] = useState<number>(0);
   const [accountErrors, setAccountErrors] = useState<Record<string, string>>({});
 
@@ -59,7 +59,8 @@ export function Email() {
         if (data.accounts) {
           setAccounts(data.accounts.map((acc: any) => ({
             id: acc.id || acc.email,
-            email: acc.email
+            email: acc.email,
+            color: acc.color || '#0082c9' // Default color if not set
           })));
         }
       }
@@ -128,7 +129,7 @@ export function Email() {
         }))
         // Sort emails by date (most recent first)
         .sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime())
-        .slice(0, 5); // Only show the first 5 emails
+        .slice(0, 33); // Show up to 33 emails
       
       setEmails(transformedEmails);
       setMailUrl('/courrier');
@@ -249,24 +250,31 @@ export function Email() {
             <p className="text-gray-500">Aucun email</p>
           </div>
         ) : (
-          <div className="space-y-3">
-            {emails.map((email) => (
-              <div key={email.id} className="flex items-start gap-3 py-1 border-b border-gray-100 last:border-0">
-                <div className="pt-1">
-                  {email.read ? 
-                    <MailOpen className="h-4 w-4 text-gray-400" /> : 
-                    <Mail className="h-4 w-4 text-blue-500" />
-                  }
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex justify-between">
-                    <p className="font-medium truncate" style={{maxWidth: '180px'}}>{email.fromName || email.from.split('@')[0]}</p>
-                    <p className="text-xs text-gray-500">{formatDate(email.date)}</p>
+          <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
+              const account = accounts.find(acc => acc.id === (email as any).accountId);
+              const accountColor = account?.color || '#0082c9';
+              
+              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"
+                      style={{ backgroundColor: accountColor }}
+                      title={account?.email || 'Unknown account'}
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex justify-between">
+                      <p className="font-medium truncate" style={{maxWidth: '180px'}}>{email.fromName || email.from.split('@')[0]}</p>
+                      <p className="text-xs text-gray-500">{formatDate(email.date)}</p>
+                    </div>
+                    <p className="text-sm text-gray-700 truncate">{email.subject}</p>
                   </div>
-                  <p className="text-sm text-gray-700 truncate">{email.subject}</p>
                 </div>
-              </div>
-            ))}
+              );
+            })}
             
             {mailUrl && (
               <div className="pt-2">