Tabbed Inbox Notification Block for React

Edit NOTES at the top of the file. Each has an id, a kind (mention, alert or update, which picks the tab and the icon), a title, one line of desc, an ISO at time and whether it was unread when the page opened. TABS lists the tabs, and a note shows in a tab when its kind matches (All shows every kind). Every count, the status line and the empty state are worked out from those, so nothing is typed twice. Times are written in UTC and shown against AS_OF: today as a clock time, yesterday as a word, older as a weekday and date, so the page reads the same on the server and in every time zone.

Read and cleared state live in the page and reset on reload; nothing is sent. To make it real, load the notifications from your API and keep read and cleared as server state. Send the ids from the title press, the Mark all read and the Clear handlers (the list the handler already builds is the one to send), and have Undo send the reverse. Pressing a title would normally open what it points to; here it only marks the row read, and says so.

It works on the open tab only, and the status line says which: "4 marked read in Mentions". Because the Mentions rows are also in All, All's count drops by the same number, and the other tab's chip is worked out again from the same list. With nothing unread in the open tab the button stays in place (it is marked unavailable rather than disabled, so it keeps focus) and answers "Nothing unread in Mentions".

Clear hides every notification in the open tab and shows an empty state in the same height as the list, with the number cleared and an Undo button. Undo brings back exactly those rows, with the read or unread state each had, and moves focus to the first row. Clearing from All and then opening Mentions shows that tab empty too, since its rows were cleared. Nothing is deleted anywhere.

The tabs are real tabs: Arrow keys move along them and the selection follows, Tab moves on to the panel (which scrolls by keyboard), and each trigger says how many are unread ("Mentions 2 unread"). Every row's title is a button named by its text, with "Unread" spoken first when it applies, so state never depends on the dot or the weight alone. The status line is a polite live region that is present from the start. The focus ring of a row is drawn inside it, so no neighbour clips it.

The panel fills the screen's width. The tab list scrolls sideways if it must, rows keep two lines (the title can wrap to a second line before the detail line), and the foot stacks the status line over the two buttons. The list is still one fixed height, so switching tabs or clearing never moves the foot.