feat(nav): drawer content polish — user card, icon parity, secondary group, version footer #582

New issue

Closed

opened 2026-04-30 18:51:04 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-30 18:51:04 +00:00

Collaborator

User story

As an operator, I want the mobile nav drawer to read like a real app shell: who I am at the top, the routes in the middle (matching icons), secondary actions grouped at the bottom, and the build I'm on at the very bottom.

Acceptance criteria

User card at top

Drawer header section renders avatar + login + Operator chip + a small View on Forgejo → link to the operator's profile.
Source: same whoami query the avatar dropdown (P2) uses.

Icons match desktop

Each drawer entry mirrors the desktop icon set from P1. flex items-center gap-3 row, icon + label.

Secondary action group

After the route list, render a separator + a "Quick actions" group: theme switcher, Open Forgejo, Open docs. Same shape as the avatar dropdown (P2) but inline rather than in a popover menu so phone users don't need a second tap.
Logout sits below the secondary group, separated by another border.

Version footer

Drawer's bottom strip renders claude-hooks <version> · <git-sha>. Source: a build-time constant injected by Vite (import.meta.env.VITE_VERSION / VITE_COMMIT_SHA, populated from package.json::version and git rev-parse --short HEAD at build time).

Out of scope

Switching the desktop nav to drawer-only.

References

Source: apps/web/src/components/app-shell.tsx (drawer body).
Spec: specs/topbar-nav-overhaul.md § P3.

## User story As an operator, I want the mobile nav drawer to read like a real app shell: who I am at the top, the routes in the middle (matching icons), secondary actions grouped at the bottom, and the build I'm on at the very bottom. ## Acceptance criteria ### User card at top - [ ] Drawer header section renders avatar + login + `Operator` chip + a small `View on Forgejo →` link to the operator's profile. - [ ] Source: same `whoami` query the avatar dropdown (P2) uses. ### Icons match desktop - [ ] Each drawer entry mirrors the desktop icon set from P1. `flex items-center gap-3` row, icon + label. ### Secondary action group - [ ] After the route list, render a separator + a "Quick actions" group: theme switcher, `Open Forgejo`, `Open docs`. Same shape as the avatar dropdown (P2) but inline rather than in a popover menu so phone users don't need a second tap. - [ ] Logout sits below the secondary group, separated by another border. ### Version footer - [ ] Drawer's bottom strip renders `claude-hooks <version> · <git-sha>`. Source: a build-time constant injected by Vite (`import.meta.env.VITE_VERSION` / `VITE_COMMIT_SHA`, populated from `package.json::version` and `git rev-parse --short HEAD` at build time). ## Out of scope - Switching the desktop nav to drawer-only. ## References - Source: `apps/web/src/components/app-shell.tsx` (drawer body). - Spec: `specs/topbar-nav-overhaul.md` § P3.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-30 18:51:18 +00:00

claude-desktop added a new dependency

2026-04-30 18:51:22 +00:00

#580 feat(nav): primary nav visual rework — icons, sentence-case, bottom-border active state

claude-desktop added a new dependency

2026-04-30 18:51:23 +00:00

#581 feat(nav): topbar utility cluster — avatar menu, notifications bell, ⌘K stub, repo + conn polish

claude-desktop added a new dependency