From d1a8b3f350d782d5ccd7e06bae4cefeebbc726a9 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 30 Apr 2025 15:49:14 +0200
Subject: [PATCH] courrier formatting

---
 components/email/EmailListItem.tsx | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/email/EmailListItem.tsx b/components/email/EmailListItem.tsx
index 81fcd411..7ac9ba5e 100644
--- a/components/email/EmailListItem.tsx
+++ b/components/email/EmailListItem.tsx
@@ -125,32 +125,42 @@ export default function EmailListItem({
       className={cn(
         'flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer',
         isActive ? 'bg-blue-50/50' : '',
-        !email.read ? 'bg-blue-50/20' : ''
+        !email.flags?.seen ? 'bg-blue-50/20' : ''
       )}
       onClick={onSelect}
     >
-      <Checkbox 
-        checked={isSelected}
-        onClick={onToggleSelect}
-        className="mt-0.5"
-      />
+      <div 
+        className="flex-shrink-0 pr-2" 
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <Checkbox 
+          checked={isSelected}
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleSelect(e);
+          }}
+          className="mt-0.5"
+        />
+      </div>
       
       <div className="flex-1 min-w-0">
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2 min-w-0">
-            <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
+            <span className={`text-sm truncate ${!email.flags?.seen ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
               {getSenderName()}
             </span>
           </div>
           <div className="flex items-center gap-2 flex-shrink-0">
             <span className="text-xs text-gray-500 whitespace-nowrap">
-              {formatDate(email.date)}
+              {formatDate(email.date.toString())}
             </span>
             <button
               className="h-6 w-6 text-gray-400 hover:text-yellow-400"
               onClick={onToggleStarred}
             >
-              <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+              <Star className={`h-4 w-4 ${email.flags?.flagged ? 'fill-yellow-400 text-yellow-400' : ''}`} />
             </button>
           </div>
         </div>