fix: docked queue scroll bugs + gradient background by JoePittsy · Pull Request #67 · TrueNorthIT/TrueTunes

JoePittsy · 2026-05-05T21:47:28Z

Summary

Bug fix: Auto-scroll to now-playing never fired in docked queue mode on track change or group switch — both effects guarded on open (the floating toggle, always false in docked mode). Changed to isActive which is true whenever the sidebar is visible.
Style: Replaces the flat --bg-1 fill on the docked sidebar with a subtle 175deg gradient (#2c2c32 → #232327 → #1e1e22) and a soft left-edge drop shadow for depth.

Test plan

In docked queue mode, change track — queue should auto-scroll to new now-playing row
In docked queue mode, switch group — queue should scroll to now-playing after reload
Gradient is visible and looks reasonable
Floating queue mode unaffected

🤖 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>

github-actions · 2026-05-05T21:48:54Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	80.65%	1672 / 2073
🔵	Statements	77.76%	1938 / 2492
🔵	Functions	72.59%	543 / 748
🔵	Branches	71.89%	1801 / 2505

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
renderer/src/App.tsx	65.19%	54.82%	36.98%	69.61%	61, 62, 68, 81-82, 94, 106-111, 115-116, 120-121, 125-128, 135, 140, 148, 156, 159, 164, 171-175, 222, 243-259, 277-279, 284, 368-380, 405-407, 415, 456-514, 539-564
renderer/src/components/PlayerBar.tsx	83.11%	68.57%	80.76%	86.15%	47, 77, 78, 96-101, 128, 202, 303
renderer/src/components/TopNav.tsx	75.3%	70.58%	61.29%	77.46%	82, 92-97, 143-146, 211, 221-226, 254, 255-301
renderer/src/components/album/AlbumPanel.tsx	78.12%	85.83%	73.68%	82.6%	47, 83-98, 109, 145, 202
renderer/src/components/artist/ArtistHero.tsx	72.72%	78.94%	71.42%	77.27%	63-77
renderer/src/components/artist/ArtistPanel.tsx	38.09%	53.84%	42.85%	51.21%	43-72, 78
renderer/src/components/queue/DraggableQueueRow.tsx	34.78%	70%	33.33%	40%	25-29, 55-57, 61-91
renderer/src/components/queue/QueueSidebar.tsx	52.63%	63.77%	61.7%	53.75%	94-102, 107, 117, 148, 157-181, 213-271, 289, 336-341, 377
renderer/src/hooks/useDominantColor.ts	86.66%	70.58%	71.42%	87.87%	32, 43-48

Generated in workflow #116 for commit 8f0de96 by the Vitest Coverage Report Action

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>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replaces the full-height hover background with a ::after pseudo-element that tracks the cursor Y via a --mouse-y CSS custom property, so only a 200px pill centred on the mouse is lit up. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replaces the flat pill with a 28px-wide radial gradient ellipse that bulges out from the 6px handle, blurred + box-shadowed in purple to create a soft glow. Docked sidebar set to overflow: visible so the lens can spill into the main content area. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Sets --docked-queue-w CSS variable on the shell when docked so the fixed player bar offsets its 50% anchor by the sidebar width. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Adds onResizeWidthLive prop to QueueSidebar — fires on every pointer move during resize. App.tsx handles it by mutating the shell's --docked-queue-w CSS variable directly via a ref, avoiding any React re-render on the hot drag path. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Removes the hardcoded MAX_DOCKED_WIDTH=700 / MIN_ROUTES_WIDTH=320. Max queue width is now window.innerWidth - (800 + 64), guaranteeing the main content area is always at least the player bar's inner width (800px) plus 32px breathing room on each side. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Prevents the window being resized narrow enough to crunch the docked queue: minWidth = 864px (player bar 800px + 32px each side) + 280px (MIN_DOCKED_WIDTH). Also bumps default size from 960x640 to 1280x720. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Anchors ::after to left:0 and extends 120px rightward. Radial gradient centred at the left edge fades into the queue — nothing bleeds left. Removed filter:blur which was the source of leftward spill. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Gradient in docked queue fades out as main content is scrolled down, using a capture-phase scroll listener on the routes container - Resets to full opacity on route navigation - Fix TS error: void the removeProperty cleanup return in useDominantColor - Row hover glow via ::before radial gradient tracking mouse position - Resize handle glow pulses into queue only (no leftward bleed) - winPill wrapper around window controls in docked mode - Header reordered as footer when docked - subAlbum hit-box fix: block + fit-content instead of inline-block - Scrollbar polish: bigger hit box, pill thumb, never touches top - body::after gradient opacity driven by --panel-gradient-opacity CSS var Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Use document-level capture scroll listener instead of a wrapper div around Routes. The wrapper div disrupted the flex layout that panels rely on for height. Queue scroll is excluded via data-queue-content attr. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

useDominantColor now only sets --panel-color globally when setGlobal:true. Page components (ArtistHero, ArtistPanel, AlbumPanel) opt in; useNowPlaying does not, so track changes no longer overwrite the gradient. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Joe Pitts and others added 2 commits May 5, 2026 22:46

Joe Pitts and others added 27 commits May 6, 2026 15:43

style: remove docked queue border-left — borderless floating scrollbar

75c7f72

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: wrap docked queue window controls in a frosted pill

dc53246

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: fatter pill scrollbar on queue content area

10decd6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: remove outer box-shadow glow from resize handle

8179740

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: scrollbar — top gap, shorter thumb, wider hit box

2cc386d

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: scrollbar thumb taller (52px) and thinner (4px)

77ffe97

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: scrollbar 6px wide, 10px hit box, 124px thumb

f4c1887

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: scrollbar thumb capped at 20% of container height

435255b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: scrollbar thumb max-height 300px

8190648

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: global scrollbar — 10px hit box, 6px visual pill, top gap

d084dde

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: hide queue button in player bar and header when queue is docked

6188bf5

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: centre player bar over main content area when queue is docked

7f91be3

Sets --docked-queue-w CSS variable on the shell when docked so the fixed player bar offsets its 50% anchor by the sidebar width. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: centre top nav pill over main content area when queue is docked

122f49f

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: resize handle glow — larger (280x400) and more diffuse

140df31

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style: Refine QueueSidebar resize handle appearance and usability

4eb0b7e

fix: simplify gradient — set directly on .body, no pseudo-element or JS

50d3479

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

JoePittsy merged commit 2df6473 into develop May 6, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: docked queue scroll bugs + gradient background#67

fix: docked queue scroll bugs + gradient background#67
JoePittsy merged 29 commits into
developfrom
jp/docked-queue-fixes

JoePittsy commented May 5, 2026

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

JoePittsy commented May 5, 2026

Summary

Test plan

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions Bot commented May 5, 2026 •

edited

Loading