Quick Open Files 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 file manager, 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 filter, the order and what 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.

The path is split into its head and its last two folders. The head is a truncating span, so it gives way with an ellipsis when the row is narrow, and the last two folders never shrink. CSS shortens only what is drawn: the whole path stays in the row's text, so a screen reader reads every folder, and it is in the title, so a hover shows it. The path is set left to right even on a right-to-left page, because it is a typed value.

The kind chips filter whatever the list holds, recents or matches; the sort orders it by name (A to Z), by the day it changed (newest first) or by size (largest first), with the name settling ties. Both groups always have one chip chosen, and changing either announces the new count and order. The search wins over the recents: once something is typed the list is every file that matches, in any folder, under the same filter and sort.

Because ⌘ P and Ctrl P are the browser's print shortcut and never reach a page, so showing them would promise a key that does not work. The field's shortcut, ⌘ K or Ctrl K while focus is inside the block, is a capture listener that does work, and it is the only key shown.

All of it. The twelve files, their folders, sizes and dates are typed and made up, the dates are fixed and never read from the clock, and choosing a file only selects its row in the drawing. In your app build FILES from your index (name, folder path, kind, size in bytes and modified time), keep recents as a flag or a list, and make pick open the file.

Yes. Tab reaches the two chip groups, then the input; type to search, the arrow keys move through the rows, Enter selects the highlighted file 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 size and the date go and each row keeps its name and its path, still shortened in the middle. The two chip groups wrap onto two lines, the copy shown on load docks to the top of the page at full width so the keyboard does not cover the foot, the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.