Notification Bell Navbar Block for React

The notifications are the typed ALERTS array at the top of the file (a title, a detail, a read flag and before, how many minutes before the page loaded it arrived), and the panel works on a copy held in the block's state. Replace the array with your data and call your API from the three handlers in Panel (toggle, dismiss and markAll); the counts, the tabs and the status are all derived from the list, so they stay right. The ages count from the moment the page loaded, so in production give each item its real timestamp and compute the minutes from it. Nothing is typed with a date, so an old demo never goes stale.

The bell is a button named after its count ("Notifications, 3 unread"), says whether the panel is open and which panel it controls, and the count chip itself is hidden from screen readers so it isn't read twice. Enter or Space opens the panel, Escape closes it and puts focus back on the bell. Inside, the tabs are a real tab list; each row is a list item with a heading (its title carries "(unread)" or "(read)" for screen readers), and its two buttons name the notification they act on ("Dismiss: A rule ran on your inbox"). A hidden status line speaks the new count after every change ("2 unread", "No unread notifications"). When a row leaves the list (dismissed, or read while the Unread tab is showing) focus moves to the row that takes its place, or to the empty message, so keyboard users never fall back to the top of the page. Opening the panel moves focus to Mark all as read, the first control inside it. Tab also stops on the open tab's panel, which has a focus ring.

Below the md breakpoint the nav and New thread leave the bar: it keeps the wordmark, the bell and a menu button, and nothing wraps at 320 pixels. The bell then opens a drawer from the bottom with the same panel (a grabber, the title, both tabs and the rows); swiping it down, Escape or a tap outside closes it and focus returns to the bell. The menu button opens a sheet from the top with the four links (Inbox tinted as the current page) and New thread. Both bells share one state, so a notification dismissed in the drawer is gone from the panel on a desktop too.

Each row's age is written by Intl.RelativeTimeFormat ("2 min. ago", "1 hr. ago", "yesterday") and recomputed every 30 seconds while the panel is open; it stops when the panel closes. The catalog's Relative Time Text does the same thing for a page of dates, but it shows the date for a frame before the words, which is visible in a panel that mounts on open, so this block writes the words itself on the first render.

Nothing moves on load. The panel fades and grows from the bell, the drawer and the sheet slide in, and a band of light sweeps across New thread on hover and keyboard focus. With reduced motion the panel, the drawer and the sheet appear without animating and the light fades in where it stands. The count never animates.

Yes. To keep the bar in view add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the panel still opens under it. The bell and its count are the Count and the two trigger buttons: copy them into any toolbar, with the Panel they open. The panel is 24 rem wide and its list is 18 rem tall, so a long inbox scrolls inside it instead of growing the popup.