Kanban Move Card 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 board, 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 a card moved in the copy is moved in the 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.

Move card is a second step in the same shell, with a band at the top that names the card and a Back button. It lists Backlog, In progress, Review and Done with their counts, marks the current one, and the search narrows them by name. Choosing a column moves the card, returns to the list and says the new count on the status line; choosing the card's own column says it is already there. Escape in this step goes back before it closes the menu.

A last word that starts with a slash names the column by its first letters: /rev is Review, /prog is In progress. Without a slash the card goes to Backlog. A word that matches no column turns the first row into a hint that lists the four words and adds nothing, so a typo never files a card in the wrong place. The new card takes the label you are filtering by, or Docs, and becomes the selected one.

Choosing Bug, Design, Docs or Ops shows only that label: the card rows shrink to it and the other cards on the drawn board dim. Choosing the same row again clears it, and the row says so while it is on. The selected card stays selected even when its label is hidden.

All of it. The cards are state in the block, the board behind the menu is drawn from the same state, and the status line says nothing is saved. In your app load START from your board, write moveTo and add through to your API, and let the board component read the same list.

Yes. Type to search or to write a card, the arrow keys move through the rows, Enter chooses, and Escape steps back from the columns, then closes the menu with 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.