feat(tangle-cloud): redesign blueprint card, wire ConnectKit, fix modal centering + rewards regression#3235
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.
…al centering + rewards regression Round-2 fixes from a real product audit, not another chrome trim: ## Blueprint card — rebuild from 2/10 to a card that earns its row The old card was 11 visual elements per tile: gradient visual block, category pill, title, mono publisher ID, deployment-modes pill, selection checkbox, 2-line description, status pill, capacity pill, audit pill, trust chip, 3-cell metric grid (Operators/Instances/Source), 2 action buttons, plus an optional GitHub link. Kitchen-sink design. Every card fought for the operator's eye and none of them won. Rebuild rule: ONE fact per visual line, three lines total. Line 1: title (large, primary read) Line 2: one-line description (truncated) Line 3: status — "Ready · N operators" OR "Needs operators" Everything else is gone or hover-revealed. Publisher address, category pill, deployment-modes pill, source-pinning pill, three-cell metric grid, github link — all on the detail page where they belong. Distinctive identity (so the wall doesn't look like every shadcn template gallery): the blueprint id renders as a large mono `#3` watermark in the top-right corner. Featured/audited blueprints get a 2px accent stripe on the LEFT border, not a full perimeter glow. Hover reveals two action buttons (Deploy + Register, or just Register when capacity is needed). On touch devices (`pointer: coarse`) the actions stay visible — no hover layer to discover them through. ## Drop the MetricStrip from /blueprints Catalog-wide stats (`17 catalog · 12 ready · 5 needs capacity`) don't belong above a search bar — operators came to find a blueprint, not to learn the catalog size. The strip was 56px of vertical chrome doing dashboard work on a catalog page. Net effect on above-the-fold: 437px → ~290px of chrome. 5 cards visible above the fold on a 1440×900 viewport, up from 3. ## Rewards page no longer renders as a tinted hero card `RequireWallet` still shipped the old `Card variant="sandbox"` + radial-gradient backdrop, so /rewards looked like a different product than /operators or /blueprints. Rebuild it on top of the chrome system's `EmptyState` (kind="no-permission"). Same component, same flatness, same accent treatment as the rest of the app. ## Wallet modal centers in the content area, not on the viewport The modal lives in a Radix portal under `<body>`, which centers on the viewport — so on lg+ screens it lands 128px off-center under the sidebar. The earlier `margin-left: calc(sidebar/2)` hack didn't survive the `tw-animate-css slide-in-from-left-1/2` animation, which re-applies `translateX(-50%)` on top. Fix: override Tailwind's `--tw-translate-x` custom property — the source of every Tailwind translate utility — to inject the sidebar compensation through the existing transform chain. The animation still composes cleanly, and the modal lands at the content-area center. ## Connect modal isn't sparse anymore The cloud wagmi config was a literal `connectors: [injected()]` — one "Injected" button in the modal, which is why the staking dapp's six-wallet picker felt warmer by comparison. Switch to ConnectKit's `getDefaultConfig` (same helper the staking dapp uses) for WalletConnect, Coinbase Wallet, Family Wallet, and EIP-6963 multi-injected discovery. Same Tangle WalletConnect project id, so an operator hopping between products sees their existing sessions instead of re-pairing. ## Dead code dropped along the way `BlueprintMetric`, `shortenIdentity`, `formatBlueprintName` callers, `BlueprintVisual`/`categoryBadgeStyle`/`categoryStripeStyle`/`AuditedPill`/ `BlueprintTrustChip` imports, the unused `ROLE_DESCRIPTION` map and `blueprintList` memo. Trim of 60+ lines. ## Verification - `yarn nx typecheck/build/lint tangle-cloud` — clean - `yarn nx test tangle-cloud` — 162/162 passing - Live measurement on `localhost:4300/blueprints`: H1 at y=92, first card row at y=292 — five cards above the fold. - Modal centered at viewport-aware x=766 (vs the old 638 at viewport- center). Visual match in screenshots.
…nt-card-redesign # Conflicts: # apps/tangle-cloud/src/pages/blueprints/BlueprintListing.tsx # apps/tangle-cloud/src/pages/blueprints/page.tsx
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.
Real product audit, real round-2 fixes
Drew called out four specific complaints on the chrome-system PR. All four are addressed here, plus dead-code cleanup.
1. Blueprint card — rebuilt from 2/10 to a card that earns its row
Old card was 11 visual elements per tile (gradient visual, category pill, title, mono publisher ID, deployment-modes pill, selection checkbox, 2-line description, status pill, capacity pill, audit pill, trust chip, 3-cell metric grid, 2 action buttons, optional github link). Every card fought for the operator's eye; none won.
Rebuild rule: ONE fact per visual line, three lines total.
Everything else gone or hover-revealed. Publisher address, category pill, deployment-modes pill, source-pinning pill, three-cell metric grid, GitHub link — all on the detail page where they belong.
Distinctive identity (so the wall doesn't look like every shadcn template gallery): blueprint id renders as a large mono
#003watermark in the top-right corner. Featured/audited blueprints get a 2px accent stripe on the LEFT border only — not a full perimeter glow.Hover reveals two action buttons (Deploy + Register, or just Register when capacity is needed). On touch devices the actions stay visible — no hover layer to discover them through.
2. Dropped the MetricStrip from /blueprints
Catalog-wide stats ("17 catalog · 12 ready · 5 needs capacity") don't belong above a search bar. Operators came to find a blueprint, not to learn the catalog size. The strip was 56px of vertical chrome doing dashboard work on a catalog page.
Above-the-fold: 437px → ~290px of chrome. 5 cards visible above the fold on a 1440×900 viewport, up from 3.
3. Rewards page no longer renders as a tinted hero card
RequireWalletstill shipped the oldCard variant=\"sandbox\"+ radial-gradient backdrop, so /rewards looked like a different product than /operators or /blueprints. Rebuild it on top of the chrome system'sEmptyState(kind="no-permission"). Same component, same flatness, same accent treatment as the rest of the app.4. Wallet modal centers in the content area
The modal lives in a Radix portal under
<body>, which centers on the viewport — so on lg+ screens it landed 128px off-center under the sidebar. My earliermargin-left: calc(sidebar/2)hack didn't survive thetw-animate-css slide-in-from-left-1/2animation, which re-appliestranslateX(-50%)on top.Fix: override Tailwind's
--tw-translate-xcustom property — the source of every Tailwind translate utility — to inject the sidebar compensation through the existing transform chain. The animation still composes cleanly, and the modal lands at the content-area center.5. Connect modal isn't sparse anymore
Cloud's wagmi config was a literal
connectors: [injected()]— one "Injected" button in the modal, which is why the staking dapp's six-wallet picker felt warmer by comparison. Switch to ConnectKit'sgetDefaultConfig(same helper the staking dapp uses) for WalletConnect, Coinbase Wallet, Family Wallet, and EIP-6963 multi-injected discovery. Same Tangle WalletConnect project id — an operator hopping between products sees their existing sessions instead of re-pairing.6. Dead code dropped along the way
BlueprintMetric,shortenIdentity,BlueprintVisual/categoryBadgeStyle/categoryStripeStyle/AuditedPill/BlueprintTrustChipimports, the unusedROLE_DESCRIPTIONmap andblueprintListmemo. Trim of 60+ lines.Test plan
yarn nx typecheck/lint/test/build tangle-cloud— clean (162 / 162 tests passing)localhost:4300/blueprints: H1 at y=92, first card row at y=292 — five cards above the fold.Still owed (planned follow-ups)
/blueprints/[id]/services/...and/operators/[id]need the same card system applied.BlueprintsManageTable(the operator-managed-blueprints table) still has the old chrome density.