feat: Implement Phase 1 & 2 of Spotify-inspired redesign

[marcodejongh]

Phase 1 - Bottom Tab Bar:

• Add persistent bottom tab bar with Climbs, Search, and New tabs
• Hidden on desktop via CSS media query (>=768px)
• Search tab opens existing search drawer
• Create tab opens bottom drawer with Create Climb and Playlists
• iOS safe area padding support

Phase 2 - Compact Climb List:

• Add ClimbListItem component with compact Spotify-like row layout
• Colorized V-grade display, thumbnail, name, quality, setter info
• Swipe right to favorite, swipe left to add to queue
• Ellipsis menu with full action drawer
• View mode toggle (list/grid) with localStorage persistence
• Defaults to list mode on mobile, grid on desktop

Code quality fixes:

• Fix Space orientation->direction bug in queue-list.tsx
• Replace hardcoded colors (#fff, #888) with theme tokens throughout
• Replace hardcoded spacing with theme token values
• Fix QueueControlBar interface naming (QueueControlBarProps)
• Remove unused board prop from QueueControlBar
• Remove unused imports and vendor prefixes
• Clean up dead code across queue components

https://claude.ai/code/session_01SrNcg1JnQosgiCfsKLvchM

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
boardsesh	Error		Feb 6, 2026 0:26am

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Hardcoded colors in CSS module - bottom-tab-bar.module.css:6-7 uses hardcoded #e5e7eb and #fff instead of theme tokens. The PR description mentions "Replace hardcoded colors with theme tokens" but CSS modules can't use JS tokens. Consider using CSS variables or inline styles for consistency.

2. Duplicate ID assignment - climbs-list.tsx:148-154 in list mode, the id={climb.uuid} is on the wrapper div, but then {...(index === 0 ? { id: 'onboarding-climb-card' } : {})} may overwrite it for the first item. This means the first climb's UUID won't be set as an ID when in list mode.

3. SSR hydration mismatch risk - climbs-list.tsx:56-66 The getInitialViewMode() function uses window.matchMedia during initial state, which returns different values on server vs client. Consider using useState + useEffect pattern to avoid hydration mismatches.

4. Missing test coverage - New components BottomTabBar and ClimbListItem have no tests. The codebase has existing test patterns in packages/web/app/components/queue-control/__tests__/ that could be followed.

Minor Notes

• The swipe gesture implementation in ClimbListItem duplicates logic from queue-list-item.tsx. Consider extracting to a shared hook if this pattern is used elsewhere.