feat: post-PR-159 UI cleanup — sidebar IA + account redesign #160

Merged

chihlasm merged 4 commits from feat/account-redesign-cleanup into main 2026-05-06 23:14:16 +00:00

Conversation 0 Commits 4 Files Changed 7 +544 -677

chihlasm commented 2026-05-05 05:21:43 +00:00

Owner

Copy Link

Post-PR-159 UI cleanup pass. Three loosely-related refactors that all started with "the page has too many cards drifting apart from each other".

What changed

0f90c0e Sidebar IA — single source of truth

Killed the dual railGroups + sections definitions that had drifted apart. One source of truth (workItems + libraryItems + footerItems) rendered in both pinned and rail modes; pin/unpin is now just a width affordance, not an IA switch. Hairline divider replaces section labels. Renames: Home → Dashboard, History → Sessions, Insights → Analytics. Guides moved to the footer alongside Account.

8612042 Account settings index redesign

The page had ~12 distinct card surfaces with three places of nested cards-inside-cards, against PRODUCT.md's "elevation = lighter surface + border" + "nested cards are always wrong" rules. Branding appeared twice, Display Code lived in Identity but does invite work, and Preferences got a full card for one dropdown.

Single column, max-w-3xl, no card chrome. Sections separated by border-t rules + mono-uppercase section labels:

• Header: inline-editable name + plan/status/owner/member-count info line
• Plan & usage: 3 thin progress rows (replaces the 4-card grid)
• People (owner-only): invite form + unified members + pending invites list + display code as quiet "share to invite" line. Non-owners see a one-line "managed by your admin"
• Settings: dense route list with status pills (Branding row carries Included/Plan-gated). Profile above a thin divider; team-admin rows below, owner-gated
• Account actions: plain rows. No red box-of-doom

Drops: Access & Security card (filler), Preferences card, Settings Areas link grid, billing-card branding-status duplicate. Default export format moved to Profile Settings.

856 → 710 lines on the index. Net -123 lines for the file pair.

07a3f01 Fix Seats blank value (found by /qa)

Backend /subscription returns usage as {tree_count, session_count_this_month} only — no user_count. TS type lies, declares user_count: number non-optional. Old card-stack design hid the gap visually; new flat layout surfaced it as a blank current value. Fix: fall back to members.length for owners; hide the row for non-owners.

QA report

.gstack/qa-reports/qa-report-account-redesign-2026-05-05.md — owner + engineer paths tested live. Health score 95/100 post-fix. Console clean across all five page loads.

Out of redesign scope

• Backend /subscription should return user_count to honor the type (frontend hack works but is defensive)
• Account API doesn't carry the owner's name, so non-owner header line skips "Owned by X" and the "managed by your admin" message lacks the parenthetical name. Surfacing this needs a new API field

Verified

• tsc clean
• eslint clean
• vite build clean (pre-existing chunk-size warnings unrelated)
• Live browser-tested at /account (owner + engineer) and /account/profile

🤖 Generated with Claude Code

Post-PR-159 UI cleanup pass. Three loosely-related refactors that all started with "the page has too many cards drifting apart from each other". ## What changed ### `0f90c0e` Sidebar IA — single source of truth Killed the dual `railGroups` + `sections` definitions that had drifted apart. One source of truth (`workItems` + `libraryItems` + `footerItems`) rendered in both pinned and rail modes; pin/unpin is now just a width affordance, not an IA switch. Hairline divider replaces section labels. Renames: Home → Dashboard, History → Sessions, Insights → Analytics. Guides moved to the footer alongside Account. ### `8612042` Account settings index redesign The page had ~12 distinct card surfaces with three places of nested cards-inside-cards, against PRODUCT.md's "elevation = lighter surface + border" + "nested cards are always wrong" rules. Branding appeared twice, Display Code lived in Identity but does invite work, and Preferences got a full card for one dropdown. Single column, max-w-3xl, no card chrome. Sections separated by `border-t` rules + mono-uppercase section labels: - **Header**: inline-editable name + plan/status/owner/member-count info line - **Plan & usage**: 3 thin progress rows (replaces the 4-card grid) - **People** (owner-only): invite form + unified members + pending invites list + display code as quiet "share to invite" line. Non-owners see a one-line "managed by your admin" - **Settings**: dense route list with status pills (Branding row carries Included/Plan-gated). Profile above a thin divider; team-admin rows below, owner-gated - **Account actions**: plain rows. No red box-of-doom Drops: Access & Security card (filler), Preferences card, Settings Areas link grid, billing-card branding-status duplicate. Default export format moved to Profile Settings. 856 → 710 lines on the index. Net -123 lines for the file pair. ### `07a3f01` Fix Seats blank value (found by /qa) Backend `/subscription` returns usage as `{tree_count, session_count_this_month}` only — no `user_count`. TS type lies, declares `user_count: number` non-optional. Old card-stack design hid the gap visually; new flat layout surfaced it as a blank current value. Fix: fall back to `members.length` for owners; hide the row for non-owners. ## QA report `.gstack/qa-reports/qa-report-account-redesign-2026-05-05.md` — owner + engineer paths tested live. Health score 95/100 post-fix. Console clean across all five page loads. ## Out of redesign scope - Backend `/subscription` should return `user_count` to honor the type (frontend hack works but is defensive) - Account API doesn't carry the owner's name, so non-owner header line skips "Owned by X" and the "managed by your admin" message lacks the parenthetical name. Surfacing this needs a new API field ## Verified - tsc clean - eslint clean - vite build clean (pre-existing chunk-size warnings unrelated) - Live browser-tested at /account (owner + engineer) and /account/profile 🤖 Generated with [Claude Code](https://claude.com/claude-code)

