39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* The unread badge on a nav entry.
|
|
*
|
|
* Counts threads waiting on you, not messages: one busy group shouldn't read
|
|
* as twenty things needing attention. Muted threads are excluded server-side,
|
|
* so muting a noisy group clears the badge while its unread count stays
|
|
* visible in the inbox.
|
|
*
|
|
* Wraps its icon rather than being positioned by each caller, so the sidebar
|
|
* and bottom bar can't drift apart.
|
|
*/
|
|
|
|
import { useNotifications } from "@/components/notifications/notifications-provider";
|
|
|
|
export function NavUnreadBadge({ children }: { children: React.ReactNode }) {
|
|
const { chatUnread } = useNotifications();
|
|
if (chatUnread <= 0) return <>{children}</>;
|
|
|
|
return (
|
|
<span className="relative inline-flex">
|
|
{children}
|
|
<span
|
|
// Announced through the link's aria-label instead; this is decoration.
|
|
aria-hidden
|
|
className="absolute -right-1.5 -top-1 min-w-4 rounded-full bg-primary px-1 text-center text-[10px] font-semibold leading-4 text-white ring-2 ring-background"
|
|
>
|
|
{chatUnread > 9 ? "9+" : chatUnread}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** The count, for callers that need it in an accessible name. */
|
|
export function useChatUnread(): number {
|
|
return useNotifications().chatUnread;
|
|
}
|