Quick Actions Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the dashboard: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The New button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ActionBoard component and share the block's state, so what you pinned in the copy is pinned in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

A palette is for finding: you type, a list filters and Enter runs the first match. This is for the few things you do every day, so there is no input and nothing to search; the list is short enough to see whole, and the star lets each person put their own first. If you also need search across hundreds of commands, keep a palette for that and use this board for the pinned few.

The star on a tile pins its action into the first free slot of four; press it again to unpin. The pinned chips run their action too, and a polite message says what changed, "Pinned New invoice. 3 of 4 slots used.", or that all four are taken and one has to go first. Pins live in the block's state for the visit. In your app save them per person (pinned is a list of action ids) and read them back when the board opens.

Yes. The whole board, the pinned chips, the tiles and the stars, is one tab stop, so Tab passes through it in one press. Inside, the arrow keys move in two dimensions (Left and Right follow the page's direction), Home and End go to the ends of a row, and Enter or Space presses the cell. A letter shown on a tile runs that action while focus is on the board, and each such tile carries it as its keyboard shortcut. The real dialog is named by its title and described by its sentence, and Escape, the close button and running an action return focus to New. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.

All of it. Running an action creates nothing: it adds a line to the drawn Recent activity and says in a polite message that nothing was created, sent or saved. In your app give each entry in ACTIONS a real handler (open the invoice form, start the import), keep the done sentence only if you want an activity feed, and let your router or modal layer take over after run closes the board.

The copy shown on load docks to the foot of the page as a bottom sheet with the board scrolling inside it. The tiles stay two across, the key hints are hidden because a phone has no keyboard to use them, and the four pinned slots become two rows of two. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.