Notification center · inbox
A bell with the unread count that opens an inbox: tabs by category, Today and Earlier, live relative times, mark as read, slide-away dismiss, actions inside a notification, an all-caught-up state — and a ring when something new arrives.
Open the bell · tabs · mark as read · dismiss (it slides away) · actions inside · a new one rings the bell
Usage
import { signal } from "./index.js";import { NotificationCenter } from "./components/notifications.js"; const inbox = signal([ { id: 1, title: "Ada mentioned you", body: "…", time: new Date(), category: "Mentions", avatar: { name: "Ada Lovelace" } }, { id: 2, title: "Grace invited you", time: new Date(), actions: [{ label: "Accept", primary: true, onClick: accept }] },]);NotificationCenter({ items: inbox, onOpen: (n) => navigate(n.href), onSettings: openSettings })inbox.update((l) => [{ id: 3, title: "Build passed", icon: "✓", tone: "success", time: new Date() }, ...l]); // rings// tabs: All · Unread · the categories in use; ↑ ↓ Enter · Delete dismisses · Esc closes