shadcn.io is not affiliated with official shadcn/ui
Secrets Reveal Command Menu Block for Vue
A secrets manager's command menu shown open over a project settings page: nine Dev, Staging and Prod secrets with masked values, a scope switch, a ten-second reveal and a copy that really copies a demo value.
Installation
Overview
Find a secret and copy it without leaving the keyboard with this secrets command menu for Vue with Ark UI. It opens from a project's settings page in Cellarwell, a secrets manager, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command: nine secrets across Dev, Staging and Prod as rows with the name, a mask and the date of the last rotation, grouped into the ones due for rotation and the ones up to date, with a ToggleGroup scope switch above the field. Enter copies the highlighted value; the eye on a row, or Alt R on the highlighted one, shows the value for ten seconds and then masks it again, and the status line says so. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same secrets, scope and query. For settings pages, vaults and any admin screen where a credential should be one search away, and never on show longer than it has to be.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a project settings page, 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 reveal or a scope in the copy is in the 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.
How does the ten-second reveal work?
The eye button on a row, or Alt R (Option R on a Mac) on the highlighted one, swaps the mask for the value on that row's second line and starts a timer set from the moment of the press. One value is visible at a time: revealing another hides the first. When the ten seconds are up, or when you press the eye again, the row is masked and the status line says "Hidden again." Closing the menu masks everything. The row keeps its height either way, so nothing moves.
What does Enter copy?
Enter copies the highlighted secret's value, masked or not, with navigator.clipboard.writeText, and the status line says which secret was copied and reminds you to clear the clipboard. The values in the demo are typed fakes that begin with "demo", so nothing real is ever written. If the browser refuses the clipboard, the line says so instead of claiming a copy.
How do the scope switch and the search combine?
The switch shows All, Dev, Staging and Prod, one always chosen, and the search narrows within it by name, scope, use or rotation date. Rows are grouped into "Due for rotation" and "Up to date" whichever scope is shown, and the foot counts the secrets that match. Changing the scope starts a new list, so the first row is highlighted again.
What stays local, and how do I wire it?
All of it. The nine secrets, their scopes, their dates and their values are typed constants, and the rotation flag is data, not a calculation. In your app load the names, scopes and rotation dates into SECRETS and leave the values out; fetch a value only when a row is revealed or copied, keep it in state for no longer than the reveal, and drop it when the row is masked.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter copies, Alt R reveals or hides, and Tab reaches the scope switch. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.