From 3f57904dd7989fe92b3a7abad9e87453b259894f Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 13:35:54 +0200
Subject: [PATCH] fix(dnd): ensure drop triggers by preventing default and
 stopping propagation; set dropEffect=copy on dragover

---
 packages/frontend/src/components/PlaylistManager.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 3088291..cd7d0f6 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -143,15 +143,19 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
             }
             onDragOver={(e) => {
               e.preventDefault();
+              e.stopPropagation();
               const types = Array.from((e.dataTransfer.types || []) as any);
               const hasOurType = types.includes('application/json') || types.includes('text/plain');
               if (hasOurType) {
+                try { e.dataTransfer.dropEffect = 'copy'; } catch {}
                 setIsDragOver(true);
               }
               console.debug('[DnD] dragover folder types', node.name, types);
             }}
             onDragLeave={() => setIsDragOver(false)}
             onDrop={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
               try {
                 const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
                 const parsed = json ? JSON.parse(json) : null;
@@ -228,15 +232,19 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
         borderColor={selectedItem === node.name ? 'blue.800' : undefined}
         onDragOver={(e) => {
           e.preventDefault();
+          e.stopPropagation();
           const types = Array.from((e.dataTransfer.types || []) as any);
           const hasOurType = types.includes('application/json') || types.includes('text/plain');
           if (hasOurType) {
+            try { e.dataTransfer.dropEffect = 'copy'; } catch {}
             setIsDragOver(true);
           }
           console.debug('[DnD] dragover playlist types', node.name, types);
         }}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
           try {
             let json = e.dataTransfer.getData('application/json');
             if (!json) json = e.dataTransfer.getData('text/plain');