MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-386

6.10.1 Design — org admin surfaces: org switcher, org settings, cross-workspace member management

Done
Description

Estimate: 45m

Type: design (the planning-time design gate, Principle #13 + the design-reference rule). The org admin UI (6.10.5) depends on this card; without it the surfaces would be improvised, which is forbidden (notes.html #31).

Produce the design asset for the org administration surfaces under motir-core/design/org-admin/. Author it as a *.mock.html mockup built from the real design system (the shipped components/ui/* primitives + the --el-* colour tokens + the [data-display-style] shape tokens) — NOT a .pen. The HTML route is preferred when a coding agent produces the design (no translation gap; the reviewer sees the actual tokens). A PNG export is optional; the .mock.html is the source of truth (MOTIR.md § Design-reference rule).

Mirror (cited — the org-above-workspace admin shape). Atlassian administers the org at admin.atlassian.com (users, billing, multiple sites) with the ORG admin above site admins; Linear’s workspace Owner holds the org-root settings (members, billing, security). Draw THAT shape — an org-scoped admin area distinct from the existing workspace settings — minus billing (billing/credit surfaces are 7.12.5 / Epic 8, NOT this area).

Surfaces to draw (multi-panel board, EVERY panel — the multi-panel rule, mistake #31):

  • Panel 1 — the org switcher (in the shell). The control in the app shell (e.g. atop the sidebar / next to the workspace switcher) that shows the ACTIVE org and lets a multi-org user switch orgs; within the active org, the workspaces are still switched by the existing workspace switcher (draw the org→workspace nesting clearly). Include the single-org case (the switcher is a quiet label, not a dropdown) and the multi-org case.
  • Panel 2 — org settings (populated). The org-scoped settings page: org name, slug/identifier, and the org-level metadata an org owner controls — laid out like the existing workspace-settings surface but at the org tier. NAME, in the notes, the "billing lives here later (7.12.5 / Epic 8)" slot WITHOUT drawing an active billing control (a passive placeholder only).
  • Panel 3 — cross-workspace member management (populated). The roster of everyone in the org ACROSS its workspaces: each member, their org role (owner / admin / member), and which workspaces they belong to; with add / remove / change-role affordances. Plan for SCALE — paginate / lazy-load the roster (a large org has hundreds of members across many workspaces — NO "load all rows", the at-scale rule, finding #57).
  • Panel 4 — the org-role + invite affordances. The role picker (org owner / admin / member) and the "invite to org" entry, showing how an org role differs from the 6.4 workspace MemberRole (an org admin spans all workspaces; a workspace member does not). Draw the role-explanation copy.
  • Panel 5 — empty / loading / error + permission states. The first-run / single-member empty state, the loading skeleton for the paginated roster, the fetch-error state, and the NOT-an-org-admin state (a workspace member who lacks org-admin sees a gated/forbidden treatment, not the controls).

Also write design/org-admin/design-notes.md naming the exact primitives used per surface, the exact copy strings, the placement decisions (esp. WHERE the org switcher sits relative to the workspace switcher), the per---el-* colour role for each element (use the palette, not grey-only — finding #54; e.g. a per-org-role tint or a Pill tone for the role chips), and a "primitives composed (no hand-rolling)" checklist (the design-notes.md convention 1.3.3 / 1.5.1 / 7.0.1 established). It MUST state, in writing, that billing/credit/usage is 7.12.5 / Epic 8 and absent here, and that the cross-ORG platform-staff console is Epic 10 (this is the tenant org admin, not the platform console).

Branch. design/PROD-6.10.1-org-admin. The design/* prefix gate skips CI E2E + the Vercel preview deploy (MOTIR.md § Plan-seed Workflow) — this PR only edits design/org-admin/**, no app code.

Acceptance criteria

  • motir-core/design/org-admin/org-admin.mock.html exists, renders the five panels above, and references ONLY --el-* tokens + [data-display-style] shape tokens (no Tier-0 --color-*, no hand-rolled spacing — the motir-core/CLAUDE.md § colour / shape rules).
  • motir-core/design/org-admin/design-notes.md exists, names every primitive composed + every copy string + the per-element --el-* role, states WHERE the org switcher sits vs the workspace switcher, and STATES that billing/credit is 7.12.5 / Epic 8 and the cross-org platform console is Epic 10 — both out of scope here.
  • The cross-workspace member roster is drawn paginated/lazy (at-scale, NOT load-all); the org switcher is drawn for BOTH the single-org and multi-org cases.
  • The org-role affordances are drawn distinct from the 6.4 workspace role, with the role-explanation copy.
  • The mockup composes ONLY shipped primitives (Card, Pill, Button, EmptyState, a table/list pattern, a switcher/menu pattern, the skeleton/loader) — if a genuinely new primitive is needed, that is a NEW design/ subtask, not a code workaround.

Context refs

  • motir-core/design/ready/ (7.0.1) + the existing workspace-settings design area — the closest existing design layouts; mirror their layout + design-notes.md shape.
  • motir-core/components/ui/Pill.tsx, Card.tsx, Button.tsx, EmptyState.tsx — the composable surface.
  • The existing workspace-switcher component in the app shell — the pattern the org switcher sits alongside / above.
  • motir-core/app/globals.css — the --el-* colour + [data-display-style] shape tokens.
  • Atlassian admin.atlassian.com org admin + Linear workspace Owner settings — the cited org-root admin mirror.