- FocusMode: replace #000, white with theme variables
- miniplayer: replace #6366f1, #fff, #818cf8 with accent/text variables
- AlbumDetailView: replace #666666 with --text-muted
- LoginView: use --danger and --warning variables for error/timeout boxes
- PlaylistModal: use .icon-inline utility class
Add to app.css:
- Warning color variables (--warning, --warning-bg, --warning-border)
- .icon-inline and .badge-warning utility classes
Add --alpha-* CSS variables (4-95%) to app.css that adapt to theme:
- Dark themes: white-based rgba
- Light themes: black-based rgba (auto-inverts for proper contrast)
Mass-replaced 100+ instances of rgba(255,255,255,...) across 23 files
with var(--alpha-*) for consistent theming support.
This fixes borders, overlays, and UI elements being invisible or
having poor contrast in light themes.
StackIcon Component:
- Now accepts onClick prop
- Changed from div to button element
- Added arrow (→) that appears on hover
- Tooltip text changed to "Click to go to: {source}"
- Visual feedback: hover background + active scale
Navigation Logic (+page.svelte):
- Added handleContextNavigation function
- Switch based on context_type:
- album → handleAlbumClick
- playlist → navigate + set selectedPlaylistId
- artist_top → handleArtistClick
- favorites → navigate to favorites
- home_list → navigate to home
- search → navigate to search
- Import getCurrentContext from playbackContextStore
UI Integration:
- ExpandedPlayer: Added onContextClick prop, passed to StackIcon
- FocusMode: Added onContextClick prop, passed to StackIcon
- Both receive handleContextNavigation callback
Phase 3.7 COMPLETE ✅
cp
Stack icon now appears in artist/album area across all players:
- FocusMode: icon before artist (size 12px)
- MiniPlayer: icon at start of artist-album row (size 12px)
- Consistent sizing: 12px (compact players), 16px (expanded player)
- Visual hierarchy: Title → [icon] Artist · Album
All 4 players updated and consistent.
cp
- Create StackIcon component with reactive context subscription
- Display Layers icon before track title when context exists
- Show tooltip with origin info on hover
- Add to: NowPlayingBar, ExpandedPlayer, FocusMode, MiniPlayer
- Icon hidden when no playback context (single track)
- Responsive sizing per player (14px-18px)
cp
- Add explicit effect in FocusMode to ensure lyrics updates run
- Increase immersive mode font size by 2pts (24px/30px)
- Smoother easing with cubic-bezier curves (400ms)
- Add shimmer gradient effect for karaoke-style highlighting
- Add subtle accent glow on active lyrics line
ExpandedPlayer:
- Renamed from FullScreenNowPlaying for clearer nomenclature
- Added lyrics panel on right side (Cider-style blend)
- Blurred album art background with gradient overlay
- All buttons now have tooltips
- Horizontal layout: artwork+controls left, lyrics right
- Responsive breakpoints for smaller screens
FocusMode:
- Centered main layout (max-width: 1400px)
- Fixed empty space on right side
Nomenclature:
- NowPlayingBar: Bottom bar (always visible)
- ExpandedPlayer: Expanded view (click artwork)
- FocusMode: Immersive lyrics view (from ExpandedPlayer)
- Large artwork on left (~65vh), lyrics panel on right
- Flexbox layout with fade mask on lyrics
- Improved blurred background (80px blur, diagonal gradient)
- ChevronDown close button in top-left
- Bottom bar with track info, centered controls, progress
- Full responsive support (1200px, 900px, 600px breakpoints)
- Added keyboard navigation for progress bar (arrow keys)
- Reduced transition durations from 300-400ms to 120-150ms
- Changed easing to ease-out for snappier feel
- Added will-change for GPU acceleration
- Non-synced lyrics now display at container top (no spacers)
- Added isSynced prop to all lyrics components
- LyricsLines: improved auto-scroll with prevActiveIndex tracking
- LyricsLines: added immersive mode for larger text in FocusMode
- LyricsLines: enhanced opacity fading and text-shadow for active line
- FocusMode: redesigned with blurred artwork background like Cider
- FocusMode: integrated lyrics panel on right side with proper styling
- FocusMode: added bottom bar with track info, controls, and progress
- +page.svelte: wire lyrics props to FocusMode component
- +page.svelte: start lyrics updates when either sidebar or FocusMode open
vicrodh