chore: groundwork for new design and features related to users and settings

docs/design/components.md

@@ -7,8 +7,10 @@
 | AuthShell | UPageCard, UColorModeSelect | title, description? | none | default, notice, footer | All public routes |
 | DashboardShell | UDashboardGroup, UDashboardSidebar, UNavigationMenu, UDashboardPanel, UDashboardNavbar, UBreadcrumb | none (reads route.meta and the session store) | none | default, navbar-right | All verified routes |
 | UserMenu | UDropdownMenu, UButton, UAvatar (a bottom sheet below md) | displayName?, username, email | logout | none | DashboardShell |
-| UsersTable | UTable | rows: UserRow[], loading | none | none | Users (md and up) |
-| UserCardList | custom list | same as UsersTable | none | none | Users (below md) |
+| UsersTable | UTable | rows: UserRow[], loading, canManage: boolean, busyIds: Set | cancel-invite, renew-invite | none | Users (md and up) |
+| UserCardList | custom list | same as UsersTable | same as UsersTable | none | Users (below md) |
+| RoleBadge | UBadge | role: 'owner'\|'admin' | none | none | Users |
+| SettingsPage | custom card | none (reads GET /v1/settings) | none | none | Settings |
 | InviteStatusBadge | UBadge | status: 'accepted'\|'pending'\|'expired' | none | none | Users |
 | InviteUserModal | UModal, UForm, UFormField, UInput | none | invited(invite) | none | Users |
 | ProfileCard | custom card (border, padding, optional footer strip) | title, description | none | default, footer | Profile |
@@ -63,7 +65,7 @@ Responsive 400 px card from sm up, with its top 12 vh from the top. Below sm , t
 
 ### DashboardShell
 
-The sidebar has four destinations (Home, Articles, Users, Integration), and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
+The sidebar has five destinations (Home, Articles, Users, Integration, Settings), and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
 
 RenewCMS
 
@@ -97,7 +99,7 @@ Mobile top bar. The menu button opens the sidebar as a left slideover.
 
 Built from UDashboardGroup storage="local" › UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4" with the #header (AppLogo), #default ( UNavigationMenu orientation="vertical" :collapsed ) and #footer (UserMenu) slots. Each page is a UDashboardPanel , with a UDashboardNavbar holding UDashboardSidebarCollapse and UBreadcrumb . On mobile, UDashboardSidebarToggle appears and the sidebar's built-in slideover takes over.
 
-UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens".
+UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens", which restores the System, Light and Dark items.
 
 Props, slots No props, because the shell reads the user from the session Pinia store. The navbar reads route.meta.title and route.meta.breadcrumb . Slots navbar-right (page actions on mobile) and default . It shows the offline banner when navigator.onLine is false.
 
@@ -381,24 +383,22 @@ The Product components board was not regenerated for these. They are written fro
 
 ### UserMenu (changed)
 
-The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile and Log out.
+The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile, the theme choice and Log out.
 
 - **Chip:** 40 px high, an initials avatar (26 px, sand `#d4c5b0` with ink text), the name, and a chevrons-up-down icon. `aria-haspopup="menu"`, `aria-expanded`, title "Account". While the menu is open, or while `/profile` is the current page, it takes `--rc-sand` with `#111111` text.
 - **Name:** the display name when there is one, otherwise the username. Initials come from the first letters of the first two words of the display name, uppercased. Without a display name they come from the username.
-- **Desktop menu:** a 224 px popover anchored above the chip on its left edge, with `--rc-shadow-pop`. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, Log out (log-out). The current page's item is highlighted with `--ui-bg-elevated`.
-- **Mobile:** the account row in the navigation drawer opens a bottom sheet over an `--rc-overlay` scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text.
+- **Desktop menu:** a 224 px popover anchored above the chip on its left edge, with `--rc-shadow-pop`. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, System, Light and Dark (14 px text, a check icon at the right edge on the current choice), a separator, Log out (log-out). The current page's item is highlighted with `--ui-bg-elevated`. The theme items are radio-style: choosing one applies at once and keeps the menu open. Nuxt UI: `type: 'checkbox'` items bound to `useColorMode().preference`.
+- **Mobile:** the account row in the navigation drawer opens a bottom sheet over an `--rc-overlay` scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text; the theme items keep the same order and separators.
 - **Keyboard:** Escape or a click outside closes it. Arrow keys move between items.
