Bell Dropdown Notification Block for React

So you can see it without a click. On load the list is a copy drawn in place under the bell: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Pressing the bell opens the real Popover with the same BellBody and the block's state, so what you marked read in place is read in the real one, and the copy stays closed until a reload. In your app keep the Popover and drop the copy: the "in-place" state, its dialog and the Escape effect. The popover is not modal by default and opens under the bell, aligned to its end.

Read state lives in the block and resets on reload: nothing is saved, and "See all notifications" only says it leads to a page of your own. To make it real, replace NOTES with your API's list, send the id from open to your server when a row is pressed (and the ids from markAll), and make See all a link to your notifications page. The count is worked out from the list, so it follows whatever you load.

The unread count is worked out from NOTES and what has been read, never typed. The badge is hidden from a screen reader; the bell's own name carries the same fact ("Notifications, 3 unread", or "Notifications, nothing unread"), so it is read the way it looks. From 100 unread the badge says "99+" (shownOf), and the name keeps the real number. A dot and a heavier title mark an unread row, and a screen reader hears "Unread" before its title.

Yes. The bell is a button, each row's title is a button that marks it read, and Mark all read and See all notifications are buttons. In the real popover Escape closes it and returns focus to the bell, and focus moves into the list when it opens. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the bell. One polite status message says what each press did.

Edit NOTES at the top of the file. Each has an id, a kind (message, deal, task, assign or import, which picks the icon), a title, a desc, an ISO at time and whether it was unread. Times are shown against AS_OF: today as a clock time, yesterday as a word, older as a weekday and date, so the preview reads the same every day.

The list hangs from the bell at the end of the top bar and is as wide as the page minus a margin; the avatar in the bar goes away to make room, and each row keeps one height with its title on up to two lines. The real popover is as wide as the screen minus a margin.