Command Popover with Status Indicators for React

The View Services button is the trigger, and the panel opens below it, lined up with its start edge. The panel is 400px wide, never wider than the screen, and has no padding, so the Command fills it. A visually hidden PopoverTitle names it. PopoverTrigger renders the button through render, and PopoverContent sets align="start".

Each dot is a span with size-3 shrink-0 rounded-full and a theme color: bg-success for API Server and Database, bg-warning for Cache Server, and bg-destructive for Queue Worker. It's hidden from screen readers, because the state is written out beside it.

The service name's span has flex-1, which pushes the state to the end of the row. The state is a span with text-muted-foreground text-xs that reads Running, Warning or Stopped.

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

These items don't run anything yet. Pass onSelect to each CommandItem.

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