From e3a4c4f564a49ba750ba2630b92798ea7b32c294 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Fri, 7 Mar 2025 02:04:03 +0000
Subject: [PATCH] Update ChatNotifications.tsx

---
 components/dashboard/ChatNotifications.tsx | 95 +++++++++++-----------
 1 file changed, 49 insertions(+), 46 deletions(-)

diff --git a/components/dashboard/ChatNotifications.tsx b/components/dashboard/ChatNotifications.tsx
index 0b107c5..8897dca 100644
--- a/components/dashboard/ChatNotifications.tsx
+++ b/components/dashboard/ChatNotifications.tsx
@@ -160,61 +160,64 @@ export default function ChatNotifications() {
     router.push(`/dashboard/chats/${chatId}`);
   };
   
-  if (loading || unreadCounts.totalUnread === 0) {
-    return (
-      <Button variant="ghost" size="icon" className="relative" disabled={loading}>
-        <Bell className="h-5 w-5" />
-      </Button>
-    );
-  }
-  
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="relative">
+        <Button variant="ghost" size="icon" className="relative" disabled={loading}>
           <Bell className="h-5 w-5" />
-          <Badge 
-            variant="destructive" 
-            className="absolute -top-1 -right-1 px-1.5 py-0.5 text-xs"
-          >
-            {unreadCounts.totalUnread}
-          </Badge>
+          {unreadCounts.totalUnread > 0 && (
+            <Badge 
+              variant="destructive" 
+              className="absolute -top-1 -right-1 px-1.5 py-0.5 text-xs"
+            >
+              {unreadCounts.totalUnread}
+            </Badge>
+          )}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-72">
         <div className="p-2 border-b">
-          <h3 className="font-medium">Unread Messages</h3>
-        </div>
-        <div className="max-h-80 overflow-y-auto">
-          {Object.entries(unreadCounts.chatCounts).map(([chatId, count]) => (
-            <DropdownMenuItem 
-              key={chatId} 
-              className="p-3 cursor-pointer"
-              onClick={() => handleChatClick(chatId)}
-            >
-              <div className="flex items-center justify-between w-full">
-                <div>
-                  <p className="font-medium">
-                    Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    {count} new {count === 1 ? 'message' : 'messages'}
-                  </p>
-                </div>
-                <Badge variant="destructive">{count}</Badge>
-              </div>
-            </DropdownMenuItem>
-          ))}
-        </div>
-        <div className="p-2 border-t">
-          <Button 
-            variant="outline" 
-            className="w-full"
-            onClick={() => router.push('/dashboard/chats')}
-          >
-            View All Chats
-          </Button>
+          <h3 className="font-medium">Messages</h3>
         </div>
+        
+        {unreadCounts.totalUnread === 0 ? (
+          <div className="p-4 flex items-center justify-center">
+            <p className="text-sm text-muted-foreground">No new notifications</p>
+          </div>
+        ) : (
+          <>
+            <div className="max-h-80 overflow-y-auto">
+              {Object.entries(unreadCounts.chatCounts).map(([chatId, count]) => (
+                <DropdownMenuItem 
+                  key={chatId} 
+                  className="p-3 cursor-pointer"
+                  onClick={() => handleChatClick(chatId)}
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <div>
+                      <p className="font-medium">
+                        Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {count} new {count === 1 ? 'message' : 'messages'}
+                      </p>
+                    </div>
+                    <Badge variant="destructive">{count}</Badge>
+                  </div>
+                </DropdownMenuItem>
+              ))}
+            </div>
+            <div className="p-2 border-t">
+              <Button 
+                variant="outline" 
+                className="w-full"
+                onClick={() => router.push('/dashboard/chats')}
+              >
+                View All Chats
+              </Button>
+            </div>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );