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"
>
- {getUnreadCount() > 0 && (
-
- {getUnreadCount()}
-
- )}
+ {(() => {
+ const count = getUnreadCount();
+ const shouldShow =
+ typeof count === "number" ? count > 0 : count === "99+";
+ return shouldShow ? (
+
+ {count}
+
+ ) : null;
+ })()}
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;
}