Notification Channels Settings Block for React

Edit the constants at the top. DESTINATIONS lists each destination with its kind, the two letters of its tile, its name and where it goes (an address, a channel or a service; ltr marks the ones that read left to right in any language). START is what the account has stored when the page opens: whether each destination is active, the severities routed to it and the result of its last test. The status words, the routing sentences and the rail are all worked out from those, so a status is never typed. Put your own logos in the tile slot if you have the rights to use them; the block ships only lettermarks.

A paused destination is Paused, whatever its last test said. An active one whose last test failed is Needs attention, shown with a warning dot, the only coloured mark in the window; any other active destination is Active. Sending a test that is accepted updates the last test, so a destination that needed attention becomes Active again in the same press. Nothing is stored between visits.

Nothing leaves the page and no service is contacted. The button waits about 0.7 seconds with its spinner, then the status line says "Accepted in this demo. Nothing was sent", the last test becomes today and focus returns to the button. A paused destination refuses and says to resume it first, and the button stays focusable, marked aria-disabled, so the reason is there to be read. To make it real, post a test event to the destination in the handler and show its real result, failures included, in the same places.

A destination that receives nothing is a paused one, and Pause is its own switch, so the group keeps at least one chip pressed: choosing the last pressed chip is ignored and the status line says to keep one. Each chip is pressed or not, named for its destination ("Severities sent to #deploys"), and the sentence under the group is written from what is pressed.

The window keeps its height and shows one pane at a time: the rail first, and choosing a destination replaces it with the detail, moving focus to the destination's name, under a Back button that returns to the rail with focus on the row you left. The top bar keeps the title and shows Send test once a destination is open. The detail scrolls inside the window, never the page.

The rail is a list of real buttons, the chosen one marked aria-current, and each says its status in words, never only with a dot. The status line at the foot is a polite live region present from the start, so every change, test and refusal is spoken. The rail and the detail are separate regions with their own scrolling, the destination's name is a heading that takes focus when the panes swap, and the window's height never changes, so nothing moves under the pointer.