Mark All Read With Undo Notification Block for React

Edit MESSAGES. Each has an id, who sent it (who and its initials), the channel, the text, an ISO at time and whether it starts unread. The count, the "In 3 channels" line and the toggles' states are worked out from the list of unread ids, so nothing is typed twice. Times are written in UTC and shown against AS_OF, so the page reads the same everywhere.

Mark all read keeps the list of ids that were unread and then clears it; Undo puts that list back, so the same messages are unread again, including ones you had marked unread by hand before. The Undo strip goes away as soon as you change one row by hand, because after that putting the old list back would no longer be exact. Focus moves to Undo when the button goes away and back to Mark all read when Undo is used.

Read state lives in the page and resets on reload; nothing is sent. To make it real, send the ids that Mark all read changes and the id of a single toggle, and let Undo send the same list back. The strip is a good place to show a failed request: swap its text for the error and keep Undo as Retry.

The count rolls like an odometer and each dot fades, with a delay that grows by row so they go out in turn. Both are CSS only. With reduced motion the digits change in place and the dots change at once, with no delay. Nothing else animates, and the list's height never changes: the strip takes the place of the button.

The count is read out as a plain number, and the status line, a polite live region present from the start, says what each action did. Every toggle is named for its message and says whether it is pressed, and an unread name is spoken first with the word Unread. The button stays focusable when nothing is unread and answers "Nothing is unread".

The two summary cells stack, the Mark all read button fills the width, and the time column is dropped so each row keeps its name, its message and its toggle. The list stays six rows tall, with or without messages.