Preference Matrix Notification Block for React

Edit the constants at the top of the file. CHANNELS lists each channel with its label and the word a box's name uses ("email", "SMS"). KINDS lists each kind of notification with its name, a one-line hint and the channels it can go to (offered). SAVED is the set of cells the account has stored when the page opens, written as kind:channel keys: put the person's real settings there. Every count, the column boxes and the unsaved total are worked out from those, so nothing is typed twice.

Nothing leaves the page. The block keeps two copies of the settings, the saved one and the one being edited, and counts the cells that differ, so the status line can say "3 unsaved changes". Save makes the edited copy the saved one and says "Saved 3 changes in this demo"; Reset puts the saved copy back. To make it real, send the edited copy (or only the cells that changed) to your API in the save handler, update the saved copy from the response and show a failure in the same status line. Both buttons stay in place and focusable while there is nothing to do, and pressing one then says so.

Each box looks at the cells of its channel that exist: ticked when all are on, empty when none are, and a bar in between. Pressing it turns the channel on for every kind; pressing it again when it is all on turns it off. A channel a kind doesn't use (the digest by SMS) shows a dash and is left out of the counts, so the weekly digest never keeps the SMS column from reading "all on". The counts under the channel names on a desktop follow the same rule.

Two ways, and neither relies on colour. The status line counts the cells that differ from the saved copy and says it in words, and each of those cells wears a small dot at the corner of its box. Putting a cell back to how it was removes its dot and lowers the count, so the count never drifts from the table.

Below the medium breakpoint the table becomes one card per kind: its name and hint over four boxes labelled Email, Push, In-app and SMS, each box's whole cell pressable. All types is the first card, with the same four boxes. The save bar stays pinned to the bottom of the screen while you scroll the panel, so Save is always in reach; from the medium breakpoint it is simply the last band.

On a desktop it is a native table with a caption, column headers for the channels and a row header for each kind, so a screen reader announces both as you move between cells, and every box is also named for both ("Replies by push"). The all-types boxes are named by their channel ("Email for all types"). The status line is a polite live region that is present from the start. Every box works from the keyboard with Space. On Base UI the mixed state is the checkbox's indeterminate prop.