Unread Only List Notification Block for React

Edit NOTES at the top. Each has an id, a kind (assign, comment, due, failed or done, which picks the icon), a title, a line of desc, an ISO at time and whether it starts unread. The unread count, "of 9" and the list that the switch shows are worked out from that array. Times are written in UTC and shown against AS_OF (today as a clock time, yesterday as a word, older as weekday and date), so the page reads the same on the server and in every time zone.

The read state lives in the page and resets on reload. To make it real, load the notifications from your API and send the id from the press handler (a title would normally open its task; here it marks the row read and says so). Keep the held rows as they are: they are the rows read since the switch last changed, kept in a list, and they clear whenever the switch flips.

Because removing it would pull every row below it up under your pointer, and the next press would land on the wrong row. The row keeps its place, loses its dot and its heavier weight, and shows a Read tag with a check mark, so the change is still a shape and a word, not a color. Turn the switch off and on again and only what is still unread is listed.

Turn Unread only on, press every unread title, then turn the switch off and on again: nothing is unread, so the list is an Inbox zero state in the same height as the rows, with a Show all button that turns the switch off. The frame, the count band and the foot do not move.

The switch is named Unread only and works from the keyboard with Space. Each title is a button, and unread rows speak "Unread" first, so state never rests on the dot or the weight alone. The count band and the status line report the numbers in text; the status is a polite live region present from the start, and the list scrolls inside its own region so the page keeps its length.

The switch drops under the sentence, rows keep two lines (the title can wrap before the detail line), and the Read tag stays under the time. The list is one fixed height, so the foot's status line, which can wrap to two lines on a narrow screen, has its space reserved.