Bug/notifications fixes

src/cloud/components/organisms/EventSource.tsx

@@ -449,6 +449,7 @@ const EventSource = ({ teamId }: EventSourceProps) => {
             smartFolderDeleteHandler(event)
             break
           case 'notificationCreated':
+          case 'notificationViewed':
             notificationsEventListener(event)
             break
         }

src/cloud/interfaces/db/appEvents.ts

@@ -34,6 +34,7 @@ export type SseEventType =
   | 'smartFolderUpdate'
   | 'smartFolderDelete'
   | 'notificationCreated'
+  | 'notificationViewed'
 
 export interface SerializableAppEventProps {
   id: string

src/components/organisms/AppNavigator.tsx

@@ -104,8 +104,9 @@ const TopLevelNavigator = () => {
   }, [])
 
   useEffect(() => {
-    const handler = (event: CustomEvent<Record<string, number>>) =>
+    const handler = (event: CustomEvent<Record<string, number>>) => {
       setNotificationCounts(event.detail)
+    }
     boosthubNotificationCountsEventEmitter.listen(handler)
     return () => boosthubNotificationCountsEventEmitter.unlisten(handler)
   }, [])
@@ -300,6 +301,7 @@ const TopLevelNavigator = () => {
         : null
 
     if (boosthubTeam != null) {
+      const notificationCount = notificationCounts[boosthubTeam.id] || 0
       const rows: SidebarToolbarRow[] = [
         {
           tooltip: 'Spaces',
@@ -335,7 +337,7 @@ const TopLevelNavigator = () => {
         {
           tooltip: 'Notifications',
           icon:
-            notificationCounts[boosthubTeam.id] != null ? (
+            notificationCount > 0 ? (
               <NotifyIcon
                 size={26}
                 count={notificationCounts[boosthubTeam.id]}

src/shared/components/organisms/Sidebar/molecules/SidebarSpaces.tsx

@@ -87,7 +87,7 @@ const SidebarSpace = ({
       <RoundedImage url={row.icon} alt={row.label} size={30} />
     </div>
     <span className='sidebar__spaces__label'>{row.label}</span>
-    {row.notificationCount != null && (
+    {row.notificationCount != null && row.notificationCount > 0 && (
       <div className='sidebar__spaces__notifications'>
         {row.notificationCount}
       </div>

src/shared/lib/stores/notifications/index.ts

@@ -135,11 +135,6 @@ function useNotificationStore() {
           cacheRef.current,
           observersRef.current
         )
-        setCounts((prev) => {
-          return {
-            [updated.team]: Math.max(0, (prev[updated.team] || 1) - 1),
-          }
-        })
       } catch (error) {
         pushApiErrorMessage(error)
       }
@@ -167,6 +162,29 @@ function useNotificationStore() {
               [event.data.teamId]: (prev[event.data.teamId] || 0) + 1,
             }
           })
+          break
+        }
+        case 'notificationViewed': {
+          if (cacheRef.current.has(event.data.teamId)) {
+            const notification = await getNotification(
+              event.data.notificationId
+            )
+            insertNotifications(
+              { [notification.team]: [notification] },
+              cacheRef.current,
+              observersRef.current
+            )
+          }
+          setCounts((prev) => {
+            return {
+              ...prev,
+              [event.data.teamId]: Math.max(
+                0,
+                (prev[event.data.teamId] || 0) - 1
+              ),
+            }
+          })
+          break
         }
       }
     },