Command Dialog with Descriptions for React

The Search Contacts 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.

The name and the detail sit in a div with flex flex-col. The detail is a span with text-muted-foreground text-xs: Software Engineer under John Doe, Email under jane@example.com, Mobile under the phone number, and Location under San Francisco, CA. The search matches the first line only.

User, Mail, Phone and MapPin, the first child of each CommandItem. They're decorative and hidden from screen readers, and the item centers each one against the two lines.

CommandEmpty in the list says "No contacts 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 contacts..." until someone types. Command filters and ranks the items by their text on its own.