[RELEASE] chore(tangle-cloud): UX polish pass — banners, sidebar, empty states, heights#3210
Merged
Conversation
…ty states, heights
Audit screenshots showed the same set of paper-cuts on every page: decorative
"status" pills that carried no data, an unconventional text-labeled sidebar
collapse button, 4-cell "Locked" pseudo-grids inside every wallet-required
empty state, and a "Total Value Locked" tab that actually only showed the
wallet's own deposits. Net 409 lines down, 108 lines up.
Sidebar (`apps/tangle-cloud/src/components/Sidebar.tsx`)
- Move the collapse control out of the nav stack into an icon-only button
floating on the sidebar's right edge (VSCode / Linear / Vercel pattern).
Only appears on sidebar hover/focus; flips orientation when collapsed.
Hero pills
- Drop the decorative `HeroMetric` pills from `instances/page.tsx` (Services
Live / Orders Tracked / Wallet Scoped), `earnings/page.tsx` (Assets Grouped
/ Events Indexed / Explorer Linked → and the post-connect variant), and
`rewards/page.tsx` (Balances Indexed / Claims On-chain / History Auditable
+ post-connect variant). They were ornaments — no real data, just labels.
- Operators/blueprints kept their hero metrics because those are real counts.
Empty states
- `RequireWallet`: drop the right-side 4-cell `Account / Network / Tx /
History → Locked` grid. The single Connect button + chips of what loads
after connect is enough; the locked grid was visual noise that read
"page is broken".
- `AccountStatsCard` (home wallet-required state): same pattern, dropped the
2x2 `Services / Approvals / Jobs / Balances → Locked` grid, lifted the
Connect button into the bottom of a single column, made the copy honest
("Public catalog and operator registry data load below without a wallet").
- `TotalValueLocked/index.tsx`: rewrote — the panel was titled "Total Value
Locked" but rendered wallet-scoped `useStakingOverview` deposits. Renamed
to "My deposits" (heading matches data), dropped the single-tab `Tabs`
scaffolding, replaced the 4-locked-cells disconnected state with a clean
one-row CTA. Same source data, accurate label.
- Removed the `EarningsPreviewPanel` + `RewardsPreviewPanel` blocks. Both
showed fake `TNT / USDC / ETH → Connect wallet | Locked` rows, which
rendered the screen as "broken table" rather than "needs wallet".
Layout heights (`instances/page.tsx`)
- Replaced the `xl:grid-cols-[1.05fr_0.95fr] xl:items-start` ladder with
`xl:grid-cols-2 xl:auto-rows-fr xl:items-stretch` so AccountStatsCard and
InstructionCard share a row height. AccountStatsCard now uses
`flex h-full flex-col` and pins the Connect button to the bottom with
`mt-auto` so empty/filled variants stay equal.
Verified
- `yarn typecheck`, `yarn lint`, `yarn build:tangle-cloud` all clean
- Playwright on local dist: home renders without decorative pills, sidebar
collapse button is gone from the nav stack, wallet-required cards are
single-row CTAs, "My deposits" panel shows accurate title.
drewstone
added a commit
that referenced
this pull request
May 14, 2026
…, not just HEAD The auto-sync workflow's `if` guarded on `github.event.head_commit.message`, which silently skipped merge-commit-style PRs: the `Merge pull request #NNNN from …` subject of the merge commit never starts with `[RELEASE]` even when the merged commit underneath does. Net effect: any release PR landed via the default GitHub "Create a merge commit" button bypassed master promotion (saw this on #3210 — develop got the UX polish, master stayed on the previous tip). Switch the guard to `contains(toJson(github.event.commits.*.message), '[RELEASE]')` so any commit in the push body counts. Squash-merge style (which we recommend in CLAUDE.md) continues to work; classic merge-commit style now also works without forcing the reviewer to override the merge subject. CLAUDE.md updated to document both squash-merge and merge-commit paths.
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.
Drew's audit findings from running tangle-cloud through screenshots:
This PR addresses all five. Net -409 / +108.
Changes by area
Sidebar
Hero pills
Empty states (4-cell `Locked` grids deleted)
Layout heights
Verification
Tagged `[RELEASE]` so auto-sync will FF master once merged.