From 5a6710b0eb2591ed5f6e5e854f924c2cdd5dc311 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 13:27:46 +0200
Subject: [PATCH] fix(dnd): robust drop parsing with window fallback; keep
 previous sidebar border look; add global payload for reliability

---
 .../frontend/src/components/PaginatedSongList.tsx |  4 ++++
 .../frontend/src/components/PlaylistManager.tsx   | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index b2c0023..d64f190 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 {
+      (window as any).__rbDragPayload = payload;
+    } catch {}
     try {
       console.debug('[DnD] dragstart payload', payload);
     } catch {}
@@ -251,6 +254,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   const handleDragEnd = useCallback(() => {
     setIsDragging(false);
     dragSelectionRef.current = null;
+    try { (window as any).__rbDragPayload = null; } catch {}
   }, []);
 
   // Memoized song items to prevent unnecessary re-renders
diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 859c3bb..3088291 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -224,9 +224,8 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
         borderRight="1px solid"
         borderRightColor="whiteAlpha.200"
         position="relative"
-        border="1px solid"
-        borderColor={selectedItem === node.name ? 'blue.800' : 'transparent'}
-        _hover={{ ...(selectedItem === node.name ? {} : { borderColor: 'whiteAlpha.300' }) }}
+        border={selectedItem === node.name ? '1px solid' : undefined}
+        borderColor={selectedItem === node.name ? 'blue.800' : undefined}
         onDragOver={(e) => {
           e.preventDefault();
           const types = Array.from((e.dataTransfer.types || []) as any);
@@ -239,8 +238,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
         onDragLeave={() => setIsDragOver(false)}
         onDrop={(e) => {
           try {
-            const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
-            const parsed = json ? JSON.parse(json) : null;
+            let json = e.dataTransfer.getData('application/json');
+            if (!json) json = e.dataTransfer.getData('text/plain');
+            let parsed: any = null;
+            if (json && json.trim().length > 0) {
+              parsed = JSON.parse(json);
+            } else if ((window as any).__rbDragPayload) {
+              parsed = (window as any).__rbDragPayload;
+            }
             if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
               onDropSongs(node.name, parsed.songIds);
             }