feat(queue): drag rows outside queue to remove; trash ghost outside bounds (#420)

* feat(queue): drag rows outside queue to remove; trash ghost outside bounds

- Document-level psy-drop when cursor leaves queue rect (main + mini)
- DragDropContext: drop coordinates on psy-detail; optional wrapRef on OverlayScrollArea
- Trash icon on drag ghost only outside registered queue hit-test regions

* docs(changelog): add queue drag-out removal for PR #420

src/components/MiniPlayer.tsx

@@ -9,7 +9,7 @@ import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
 import { usePlayerStore } from '../store/playerStore';
 import { useAuthStore } from '../store/authStore';
 import { useKeybindingsStore, matchInAppBinding } from '../store/keybindingsStore';
-import { useDragDrop } from '../contexts/DragDropContext';
+import { useDragDrop, registerQueueDragHitTest } from '../contexts/DragDropContext';
 import { useWindowVisibility } from '../hooks/useWindowVisibility';
 import { IS_LINUX } from '../utils/platform';
 import MiniContextMenu from './MiniContextMenu';
@@ -115,6 +115,18 @@ export default function MiniPlayer() {
   const [volumeOpen, setVolumeOpen] = useState(false);
   const ticker = useRef<number | null>(null);
   const queueScrollRef = useRef<HTMLDivElement>(null);
+  const miniQueueWrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!queueOpen) return;
+    const hitTest = (cx: number, cy: number) => {
+      const el = miniQueueWrapRef.current;
+      if (!el) return false;
+      const r = el.getBoundingClientRect();
+      return cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
+    };
+    return registerQueueDragHitTest(hitTest);
+  }, [queueOpen]);
   const volumeBtnRef = useRef<HTMLButtonElement>(null);
   const volumePopRef = useRef<HTMLDivElement>(null);
   const [volumePopStyle, setVolumePopStyle] = useState<React.CSSProperties>({});
@@ -415,6 +427,37 @@ export default function MiniPlayer() {
     return () => el.removeEventListener('psy-drop', onPsyDrop);
   }, [queueOpen, state.queue.length]);
 