-- **Open question:** the shipped menu also offers System, Light and Dark. The board omits them. See [profile.md](screens/profile.md).
+- The board now draws the theme items, so the chip, menu and sheet need no visual exception. The board highlights Profile even on Home; the app highlights it only on `/profile`.
 
 ### DashboardShell (changed)
 
-The navigation gains **Users** (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile".
+The navigation gains **Users** (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile". It later gains **Settings** (settings icon) after Integration, with the breadcrumb "Settings".
 
 ### UsersTable, UserCardList
 
-Columns Username, Invite status, Created (sorted descending, with an arrow-down icon on the header). Grid `minmax(0,1fr) 160px 160px`, 36 px header on `--ui-bg-elevated`, 44 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the name line, then the badge and "Created {date}". There are no row actions.
-
-A row's name cell shows the display name first (medium weight, highlighted), the username beside it in muted text, and a mono "you" tag on the current user's row. Invite rows show the email, regular weight, toned. The row of a just-sent invite has `--ui-bg-elevated`.
+Superseded by "UsersTable, UserCardList (changed)" below.
 
 Skeleton rows appear after 150 ms of loading.
 
@@ -735,3 +735,32 @@ Three choices: System (the default), Light and Dark. The toggle at the top of th
 Nuxt UI In the user menu: a UDropdownMenu group of three type: 'checkbox' items bound to useColorMode().preference . On auth screens: UColorModeSelect in the footer. Nuxt UI's UColorModeButton isn't used because it only toggles between light and dark and hides the system option. colorMode: true in the plugin handles storage and applying the .dark class before first paint.
 
 ARIA Menu items use menuitemcheckbox , with aria-checked on the current choice. The segmented variant is a radiogroup named "Theme".
+
+## Added with roles, invite actions and Settings
+
+Written from `source/RenewCMS Screens Back-office.dc.html` and `source/AppFrame.dc.html`. The Product components board was not regenerated for these.
+
+### UsersTable, UserCardList (changed)
+
+Columns Email, Display name, Role, Invite status, Created (sorted descending, with an arrow-down icon on the header) and an unlabeled actions column. Grid `minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px`, 12 px gap, 36 px header on `--ui-bg-elevated`, 48 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the email line, the display name below it when set, then role badge, status badge and "Created {date}" on one line, then the row action as a 44 px button.
+
+The email cell is medium weight and highlighted, with a mono "you" tag on the current user's row. The display name is highlighted, or a muted `—` when empty. The row of a just-sent or just-renewed invite has `--ui-bg-elevated`. Skeleton rows have one bar per column. The username is not shown.
+
+### RoleBadge
+
+A 20 px badge in IBM Plex Mono 11 px medium, 7 px side padding, no icon.
+
+| Role | Fill | Text | Border |
+|---|---|---|---|
+| owner | `--ui-primary` | `--ui-bg` | `--ui-primary` |
+| admin | transparent | `--ui-text-toned` | `--ui-border-accented` |
+
+### Row action button (Users)
+
+A 28 px outline button on desktop (12 px medium text, 13 px icon, 9 px side padding, `--ui-border-accented` border, `--ui-bg` fill, no wrapping), 44 px on mobile (14 px side padding, 14 px icon). Cancel invite: user-x, text `--ui-error`. Renew invite: refresh-cw, text `--ui-text-highlighted`. While busy: the label becomes "Renewing…", the icon loader-circle, opacity 50 %, disabled. Nuxt UI: `UButton variant="outline" size="xs"` with the classes above.
+
+Cancel goes through `ConfirmDialog` with `tone: 'danger'`: title "Cancel this invite?", the description names the address, the cancel button reads "Keep invite" and the confirm button "Cancel invite", pending label "Cancelling…", and a failure shows a notice inside the dialog.
+
+### SettingsPage
+
+A page header (title "Settings", subtitle "Workspace information."), then one card holding a "Version" row. See [screens/settings.md](screens/settings.md).