Database Schema Explorer Command Menu Block for React

So you can see it without a click. On load the menu is the Command and its pane drawn inline over a picture of the admin, 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 the connection you chose and what you typed in the copy are in the real 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.

Production is typed as a connection that cannot write, and the menu says so in three places: the word beside the switch (with a lock), the badge in the pane and the status line after you choose a table ("Opened orders on Production, read-only."). Nothing in the block writes anywhere, so the label does not gate anything here; in your app it should come from the connection's real permissions. Switching connections changes the row counts and the list itself: Staging has one table Production does not, so the count in the foot changes from 7 tables to 8 and the switch is announced.

The block keeps the highlighted row's id in state and the pane is a plain function of it. The Command is cmdk, whose highlighted value is controlled with value and onValueChange. When nothing is highlighted, or the highlighted table is not on the other connection, the pane shows the first row.

It copies the statement shown in the pane, for example SELECT id, customer_id, status, currency, total_cents, placed_at FROM orders LIMIT 100;, through the clipboard, and the status line says "Copied the SELECT for orders. Nothing was run." If the browser refuses, it says so. The button is in the tab order; Alt and C does the same from the input without moving focus, reading the key from event.code so Option's characters on a Mac do not matter.

All of it. The connections, tables, columns and counts are typed and made up, no database is contacted and the statement is only text. In your app build TABLES from your schema (for example information_schema.columns), take the counts from your catalog or an estimate, and make pick open the table.

Yes. Tab reaches the connection switch, then the input; type to search, the arrow keys move through the tables, Enter opens the highlighted one and Escape closes the menu and puts 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. The pane is a labelled region that is not read out as you move; the list announces the rows.

The pane is dropped and each row shows its column count and its row count under the name, so you can still tell tables apart. The copy shown on load docks to the top of the page at full width, the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.