From c7dd2e6d336010542e93502bcb5b5698383c1386 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 13:11:40 +0200
Subject: [PATCH] fix(dnd): ensure drop detects payload; set text/plain
 fallback; refresh playlist structure after add

---
 packages/frontend/src/App.tsx                    |  6 ++++++
 .../src/components/PaginatedSongList.tsx         |  1 +
 .../frontend/src/components/PlaylistManager.tsx  | 16 ++++++++++++++--
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index efbd11d..f41c420 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -272,6 +272,7 @@ const RekordboxReader: React.FC = () => {
       return null;
     };
     const target = findNode(playlists);
+    if (!target) return;
     const existing = new Set(target?.tracks || []);
     const dupes = songIds.filter(id => existing.has(id));
 
@@ -285,6 +286,11 @@ const RekordboxReader: React.FC = () => {
     const finalIds = proceedMode === 'skip' ? songIds.filter(id => !existing.has(id)) : songIds;
     if (finalIds.length === 0) return;
     await handleAddSongsToPlaylist(finalIds, playlistName);
+    // If we were on that playlist, refresh counters by reloading structure
+    try {
+      const updated = await api.getPlaylistStructure();
+      setPlaylists(updated);
+    } catch {}
   };
 
   const handleRemoveFromPlaylist = async (songIds: string[]) => {
diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 7314eb3..e610cde 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -241,6 +241,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
     setIsDragging(true);
     const payload = { type: 'songs', songIds: ids, count: ids.length };
     e.dataTransfer.setData('application/json', JSON.stringify(payload));
+    e.dataTransfer.setData('text/plain', JSON.stringify(payload));
     e.dataTransfer.effectAllowed = 'copyMove';
   }, [selectedSongs]);
 
diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 06b2138..a295e01 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -143,7 +143,12 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
             }
             onDragOver={(e) => {
               e.preventDefault();
-              setIsDragOver(true);
+              // Only highlight if payload looks like songs
+              const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
+              try {
+                const parsed = JSON.parse(json);
+                if (parsed?.type === 'songs') setIsDragOver(true);
+              } catch {}
             }}
             onDragLeave={() => setIsDragOver(false)}
             onDrop={(e) => {
@@ -217,7 +222,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
         borderRight="1px solid"
         borderRightColor="whiteAlpha.200"
         position="relative"
-        onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
+          try {
+            const parsed = JSON.parse(json);
+            if (parsed?.type === 'songs') setIsDragOver(true);
+          } catch {}
+        }}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={(e) => {
           try {