Docked queue glow-up: fixes, polish, and vibes by JoePittsy · Pull Request #75 · TrueNorthIT/TrueTunes

JoePittsy · 2026-05-06T16:22:13Z

What's in the box

🐛 Bugs squashed like they owed us money

Scroll-to-now-playing in docked mode never worked. Turned out the guard was checking open, which is always false in docked mode. Classic. Fixed.
Song changes were yeeting the body gradient colour. useDominantColor was letting useNowPlaying scribble over --panel-color on every track change. Added a setGlobal flag so only page components (artist, album) drive the gradient. The player bar can keep its colour to itself.

✨ Visual crimes committed (intentionally)

Docked queue now inherits the app's gradient background instead of having its own awkward box. It just… floats there. Classy.
Panel colour gradient on .body — the dominant colour from whatever artist/album page you're on bleeds into the queue column. Transitions smoothly between tracks. Very cinematic.
Resize handle glows purple when you hover it, emanating rightward into the queue like a tiny aurora. Does not leak into the main content. Respects boundaries.
Track rows glow on hover — radial gradient follows your mouse inside the row. Contained to the border radius. We're fancy now.
Window controls wrapped in a frosted pill in docked mode. Looks expensive.
Queue header became a footer in docked mode. Footer? Header? It's at the bottom now. Moving on.
Scrollbar polish — bigger hit box, pill-shaped thumb, never touches the top of the container. Global scrollbars got the same treatment.
Borderless docked queue — no dividing line, no box shadow, no evidence it was ever a separate panel. Seamless.

⚙️ UX improvements nobody asked for but everyone deserves

Queue button hidden from player bar and top nav when docked — you can't open a panel that's already open, we checked.
Player bar and top nav recentre over the main content area (not the whole window) when the queue is docked. Live during resize drag. No React re-renders were harmed.
Minimum window width enforced at 1144px so the queue doesn't eat the main content alive.
Queue max width derived from player bar width + padding — it can get wide but not that wide.
Resize drag updates layout live via direct DOM style.setProperty — silky smooth, zero re-renders on the hot path.

Test plan

Open docked queue, change tracks — gradient should not flash/change colour
Navigate to an artist page — body gradient should pick up artist colour, bleed into queue
Scroll artist page — content scrolls, gradient stays (it's on the background)
Resize queue — player bar and nav pill recentre in real time
Resize window narrow — queue doesn't crush the main content
Hover resize handle — purple glow appears on the right side only
Hover track rows — mouse-following glow, contained to row bounds
Scroll queue — queue scrolls independently, no weirdness
Window controls pill visible in docked mode, not floating randomly

🤖 Generated with Claude Code

…ange Both auto-scroll effects checked `open` (the floating queue toggle) which is always false in docked mode. Changed guard to `isActive` so the docked queue correctly follows the current track when it changes and re-centres after a group switch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replaces the flat --bg-1 fill with a subtle 175deg gradient (#2c2c32 → #232327 → #1e1e22) and a soft left-edge shadow so the docked panel has some depth against the main content area. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

New Ranked View on Leader Board

Removes the custom gradient fill so the docked sidebar shows the shell's radial gradient through, making it feel like one continuous surface rather than a separate panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Increased opacity on all three radial stops (0.45→0.7, 0.35→0.55, 0.3→0.45) and shifted hues slightly warmer/deeper so the gradient reads clearly through the transparent docked queue panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>