From 0073f8146d2adafcb8034128d25c183c9f3f6cb3 Mon Sep 17 00:00:00 2001 From: Geert Rademakes Date: Fri, 8 Aug 2025 15:39:00 +0200 Subject: [PATCH] fix(reorder): enable landing indicator and drop handling for multi-drag; start reorder on multi-select; relax guards to allow multi block moves --- .../frontend/src/components/PaginatedSongList.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx index cb81877..9658123 100644 --- a/packages/frontend/src/components/PaginatedSongList.tsx +++ b/packages/frontend/src/components/PaginatedSongList.tsx @@ -251,6 +251,7 @@ export const PaginatedSongList: React.FC = memo(({ const ids = selectedSongs.size > 0 ? Array.from(selectedSongs) : songIdsFallback; dragSelectionRef.current = ids; setIsDragging(true); + setIsReorderDragging(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)); @@ -280,12 +281,12 @@ export const PaginatedSongList: React.FC = memo(({ onDragStart={handleDragStart} // Simple playlist reordering within same list by dragging rows onRowDragOver={(e: React.DragEvent) => { - if (!onReorder || !currentPlaylist || selectedSongs.size > 0) return; + if (!onReorder || !currentPlaylist) return; e.preventDefault(); setDragHoverIndex(index); }} onRowDrop={async (e: React.DragEvent) => { - if (!onReorder || !currentPlaylist || selectedSongs.size > 0) return; + if (!onReorder || !currentPlaylist) return; e.preventDefault(); const fromId = e.dataTransfer.getData('text/song-id'); const multiJson = e.dataTransfer.getData('application/json'); @@ -301,8 +302,8 @@ export const PaginatedSongList: React.FC = memo(({ if (!fromId && !multiIds) return; const fromIndex = fromId ? songs.findIndex(s => s.id === fromId) : -1; const toIndex = index; - if (fromIndex < 0 || toIndex < 0) return; - if (fromIndex === toIndex) return; + if (toIndex < 0) return; + if (fromId && fromIndex >= 0 && fromIndex === toIndex) return; const toId = songs[index].id; // If multiple, move block; else move single if (multiIds && multiIds.length > 0) { @@ -316,7 +317,7 @@ export const PaginatedSongList: React.FC = memo(({ }} onRowDragStartCapture={(e: React.DragEvent) => { // Provide a simple id for intra-list reorder - if (!currentPlaylist || selectedSongs.size > 0) return; + if (!currentPlaylist) return; e.dataTransfer.setData('text/song-id', song.id); // Explicitly set effect to move for better UX try { e.dataTransfer.effectAllowed = 'move'; } catch {}