Workspace Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline under the drawn switcher, 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 pins, the workspaces you created 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 star is a plain button the pointer can press and the tab order skips, so a row has one stop and the arrow keys stay simple. The keyboard's way is Shift and Enter on the highlighted row: a capture listener reads the highlighted row, toggles its pin and stops the Enter, so the workspace is not chosen. The star's name says what it will do ("Pin Engineering", "Unpin Engineering") and is pressed or not. The status line says what moved, and inside the real dialog, which hides the page's line, the menu's own live region says it too.

When the box holds text and no workspace has exactly that name, ignoring case and accents. It is the last row, it reads Create workspace and the name in quotes (cut at 28 characters), and choosing it adds a workspace with one member, switches to it and closes the menu. Type the name of a workspace that exists and the row goes away, so you cannot create a duplicate by accident. In your app this is where the request to create it would go.

Everything. Pins, the created workspace and the current one live in the block's state and are gone on a reload; nothing is saved and no request goes out. In your app keep togglePin, create and pick as the three places that call your API, and keep the status line, which is the one polite live region. The member counts and keywords are typed data here.

Yes. Type to search, the arrow keys move, Enter switches to the highlighted workspace, Shift and Enter pin it, 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 drawn sidebar shrinks to its head, the switcher. 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 star stays a touch target on every row, since a phone has no Shift key. The real dialog keeps the Command dialog's own phone layout.