Notification Permission Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Notifications 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 AskFields component and share the block's state, so what you switched on 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.

No, and it never does. Nothing here calls Notification.requestPermission, the Permissions API or any other way of asking. The one thing the block reads, once after the page has loaded and only to show it, is what Notification.permission already holds, and it says so under the result: "Your browser's own setting is still: default." In your app call Notification.requestPermission() from the Turn on button's handler, after this explanation, and only then.

A way to show what saying yes means. Each switch has a drawn card with a title bar and a body line, no real brand and no text, and the card appears when its switch is on and fades to a dashed empty place when it is off. The cards keep their places, so the dialog never changes height, and the count above them says how many are on. They are a drawing, not real notifications.

Not now closes the dialog and the drawn bell shows a quiet Off chip; with the box ticked a polite message adds that the bell is how to turn it on later. Nothing is stored: in your app save the answer, and the time of the last ask, where the next visit can read them, and show this dialog again only when the user opens it or after a good while.

All of it. The three kinds, their examples and the preview are typed here, and Turn on notifications changes only the block's state. In your app save the chosen kinds with the user's other settings, then request the browser permission and register for push; with no switch on the button is quiet and says to pick a kind first rather than asking for nothing.

Yes. The real dialog is named Turn on notifications?, focus starts inside and stays there until it closes, and Escape and the close button return focus to the header button. Each switch is named for its kind and moves with Space, and pressing the quiet button with nothing on names what is missing and moves focus to the first switch. 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.