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,
});
const unread = notifications.filter(
(notification) => !notification.dismissed,
);
const timeAgo = (createdAt: string) => {
const date = new Date(createdAt);
@@ -125,18 +121,18 @@ export function NotificationsPopover(params: {
return (
<Popover modal open={open} onOpenChange={setOpen}>
<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'} />
<span
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>
</Button>
</PopoverTrigger>