Linked Workspaces Account Block for React

Edit WORKSPACES. Each has an id, two typed initials for the tile, a name, your role there, how many members it has and the ISO day it was last opened. Which one is open and which is the default are two ids in state, current and defaultId. "Opened yesterday" is worked out from the one AS_OF constant, never the clock, so replace it with today's date when you wire it up. The list holds up to LIMIT workspaces.

Everything. Opening, making a default, creating, joining and leaving change this page's state and say so in the foot; nothing is sent and nobody is told. Undo walks the changes back, which a real server can't always do. To make it real, call your endpoints in open, makeDefault, create, join and leave, change the list only when they answer, and put a failure in the same status line. The join code is printed in the interface for the demo and checked against a typed constant: check it on your server, and don't print it.

The header button opens a real dialog with a focus trap, Escape to close it and focus back on the button. A name that is empty, longer than thirty characters or already in the list is refused under the field and focus stays in it; a good one adds the workspace at the top, makes you its owner, opens it, closes the dialog and moves focus to its menu button. Joining takes a code in the field under the list: empty, wrong and "already in it" each get their own message, and the account is capped at six workspaces.

Leave workspace is in each row's menu and opens an alert dialog that says what you lose, that what you posted stays and that an admin can invite you again; when the workspace is open or your default it adds that another takes its place. Focus starts on Cancel, Escape closes it and focus returns to the menu button. After you confirm, focus goes to the menu button of the workspace that is current now. The menu has no Leave when only one workspace is left.

Each workspace is a card: the tile, name, marks and the line of facts first, then Open and the menu under them. Every row has the same height, so creating, joining, opening or leaving never moves the foot until the list is longer than four. The foot with the status line and Undo stays pinned to the bottom of the screen.

The list is a real list. Open and the menu button name the workspace ("Open Hollowtree Studio", "More for Hollowtree Studio"); on the open workspace Open stays focusable and answers "Hearthroom is already open." instead of doing nothing. Current and Default are words with icons, never colour, and the status line is a polite live region present from the start. Problems under the fields are announced and linked to their field.