Snooze Notification Block for React

PRESETS is built from AS_OF by atHour and addDays: Later today is 17:00 on the same day (and is left out once that has passed), Tomorrow is 09:00 the next day, and Next week is 09:00 on the coming Monday. The custom choice is tomorrow at the hour you pick. All of it is in UTC, so the server and every visitor's time zone agree; to use the visitor's own zone, build the three dates from their local time in your app.

Edit ITEMS at the top of the file: each has an id, a kind (read or task, which picks the icon), a title, a body and an ISO at time. START_WAITING lists the ids that wait in order when the page opens, and START_SNOOZED the ones that are already snoozed, with their wake times. Counts in the two headings and the status line come from those lists.

Snoozing and waking live in the page and reset on reload; nothing is scheduled and nothing wakes by itself. To make it real, send the id and the wake time from snooze to your server, which brings the notification back when that moment arrives, and send the id from wake to bring it back early. The status line says "Preview only: nothing is scheduled." until you press something.

The Snooze button opens the popover and Escape closes it with focus back on the button. After you choose a time the popover closes and focus stays on the button, which now belongs to the next notification. After the last snooze the button is gone, so focus moves to the empty state; after Wake now it moves to the title of the notification that stepped up, and a polite status line says what happened.

Each Snooze and Wake now button says which notification it acts on ("Snooze Send the signed lease to Ines"). The popover is named "Snooze until", every choice is a button with its time in text, and the custom hour is a real labelled select that works with the keyboard and a screen reader. The two bands are headed with their counts, and the wake time is a time element.

The popover is the width of the screen minus a margin, so its choices are large touch targets. In the first band the Snooze button goes under the text and fills the width. Each snoozed row keeps a fixed height with a title and a wake line, and the list scrolls inside its box, so snoozing never changes the height of the panel.