No Notifications Empty State Block for React

The three switches and the saved set live in the page's state: a reload brings back the defaults (Mentions and Replies on), and Start over does the same without one. Save preferences says "Saved in this demo" and nothing is stored or sent. To wire it for real, post the list of switched-on ids to your API where the code says so and start the state from what you load.

Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal element under the bell on the stage. Pressing the bell opens the real Popover, with Escape to close it and focus back on the bell, and the in-place copy stays closed until a reload. Both show the same content and the same state, so a switch moved in place is moved in the real one. In your app keep only the Popover and its trigger.

Each wisp stands for one preference, in order: Mentions, Replies, Updates. A wisp is dashed while its switch is off and turns solid when it is on, so the cup shows at a glance how much of the inbox you will hear about. The drawing is hidden from assistive technology; the same fact is in the card's line ("2 of 3 on.") and in the switches themselves.

One line under the switches follows a priority: how many changes are not saved yet ("1 change not saved yet."), then the last result ("Saved in this demo."), then the count that are on. Save preferences stays in the tab order and says "No changes to save." when nothing changed. A polite status line outside the card says the same things, so they are heard whether the card is drawn in place or real.

The bell is a real button whose name includes how many are unread. In the card Tab reaches the three switches, each named for its preference, then Save preferences; Escape closes the real popover and returns focus to the bell.

The in-place card docks to the foot of the stage so the Save button is on the first screen, and scrolls inside itself if the screen is short. The real popover keeps the catalog's own phone layout, a card under the bell that never runs past the screen's edge, and nothing scrolls sideways, even at 320 px wide.