single track drag-and-drop ghost

frontend/src/components/cover-grid/cover-grid.ts

@@ -39,6 +39,7 @@ import type { DragPayload } from '@utils/drag-controller';
 import {
     createAlbumArtDragImage,
     createDragImage,
+    createTrackCardDragImage,
     removeDragImage,
 } from '@utils/drag-image';
 
@@ -2850,9 +2851,16 @@ export class CoverGrid extends LitElement {
                 JSON.stringify(payload),
             );
 
-            this.dragImageEl = createDragImage(
-                filePaths.length,
-            );
+            this.dragImageEl =
+                filePaths.length === 1
+                    ? createTrackCardDragImage(
+                          track.TrackName,
+                          track.ArtistName,
+                          track.FilePath,
+                      )
+                    : createDragImage(
+                          filePaths.length,
+                      );
             dataTransfer.setDragImage(
                 this.dragImageEl,
                 0,

frontend/src/components/playlist-view/playlist-view.ts

@@ -37,6 +37,7 @@ import {
 } from '@utils/drag-controller';
 import {
     createDragImage,
+    createTrackCardDragImage,
     removeDragImage,
 } from '@utils/drag-image';
 
@@ -1143,9 +1144,14 @@ export class PlaylistView
             sourcePlaylistId: entry.summary.ID,
         });
 
-        this.dragImageEl = createDragImage(
-            filePaths.length,
-        );
+        this.dragImageEl =
+            filePaths.length === 1
+                ? createTrackCardDragImage(
+                      track.Title,
+                      track.Artist,
+                      track.FilePath,
+                  )
+                : createDragImage(filePaths.length);
         e.dataTransfer?.setDragImage(
             this.dragImageEl,
             0,

frontend/src/components/queue-panel/queue-panel.ts

@@ -26,6 +26,7 @@ import {
 } from '@utils/drag-controller';
 import {
     createDragImage,
+    createTrackCardDragImage,
     removeDragImage,
 } from '@utils/drag-image';
 
@@ -1096,9 +1097,21 @@ export class QueuePanel
             source: 'queue',
         });
 
-        this.dragImageEl = createDragImage(
-            filePaths.length,
-        );
+        if (filePaths.length === 1) {
+            const t = tracks[index]!;
+
+            this.dragImageEl =
+                createTrackCardDragImage(
+                    t.title,
+                    t.artist,
+                    t.filePath,
+                );
+        } else {
+            this.dragImageEl = createDragImage(
+                filePaths.length,
+            );
+        }
+
         e.dataTransfer?.setDragImage(
             this.dragImageEl,
             0,

frontend/src/components/track-list/track-list.ts

@@ -21,6 +21,7 @@ import {
 } from '@utils/drag-controller';
 import {
     createDragImage,
+    createTrackCardDragImage,
     removeDragImage,
 } from '@utils/drag-image';
 import '@lit-labs/virtualizer';
@@ -1135,9 +1136,14 @@ export class TrackList extends LitElement implements SelectionHost {
         });
 
         // Custom drag image.
-        this.dragImageEl = createDragImage(
-            filePaths.length,
-        );
+        this.dragImageEl =
+            filePaths.length === 1
+                ? createTrackCardDragImage(
+                      track.TrackName,
+                      track.ArtistName,
+                      track.FilePath,
+                  )
+                : createDragImage(filePaths.length);
         e.dataTransfer?.setDragImage(
             this.dragImageEl,
             0,