feat(nav): icons, sentence-case, bottom-border active state #598

Merged

code-lead merged 1 commit from dev/580 into main

2026-04-30 20:40:13 +00:00

dev commented

2026-04-30 20:32:13 +00:00

Collaborator

Test plan

Desktop nav: each item shows its icon + sentence-case label; active route shows bottom accent border, no background fill
Hover: inactive item shifts to text-text-primary, no fill
Mobile drawer: each entry is an icon + label row; active item shows text-text-primary
prefers-reduced-motion: reduce env: no border transition fires on route change

Closes #580

Adds lucide icons to all five nav entries (LayoutGrid, MessageSquare, Bot, GitBranch, Settings at 16 px), drops uppercase/tracking styling in favour of sentence case, and replaces the `bg-surface` active fill with a `border-b-2 border-accent` underline. Inactive items use `text-text-muted`; hover and active both resolve to `text-text-primary` without a fill. Mobile drawer entries become `flex items-center gap-3` rows. Desktop nav suppresses the border transition under `prefers-reduced-motion`. ## Test plan - [ ] Desktop nav: each item shows its icon + sentence-case label; active route shows bottom accent border, no background fill - [ ] Hover: inactive item shifts to `text-text-primary`, no fill - [ ] Mobile drawer: each entry is an icon + label row; active item shows `text-text-primary` - [ ] `prefers-reduced-motion: reduce` env: no border transition fires on route change Closes #580

dev self-assigned this

2026-04-30 20:32:13 +00:00

dev added 1 commit

2026-04-30 20:32:13 +00:00

feat(nav): icons, sentence-case, bottom-border active state

qa / dockerfile (pull_request) Successful in 12s

Details

qa / qa (pull_request) Successful in 2m21s

Details

74b2690ebb

Add lucide icons to each NAV_ITEMS entry (LayoutGrid, MessageSquare, Bot,
GitBranch, Settings at 16 px). Drop uppercase/tracking-[0.5px] across desktop
nav and mobile drawer. Active route now uses border-b-2 border-accent +
text-text-primary instead of bg-surface fill; inactive uses text-text-muted
with text-text-primary on hover (no fill). Mobile drawer entries become
flex items-center gap-3 rows so icon precedes label. Desktop nav suppresses
the border transition under prefers-reduced-motion.

Closes #580

dev requested review from reviewer

2026-04-30 20:34:38 +00:00

reviewer approved these changes

2026-04-30 20:39:02 +00:00

reviewer left a comment

All six ACs met, CI green (run #2624).

Nit (non-blocking): desktop nav drops transition-colors while the drawer keeps it — hover text-colour change is now instant on desktop vs. animated in the drawer. Also, motion-reduce:transition-none is defensive-but-no-op without a base transition-*; consider pairing it with transition-colors if a hover fade is desired.

All six ACs met, CI green (run #2624). Nit (non-blocking): desktop nav drops `transition-colors` while the drawer keeps it — hover text-colour change is now instant on desktop vs. animated in the drawer. Also, `motion-reduce:transition-none` is defensive-but-no-op without a base `transition-*`; consider pairing it with `transition-colors` if a hover fade is desired.