fix: docked queue scroll bugs + gradient background

renderer/src/App.tsx

@@ -89,8 +89,12 @@ function MainApp() {
   const [queueMode, setQueueMode] = useState<'floating' | 'docked'>('floating');
   const [queueDockedWidth, setQueueDockedWidth] = useState<number>(380);
   const queueSidebarRef = useRef<QueueSidebarHandle>(null);
+  const shellRef = useRef<HTMLDivElement>(null);
+  const handleResizeWidthLive = useCallback((width: number) => {
+    shellRef.current?.style.setProperty('--docked-queue-w', `${width}px`);
+  }, []);
 
-  useEffect(() => {
+useEffect(() => {
     window.sonos.getDisplayName().then(setDisplayName);
     window.sonos.getQueueMode().then(setQueueMode).catch(() => {});
     window.sonos.getQueueDockedWidth().then(setQueueDockedWidth).catch(() => {});
@@ -99,7 +103,7 @@ function MainApp() {
   useEffect(() => {
     if (queueMode !== 'docked') return;
     function clamp() {
-      const max = Math.min(700, window.innerWidth - 320);
+      const max = window.innerWidth - (800 + 64);
       setQueueDockedWidth((w) => (w > max ? max : w));
     }
     window.addEventListener('resize', clamp);
@@ -436,7 +440,11 @@ function MainApp() {
   const splashReady = isAuthed && groups.length > 0 && !ytmLoading && !histLoading;
 
   return (
-    <div className={styles.shell}>
+    <div
+      ref={shellRef}
+      className={styles.shell}
+      style={queueMode === 'docked' ? { '--docked-queue-w': `${queueDockedWidth}px` } as React.CSSProperties : undefined}
+    >
       <Splash ready={splashReady} />
       <TopNav
         isAuthed={isAuthed}
@@ -510,6 +518,7 @@ function MainApp() {
             onAddToQueue={handleAddToQueue}
             dockedWidth={queueDockedWidth}
             onResizeWidth={handleSetQueueDockedWidth}
+            onResizeWidthLive={handleResizeWidthLive}
           />
         )}
       </div>

renderer/src/components/PlayerBar.tsx

@@ -305,9 +305,11 @@ export function PlayerBar({ isAuthed, playback, onToggleQueue, onShuffle, queueM
           >
             <MicVocal size={14} />
           </button>
-          <button className={styles.ctrl} onClick={onToggleQueue} title={queueMode === 'docked' ? 'Jump to now playing' : 'Queue'}>
-            <List size={14} />
-          </button>
+          {queueMode !== 'docked' && (
+            <button className={styles.ctrl} onClick={onToggleQueue} title="Queue">
+              <List size={14} />
+            </button>
+          )}
           <button
             className={styles.ctrl}
             onClick={() => window.sonos.openMiniPlayer()}

renderer/src/components/TopNav.tsx

@@ -306,13 +306,15 @@ export function TopNav({
               </button>
             )}
 
-            <button
-              className={`${styles.iconBtn}${queueMode === 'floating' && queueOpen ? ' ' + styles.active : ''}`}
-              onClick={onToggleQueue}
-              title={queueMode === 'docked' ? 'Jump to now playing' : 'Queue'}
-            >
-              <List size={15} />
-            </button>
+            {queueMode !== 'docked' && (
+              <button
+                className={`${styles.iconBtn}${queueOpen ? ' ' + styles.active : ''}`}
+                onClick={onToggleQueue}
+                title="Queue"
+              >
+                <List size={15} />
+              </button>
+            )}
           </div>
         </nav>
       </div>

renderer/src/components/album/AlbumPanel.tsx

@@ -52,7 +52,7 @@ export function AlbumPanel({ onAddToQueue, queueOpen }: Props) {
   const artist = data?.artist ?? ((item as Record<string, unknown>)?.['subtitle'] as string) ?? '';
   const artUrl = data?.artUrl ?? (item ? getItemArt(item) : null);
   const cachedArt     = useImage(artUrl);
-  const dominantColor = useDominantColor(cachedArt);
+  const dominantColor = useDominantColor(cachedArt, { setGlobal: true });
 
   useEffect(() => {
     setSelected(new Set());

renderer/src/components/artist/ArtistHero.tsx

@@ -24,7 +24,7 @@ export function ArtistHero({
   });
 
   const cachedArt     = useImage(getItemArt(artist));
-  const dominantColor = useDominantColor(cachedArt);
+  const dominantColor = useDominantColor(cachedArt, { setGlobal: true });
   const name          = (artist.title ?? artist.name ?? '') as string;
 
   const [selected, setSelected]   = useState<Set<number>>(new Set());

renderer/src/components/artist/ArtistPanel.tsx

@@ -73,7 +73,7 @@ export function ArtistPanel({ onAddToQueue }: Props) {
   }
 
   const cachedArt     = useImage(imageUrl);
-  const dominantColor = useDominantColor(cachedArt);
+  const dominantColor = useDominantColor(cachedArt, { setGlobal: true });
 
   const artistRadio = data?.playlists.find(p => (p.title as string)?.toLowerCase().includes('radio'));
   const latestAlbum = data?.albums[0] ?? null;

renderer/src/components/queue/DraggableQueueRow.tsx

@@ -51,6 +51,11 @@ export function DraggableQueueRow({
       ].filter(Boolean).join(' ')}
       data-playing={isPlaying ? 'true' : undefined}
       draggable
+      onPointerMove={e => {
+        const r = e.currentTarget.getBoundingClientRect();
+        e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`);
+        e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`);
+      }}
       onClick={e => onRowClick(index, e)}
       onDoubleClick={() => getActiveProvider().skipToTrack(index + 1)}
       onDragStart={e => onDragStart(index, e)}

renderer/src/components/queue/QueueSidebar.tsx

@@ -29,15 +29,16 @@ interface Props {
   onAddToQueue: (item: SonosItem, position: number) => void;
   dockedWidth?: number;
   onResizeWidth?: (width: number) => void;
+  onResizeWidthLive?: (width: number) => void;
 }
 
 export interface QueueSidebarHandle {
   scrollToNowPlaying: () => void;
 }
 
 const MIN_DOCKED_WIDTH = 280;
-const MAX_DOCKED_WIDTH = 700;
-const MIN_ROUTES_WIDTH = 320;
+const PLAYER_BAR_W = 800;   // matches .inner width in PlayerBar.module.css
+const PLAYER_BAR_PADDING = 64; // 32px breathing room each side
 
 export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function QueueSidebar(
   {
@@ -58,6 +59,7 @@ export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function Queue
     onAddToQueue,
     dockedWidth,
     onResizeWidth,
+    onResizeWidthLive,
   },
   ref
 ) {
@@ -122,16 +124,16 @@ export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function Queue
     return () => clearTimeout(id);
   }, [isActive]);
 
-  // Track change while queue is open
+  // Track change while queue is visible
   useEffect(() => {
-    if (!open) return;
+    if (!isActive) return;
     const id = setTimeout(scrollToNowPlaying, 50);
     return () => clearTimeout(id);
   }, [currentQueueItemId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Group switch — queue reloads async so use a longer delay
   useEffect(() => {
-    if (!open) return;
+    if (!isActive) return;
     const id = setTimeout(scrollToNowPlaying, 400);
     return () => clearTimeout(id);
   }, [groupName]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -160,11 +162,12 @@ export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function Queue
     handle.setPointerCapture(e.pointerId);
     document.documentElement.classList.add('resizingQueue');
 
-    const max = () => Math.min(MAX_DOCKED_WIDTH, window.innerWidth - MIN_ROUTES_WIDTH);
+    const max = () => window.innerWidth - (PLAYER_BAR_W + PLAYER_BAR_PADDING);
 
     const onMove = (ev: PointerEvent) => {
       const next = Math.max(MIN_DOCKED_WIDTH, Math.min(max(), startWidth + (startX - ev.clientX)));
       setLiveWidth(next);
+      onResizeWidthLive?.(next);
     };
     const onUp = () => {
       document.documentElement.classList.remove('resizingQueue');
@@ -283,14 +286,17 @@ export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function Queue
         <div
           className={styles.resizeHandle}
           onPointerDown={handleResizePointerDown}
+          onPointerMove={e => e.currentTarget.style.setProperty('--mouse-y', `${e.nativeEvent.offsetY}px`)}
           role="separator"
           aria-orientation="vertical"
           aria-label="Resize queue"
         />
       )}
       {isDocked && (
         <div className={styles.dockedTopBar}>
-          <WindowControls />
+          <div className={styles.winPill}>
+            <WindowControls />
+          </div>
         </div>
       )}
       <div className={styles.header}>
@@ -325,7 +331,7 @@ export const QueueSidebar = forwardRef<QueueSidebarHandle, Props>(function Queue
       <div
         className={styles.content}
         ref={contentRef}
-        onClick={handleContentClick}
+onClick={handleContentClick}
         onDragOver={e => {
           e.preventDefault();
           e.dataTransfer.dropEffect = e.dataTransfer.types.includes('application/sonos-item-list') ? 'copy' : 'move';

renderer/src/hooks/useDominantColor.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-export function useDominantColor(src: string | null): string | null {
+export function useDominantColor(src: string | null, { setGlobal = false } = {}): string | null {
   const [color, setColor] = useState<string | null>(null);
 
   useEffect(() => {
@@ -38,5 +38,15 @@ export function useDominantColor(src: string | null): string | null {
     img.src = src;
   }, [src]);
 
+  useEffect(() => {
+    if (!setGlobal) return;
+    if (color) {
+      document.documentElement.style.setProperty('--panel-color', color);
+    } else {
+      document.documentElement.style.removeProperty('--panel-color');
+    }
+    return () => { document.documentElement.style.removeProperty('--panel-color'); };
+  }, [color, setGlobal]);
+
   return color;
 }

renderer/src/styles/App.module.css

@@ -4,9 +4,9 @@
   flex-direction: column;
   overflow: hidden;
   background:
-    radial-gradient(ellipse at 20% 50%, rgba(70, 45, 110, 0.45) 0%, transparent 60%),
-    radial-gradient(ellipse at 80% 15%, rgba(25, 55, 95, 0.35) 0%, transparent 55%),
-    radial-gradient(ellipse at 55% 85%, rgba(20, 55, 85, 0.3) 0%, transparent 50%),
+    radial-gradient(ellipse at 20% 50%, rgba(90, 50, 150, 0.7) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 15%, rgba(25, 70, 130, 0.55) 0%, transparent 55%),
+    radial-gradient(ellipse at 55% 85%, rgba(20, 65, 110, 0.45) 0%, transparent 50%),
     #0f0f14;
 }
 
@@ -15,6 +15,14 @@
   min-height: 0;
   overflow: hidden;
   display: flex;
+  position: relative;
+  background: linear-gradient(
+    180deg,
+    rgba(var(--panel-color, 80, 60, 120), 0.55) 0%,
+    rgba(var(--panel-color, 80, 60, 120), 0.2) 20%,
+    transparent 40%
+  );
+  transition: background 0.8s ease;
 }
 
 .toast {

renderer/src/styles/PlayerBar.module.css

@@ -2,7 +2,7 @@
 .bar {
   position: fixed;
   bottom: 24px;
-  left: 50%;
+  left: calc((100vw - var(--docked-queue-w, 0px)) / 2);
   transform: translateX(-50%) translateZ(0);
   z-index: 150;
   border-radius: 22px;