From dcb3e1fe9ac12a98f7411e6966dd4c858cbc5611 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Fri, 16 Jan 2026 00:24:41 +0100
Subject: [PATCH]  refactor Notifications

---
 components/notification-badge-enhanced.tsx | 33 ++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/notification-badge-enhanced.tsx b/components/notification-badge-enhanced.tsx
index d00834a..4e8b266 100644
--- a/components/notification-badge-enhanced.tsx
+++ b/components/notification-badge-enhanced.tsx
@@ -117,14 +117,14 @@ export const NotificationBadge = memo(function NotificationBadge({ className }:
           </div>
           
           {/* Filters and Sort */}
-          <div className="p-3 border-b bg-gray-50/50 space-y-2">
+          <div className="p-3 border-b bg-white space-y-2">
             <div className="flex items-center gap-2">
               <Filter className="h-4 w-4 text-muted-foreground" />
               <Select value={filterBy} onValueChange={(v) => setFilterBy(v as FilterOption)}>
-                <SelectTrigger className="h-8 text-xs flex-1">
+                <SelectTrigger className="h-8 text-xs flex-1 bg-white border-gray-200">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent className="bg-white">
                   <SelectItem value="all">Toutes les sources</SelectItem>
                   <SelectItem value="email">Courrier</SelectItem>
                   <SelectItem value="rocketchat">Parole</SelectItem>
@@ -133,10 +133,10 @@ export const NotificationBadge = memo(function NotificationBadge({ className }:
                 </SelectContent>
               </Select>
               <Select value={sortBy} onValueChange={(v) => setSortBy(v as SortOption)}>
-                <SelectTrigger className="h-8 w-24 text-xs">
+                <SelectTrigger className="h-8 w-24 text-xs bg-white border-gray-200">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent className="bg-white">
                   <SelectItem value="newest">Plus récent</SelectItem>
                   <SelectItem value="oldest">Plus ancien</SelectItem>
                 </SelectContent>
@@ -176,8 +176,16 @@ export const NotificationBadge = memo(function NotificationBadge({ className }:
                 {sortedAndFilteredNotifications.map((notification) => (
                   <DropdownMenuItem 
                     key={notification.id} 
-                    className="px-4 py-3 cursor-default hover:bg-gray-50"
-                    onSelect={(e) => e.preventDefault()}
+                    className="px-4 py-3 cursor-pointer hover:bg-gray-50"
+                    onSelect={async (e) => {
+                      e.preventDefault();
+                      // Si on clique sur la notification elle-même et qu'elle a un lien, ouvrir et marquer comme lu
+                      if (notification.link && !notification.isRead) {
+                        await markAsRead(notification.id);
+                        window.location.href = notification.link;
+                        setIsOpen(false);
+                      }
+                    }}
                   >
                     <div className="w-full">
                       <div className="flex items-start justify-between gap-2">
@@ -238,7 +246,16 @@ export const NotificationBadge = memo(function NotificationBadge({ className }:
                             </Button>
                           )}
                           {notification.link && (
-                            <Link href={notification.link} onClick={() => setIsOpen(false)}>
+                            <Link 
+                              href={notification.link} 
+                              onClick={async () => {
+                                // Marquer comme lu automatiquement quand on ouvre
+                                if (!notification.isRead) {
+                                  await markAsRead(notification.id);
+                                }
+                                setIsOpen(false);
+                              }}
+                            >
                               <Button variant="ghost" size="sm" className="h-6 w-6 p-0" title="Ouvrir">
                                 <ExternalLink className="h-3.5 w-3.5" />
                               </Button>