chore(dnd): remove debug logs and globals; keep clean drag/drop with proper handlers and UX; no functional changes

packages/frontend/src/App.tsx

@@ -250,9 +250,7 @@ const RekordboxReader: React.FC = () => {
     };
 
     const updatedFullTree = applyAdd(fullTree);
-    console.debug('[DnD] saving playlists with added tracks', { playlistName, addCount: songIds.length });
     await api.savePlaylists(updatedFullTree);
-    console.debug('[DnD] playlists saved');
 
     // Reload structure for UI counters
     const structure = await api.getPlaylistStructure();
@@ -261,7 +259,6 @@ const RekordboxReader: React.FC = () => {
 
   // Handle drop from song list into playlist (with duplicate check and user choice)
   const handleDropSongsToPlaylist = async (playlistName: string, songIds: string[]) => {
-    console.debug('[DnD] App received drop', { playlistName, count: songIds?.length, songIds });
     // Find target playlist current tracks
     const findNode = (nodes: PlaylistNode[]): PlaylistNode | null => {
       for (const n of nodes) {
@@ -274,10 +271,7 @@ const RekordboxReader: React.FC = () => {
       return null;
     };
     const target = findNode(playlists);
-    if (!target) {
+    if (!target) return;
-      console.debug('[DnD] target playlist not found', playlistName);
-      return;
-    }
     const existing = new Set(target?.tracks || []);
     const dupes = songIds.filter(id => existing.has(id));
 
@@ -289,12 +283,8 @@ const RekordboxReader: React.FC = () => {
     }
 
     const finalIds = proceedMode === 'skip' ? songIds.filter(id => !existing.has(id)) : songIds;
-    if (finalIds.length === 0) {
+    if (finalIds.length === 0) return;
-      console.debug('[DnD] nothing to add after duplicate filter');
-      return;
-    }
     await handleAddSongsToPlaylist(finalIds, playlistName);
-    console.debug('[DnD] add completed');
     toast({
       title: 'Songs Added',
       description: `${finalIds.length} song${finalIds.length === 1 ? '' : 's'} added to "${playlistName}"`,

packages/frontend/src/components/PaginatedSongList.tsx

@@ -243,18 +243,11 @@ 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 {}
   }, [selectedSongs]);
 
   const handleDragEnd = useCallback(() => {
     setIsDragging(false);
     dragSelectionRef.current = null;
-    try { (window as any).__rbDragPayload = null; } catch {}
   }, []);
 
   // Memoized song items to prevent unnecessary re-renders

packages/frontend/src/components/PlaylistManager.tsx

@@ -150,7 +150,6 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
                 try { e.dataTransfer.dropEffect = 'copy'; } catch {}
                 setIsDragOver(true);
               }
-              console.debug('[DnD] dragover folder types', node.name, types);
             }}
             onDragLeave={() => setIsDragOver(false)}
             onDrop={(e) => {
@@ -162,10 +161,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
                 if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
                   onDropSongs(node.name, parsed.songIds);
                 }
-                console.debug('[DnD] drop folder', node.name, parsed, 'raw len', json?.length || 0);
+              } catch {}
-              } catch (err) {
-                console.debug('[DnD] drop folder parse failed', node.name, err);
-              }
               setIsDragOver(false);
             }}
             boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
@@ -240,7 +236,6 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
             try { e.dataTransfer.dropEffect = 'copy'; } catch {}
             setIsDragOver(true);
           }
-          console.debug('[DnD] dragover playlist types', node.name, types);
         }}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={(e) => {
@@ -252,25 +247,11 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
             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;
             }
-            console.debug('[DnD] drop playlist handler presence', node.name, Boolean(onDropSongs));
             if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
-              console.debug('[DnD] invoking onDropSongs', node.name, parsed.songIds.length);
               onDropSongs(node.name, parsed.songIds);
-            } else {
-              console.debug('[DnD] drop playlist no action', node.name, {
-                hasParsed: Boolean(parsed),
-                type: parsed?.type,
-                isArray: Array.isArray(parsed?.songIds),
-                hasHandler: Boolean(onDropSongs)
-              });
-            }
-            console.debug('[DnD] drop playlist', node.name, parsed, 'raw len', json?.length || 0);
-          } catch (err) {
-            console.debug('[DnD] drop playlist parse failed', node.name, err);
             }
+          } catch {}
           setIsDragOver(false);
         }}
         boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
@@ -366,6 +347,7 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
   onPlaylistDelete,
   onFolderCreate,
   onPlaylistMove,
+  onDropSongs,
 }) => {
   const { isOpen: isPlaylistModalOpen, onOpen: onPlaylistModalOpen, onClose: onPlaylistModalClose } = useDisclosure();
   const { isOpen: isFolderModalOpen, onOpen: onFolderModalOpen, onClose: onFolderModalClose } = useDisclosure();