feat: vertical navigation

[Leftium]

[!tip]

• Read the summary, check out the before/after screen shots, and try it out.
• This PR is not ready to merge because the current top nav was left intact.
• However, the vertical navigation is so much better I don't think there is any reason to keep the existing top nav.

Summary

• Vertical sidebar navigation
• Intended to replace current top navigation
  • Some code was duplicated
  • This PR may be refactored to support top navigation as an option, refactoring duplicated code into shared imports.
• Temporary links were added to home pages to easily switch between vertical and top navigation
• Major UX changes were made:
  • Top nav recording method drop down removed (manual, VAD, upload)
    • "File upload" option did not make sense in this context
    • Replaced with two buttons that start manual recording or voice-activated session
  • Epicenter logo used instead of mic emoji (overlap with manual recording icon)
  • Headings on pages hidden if navbar is expanded

This is a POC. Potential improvements:

• possible to add 3rd state (hidden, icons-only, expanded) that more closely resembles top nav home page.
• Remove layout shift in side bar nav component
• Reorder groups of items?
• Rename/reword labels to fit better within navbar

Type of Change

• [x] feat: New feature

Related Issue

• https://github.com/epicenter-md/epicenter/issues/710
• https://github.com/epicenter-md/epicenter/issues/644
• https://discord.com/channels/1391098486178582549/1414709940957876274/1414709940957876274
• https://github.com/epicenter-md/epicenter/issues/694
• https://discord.com/channels/1391098486178582549/1403145437434745044/1408000840840773632
• https://discord.com/channels/1391098486178582549/1403145437434745044/1408019827607732294
• https://discord.com/channels/1391098486178582549/1407187732975063160/threads/1409735960937103440

Screenshots/Recordings

Less important (mostly AI-generated) info

Changes Made

New Sidebar Component System

• Added complete shadcn-svelte sidebar component library to @repo/ui (sidebar-07 pattern)
• Implemented responsive sidebar with collapsible/expandable states on desktop
• Added mobile sheet overlay for small screens
• Created VerticalNav.svelte with 4 groups: Navigation, Quick Settings, Quick Transcription, Footer

Parallel Route Structure

• Created /verticalnav/* routes mirroring all existing functionality:
  • Home page with responsive "Whispering" heading (hidden when sidebar expanded)
  • Recordings list page
  • Transformations list and "new transformation" pages
  • Complete Settings section (13 pages total):
    • Main settings with responsive sub-navigation
    • Analytics, API Keys, Recording, Sound, Transcription pages
    • Shortcuts section with nested layout (main, local, global)
  • Utility pages: Desktop App, Global Shortcut, FFmpeg Install, macOS Accessibility

Quick Settings Integration

• Refactored 5 selector components to work in both sidebar and page contexts:
  • ManualDeviceSelector and VadDeviceSelector
  • CompressionSelector
  • TranscriptionSelector
  • TransformationSelector
• Added badge indicators showing active selections
• Created reusable recording button components

UX Enhancements

• Active State: Enhanced contrast (20% background vs 10%), 4px left indicator bar
• Sub-route Active State: Navigation items remain active on sub-routes (e.g., Settings active when on /verticalnav/settings/api-keys)
• Smart Auto-collapse: Utility pages automatically collapse sidebar for focused setup experience
• Responsive Navigation: Settings sub-navigation adapts breakpoints based on sidebar state
• Visual Hierarchy: Dividers between groups (collapsed state only)
• Branding: Added Epicenter logo to collapsed sidebar

Development Features

• Layout switcher links on both layouts for easy testing
• Non-breaking: Existing topbar routes remain fully functional
• Allows gradual migration and A/B testing

Testing

Desktop App Testing

• [x] Tested on macOS
• [ ] Tested on Windows
• [ ] Tested on Linux
• [ ] Not applicable (web-only change)

General Testing

• [ ] Tested with multiple API providers (if applicable)
• [x] Verified no API keys are exposed in logs or storage
• [x] Checked for console errors
• [x] Tested on different screen sizes (if UI change)

Checklist

• [x] My code follows the project's coding standards (see CONTRIBUTING.md)
• [x] I've used type instead of interface in TypeScript
• [x] I've used absolute imports where applicable
• [ ] I've tested my changes thoroughly
• [ ] I've added/updated tests for my changes (if applicable)
• [x] My changes don't break existing functionality
• [x] I've updated documentation (if needed)

Additional Notes

Implementation Patterns

• Wrapper Pattern: Simple pages import components from existing (config) routes
• Copy Pattern: Pages with navigation logic copied with path corrections to /verticalnav/*
• Auto-collapse Pattern: Utility pages collapse sidebar on mount for focused UX

Technical Decisions

• Parallel routes allow safe testing without affecting production
• Settings navigation uses dynamic breakpoints (lg: when sidebar collapsed, xl: when expanded)
• All selectors now support both inline and sidebar contexts through props
• Preserved view transitions and accessibility features

Migration Path

1. Test vertical navigation thoroughly
2. Gather user feedback on both layouts
3. Decide on migration strategy (gradual rollout vs complete switch)
4. Optionally add redirects from old routes to new

Known Issues

• Home page has pre-existing errors (blob property, table overflow) - unrelated to this PR
• Some utility pages use deprecated Lucide icons (can be addressed in follow-up)

[Leftium]

Updated PR to address some feedback:

[Leftium]

Note to account for this PR, which added an item (for Quick Settings): https://github.com/EpicenterHQ/epicenter/pull/970

[Leftium]

Restored navigation buttons on home page: