No Recent Items Empty State Block for React

The list lives in the page's state: it holds the page, the time it was opened and nothing else, a reload empties it and Start over empties it without one. No page is opened and nothing is stored. To wire it for real, call your own history where the code says so (or read the visits your router already keeps), and render the list from that.

The sample button walks a typed script: Q4 roadmap, Hiring plan, Launch checklist, then the roadmap again, then Standup notes, and round again. The list keeps the last three, newest first, so the fifth press pushes the oldest off. The roadmap opened a second time moves to the top rather than appearing twice, which is how a recent list should behave. Pressing a row in the list opens that page again and moves it up.

Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal panel under the twin of the button. Pressing Recent opens the real non-modal Popover, where Escape closes it and focus goes back to the button, and the in-place copy stays closed until a reload. Both share one body and the page's state, so what was opened in place is there in the real card.

No. The empty message and the list share one box of a fixed height, so the card, the button under it and the stage keep their size. The clock is part of the empty message, so it gives way to the list; it is also drawn solid, with hands, the moment a page exists.

The Recent button is named with its count, such as Recent, 2 items. In the card Tab reaches the rows and the Open a sample page button; each row is named with its page and the time it was opened. A polite status line says what was opened and how many recent items there are, and pressing a row hands focus back to that row after it moves to the top. The drawings are hidden from assistive technology.

The in-place card docks to the foot of the stage, so the Open a sample page button stays on the first screen, and the real popover keeps the catalog's own phone layout and scrolls when the screen is short.