Developer Inbox Notification Block for React

Edit NOTES at the top of the file. Each has an id, a repo, a num (the pull request or issue number), a title, a reason (review, assigned, ci or release), an ISO at time and whether it was unread when the page opened. The reason tags, the counts in the foot and the select-all state are worked out from that list. Times are shown against AS_OF: today as a clock time, yesterday as a word, older as a weekday and date.

Done, Unsubscribe and the ticks live in the page and reset on reload; nothing is sent. In your app, keep done and quiet as server state and send the ids each handler already builds (picked is the list to send), then render from the result. Undo sends the reverse for the ids it remembers. The titles don't open anything here; in your app each one would link to its thread.

The checkbox in the table header ticks every open row, or clears them if all are ticked. While only some are ticked it shows a bar instead of a tick, which a screen reader hears as mixed. Rows you marked done are gone from the list, so they are never counted. The foot says how many of the open rows are selected.

Exactly the rows the last action touched: for Mark done it brings them back into the list in their original order, and for Unsubscribe it gives their reasons back. Either way they are ticked again, so you can choose another action. Only one step is remembered, and Undo says "Nothing to undo." when there is none. Focus moves to Undo after an action and to the list after an Undo.

It is a real table with a caption, column headers and one row per notification, inside a scrolling region that takes the keyboard. Each checkbox is named by its row's title and described by its repository, unread rows say "Unread" before the title, and every state is a word as well as a shape: the reason tag has a glyph and its name, never only a colour. The status line in the foot is a polite live region present from the start.

The table keeps two columns, the checkbox and the notification. The repository, the reason tag and the time fold under each title as a second line, so a row grows a little taller than on a desktop, and the table still scrolls inside its fixed height. The foot stacks its status line over the three buttons.