Skip to content

feat: add section icons to nav buttons and contextual dropdown label#53

Merged
darcyclarke merged 1 commit intovltpkg:mainfrom
vltbaudbot:feat/benchmarks-nav-icons
Mar 5, 2026
Merged

feat: add section icons to nav buttons and contextual dropdown label#53
darcyclarke merged 1 commit intovltpkg:mainfrom
vltbaudbot:feat/benchmarks-nav-icons

Conversation

@vltbaudbot
Copy link
Contributor

Summary

Two UI improvements to the benchmarks app navigation:

1. Section Icons on Navigation Buttons

Each main section button now has an associative icon for better visual recognition:

Section Icon
Package Managers 📦 Package
Task Runners ⏱️ StopWatch
Registries 🗄️ Database (new)

Icons are sized at size-4 and render inline before the label text.

2. Contextual Dropdown Label for Registries

The mobile variation dropdown (previously hardcoded as "Fixture") now shows a context-appropriate label:

Route Dropdown Label
/package-managers/* Fixture
/task-runners/* Fixture
/registries/* Registries

This is implemented via an optional baseRoute prop on VariationDropdown, with a fallback lookup map.

Files Changed

File Change
app/src/components/icons/database.tsx New database/cylinder icon
app/src/components/icons/index.ts Export new Database icon
app/src/components/header.tsx Add icons to nav buttons, pass baseRoute to dropdown
app/src/components/variation-dropdown.tsx Accept baseRoute prop, contextual label

Build: ✅ tsc -b && vite build clean
Format: ✅ Prettier clean

- Add associative icons to main section navigation buttons:
  - Package Managers → Package icon
  - Task Runners → StopWatch icon
  - Registries → Database icon (new custom icon)

- Rename mobile 'Fixture' dropdown to 'Registries' when viewing the
  registries section (contextual label via baseRoute prop)

New file: app/src/components/icons/database.tsx
@darcyclarke darcyclarke merged commit 808cfa3 into vltpkg:main Mar 5, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants