feat(frontend): header nav redesign — grouped pill track (Option B) - #64
Merged
Conversation
Desktop Navbar becomes one icon-only pill track with a filled-puck active state, aria-hidden hover/focus tooltips, and an avatar+first-name chip replacing the name/city-state/outlined-sign-out cluster. Applies ui-designer's Visual spec (surface-subtle hover, Nunito tooltip, rounded-sm) and a11y-auditor's blocking Accessibility fixes (brand-primary-pressed for contrast, aria-label on every desktop link, Escape-close-and-refocus on the account disclosure). Wires the already-ratified surface.subtle token into tailwind.config.js. Mobile tab bar untouched (desktop-header-only). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…plit
user.name in this app is a household display name ("The Anderson Family"),
not a person's name, so extracting a "first name" produced "The" for every
real account. Drop firstName() entirely; the chip's visible name and the
trigger's aria-label now use user.name directly (matching what the
pre-redesign Navbar already showed, relocated into the new chip), with
max-w-[24ch] truncate on the visible span per the precedent set in
community-playdate-badge. Avatar initial (first character, not first
token) is unaffected.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…esign Navbar.a11y-behavior.test.tsx (qa-engineer, 31 tests) and e2e/header-nav-redesign.spec.ts (e2e-test-writer, 7 Playwright specs) covering the Option B grouped-pill-track redesign landed in c9dfe2d/1bd5833. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…Track pattern
Both team-leads returned status: success, requested_status: review.
Engineering: frontend-dev/qa-engineer/e2e-test-writer/code-reviewer all
returned success; frontend 167/167, tsc clean. Design: ui-designer/
a11y-auditor returned success; all 3 a11y-blocking findings fixed and
independently reverified. Promoted ui-designer's proposals into
design-system.md: a new Tokens — Size section (size.hitTarget.min = 44px)
and a new Patterns section ("Pill Track", extending principle #3 from
CTAs to nav chrome).
Opened two fast-follow feature files rather than leaving them as
must-fix/notes footnotes:
- navbar-component-extraction: code-review must-fix #2 (Navbar() is a
238-line monolith; ui-designer's named component anatomy was never
extracted), judged non-blocking by tech-lead.
- auth-user-name-semantics: AuthUser.name is a household display name,
not a person's name, independently flagged by 3 specialists mid-build
after the redesign's first-name-extraction spec broke visibly.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Desktop header, 1280px viewport: pre-redesign (icon+label links, exposed name/city-state/sign-out) vs. Option B grouped pill track (icon-only, active puck, avatar+name chip). Captured against a temporary demo auth state, not committed — real auth wasn't reachable in this sandbox (no Supabase credentials), same gap already documented against the E2E suite. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Never actually written down before, in CLAUDE.md, engineering-standards.md, or any role file — which is why it kept not happening despite being asked for repeatedly. Added: - CLAUDE.md Conventions: top-level pointer, applies with or without /dispatch - engineering-standards.md Conventions: the actual convention (path, URL format, honesty requirement when live capture isn't possible) - frontend-dev.md Loop: a concrete step so specialists do this without being asked case-by-case Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Simpler than reconstructing the old component from git history once the change already landed. before.png now happens at the start of step 2 (against the still-unmodified component), after.png at the end — same ordering a human would naturally use. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
reik
marked this pull request as ready for review
August 22, 2026 18:17
reik
added a commit
that referenced
this pull request
Aug 25, 2026
* vault: ship header-nav-redesign (PR #64 merged to master) --ship transition: engineering + design kanban cards moved Review -> Done, company kanban moved Review -> Done, feature status review -> shipped. Post-ship docs/user-guide.md check via content-writer: no edit warranted (guide never described the old nav's visual form). marketing-lead aggregated and confirmed, no marketing kanban card existed to move (marketing was never routed to this feature during build). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * vault: log PR #65 conflict resolution + gateguard correction - Resolved PR #65's merge conflicts against master (kanban/company.md, kanban/engineering.md, log/2026-08-22.md), caused by #66/#67 landing on master after this PR's merge-base. - Corrects the record on the recurring "[Fact-Forcing Gate]" tool error that multiple prior sessions flagged as unexplained/injected: it's a real PreToolUse hook from the everything-claude-code plugin's gateguard skill, not injection. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * vault: log PR #65 second conflict resolution (master moved past #68) --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
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
1 participant
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
Navbarrestyled to Option B ("Grouped Track") of 3 mocked directions: icon-only nav links inside one pill-shaped track, active page shown as a filledbrand-primary-pressed"puck," name/city-state/sign-out cluster collapsed into one avatar+nameAccountChipwith a keyboard-operable disclosure (Escape closes + returns focus to the trigger).user.nameis a household display name ("The Anderson Family"), not a person's name, so the original first-name-extraction spec broke visibly. Chip now shows the full name, truncated past 24 chars.fofafu_vault/standards/design-system.md: asize.hitTarget.mintoken (44px) and a "Pill Track" pattern (extends the existing "pill-only CTAs" principle to nav chrome).navbar-component-extraction(code-review must-fix —Navbar()is a 238-line monolith, non-blocking) andauth-user-name-semantics(the household-vs-personal-name product question, independently flagged by 3 specialists).Routed through this repo's dispatcher: engineering (frontend-dev, qa-engineer, e2e-test-writer, code-reviewer) + design (ui-designer, a11y-auditor), both team-leads aggregated to
status: review. Full trail infofafu_vault/features/header-nav-redesign.mdandfofafu_vault/log/2026-08-2{0,1,2}.md.Screenshots
Desktop header, 1280px viewport, same demo account in both (
docs/screenshots/header-nav-redesign/):Before
After
Test plan
tsc --noEmitcleanaria-labelon desktop nav links, keyboard-operable sign-out) fixed and independently reverified by design-lead against the shipped componentfrontend/e2e/header-nav-redesign.spec.ts); registration verified (--list), not executed live — nofrontend/.envin this sandbox, a pre-existing gap shared with the rest of the E2E suite (e.g.playdates.spec.ts), not something this PR introducesfrontend/.env+ seeded data)🤖 Generated with Claude Code