Permission Request Notification Block for React

Edit REQUESTS at the top of the file. Each has an id, a name, what it is needed for (why) and four short lines the row can show: what the app says before it asks (asked) and what it says after Allow, Allow once and Deny. The icon comes from the id, the badge and the counts come from the choices, and the summary is worked out from them, so adding a fourth request is one more entry.

No. Choosing Allow, Allow once or Deny only changes this page, and the line in the foot says "Nothing is asked of your device in this demo" until something is chosen. In your app, ask for a permission when the person reaches the feature that needs it (the browser's own prompt appears then), read the answer and put it in the same state: the camera, location and microphone prompts each have their own API, and none of them can be asked again once denied.

Allowed for this visit only: its badge says so, and its line says the app will ask again next time. Browsers differ in whether they offer this choice, so check what yours does before you promise it; the demo keeps it because many apps say it in their own words.

Allow all requested sets every row to Allow and says so. Pressing it when all three are already allowed answers "All three are already allowed" and changes nothing. Reset puts every row back to Not asked, and says "Nothing to reset" when nothing was decided. Both stay in place and focusable at all times.

Each row's choice is a group named for its permission ("Camera permission") whose three options work with the arrow keys, and the state is a word as well as a shape, so colour never carries it. The line on what the choice means keeps its height, so choosing never moves the next row. The status line is a polite live region that is present from the start and reads the summary after each change.

Each row stacks: the tile, name and badge on one line, the reason and the consequence under them, and the three options across the full width. The foot stacks its status over the two buttons, the primary taking the width.