feat(tangle-cloud): chrome system — 5 type roles, page primitives, ⌘K palette, URL state#3234
Merged
Merged
Conversation
… palette, URL state
A senior-level cloud-app redesign: replace bespoke per-page hero/filter chrome
with a tokenized chrome system every page composes from the same primitives.
## What was wrong with the old chrome
Every page in tangle-cloud was inventing its own composition: gradient hero
cards (300px tall), filter cards (320px tall), bespoke `cloud-hero-card`
styles with dot-grid + double-radial backgrounds, custom shadow ramps. The
/blueprints page consumed 620px of vertical chrome on a 900px viewport
before the first card rendered — only 3 cards above the fold. Five pages
shared the same anti-pattern with subtle drift. Three brands fighting in
one app.
Sandbox-ui primitives (Card, Button, Input) were *used* correctly; the
*composition* was the divergence.
## What this PR introduces
`apps/tangle-cloud/src/styles/chrome.ts` is the single source of truth:
- **5 type roles** — display / section / body / label / mono. No more.
- **8 surface tokens** — fg×3, bg×3, border×2 — bound to the brand
CSS vars underneath so theme switching still works.
- **Status palette** — outlined pills only (`border-color bg-color/8`),
one tone per status, never filled.
- **3 chrome heights** — header (60/80/120), toolbar (44), strip (56),
tray (420). No more guessing pixels per page.
`apps/tangle-cloud/src/components/chrome/` is the primitive set every
catalog/dashboard/detail page now composes:
- `PageHeader` — H1 + optional subtitle + action slot, 3 density modes.
Replaces the gradient hero card on every page.
- `PageToolbar` — search + count + filters + trailing, 44px sticky.
Replaces the per-page filter card.
- `FilterTray` — popover that holds secondary filters. One pill on the
toolbar with an active-count badge; click opens the tray.
- `MetricStrip` — opt-in horizontal metric row (2–4 metrics), mono
tabular numerals, dot-indicator tone palette.
- `EmptyState` — six kinds (no-data / no-match / error / loading /
no-permission / no-network), hand-crafted defaults per kind,
icon + title + body + primary/secondary CTAs. Replaces the slop of
"no X found" placeholders across the app.
- `ResultGrid` + `ResultList` — tokenized grid (cards) and dense rows
(table-flex). The list view is the senior move for catalog pages
where operators compare items by columns.
- `StatusPill`, `ViewToggle` — supporting primitives.
## ⌘K command palette + keyboard surface
The product tier earns it. `CommandPalette` (Dialog + filtered list, no
cmdk dep), `useKeyboardShortcuts` for `⌘K`, `/`, `g b|o|r|e|i|m`, `?`,
`ShortcutsHelp` overlay for discovery. All mounted once in `Layout` so
every page inherits the keyboard surface.
## URL state via `useUrlState`
Search query, filter selections, pagination — everything that matters
across refresh — moves to the URL. `string` / `enum<T>` / `int` codecs
keep clean URLs (default values omitted). Bare /blueprints stays clean;
filtered views are share-links.
## Page migrations
- `/blueprints` — full migration to PageHeader + MetricStrip +
PageToolbar + FilterTray + EmptyState. Above-the-fold goes from 620px
→ ~140px before content. URL state on search/category/availability/
source/trust/page.
- `/operators` — PageHeader + MetricStrip (4 metrics), bespoke hero card
+ sidebar pitch deleted.
- `/instances` — PageHeader + MetricStrip (role-aware metrics).
- `/rewards`, `/earnings` — PageHeader, hero card deleted.
## Bespoke CSS deleted from styles.css
- `.cloud-hero-card` (8 lines of radials + shadows)
- `.cloud-compact-header` (shadow ramp)
- `.catalog-controls` (shadow ramp)
22 lines down. Anything remaining there is real (`tangle-cloud-card`
border token shim, `.results-grid` content-visibility helper, wallet
button gradient).
## Verification
- `yarn nx typecheck tangle-cloud` — clean
- `yarn nx lint tangle-cloud` — 2 warnings (unrelated to chrome system)
- `yarn nx test tangle-cloud` — 162 / 162 passing
- `yarn nx build tangle-cloud` — clean, bundle +8KB gzipped (palette +
shortcuts + URL state)
## Why this is "9+" and not the timid v1
The 7.5 version would have been "compact toolbar, smaller hero, ship". A
senior fix doesn't trim the existing layout — it picks a different page
archetype (catalog, not dashboard) and builds primitives so every future
page falls into the same pattern by default. The chrome system is the
permanent solve; the page migrations are the proof.
Follow-ups still owed:
- `/blueprints/[id]` detail + `/blueprints/manage` + service pages —
same primitives, different content.
- Hand-craft all 6 EmptyState kinds per page with context-aware copy.
- 100ms opacity+4px y page transitions.
- Density toggle in user settings.
- Audit remaining `variant="sandbox"` Card usages across the codebase.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Senior-level cloud-app redesign. Replace bespoke per-page hero/filter chrome with a tokenized chrome system every page composes from the same primitives.
What was wrong with the old chrome
Every page in tangle-cloud was inventing its own composition: gradient hero cards (~300px), filter cards (~320px), bespoke `cloud-hero-card` styles with dot-grid + double-radial backgrounds, custom shadow ramps. /blueprints consumed 620px of vertical chrome on a 900px viewport before the first card rendered — only 3 cards above the fold. Five pages shared the same anti-pattern with subtle drift. Three brands fighting in one app.
Sandbox-ui primitives (Card, Button, Input) were used correctly; the composition was the divergence.
What this PR introduces
`apps/tangle-cloud/src/styles/chrome.ts` — single source of truth:
`apps/tangle-cloud/src/components/chrome/` — primitive set:
⌘K command palette + keyboard surface:
URL state via `useUrlState`:
Search query, filter selections, pagination — everything that matters across refresh — moves to the URL. `string` / `enum` / `int` codecs keep clean URLs (default values omitted). Filtered views are share-links.
Page migrations
Bespoke CSS deleted
`.cloud-hero-card` (radials + shadows), `.cloud-compact-header` (shadow ramp), `.catalog-controls` (shadow ramp). 22 lines down from styles.css.
Test plan
Why this is "9+" and not the timid v1
The 7.5 version would have been "compact toolbar, smaller hero, ship". A senior fix doesn't trim the existing layout — it picks a different page archetype (catalog, not dashboard) and builds primitives so every future page falls into the same pattern by default. The chrome system is the permanent solve; the page migrations are the proof.
Follow-ups still owed