Refactor notifications count and position

The commit primarily addresses two changes related to the notification component. It removes the unread variable that filtered non-dismissed notifications, hence directly using the total notifications count directly. This is displayed on the button. Also, the position of alerts icon was shifted closer to the edge from right-5, top-5 to right-1, top-1.
This commit is contained in:
giancarlo
2024-05-01 12:38:54 +07:00
parent 9baee90eec
commit ff24c6aa6d

View File

@@ -54,10 +54,6 @@ export function NotificationsPopover(params: {
realtime: params.realtime, realtime: params.realtime,
}); });
const unread = notifications.filter(
(notification) => !notification.dismissed,
);
const timeAgo = (createdAt: string) => { const timeAgo = (createdAt: string) => {
const date = new Date(createdAt); const date = new Date(createdAt);
@@ -125,18 +121,18 @@ export function NotificationsPopover(params: {
return ( return (
<Popover modal open={open} onOpenChange={setOpen}> <Popover modal open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button className={'h-9 w-9'} variant={'ghost'}> <Button className={'relative h-9 w-9'} variant={'ghost'}>
<Bell className={'min-h-4 min-w-4'} /> <Bell className={'min-h-4 min-w-4'} />
<span <span
className={cn( className={cn(
`fade-in animate-in zoom-in absolute right-5 top-5 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`, `fade-in animate-in zoom-in absolute right-1 top-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
{ {
hidden: !unread.length, hidden: !notifications.length,
}, },
)} )}
> >
{unread.length} {notifications.length}
</span> </span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>