From ff24c6aa6dbeca4e6b2f563ae245e070ff5f1cbd Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Wed, 1 May 2024 12:38:54 +0700
Subject: [PATCH] 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.
---
 .../src/components/notifications-popover.tsx         | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/features/notifications/src/components/notifications-popover.tsx b/packages/features/notifications/src/components/notifications-popover.tsx
index bacd4cce0..875f2e74c 100644
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -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>