+  // Drop outside the mini queue strip → remove (same UX as main QueuePanel).
+  useEffect(() => {
+    if (!queueOpen) return;
+    const onDocPsyDrop = (e: Event) => {
+      const d = (e as CustomEvent<{ data?: string; clientX?: number; clientY?: number }>).detail;
+      if (!d?.data) return;
+      const cx = d.clientX;
+      const cy = d.clientY;
+      if (typeof cx !== 'number' || typeof cy !== 'number') return;
+      let parsed: { type?: string; index?: number } | null = null;
+      try {
+        parsed = JSON.parse(d.data);
+      } catch {
+        return;
+      }
+      if (parsed?.type !== 'queue_reorder' || typeof parsed.index !== 'number') return;
+      const wrap = miniQueueWrapRef.current;
+      if (!wrap) return;
+      const r = wrap.getBoundingClientRect();
+      const inside =
+        cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
+      if (inside) return;
+      psyDragFromIdxRef.current = null;
+      dropTargetRef.current = null;
+      setDropTarget(null);
+      emit('mini:remove', { index: parsed.index }).catch(() => {});
+    };
+    document.addEventListener('psy-drop', onDocPsyDrop);
+    return () => document.removeEventListener('psy-drop', onDocPsyDrop);
+  }, [queueOpen]);
+
   // Auto-scroll the current track into view when the queue expands.
   useEffect(() => {
     if (!queueOpen) return;
@@ -633,6 +676,7 @@ export default function MiniPlayer() {
 
         {queueOpen && (
         <OverlayScrollArea
+          wrapRef={miniQueueWrapRef}
           viewportRef={queueScrollRef}
           className="mini-queue-wrap"
           viewportClassName="mini-queue"

src/components/OverlayScrollArea.tsx

@@ -20,6 +20,8 @@ export type OverlayScrollAreaProps = {
   viewportScrollBehaviorAuto?: boolean;
   /** Ref to the scrollable element (querySelector, scrollIntoView, etc.). */
   viewportRef?: React.Ref<HTMLDivElement>;
+  /** Ref to the outer wrapper (incl. overlay scrollbar rail). */
+  wrapRef?: React.Ref<HTMLDivElement>;
   /** Optional id on the viewport (e.g. main app scroll for route pages). */
   viewportId?: string;
   /** Optional wheel handler on the scrollable viewport. */
@@ -49,6 +51,7 @@ export default function OverlayScrollArea({
   railInset = 'none',
   viewportScrollBehaviorAuto = false,
   viewportRef: viewportRefProp,
+  wrapRef: wrapRefProp,
   viewportId,
   viewportOnWheel,
   viewportOnTouchMove,
@@ -109,6 +112,11 @@ export default function OverlayScrollArea({
     assignRef(viewportRefProp, el);
   };
 
+  const setWrapNode = (el: HTMLDivElement | null) => {
+    wrapRef.current = el;
+    assignRef(wrapRefProp, el);
+  };
+
   const rootClass = [
     'overlay-scroll',
     RAIL_INSET_CLASS[railInset],
@@ -121,7 +129,7 @@ export default function OverlayScrollArea({
   const viewportClass = ['overlay-scroll__viewport', viewportClassName].filter(Boolean).join(' ');
 
   return (
-    <div ref={wrapRef} className={rootClass} onMouseMove={onMouseMove}>
+    <div ref={setWrapNode} className={rootClass} onMouseMove={onMouseMove}>
       <div
         id={viewportId}
         ref={setViewportNode}

src/components/QueuePanel.tsx

@@ -23,7 +23,7 @@ import { copyTextToClipboard } from '../utils/serverMagicString';
 import { showToast } from '../utils/toast';
 import { useThemeStore } from '../store/themeStore';
 import { useLyricsStore } from '../store/lyricsStore';
-import { useDragDrop } from '../contexts/DragDropContext';
+import { useDragDrop, registerQueueDragHitTest } from '../contexts/DragDropContext';
 import LyricsPane from './LyricsPane';
 import NowPlayingInfo from './NowPlayingInfo';
 import { TFunction } from 'i18next';
@@ -301,6 +301,7 @@ function QueuePanelHostOrSolo() {
   const clearQueue = usePlayerStore(s => s.clearQueue);
 
   const reorderQueue = usePlayerStore(s => s.reorderQueue);
+  const removeTrack = usePlayerStore(s => s.removeTrack);
   const shuffleQueue = usePlayerStore(s => s.shuffleQueue);
   const enqueue = usePlayerStore(s => s.enqueue);
   const enqueueAt = usePlayerStore(s => s.enqueueAt);
@@ -440,6 +441,16 @@ function QueuePanelHostOrSolo() {
 
   const asideRef = useRef<HTMLElement>(null);
 
+  useEffect(() => {
+    const hitTest = (cx: number, cy: number) => {
+      const el = asideRef.current;
+      if (!el) return false;
+      const r = el.getBoundingClientRect();
+      return cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
+    };
+    return registerQueueDragHitTest(hitTest);
+  }, []);
+
   const { isDragging: isPsyDragging, startDrag, payload: psyPayload } = useDragDrop();
   /** Only these drag types may be dropped into the queue. */
   const QUEUE_DROP_TYPES = new Set(['song', 'album', 'queue_reorder']);
@@ -507,6 +518,37 @@ function QueuePanelHostOrSolo() {
     return () => aside.removeEventListener('psy-drop', onPsyDrop);
   }, [enqueueAt]);
 
+  // Drag a queue row outside the panel → remove (drop never reaches `aside`).
+  useEffect(() => {
+    const onDocPsyDrop = (e: Event) => {
+      if (!isQueueVisible) return;
+      const d = (e as CustomEvent<{ data?: string; clientX?: number; clientY?: number }>).detail;
+      if (!d?.data) return;
+      const cx = d.clientX;
+      const cy = d.clientY;
+      if (typeof cx !== 'number' || typeof cy !== 'number') return;
+      let parsed: { type?: string; index?: number } | null = null;
+      try {
+        parsed = JSON.parse(d.data);
+      } catch {
+        return;
+      }
+      if (parsed?.type !== 'queue_reorder' || typeof parsed.index !== 'number') return;
+      const aside = asideRef.current;
+      if (!aside) return;
+      const r = aside.getBoundingClientRect();
+      const inside =
+        cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom;
+      if (inside) return;
+      psyDragFromIdxRef.current = null;
+      externalDropTargetRef.current = null;
+      setExternalDropTarget(null);
+      removeTrack(parsed.index);
+    };
+    document.addEventListener('psy-drop', onDocPsyDrop);
+    return () => document.removeEventListener('psy-drop', onDocPsyDrop);
+  }, [isQueueVisible, removeTrack]);
+
   useEffect(function queueAutoScroll() {
     if (suppressNextAutoScrollRef.current) {
       suppressNextAutoScrollRef.current = false;