Notifications page

Datasheet

Mechanism

Alerts by day, Tabbed list with counts, Mark all as read, Unread lamp fade, Row settle, Settings rows with switches, Sync legend, List order segmented, Paginated list, Loading skeleton rows, Empty unread tab, Error retry, Toast confirmation, Phone single column, Finish following, Quiet volume

Stack

Vanilla ES modules, CSS

Needs

Nothing, no dependencies

States

12 documented

Version

0.1.0

Licence

With a Pass

States

1. At restThe page head with the title, the lead and the Mark all as read key; the tabs All 24, Unread 3 and Mentions 1; the Order control at Newest. The Alerts panel has six alerts in four day groups, each under a ruled date heading; three unread rows carry a lit blue lamp. The settings panel has six rows, five switches on and Product news off, a Saved legend and the note.
2. UnreadThe Unread tab shows the three unread alerts in two day groups and its count reads 3; Mentions shows the one mention and its count reads 1. The tablist is one tab stop; Left and Right move and select, Home and End go to the ends.
3. LoadingSix skeleton rows stand where the list will print; every tab count reads a dash; the panel status says Loading alerts with an amber blinking lamp; Mark all as read is disabled.
4. EmptyThe Unread tab is chosen and shows the Empty state You are up to date, with the settings panel still visible and every row's lamp out.
5. ErrorNotifications could not load, in the kit's Error state tray with its printed outline, a red lamp and the words The list did not reach us. Nothing was changed. Retry is the one key: it holds, its lamp turns amber, and the six alerts come back after a moment.
6. SuccessMark all as read empties the Unread tab, puts every unread lamp out, sets the Unread count to 0, moves the focus to the chosen tab and shows the Toast All caught up.
7. A switch turnedPressing a settings row's words or its switch turns the switch at once. The Sync status says Saving… with an amber blinking lamp, then Saved with a green lamp and just now beside it. np-switch fires with { label, on }.
8. OrderThe Segmented control switches the list from Newest to Oldest; the day groups and the rows inside them reverse, and the chosen segment is pressed in.
9. PhoneUnder 700px the page is one column: the tabs scroll inside themselves under the title, the rows are 72px with the alert on two lines and the time at the right, the sender's coin and the kind tag make way, and the settings panel sits under the list behind its What you get heading. The Mark all as read key fills the width.
10. KeyboardThe tablist is one stop with arrows, Home and End. Every row is one stop and Enter opens the invoice or client it names. Space turns a switch, and the whole settings row is its label. After Mark all as read the focus moves to the chosen tab, since the key is disabled.
11. Reduced motionThe unread lamp goes out and a row appears with no fade and no settle; nothing blinks, and the Sync status stays lit amber while it saves.
12. Finishes and volumeEvery surface and lamp reads the kit's tokens, so all fourteen finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.