refactor: UI cleanup pass — dead code, tokens, tab consolidation, design-system audit page#1190
Open
freski-ai wants to merge 10 commits into
Open
refactor: UI cleanup pass — dead code, tokens, tab consolidation, design-system audit page#1190freski-ai wants to merge 10 commits into
freski-ai wants to merge 10 commits into
Conversation
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
Live component/token catalog for nt-fe — shadcn primitives, top domain wrappers (rendered live with variants/sizes + how they actually look through their app wrapper), real per-token usage counts via grep, and a side-by-side view of duplicate implementations solving the same problem (badges, cards, alerts) with no shared base. Not a product feature — an internal tool for tracking this app's own design-system drift, kept in sync with every deletion/rename in the cleanup that follows. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
Card and PageCard now use a border instead of shadow-sm, per design direction. Fixed two spots that had silently drifted off the shared Card look: recent-activity-card.tsx explicitly opted out via border-none, and PendingRequests' loaded/hidden states never had a border at all (only the loading skeleton did) — both now match. Also darkens the card border token from the near-invisible --border to --input for better contrast in light mode. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
4 components with zero consumers anywhere in the app (verified via grep, re-checked immediately before deleting): selectable-option-button, asset-details-modal, error-alert, insufficient-balance-modal. 2 files that were pure re-export shims adding no code of their own (components/datepicker.tsx, components/warnings-provider.tsx) — consumers now import the real source directly (ui/datepicker, hooks/use-warnings). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
--onboarding-primary, --chart-1..5, the full --sidebar-* set (8 tokens, no shadcn Sidebar primitive is even installed here), and --general-warning-border — all defined in globals.css, all confirmed zero usages anywhere in app code. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
…zing shield.tsx: 36x repeated fill="#262626" -> one named constant. Left as raw hex on purpose — it's a fixed decorative badge icon with no dark: variant, wiring it to --secondary/--muted would make it flip color in light mode, which it never currently does. sidebar.tsx: bg-[#262626] (the deliberate always-dark sidebar chrome) -> bg-secondary, but only inside the two spots already scoped by a literal `dark` class, since --secondary resolves to the exact same rgb(38,38,38) there. Almost applied the same fix to treasury-layout-client.tsx's outer page wrapper too — caught before committing that adding `dark` there would cascade into every themed descendant (the whole page, not just chrome) regardless of the site's actual light/dark setting. Left that one as raw hex, flagged instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
CSS var itself was renamed in the globals.css cleanup commit — this updates the 7 files using the bg-brand-blue utility class (letter- avatar fallback backgrounds, NEAR-network accents). Value never changed, only the name — it was NEAR green the whole time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
Settings page was the only consumer of TabGroup (pill/segmented, ToggleGroup-based) — the rest of the app uses the Tabs-based family (underline-tabs/responsive-tabs). Migrated it onto ResponsiveTabs and deleted tab-group.tsx. Visual change on the Settings page: pill tabs -> underline tabs (with mobile Select collapse, new for this page). Confirmed with the user before making it. ui/toggle-group.tsx (the primitive TabGroup was built on) now has zero app consumers — left in place, it's a shadcn primitive. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
max-w-[600px] is copy-pasted ~20 times as the app's de facto narrow- content-column width (payment forms, onboarding, confidential activation cards) — a real, consistent convention, just never named. Added NARROW_CONTENT_MAX_WIDTH to lib/utils.ts and wired up one call site as a proof of concept. Stopped here rather than mechanically sweeping all 20 — judged lower priority than the remaining god-component work for this pass. The other ~19 sites are unchanged and still using the literal. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK
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
Strict-phases UI refactor (audit → plan → execute-per-step, each step keeping the app working and visually unchanged unless explicitly flagged). Full audit + step plan lives in the session that produced this PR.
/design-systempage — live component/token catalog, not a product feature, built to track this app's own design-system drift going forward.--onboarding-primary,--chart-1..5, the full--sidebar-*set — no shadcn Sidebar primitive is even installed —--general-warning-border), all confirmed zero usage.shield.tsx,sidebar.tsx) with light/dark scoping double-checked before tokenizing — caught and avoided a real bug where tokenizingtreasury-layout-client.tsx's outer wrapper would have forced the whole page tree into dark-mode CSS variables regardless of the site's actual theme.--brand-blue→--brand-green(8 files) — the value was always NEAR green, only the name was wrong.TabGrouponto the Tabs-basedResponsiveTabs— visual change: pill tabs → underline tabs, confirmed before making it).RecentActivity,PendingRequests).max-w-[600px]constant (NARROW_CONTENT_MAX_WIDTH), wired into 1 of ~20 call sites as proof of concept.Explicitly deferred (see
/design-systemand PR discussion for why): splitting the 6 largest god-component files (1200–2227 lines each — core balance/transaction display logic) and movingcomponents/*intocomponents/shared/. Judged too large/risky to rush in this pass; real money-display logic deserves a dedicated, focused effort rather than being ganged through quickly.Test plan
/design-systemloads, all sections render, dark/light toggle works?tab=deep links still work, mobile collapses to a Select dropdown🤖 Generated with Claude Code
https://claude.ai/code/session_011gbVzMdVpqwrRB9a1Jt4ZK