shadcn.io is not affiliated with official shadcn/ui
View As Command Menu Block for Solid
A support console's view-as switcher as a command menu shown open under the avatar: You and Teammates with initials, role and queue size, a read-only banner with an Exit button, and a ticket list that shows only that person's queue.
Installation
Overview
Let a lead see the product the way a teammate does with this view-as command menu for Solid with Ark UI. It opens from the Tickets page of Proxyhill, a support console, whose header holds an outline field with its ⌘ K cap, and the console is drawn under a soft scrim inside a hairline frame with a plus mark on each corner: a bar that ends in an avatar, a row of filters and a list of tickets made of shapes. The menu hangs from the avatar and is the catalog Command. It has two groups, You and Teammates, and each person is an initials Avatar with a name, a role and how many tickets are in their queue, counted from the data. Choosing a teammate puts the console into view-as mode: a banner across the bar says "Viewing as Jun Okafor. Read-only." with an Exit Button, the avatar shows their initials, and the list holds only their tickets. Exit, or choosing yourself, puts it back. Nobody is impersonated. 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 rows. For support tools, admin consoles, school dashboards and any product where one person needs to check what another sees.
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 under the drawn avatar, 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 query and the person you chose are the same 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.
What does view-as mode change?
Three things, all drawn: the banner across the bar, naming the person and saying it is read-only; the avatar, which shows their initials; and the list, which shows only that person's tickets, so a queue of two shows two rows. The banner is a real region with a real Exit button named for the person, "Exit view as Jun Okafor"; the drawing under it is hidden from assistive technology, so the status line and the banner carry the meaning.
How do I leave view-as mode, and where does focus go?
Press Exit in the banner, or open the menu and choose yourself. Exit removes the banner, so focus goes to the field in the header that opens the menu, never to the page behind. Choosing yourself closes the menu and focus returns the same way. The status line says which, and says "Already viewing your own queue." if you were not viewing anyone else.
What stays local, and how do I wire it?
All of it. Nobody is impersonated: there is no session change, no request and no audit entry, and the tickets are typed data counted by owner. In your app view-as is a security feature, so it belongs on the server: a short-lived read-only session, an audit log entry and the same banner on every page. Keep pick and exit as the two places that start and end it.
Is it accessible from the keyboard?
Yes. Type to search by name or role, the arrow keys move, Enter views as the highlighted person 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 person you are viewing is ticked and says so for screen readers. The rows are options of a combobox and the first is highlighted when it opens.
How does it look on a phone?
The copy shown on load docks to the top of the page at full width under the bar, so the keyboard does not cover the foot; the key hints go and the count stays. The banner keeps its text and Exit button across the bar and grows to two lines when it needs to. The real dialog keeps the Command dialog's own phone layout.