Command Dialog Actions Menu for React

The Quick Actions button sets an open state to true, and CommandDialog takes that state with its change handler, so Escape or a click outside sets it back. The dialog has a visually hidden title and description. The Command goes straight inside CommandDialog.

Two CommandGroups: Quick Actions holds Open, Copy and Add to Favorites, and File Actions holds Download, Share and Delete. There is no separator, so the headings alone split them. Each row starts with a decorative icon: ArrowRight, Copy, Star, Download, Share or Trash.

Each hint is a CommandShortcut: Open shows ↵, Copy ⌘C, Add to Favorites ⌘D, Download ⌘⇧D, Share ⌘⇧S and Delete ⌘⌫. It's a label at the end of the row and binds nothing: listen for those keys yourself if they should run the action.

CommandEmpty in the list says "No actions found." It shows only when the search leaves nothing.

These items don't run anything yet. Pass onSelect to each CommandItem. Close the dialog in the same handler.

The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape closes CommandDialog, and focus goes back to the button. CommandInput shows "Search actions..." until someone types. Command filters and ranks the items by their text on its own.