Feedback Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline under a picture of the page's Feedback button, 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 message written in the copy is the one the dialog opens with. 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 list is step one: three kinds to send and the recent items, searchable. Choosing a kind opens step two in the same shell, so the menu keeps its size. The form has a band with Back, a severity slot, the message and a footer with Send. The severity slot keeps its height for every kind: a bug shows the switch, an idea or praise shows a sentence saying it takes none, so the message never jumps.

A message needs at least ten characters. A shorter one is refused in a line of its own under the field, which says how many you have, and the field is marked invalid. A valid one is added to the top of Recent feedback with its first line as the title, the status Open and one vote, which is yours; the menu goes back to the list and the status line says it was added and that nothing was sent.

Choosing a recent item adds one vote and marks the row "you voted"; choosing it again says you already did, so a row can't be inflated. Your own new item starts at one vote for the same reason. The status words are typed data: Open, Planned or Shipped.

All of it. The board and the votes are state in the block and the status line says nothing is sent. In your app load START from your feedback API, post from send and pick, and take the status words from your tracker.

Yes. Type to search, the arrow keys move through the rows, Enter chooses, and Escape steps back from the form, then closes the menu with focus on the field. In the form Enter writes a new line and Ctrl or ⌘ Enter sends. 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.