@checkstack/notification-frontend 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @checkstack/notification-frontend
 
+## 0.2.7
+
+### Patch Changes
+
+- Updated dependencies [8a87cd4]
+  - @checkstack/common@0.5.0
+  - @checkstack/auth-frontend@0.5.2
+  - @checkstack/frontend-api@0.3.2
+  - @checkstack/notification-common@0.2.2
+  - @checkstack/ui@0.3.1
+  - @checkstack/signal-frontend@0.0.9
+
+## 0.2.6
+
+### Patch Changes
+
+- 5ac15df: Fixed notification count badge not updating correctly when notifications are marked as read.
+
+  **Root Cause:** When the `NOTIFICATION_READ` signal was received, `signalUnreadCount` state was `undefined` (only set from signals, not initial query data), so it incorrectly defaulted to `1` instead of the actual count from the query. This caused the count to jump to `0` after the first mark-as-read.
+
+  **Fix:** Now uses `unreadData?.count` as the fallback value when decrementing the count in the signal handler.
+
 ## 0.2.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/NotificationBell.tsx

@@ -53,7 +53,7 @@ export const NotificationBell = () => {
       {
         enabled: !!session && isOpen,
         staleTime: 30_000,
-      }
+      },
     );
 
   // Mark all as read mutation
@@ -88,7 +88,7 @@ export const NotificationBell = () => {
         },
         ...(prev ?? []).slice(0, 4), // Keep only 5 items
       ]);
-    }, [])
+    }, []),
   );
 
   // Handle count changes from other sources
@@ -96,25 +96,31 @@ export const NotificationBell = () => {
     NOTIFICATION_COUNT_CHANGED,
     useCallback((payload) => {
       setSignalUnreadCount(payload.unreadCount);
-    }, [])
+    }, []),
   );
 
   // Handle notification marked as read
   useSignal(
     NOTIFICATION_READ,
-    useCallback((payload) => {
-      if (payload.notificationId) {
-        // Single notification marked as read - remove from list
-        setSignalNotifications((prev) =>
-          (prev ?? []).filter((n) => n.id !== payload.notificationId)
-        );
-        setSignalUnreadCount((prev) => Math.max(0, (prev ?? 1) - 1));
-      } else {
-        // All marked as read - clear the list
-        setSignalNotifications([]);
-        setSignalUnreadCount(0);
-      }
-    }, [])
+    useCallback(
+      (payload) => {
+        if (payload.notificationId) {
+          // Single notification marked as read - remove from list
+          setSignalNotifications((prev) =>
+            (prev ?? []).filter((n) => n.id !== payload.notificationId),
+          );
+          // Use unreadData?.count as fallback when signalUnreadCount hasn't been set yet
+          setSignalUnreadCount((prev) =>
+            Math.max(0, (prev ?? unreadData?.count ?? 1) - 1),
+          );
+        } else {
+          // All marked as read - clear the list
+          setSignalNotifications([]);
+          setSignalUnreadCount(0);
+        }
+      },
+      [unreadData?.count],
+    ),
   );
 
   // ==========================================================================
@@ -208,8 +214,8 @@ export const NotificationBell = () => {
                     notification.importance === "critical"
                       ? "border-l-2 border-l-destructive"
                       : notification.importance === "warning"
-                      ? "border-l-2 border-l-warning"
-                      : ""
+                        ? "border-l-2 border-l-warning"
+                        : ""
                   }`}
                 >
                   <div
@@ -217,8 +223,8 @@ export const NotificationBell = () => {
                       notification.importance === "critical"
                         ? "text-destructive"
                         : notification.importance === "warning"
-                        ? "text-warning"
-                        : "text-foreground"
+                          ? "text-warning"
+                          : "text-foreground"
                     }`}
                   >
                     {notification.title}