Notification Preferences Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the inbox: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Notification settings button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same MatrixFields component and share the block's state, so what you changed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Each one covers its own column. It is ticked when all five cells in the column are on, mixed when some are, and empty when none are. Pressing it when the column is all on turns the column off; pressing it in any other state turns the column on. The mixed state is drawn as a bar in solid foreground, on every library. Each box is named for its column, such as All email, so it reads clearly out of the table's context.

Save keeps the draft, closes the dialog and the inbox's chip reads Preferences saved with the number of cells on. Closing any other way, the close button, Escape or a click outside, drops what was not saved, so the dialog reopens as it was. A line under the table says how many cells are on and how many changes are not saved yet, and a polite message repeats it after each change. Reset to defaults puts the six default cells back in the draft; it saves nothing until you press Save.

It stays a table. Below a small screen the channel names hide and the three columns keep their icons, a mail, a bell and a message, with the names kept for assistive technology, and the descriptions wrap under the kinds. The boxes stay in the column heads at every width, and the body scrolls inside the dialog while the foot stays.

All of it. The kinds, the channels, the defaults and what is saved are typed constants, and nothing is sent. In your app load the saved cells from the user's settings, post the draft from save, and keep a channel's cell off where the channel is not available to the person, for instance SMS with no verified number.

Yes. The real dialog is named Notification settings, focus starts inside and stays there until it closes, and Escape and the close button return focus to the header button. Every switch and every box is a tab stop named for its row and column, and Space flips it. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.