From b534485bde78116dd0d5fa54fd9306aa5759ad1d Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 13:22:20 +0200
Subject: [PATCH] chore(dnd-debug): add console.debug logs for dragover/drop,
 fix highlighting conditions, log drag payload

---
 .../src/components/PaginatedSongList.tsx      |  3 ++
 .../src/components/PlaylistManager.tsx        | 32 ++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index e610cde..b2c0023 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -243,6 +243,9 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
     e.dataTransfer.setData('application/json', JSON.stringify(payload));
     e.dataTransfer.setData('text/plain', JSON.stringify(payload));
     e.dataTransfer.effectAllowed = 'copyMove';
+    try {
+      console.debug('[DnD] dragstart payload', payload);
+    } catch {}
   }, [selectedSongs]);
 
   const handleDragEnd = useCallback(() => {
diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 4fb9378..08e8ba7 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -147,8 +147,13 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
               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 {}
+                if (parsed?.type === 'songs') {
+                  setIsDragOver(true);
+                }
+                console.debug('[DnD] dragover folder', node.name, parsed);
+              } catch (err) {
+                console.debug('[DnD] dragover folder parse failed', node.name, err);
+              }
             }}
             onDragLeave={() => setIsDragOver(false)}
             onDrop={(e) => {
@@ -158,7 +163,10 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
                 if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
                   onDropSongs(node.name, parsed.songIds);
                 }
-              } catch {}
+                console.debug('[DnD] drop folder', node.name, parsed);
+              } catch (err) {
+                console.debug('[DnD] drop folder parse failed', node.name, err);
+              }
               setIsDragOver(false);
             }}
             borderColor={isDragOver ? 'blue.400' : undefined}
@@ -227,8 +235,13 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
           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 {}
+            if (parsed?.type === 'songs') {
+              setIsDragOver(true);
+            }
+            console.debug('[DnD] dragover playlist', node.name, parsed);
+          } catch (err) {
+            console.debug('[DnD] dragover playlist parse failed', node.name, err);
+          }
         }}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={(e) => {
@@ -238,11 +251,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
             if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
               onDropSongs(node.name, parsed.songIds);
             }
-          } catch {}
+            console.debug('[DnD] drop playlist', node.name, parsed);
+          } catch (err) {
+            console.debug('[DnD] drop playlist parse failed', node.name, err);
+          }
           setIsDragOver(false);
         }}
-        borderColor={isDragOver ? 'blue.400' : undefined}
-        borderWidth={isDragOver ? '1px' : undefined}
+        borderColor={isDragOver ? 'blue.400' : (selectedItem === node.name ? 'blue.700' : 'transparent')}
+        borderWidth={isDragOver || selectedItem === node.name ? '1px' : undefined}
       >
         {level > 0 && (
           <Box