From 1f5af6790227404e21c11307c295c2e842df1a49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pierre=20de=20la=20Martini=C3=A8re?=
 <pierre.de.la.martiniere@gmail.com>
Date: Wed, 8 Jan 2025 22:07:29 +0100
Subject: [PATCH] Fix removing tracks from queue

---
 src/components/QueueList.tsx  | 10 +++++++++-
 src/components/TracksList.tsx | 18 ++++--------------
 src/hooks/useDnDSensors.ts    | 14 ++++++++++++++
 3 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/hooks/useDnDSensors.ts

diff --git a/src/components/QueueList.tsx b/src/components/QueueList.tsx
index 7e685d42e..238319cf1 100644
--- a/src/components/QueueList.tsx
+++ b/src/components/QueueList.tsx
@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react';
 
 import Button from '../elements/Button';
 import type { Track } from '../generated/typings';
+import useDndSensors from '../hooks/useDnDSensors';
 import { getStatus } from '../lib/utils-library';
 import { usePlayerAPI } from '../stores/usePlayerStore';
 import QueueListItem from './QueueListItem';
@@ -34,6 +35,8 @@ export default function QueueList(props: Props) {
   const incomingQueue = queue.slice(queueCursor + 1);
 
   // Drag-and-Drop support for reordering the queue
+  const sensors = useDndSensors();
+
   const onDragEnd = useCallback(
     (event: DragEndEvent) => {
       const {
@@ -60,7 +63,12 @@ export default function QueueList(props: Props) {
   );
 
   return (
-    <DndContext onDragEnd={onDragEnd} id="dnd-queue" modifiers={DND_MODIFIERS}>
+    <DndContext
+      onDragEnd={onDragEnd}
+      id="dnd-queue"
+      modifiers={DND_MODIFIERS}
+      sensors={sensors}
+    >
       <div className={styles.queueHeader}>
         <div className={styles.queueHeaderInfos}>
           {getStatus(incomingQueue)}
diff --git a/src/components/TracksList.tsx b/src/components/TracksList.tsx
index e2198ab01..77bcddad5 100644
--- a/src/components/TracksList.tsx
+++ b/src/components/TracksList.tsx
@@ -1,11 +1,4 @@
-import {
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
+import { DndContext, type DragEndEvent } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   SortableContext,
@@ -18,6 +11,7 @@ import {
   PredefinedMenuItem,
   Submenu,
 } from '@tauri-apps/api/menu';
+import { revealItemInDir } from '@tauri-apps/plugin-opener';
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Keybinding from 'react-keybinding-component';
@@ -32,7 +26,7 @@ import { usePlayerAPI } from '../stores/usePlayerStore';
 import TrackRow from './TrackRow';
 import TracksListHeader from './TracksListHeader';
 
-import { revealItemInDir } from '@tauri-apps/plugin-opener';
+import useDndSensors from '../hooks/useDnDSensors';
 import useInvalidate from '../hooks/useInvalidate';
 import { useScrollRestoration } from '../hooks/useScrollRestoration';
 import { keyboardSelect } from '../lib/utils-list';
@@ -222,11 +216,7 @@ export default function TracksList(props: Props) {
   /**
    * Playlist tracks re-order events handlers
    */
-  const pointerSensor = useSensor(PointerSensor, {
-    activationConstraint: { distance: 8 },
-  });
-
-  const sensors = useSensors(pointerSensor, useSensor(KeyboardSensor));
+  const sensors = useDndSensors();
 
   const onDragEnd = useCallback(
     (event: DragEndEvent) => {
diff --git a/src/hooks/useDnDSensors.ts b/src/hooks/useDnDSensors.ts
new file mode 100644
index 000000000..8ed9b047c
--- /dev/null
+++ b/src/hooks/useDnDSensors.ts
@@ -0,0 +1,14 @@
+import {
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+
+export default function useDndSensors() {
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: { distance: 8 },
+  });
+
+  return useSensors(pointerSensor, useSensor(KeyboardSensor));
+}