Recent Items Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the project list, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the recents and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

rowsFor(query, seen) is a plain function from the query and the list of what was opened to the rows. With the input empty it buckets that list by day; with a query it keeps the items whose title, type or hidden keywords hold it, ignoring case and accents, and puts those you opened first. Opening a row puts it first in the list, marked as opened today. Here the list lives in state; in your app keep it in local storage or on the server, per person, and trim it to the last dozen or so.

It empties the list in this demo, says how many it cleared in the status line and leaves the menu open on the empty state, which tells you to type to search everything. There is no undo here; reload the page to get the list back. In your app, ask first if the list holds anything people pinned.

Everything. Choosing a row moves it to the top of the list and the drawn project list names it; nothing opens. In your app replace ITEMS with your search index and, in pick, send the person to the item and record the open.

Yes. Type to search, the arrow keys move through the rows, Enter opens the highlighted one and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The real dialog is named by its title and described by its sentence.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the type words and the key hints go, the titles stay and the count stays. The real dialog keeps the Command dialog's own phone layout.