Project 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 title bar, 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 switch 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.

Turning it on keeps the projects whose changed count is above zero, so the list, the foot ("3 of 6 projects") and the line beside the switch ("3 of 6") all come from the same data. The switch sits above the input and outside the Command, so its keys never fight the list's: Tab reaches it, Space turns it on, and the change is said aloud. A search with nothing left says whether the switch is the reason and offers to turn it off.

The drawn title bar shows the project's name and branch, and the explorer shows one of three typed file trees (a service, an app or a docs site), so two projects of the same kind share a tree. The drawing is hidden from assistive technology, so the status line carries the same facts: "Switched to wendlow-docs on docs/search-page. In this demo only." Nothing is opened, cloned or checked out.

All of it. The repositories, their branches, the ahead, behind and changed counts and the trees are typed data; no repository is read and no git command runs. In your app the counts come from git status and git rev-list, the hosting tile from the remote's URL, and pick is where the client would open the repository.

Yes. Type to search by name, branch or host, the arrow keys move, Enter switches to the highlighted project 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 explorer goes and the title bar stays. 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. Each row moves its ahead, behind and changed words under the branch instead of keeping them at the end. The real dialog keeps the Command dialog's own phone layout.