Pin Limit List Notification Block for React

Edit NOTES (an id, a kind that picks the icon, a title, a line of desc and an ISO at time) in newest-first order, START_PINNED (the ids pinned when the page opens, in pin order) and LIMIT. The count, the free slots, the Recent heading and the status are worked out from those. Times are written in UTC and shown against AS_OF, so the page reads the same everywhere.

The pinned list lives in the page and resets on reload; nothing is sent. To make it real, send the new ordered list of pinned ids from the pin handler and load it from your API with the notifications. Enforce the limit on the server too: the page only stops you from asking.

When three are pinned, the pins on the Recent rows are marked unavailable (a quieter icon, still focusable) and pressing one says "Unpin one to pin another." instead of pinning. Unpinning one frees a slot straight away. The pins on pinned rows always work.

Pinned keeps room for three rows whatever is in it (a quiet Free slot stands in for each unused one), and Recent is a list of one fixed height that scrolls when there are more rows than fit. Rows are one height too, so a pinned row takes exactly the room of the row it replaced.

Every pin is a toggle button named for its notification and says whether it is pressed, so pinned state never depends on the filled icon alone. After pinning or unpinning, focus returns to that row's pin in its new place. The status line is a polite live region present from the start. The row's text is plain, not a link, and the pin is its one control. An unavailable pin stays focusable, so a keyboard user hears why it is unavailable instead of skipping past it.

The two columns stack into one list: a Pinned head with its three slots, then a Recent head with the scrolling rows. Titles wrap to two lines, and the status line has two lines reserved.