From 820f998f53cdf531ed098baea56bc5baecf9eede Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 3 Aug 2025 13:01:56 -0600
Subject: [PATCH] improve unread count badge

---
 src/components/layout/Navigation.tsx              | 15 ++++++++++-----
 .../notificationsModal/hooks/useNotifications.ts  | 12 +++++++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index f7024fdf..d2520a72 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -190,11 +190,16 @@ export function Navigation(props: NavigationProps) {
                 className="text-xl text-white tabbable rounded-full backdrop-blur-lg relative"
               >
                 <IconPatch icon={Icons.BELL} clickable downsized navigation />
-                {getUnreadCount() > 0 && (
-                  <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                    {getUnreadCount()}
-                  </span>
-                )}
+                {(() => {
+                  const count = getUnreadCount();
+                  const shouldShow =
+                    typeof count === "number" ? count > 0 : count === "99+";
+                  return shouldShow ? (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center">
+                      {count}
+                    </span>
+                  ) : null;
+                })()}
               </a>
             </div>
             <div className="relative pointer-events-auto">
diff --git a/src/components/overlays/notificationsModal/hooks/useNotifications.ts b/src/components/overlays/notificationsModal/hooks/useNotifications.ts
index a74a76ae..e977ec43 100644
--- a/src/components/overlays/notificationsModal/hooks/useNotifications.ts
+++ b/src/components/overlays/notificationsModal/hooks/useNotifications.ts
@@ -118,14 +118,20 @@ export function useNotifications() {
   const getUnreadCount = () => {
     try {
       const savedRead = localStorage.getItem("read-notifications");
-      if (!savedRead) return notifications.length;
+      if (!savedRead) {
+        const count = notifications.length;
+        return count > 99 ? "99+" : count;
+      }
 
       const readArray = JSON.parse(savedRead);
       const readSet = new Set(readArray);
 
       // Get the actual count from the notifications state
-      return notifications.filter((n: NotificationItem) => !readSet.has(n.guid))
-        .length;
+      const count = notifications.filter(
+        (n: NotificationItem) => !readSet.has(n.guid),
+      ).length;
+
+      return count > 99 ? "99+" : count;
     } catch {
       return 0;
     }