View As Command Menu Block for React

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.

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.

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.

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.

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 cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

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.