48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* NotificationBell — header affordance for signed-in users. Links to the
|
|
* /notifications page and shows a dot when there are unread items. The
|
|
* unread count is fetched once on mount (good enough until websocket/push
|
|
* delivery lands); visiting the page marks everything read.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { Bell } from "lucide-react";
|
|
import { notifications } from "@/lib/social";
|
|
|
|
export function NotificationBell() {
|
|
const [unread, setUnread] = useState(0);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
notifications
|
|
.unreadCount()
|
|
.then((r) => {
|
|
if (!cancelled) setUnread(r?.count ?? 0);
|
|
})
|
|
.catch(() => {
|
|
/* badge is non-critical — ignore */
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Link
|
|
href="/notifications"
|
|
aria-label={
|
|
unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
|
|
}
|
|
className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Bell className="size-5" />
|
|
{unread > 0 ? (
|
|
<span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
|
|
) : null}
|
|
</Link>
|
|
);
|
|
}
|