Channel Settings Notification Block for React

Edit CHANNELS, START (each channel's setting when the page opens) and MESSAGES: a message has its channel, who wrote it (by), an ISO at, the text, how many replies its thread has, its cheers (a face and a count each), whether it tags you (mention) and whether it was unread. The marks, the counts and the line over the messages are worked out from those lists and from the setting of each channel.

With All messages the channel's mark counts its unread messages. With Mentions only it is a dot when an unread message mentions you, and nothing otherwise, and the pane lists only the messages that mention you ("Showing 1 of 6"). Muted shows no mark, the row turns quieter and the pane becomes a panel that says the channel is muted. A channel's name always carries its state for a screen reader ("ops-handoff, 3 unread messages"), so the mark is never the only signal.

Everything. Settings and read state live in the page and reset on reload, nothing is sent, and the messages are typed in the file. To make it real, save the setting from the change handler to your preferences service, load the messages for the open channel from your API and clear the unread marks from markRead.

Tab runs through the channels, the Mark read button, the setting and the messages (the list is one scrolling region you can focus and scroll with the arrow keys). A channel is a button and the open one is marked as the current one. The setting is a select list: Enter, Space or an arrow key opens it, the arrow keys move through it and Enter chooses.

Never. The window has a fixed height and only the message region scrolls inside it; it opens on the newest message and keeps that position as you change channels or settings.

The rail is hidden and a native select of channels sits under the top bar, each option saying its unread count or that it is muted. The top bar keeps the channel's name, a Mark read icon button (with its name for a screen reader) and the setting.