chihlasm added 3 commits 2026-05-05 05:21:43 +00:00

refactor(sidebar): collapse rail/sections to single-IA, log docs ... 0f90c0e199

- Sidebar: kill the drifting railGroups + sections dual definition.
  Single source of truth (workItems / libraryItems / footerItems)
  rendered in both pinned and rail modes; pin/unpin is a width and
  label affordance, not an IA switch. Hairline divider replaces
  section labels. Guides moves to the footer alongside Account.
  Renames: Home -> Dashboard, History -> Sessions, Insights -> Analytics.
- CURRENT-STATE.md: log PR #158 (session impeccable pass + tasklane
  keyboard flow) under "Recently shipped".
- PRODUCT.md: design-context source of truth (users, brand, aesthetic);
  sibling to DESIGN-SYSTEM.md.
- skills-lock.json: lock /impeccable + /documentation-writer skill
  versions so other sessions reproduce the same tooling state.
- Drop stale .impeccable.md.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

refactor(account): redesign settings index, drop card stack ... 86120423da

The index page had ~12 distinct card surfaces with three places of
nested cards-inside-cards, against PRODUCT.md's "elevation = lighter
surface + border" + "nested cards are always wrong" rules. Branding
appeared twice, Display Code lived in Identity but does invite work,
and Preferences got a full card for one dropdown.

Single column, max-w-3xl, no card chrome. Sections separated by
border-t rules + mono-uppercase section labels (existing house style):

- Header: inline-editable name + plan/status/owner/member-count info
  line. No card.
- Plan & usage: renewal date right-aligned in section header, three
  thin progress rows replace the 4-card usage stat grid, upgrade
  CTAs right-aligned at bottom.
- People (owner-only): invite form, unified members + pending invites
  list, display code as a quiet "share to invite during signup" line.
  Non-owners see a one-line "managed by your admin" instead of a card.
- Settings: dense route list (icon + title + summary + status pill +
  chevron). Profile above a thin divider; team-admin rows below,
  owner-gated. Branding row carries the Included/Plan-gated pill.
  Support & Feedback as a dim link at the bottom.
- Account actions: plain rows. Owner: Transfer + Delete. Non-owner:
  Leave. Destructive labels colored, no red box-of-doom.

Drops: Access & Security card (filler), Preferences card,
Settings Areas link grid, billing-card branding-status duplicate,
SettingsLinkCard helper. Default export format moves to Profile
Settings where it belongs (personal preference, not account).

856 -> 710 lines on the index. tsc, eslint, vite build clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

fix(qa): ISSUE-001 — fall back to members.length when usage.user_count is missing ... 07a3f01184

The /subscription endpoint returns usage as {tree_count, session_count_this_month}
without user_count, so the Seats UsageRow rendered as " / ∞" (blank current value).
The TS type declared user_count: number, hiding this API/type drift; the old
card-stack design hid it visually because each stat had its own border. The new
flat layout surfaced the gap.

Owners get a fallback to members.length (already fetched). Non-owners can't
fetch members and don't need seat-count info, so the row hides entirely for
them. Verified live: owner now sees Seats 2 / ∞.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

chihlasm added 1 commit 2026-05-06 22:55:00 +00:00

test(e2e): update account page heading assertion to match redesign ... b544a7a462

8612042 dropped the static "Account Management" heading in favor of the
account name (rendered as a dynamic h1). Switch the smoke test to the
"Settings" SectionLabel — a stable h2 that survives the redesign.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

chihlasm merged commit a8b22cfa0b into main 2026-05-06 23:14:16 +00:00

chihlasm referenced this issue from a commit 2026-05-06 23:14:18 +00:00

feat: post-PR-159 UI cleanup — sidebar IA + account redesign (#160)

chihlasm referenced this issue from a commit 2026-05-08 02:56:10 +00:00

docs: refresh CURRENT-STATE, ROADMAP, README, DECISIONS for self-serve cutover

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

10x-analysis

From 10x product analysis

backend

FastAPI/Python work

bug

Something isn't working

collaboration

Team sharing, escalation, notifications

database

PostgreSQL/schema changes

documentation

Documentation updates

duplicate

This issue or pull request already exists

enhancement

Improvement to existing feature

feature

New functionality

frontend

React work

good first issue

Good for newcomers

help wanted

Extra attention is needed

integration

PSA, external service integrations

intelligence

Analytics, AI, data-driven features

invalid

This doesn't seem right

priority: high

Do this soon

priority: low

Nice to have

priority: medium

Important but not urgent

question

Further information is requested

quick-win

Low effort, high value

strategic

Long-term strategic bet

ux

User experience improvements

wontfix

This will not be worked on

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

chihlasm

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#160