Fix removing tracks from queue

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)}

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) => {

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));
+}