add drag/drop from lists into queue

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -101,7 +101,7 @@ export const PlayQueueListControls = ({
         //     mpvPlayer!.pause();
         // }
 
-        updateSong(undefined);
+        player.clearQueue();
 
         // setCurrentTime(0);
         // pause();

src/renderer/features/now-playing/components/play-queue.tsx

@@ -1,6 +1,7 @@
 import type { Ref } from 'react';
 
-import { forwardRef, useMemo } from 'react';
+import { nanoid } from 'nanoid/non-secure';
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
 
 import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
@@ -27,19 +28,54 @@ export const PlayQueue = forwardRef(({ listKey, searchTerm }: QueueProps, ref: R
         return queue;
     }, [queue, searchTerm]);
 
+    const playQueueKeyRef = useRef({
+        alreadyRendered: false,
+        key: nanoid(),
+        prevLength: 0,
+    });
+
+    useEffect(() => {
+        if (playQueueKeyRef.current.alreadyRendered && playQueueKeyRef.current.prevLength === 0) {
+            return;
+        }
+
+        if (data.length === 0) {
+            playQueueKeyRef.current = {
+                alreadyRendered: false,
+                key: nanoid(),
+                prevLength: data.length,
+            };
+            return;
+        }
+
+        if (data.length > 0 && !playQueueKeyRef.current.alreadyRendered) {
+            playQueueKeyRef.current = {
+                alreadyRendered: true,
+                key: nanoid(),
+                prevLength: data.length,
+            };
+        }
+    }, [data.length, playQueueKeyRef]);
+
     return (
         <ItemTableList
             CellComponent={ItemTableListColumn}
             columns={table.columns}
             data={data || []}
             enableAlternateRowColors={table.enableAlternateRowColors}
+            enableDrag={true}
             enableExpansion={false}
             enableHeader={true}
             enableHorizontalBorders={table.enableHorizontalBorders}
             enableRowHoverHighlight={table.enableRowHoverHighlight}
             enableSelection={true}
             enableVerticalBorders={table.enableVerticalBorders}
-            itemType={LibraryItem.ALBUM}
+            initialTop={{
+                to: 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.QUEUE_SONG}
+            key={playQueueKeyRef.current.key}
             ref={ref}
             size={table.size}
         />

src/renderer/features/player/context/player-context.tsx

@@ -23,7 +23,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { Play, PlayerRepeat, PlayerShuffle } from '/@/shared/types/types';
 
-interface PlayerContext {
+export interface PlayerContext {
     addToQueueByData: (data: Song[], type: AddToQueueType) => void;
     addToQueueByFetch: (
         serverId: string,