Skip to content

UI Simplification — One Dashboard, One Layout

Active spec. Governed by 00-ROADMAP.md. Last updated 2026-05-31.


1. Decision

One app, one dashboard, role-driven content. No per-user-type home screens for the MVP. Customization and templates are a deferred post-MVP layer.

This matches what's actually shipped today and removes the biggest source of accidental complexity.


2. Current reality (it's already simpler than the docs implied)

  • The web app already renders a single dashboard for everyone: ctrl-audio-front/src/app/shared/artist/dashboard/index.tsx (ArtistSpaceDashboard).
  • Role is computed per resource, not per route, via ctrl-audio-front/src/lib/collaborators/index.tsxgetCollaboratorRole() (Owner / Admin / Editor / Viewer). It only shows/hides actions — there is no separate "home per role".
  • The elaborate per-actor UX in 17-UX-ARCHITECTURE-ACTOR-DRIVEN.md (124 KB) was aspirational and never built. So this is not a teardown — it's a decision to not build it prematurely.

3. Layout consolidation

The frontend carries six template layout variants (Isomorphic Furyroad leftovers) switched at runtime via useLayout() (Jotai + localStorage): boron, hydrogen, helium, lithium, beryllium, carbon.

Decision: keep one layout for the product (recommend Boron — the default with sidebar + sticky header + bottom player, which fits the audio use case), and retire the rest.

Cleanup checklist (Phase 2 — web parity):

  • Remove unused layout variants under ctrl-audio-front/src/layouts/{helium,lithium,beryllium,carbon}/ and the useLayout switching once a single layout is wired in src/app/(hydrogen)/layout.tsx.
  • Delete template dummy data: ctrl-audio-front/src/layouts/beryllium/dummyRecents.tsx.
  • Prune unused placeholder pages in src/app/(other-pages)/ (coming-soon, maintenance, request-access, …) that aren't part of a real flow.
  • Do this as a dedicated PR with the app running — verify no route depends on a removed layout.

4. Customization & templates — deferred (the future layer)

Once the MVP loop is validated, layer on (in this order):

  1. Theming — light/dark is done; add brand accent + the shared Liquid-Glass tokens (doc 19).
  2. Saved views / dashboard widgets — let users pin recents, pending approvals, activity.
  3. Role/workflow templates — opinionated presets per actor (label vs. producer vs. solo artist), built on top of the one dashboard, not as separate apps. This is where 17-UX-ARCHITECTURE-ACTOR-DRIVEN.md becomes useful input.

5. Shared look & feel

The web dashboard and the iOS app share one design language (Liquid Glass — doc 19 §4). During the parity phase, map the iOS semantic tokens into ctrl-audio-front/src/app/globals.css so both clients stay visually identical.

Ctrl-Audio Platform Documentation