g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ChatNotifications.tsx

Browse Source
This commit is contained in:
NotII
2025-03-07 02:04:03 +00:00
parent 7b8e034ae4
commit e3a4c4f564
1 changed files with 49 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
components/dashboard/ChatNotifications.tsx
View File

@@ -160,61 +160,64 @@ export default function ChatNotifications() {
router.push(`/dashboard/chats/${chatId}`); 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 ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="relative"> <Button variant="ghost" size="icon" className="relative" disabled={loading}>
<Bell className="h-5 w-5" /> <Bell className="h-5 w-5" />
<Badge {unreadCounts.totalUnread > 0 && (
variant="destructive" <Badge
className="absolute -top-1 -right-1 px-1.5 py-0.5 text-xs" variant="destructive"
> className="absolute -top-1 -right-1 px-1.5 py-0.5 text-xs"
{unreadCounts.totalUnread} >
</Badge> {unreadCounts.totalUnread}
</Badge>
)}
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-72"> <DropdownMenuContent align="end" className="w-72">
<div className="p-2 border-b"> <div className="p-2 border-b">
<h3 className="font-medium">Unread Messages</h3> <h3 className="font-medium">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>
</div> </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> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );