Skip to content
This repository was archived by the owner on Nov 11, 2026. It is now read-only.

Make the navigation rail compact and icon-only - #615

Open
andrewtea wants to merge 2 commits into
mainfrom
audit/compact-review-controls
Open

andrewtea wants to merge 2 commits into
mainfrom
audit/compact-review-controls

Conversation

@andrewtea

Copy link
Copy Markdown
Contributor

Changelog

  • Changed: navigation is a compact, icon-only 44 px rail with names on hover and keyboard focus.
  • Changed: the Voluma mark matches the 20 px navigation icons; controls are 36 px square with 4 px gaps.

Why

Andrew approved the audit 1.5 preview, then asked to remove excessive labelling, reduce the rail to 44 px, tighten its vertical spacing and shrink the brand to match the other icons. The current 80 px labelled rail reserves space that is no longer needed. Request and preview.

Design decisions

  1. Icon-only, not unnamed. Every rail control retains its accessible name and gains a right-side hover/focus tooltip. Native anchors, router links and Settings/Account popover triggers stay intact. Ruled out: restoring character shortcuts or adding a shortcut preference/help sheet.
  2. Compact rail, consistent controls. Andrew specified 44 px width and smaller spacing/brand. Controls and the brand slot are 36 px, separated by 4 px; brand and control icons are 20 px. Ruled out: keeping the former 56 px-high controls after removing their text.
  3. Reuse main's review controls. Main already landed icon-only marking tools with how-to hints and directional panel expansion icons. Keep those implementations rather than overwriting them; only align their shared story with the seven current tool icons. Delete/Undo placement is unchanged by this PR.

Walkthrough

Compact navigation

  1. Start the API/web app with pnpm dev and open the imported real OA6-1RK review. The supervised orb preview uses a local guest and local database; uploads, new analyses and thumbnail writes are blocked.
  2. Compare main's 80 px labelled rail with this branch's 44 px icon rail. Hover Studies, Workflows, Settings and Account: their names appear to the right. Tab to Workflows and press Enter: its native route opens. Back returns to review.
  3. Open Settings and Account. Escape closes each and restores trigger focus. Settings still includes main's API-key management. Repeat in Dark; the focus ring stays inside the rail.

Light review, 1440 px

Dark review, 1024 px, keyboard focus

Pointer interaction recording

Read rail.tsx first for dimensions, names and Tooltip composition, then account.tsx/story-rail.tsx for brand sizing, then the shared stories and DESIGN.md.

What changed

  • Rail: uses existing Tooltip around actual links/buttons, removing permanent text and tightening dimensions. A router render callback returns one ReactElement so Tooltip can attach its trigger props/ref.
  • Brand and stories: application and StoryRail both render the 20 px mark. Rail stories describe the compact frame; the marking-tools story uses all seven current icons, including Hand/Crosshair.

Risk and where to look

  • Breaks or changes: visual navigation density and label discoverability only. No stored data, running analysis, API or settings shape changes. Revert this commit to restore the labelled rail.
  • Where to look: RailButton's Tooltip/Popover ref and event composition; RailLink's native router anchor; keyboard focus and popover positioning within the narrower rail. Main's Settings API keys remain untouched.

Knowledge layers, docs and deletions

  • Docs: DESIGN.md records the icon-only 44 px rail, 36 px slots/4 px gaps and 20 px icons/brand. .context/decisions.md records Andrew's requests. Shared stories document and render the current controls.
  • Deleted: permanent rail text labels and their extra width/height. Replaced by accessible names and hover/focus tooltips. No application files, dependencies or command bindings were added or removed; review media is committed under .github/pr-assets/.

Contract changes

None. No changes to packages/contracts, API, database or settings. The local RailLink router-render type now requires a single ReactElement, matching both existing application callers and Tooltip's trigger contract.

Verification

  • Ran: pnpm check on latest main plus this diff: all 17 projects passed, including 212 workflow Python tests. pnpm --filter @voluma/storybook build passed. git diff --check passed.
  • Saw: real OA6-1RK browser geometry measured 44 px rail, 36×36 px controls and 20 px brand/icons. Accessible names remain while visible rail text is empty. Native Tab/Enter navigation, Settings/Account opening and Escape focus restoration work. Light/dark captures and the pointer recording were inspected. No analysis runs, staging/R2 writes or messages were sent.
  • Fresh independent read-only review of the final rebased seven-file diff found no actionable issues. It inspected installed Radix/React Router ref/event composition; browser checks and test runs were performed by the implementation agent.

Left out

  • Delete/Undo relocation: Andrew is still considering placement. This PR does not move them or change session Undo, marking permissions or shortcuts.

ampagent and others added 2 commits November 5, 2026 05:43
Use a 44 px rail with 36 px controls, 4 px gaps and a 20 px brand mark. Keep native links, account popovers, accessible names and hover/focus tooltips. Update shared stories and design guidance; reuse main’s existing icon-only viewer and panel controls.

Amp-Thread-ID: https://ampcode.com/threads/T-2ed29d2e-a15f-43b4-8a09-e15bce20cbce
Co-authored-by: Andrew Tang <andrewtea.dev@gmail.com>
Co-authored-by: Andrew Tang <andrewtea.dev@gmail.com>
@andrewtea
andrewtea marked this pull request as ready for review November 5, 2026 05:46

This branch has not been deployed

No deployments
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants