Update ChatNotifications.tsx

components/dashboard/ChatNotifications.tsx

@@ -160,31 +160,32 @@ 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" />
+          {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>
+          <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 
@@ -215,6 +216,8 @@ export default function ChatNotifications() {
                 View All Chats
               </Button>
             </div>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );