Workspace Switcher Navbar Block for React

Edit RECENT, OTHERS and CREATED at the top of the file: an id, a name, a plan and the two letters on the tile. The list, the search, the number keys and the button's width are all built from them, so adding an object is enough. The workspaces and their plans are made up for the demo. In an app, replace settle with your router's or session's workspace change.

It adds the next entry of CREATED to the "All workspaces" group, switches to it and says so ("Created Untitled space 1 and switched to it. Nothing is saved in this demo."). Three can be added; after that the button says "Workspace limit reached" and does nothing. Nothing is stored or sent: wire create to your own flow.

While the search field is empty, pressing 1, 2 or 3 picks the matching recent workspace and closes the list. As soon as you type, the digits are text again and the number hints disappear. The modified keys (Ctrl, Alt, Command) are left alone.

The links sit in a nav named Main. The switcher button is named "Workspace: Duskmere Studio", says whether the list is open and which list it controls, and opens it on Enter or Space with focus in the search field. Typing narrows the list by name or plan (accents ignored). The current row says "current workspace" as well as showing a check, and the number hints are read as "key 1". Escape closes the list and returns focus to the button, and so does choosing a row. The list is a command built on cmdk: the first match is highlighted as you type, the arrow keys move through the rows and Enter chooses.

Below the md breakpoint the bar shows the wordmark's icon, the switcher (its name truncates) and a menu button; nothing wraps at 320 pixels. The switcher opens a drawer from the bottom with the same list and the same foot; the links and the Invite action move into a sheet from the top. Escape, the close button or choosing a row closes them and focus goes back to the button that opened them.

Yes. The bar mirrors, the divider stays between the first two cells, the list opens under the button's start edge, and rows, checks and chevrons follow the direction. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the popover and the drawer follow the page.

Nothing moves on load. The list fades in under the button, the chevron turns, and the drawer and the sheet slide in. With reduced motion the chevron turns at once and the panels appear without sliding.