fix(notifications): dismiss bell badge when dropdown opens

Hide the unread count badge after the user opens notifications, and show it again only when new unread items arrive.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/Layouts/header/notification/index.tsx

@@ -17,14 +17,16 @@ import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistor
 import { cn, sanitizeHtmlWithStyles } from "@/lib/utils";
 import { capitalize, unixToDate } from "@/utils/shared";
 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { BellIcon } from "./icons";
 import NotificationList from "./notification-list";
 
 export function Notification() {
   const [isOpen, setIsOpen] = useState(false);
+  const [isBadgeVisible, setIsBadgeVisible] = useState(true);
   const [unreadNotificationCount, setUnreadNotificationCount] =
     useState<number>(0);
+  const previousUnreadCountRef = useRef(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentNotification, setCurrentNotification] =
     useState<TNotificationDetailsResponse | null>(null);
@@ -36,7 +38,14 @@ export function Notification() {
   const { user } = useUser();
 
   useEffect(() => {
-    setUnreadNotificationCount(unreadNotifications?.data.length ?? 0);
+    const count = unreadNotifications?.data.length ?? 0;
+    setUnreadNotificationCount(count);
+
+    if (count > previousUnreadCountRef.current) {
+      setIsBadgeVisible(true);
+    }
+
+    previousUnreadCountRef.current = count;
   }, [unreadNotifications]);
 
   const notificationHistoryHref = useMemo(() => {
@@ -56,14 +65,20 @@ export function Notification() {
 
   return (
     <>
-      <Dropdown isOpen={isOpen} setIsOpen={setIsOpen}>
+      <Dropdown
+        isOpen={isOpen}
+        setIsOpen={(open) => {
+          setIsOpen(open);
+          if (open) setIsBadgeVisible(false);
+        }}
+      >
         <DropdownTrigger
           className="shadow-theme-xs grid size-12 place-items-center rounded-full border border-stroke/70 bg-white/75 text-dark outline-none backdrop-blur-md transition-colors hover:text-primary focus-visible:border-primary focus-visible:text-primary dark:border-dark-3 dark:bg-dark-2/75 dark:text-white dark:focus-visible:border-primary"
           aria-label="View Notifications"
         >
           <span className="relative">
             <BellIcon />
-            {unreadNotificationCount > 0 && (
+            {isBadgeVisible && unreadNotificationCount > 0 && (
               <span
                 className={cn(
                   "absolute -right-1.5 -top-1.5 z-1 grid min-w-[18px] place-items-center rounded-full bg-gradient-to-br from-rose-500 to-red-600 px-1 text-[10px] font-bold leading-none text-white shadow-[0_2px_8px_rgba(239,68,68,0.55)] ring-2 ring-white dark:ring-dark-2",