refactor(queue-panel): H4 — split QueuePanel.tsx 1256 → 383 LOC across 11 files (#667)

* refactor(queue-panel): H4 — extract helpers + Save/LoadPlaylistModal

Pure code-move: formatTime, formatQueueReplayGainParts, renderStars and the
DurationMode type → utils/queuePanelHelpers.tsx; the two playlist modals → own
files under components/queuePanel/.

QueuePanel.tsx: 1256 → 1104 LOC.

* refactor(queue-panel): H4 — extract QueueHeader

Pure code-move: the title/count/duration/collapse-button header → its own
component file. No prop or behaviour changes.

QueuePanel.tsx: 1104 → 1004 LOC.

* refactor(queue-panel): H4 — extract QueueCurrentTrack + QueueLufsTargetMenu

The currently-playing track block (cover, info, replay-gain / LUFS badge with
its target-listbox portal) moves into two own files. Pure code-move via prop
plumbing. setLoudnessTargetLufs is typed as LoudnessLufsPreset throughout the
new components.

QueuePanel.tsx: 1004 → 812 LOC.

* refactor(queue-panel): H4 — extract useQueuePanelDrag hook

Moves the psy-drag wiring (hit-test registration, drop-inside dispatch
for song/songs/album/queue_reorder payloads, drop-outside removal) into
its own hook. Drops the dead isRadioDrag variable since the
parsedData.type === 'radio' guard inside onPsyDrop already handles that
case.

QueuePanel.tsx: 812 → 715 LOC.

* refactor(queue-panel): H4 — extract useQueueLufsTgtPopover hook

Pulls the LUFS-target popover open-state, button/menu refs, fixed-position
recompute on open/resize/scroll, and auto-close-when-RG-collapses out of
QueuePanel.

QueuePanel.tsx: 715 → 662 LOC.

* refactor(queue-panel): H4 — extract QueueToolbar

The toolbar-button switch (shuffle/save/load/share/clear/gapless/crossfade/
infinite) and the crossfade popover (with its close-on-outside-click effect)
move into one component. crossfadeBtnRef / crossfadePopoverRef and
showCrossfadePopover state are now component-local — QueuePanel no longer
sees them.

QueuePanel.tsx: 662 → 541 LOC.

* refactor(queue-panel): H4 — extract QueueList

The OverlayScrollArea + queue.map block (with track rows, lucky-mix dice
overlay, and radio/auto-added section dividers) moves into its own
component. PlayerState['contextMenu'] + PlayerState['playTrack'] are
re-used for prop typing, the local StartDrag alias matches the
DragDropContext signature.

QueuePanel.tsx: 541 → 434 LOC.

* refactor(queue-panel): H4 — extract QueueTabBar + useQueueAutoScroll, final cleanup

QueueTabBar is the bottom queue/lyrics/info tab switcher. useQueueAutoScroll
groups the three list-scroll effects (publish scrollTop reader, restore
pending snapshot, scroll next track into view on advance). Drops the dead
toggleQueue and replayGainMode selectors plus the now-unused Play, Radio,
MicVocal, ListMusic, Info imports and OverlayScrollArea.

QueuePanel.tsx: 434 → 383 LOC. Every new file under 400.

src/components/queuePanel/QueueToolbar.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Check, FolderOpen, Infinity, MoveRight, Save, Share2, Shuffle, Trash2, Waves,
+} from 'lucide-react';
+import type { TFunction } from 'i18next';
+import type { Track } from '../../store/playerStoreTypes';
+import type {
+  QueueToolbarButtonConfig,
+  QueueToolbarButtonId,
+} from '../../store/queueToolbarStore';
+
+interface Props {
+  queue: Track[];
+  activePlaylist: { id: string; name: string } | null;
+  saveState: 'idle' | 'saving' | 'saved';
+  toolbarButtons: QueueToolbarButtonConfig[];
+  shuffleQueue: () => void;
+  handleSave: () => void;
+  handleLoad: () => void;
+  handleCopyQueueShare: () => void;
+  handleClear: () => void;
+  gaplessEnabled: boolean;
+  setGaplessEnabled: (v: boolean) => void;
+  crossfadeEnabled: boolean;
+  setCrossfadeEnabled: (v: boolean) => void;
+  crossfadeSecs: number;
+  setCrossfadeSecs: (v: number) => void;
+  infiniteQueueEnabled: boolean;
+  setInfiniteQueueEnabled: (v: boolean) => void;
+  t: TFunction;
+}
+
+export function QueueToolbar({
+  queue, activePlaylist, saveState, toolbarButtons, shuffleQueue,
+  handleSave, handleLoad, handleCopyQueueShare, handleClear,
+  gaplessEnabled, setGaplessEnabled, crossfadeEnabled, setCrossfadeEnabled,
+  crossfadeSecs, setCrossfadeSecs, infiniteQueueEnabled, setInfiniteQueueEnabled,
+  t,
+}: Props) {
+  const [showCrossfadePopover, setShowCrossfadePopover] = useState(false);
+  const crossfadeBtnRef = useRef<HTMLButtonElement>(null);
+  const crossfadePopoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showCrossfadePopover) return;
+    const handle = (e: MouseEvent) => {
+      if (
+        crossfadeBtnRef.current?.contains(e.target as Node) ||
+        crossfadePopoverRef.current?.contains(e.target as Node)
+      ) return;
+      setShowCrossfadePopover(false);
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, [showCrossfadePopover]);
+
+  return (
+    <div className="queue-toolbar">
+      {toolbarButtons.map((btn) => {
+        if (!btn.visible) return null;
+
+        switch (btn.id as QueueToolbarButtonId) {
+          case 'shuffle':
+            return (
+              <button key={btn.id} className="queue-round-btn" onClick={() => shuffleQueue()} disabled={queue.length < 2} data-tooltip={t('queue.shuffle')} aria-label={t('queue.shuffle')}>
+                <Shuffle size={13} />
+              </button>
+            );
+          case 'save':
+            return (
+              <button
+                key={btn.id}
+                className={`queue-round-btn${saveState === 'saved' ? ' active' : ''}`}
+                onClick={handleSave}
+                disabled={saveState === 'saving'}
+                data-tooltip={activePlaylist ? `${t('queue.updatePlaylist')}: ${activePlaylist.name}` : t('queue.savePlaylist')}
+                aria-label={t('queue.savePlaylist')}
+              >
+                {saveState === 'saved' ? <Check size={13} /> : <Save size={13} />}
+              </button>
+            );
+          case 'load':
+            return (
+              <button key={btn.id} className="queue-round-btn" onClick={handleLoad} data-tooltip={t('queue.loadPlaylist')} aria-label={t('queue.loadPlaylist')}>
+                <FolderOpen size={13} />
+              </button>
+            );
+          case 'share':
+            return (
+              <button
+                key={btn.id}
+                className="queue-round-btn"
+                onClick={() => void handleCopyQueueShare()}
+                data-tooltip={t('queue.shareQueue')}
+                aria-label={t('queue.shareQueue')}
+              >
+                <Share2 size={13} />
+              </button>
+            );
+          case 'clear':
+            return (
+              <button key={btn.id} className="queue-round-btn" onClick={handleClear} data-tooltip={t('queue.clear')} aria-label={t('queue.clear')}>
+                <Trash2 size={13} />
+              </button>
+            );
+          case 'separator':
+            return <div key={btn.id} className="queue-toolbar-sep" />;
+          case 'gapless':
+            return (
+              <button
+                key={btn.id}
+                className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
+                onClick={() => { setCrossfadeEnabled(false); setShowCrossfadePopover(false); setGaplessEnabled(!gaplessEnabled); }}
+                data-tooltip={t('queue.gapless')}
+                aria-label={t('queue.gapless')}
+              >
+                <MoveRight size={13} />
+              </button>
+            );
+          case 'crossfade':
+            return (
+              <div key={btn.id} style={{ position: 'relative' }}>
+                <button
+                  ref={crossfadeBtnRef}
+                  className={`queue-round-btn${crossfadeEnabled || showCrossfadePopover ? ' active' : ''}`}
+                  onClick={() => {
+                    if (crossfadeEnabled) {
+                      setCrossfadeEnabled(false);
+                      setShowCrossfadePopover(false);
+                    } else {
+                      setGaplessEnabled(false);
+                      setCrossfadeEnabled(true);
+                      setShowCrossfadePopover(true);
+                    }
+                  }}
+                  data-tooltip={showCrossfadePopover ? undefined : t('queue.crossfade')}
+                  aria-label={t('queue.crossfade')}
+                >
+                  <Waves size={13} />
+                </button>
+                {showCrossfadePopover && (
+                  <div className="crossfade-popover" ref={crossfadePopoverRef}>
+                    <div className="crossfade-popover-label">
+                      <Waves size={11} />
+                      {t('queue.crossfade')}
+                      <span className="crossfade-popover-value">{crossfadeSecs.toFixed(1)} s</span>
+                    </div>
+                    <input
+                      type="range"
+                      min={0.1}
+                      max={10}
+                      step={0.1}
+                      value={crossfadeSecs}
+                      onChange={e => {
+                        setCrossfadeSecs(parseFloat(e.target.value));
+                        setCrossfadeEnabled(true);
+                      }}
+                      className="crossfade-popover-slider"
+                    />
+                    <div className="crossfade-popover-range">
+                      <span>0.1s</span><span>10s</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          case 'infinite':
+            return (
+              <button
+                key={btn.id}
+                className={`queue-round-btn${infiniteQueueEnabled ? ' active' : ''}`}
+                onClick={() => setInfiniteQueueEnabled(!infiniteQueueEnabled)}
+                data-tooltip={t('queue.infiniteQueue')}
+                aria-label={t('queue.infiniteQueue')}
+              >
+                <Infinity size={13} />
+              </button>
+            );
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}