Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-11 17:55:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve unread count badge

Browse source
This commit is contained in:
Pas 2025-08-03 13:01:56 -06:00
parent ac626098e4
commit 820f998f53
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/layout/Navigation.tsx
View file

@ -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">

12
src/components/overlays/notificationsModal/hooks/useNotifications.ts
View file

@ -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;
}