From 5a21243f5b66b86d1a4fb341ac363045fb4c1703 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 14:15:55 +0200
Subject: [PATCH] chore(reorder): add client debug logs; refresh playlist after
 reorder; backend keeps missing ids at end when reordering

---
 packages/backend/src/routes/playlists.ts      |  6 +++++-
 packages/frontend/src/App.tsx                 |  9 +++------
 .../src/components/PaginatedSongList.tsx      | 19 ++++++++++++++++---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/backend/src/routes/playlists.ts b/packages/backend/src/routes/playlists.ts
index 9c98f3e..9ab4430 100644
--- a/packages/backend/src/routes/playlists.ts
+++ b/packages/backend/src/routes/playlists.ts
@@ -96,7 +96,11 @@ router.post('/reorder', async (req: Request, res: Response) => {
       if (node.type === 'playlist' && node.name === playlistName) {
         // Ensure unique order and only include known IDs
         const unique = Array.from(new Set(orderedIds));
-        node.tracks = unique;
+        // If tracks exist, keep only ids present in unique, and append any tracks not included to preserve membership
+        const current: string[] = Array.isArray(node.tracks) ? node.tracks : [];
+        const orderedKnown = unique.filter(id => current.includes(id));
+        const missing = current.filter(id => !unique.includes(id));
+        node.tracks = [...orderedKnown, ...missing];
         updated = true;
         return node;
       }
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index bd08496..caf677e 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -129,7 +129,8 @@ const RekordboxReader: React.FC = () => {
     totalDuration,
     loadNextPage,
     searchSongs,
-    searchQuery
+    searchQuery,
+    refresh
   } = usePaginatedSongs({ pageSize: 100, playlistName: currentPlaylist });
 
   // Export library to XML
@@ -656,11 +657,7 @@ const RekordboxReader: React.FC = () => {
                          // Persist order in backend
                          await api.reorderPlaylist(currentPlaylist, orderedIds);
                          // Refresh the current playlist view
-                         // Easiest: refetch page 1 to reflect new order
-                         // Future: keep local order optimistic
-                         // For now, force reload songs by navigating to same route
-                         // and resetting pagination via usePaginatedSongs hook
-                         // noop here as hook likely fetches by API sort; backend will serve correct order when playlist songs endpoint respects track order
+                         refresh();
                        }}
                       />
                     </Box>
diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 40baf3f..42c98d2 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -282,20 +282,33 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
           if (!onReorder || !currentPlaylist || selectedSongs.size > 0) return;
           e.preventDefault();
           const fromId = e.dataTransfer.getData('text/song-id');
-          if (!fromId) return;
+          if (!fromId) {
+            console.debug('[Reorder] missing fromId');
+            return;
+          }
           const fromIndex = songs.findIndex(s => s.id === fromId);
           const toIndex = index;
-          if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return;
+          if (fromIndex < 0 || toIndex < 0) {
+            console.debug('[Reorder] invalid indexes', { fromIndex, toIndex });
+            return;
+          }
+          if (fromIndex === toIndex) {
+            console.debug('[Reorder] same index drop');
+            return;
+          }
           const ordered = [...songs];
           const [moved] = ordered.splice(fromIndex, 1);
           ordered.splice(toIndex, 0, moved);
-          await onReorder(ordered.map(s => s.id));
+          const orderedIds = ordered.map(s => s.id);
+          console.debug('[Reorder] persisting order', { fromIndex, toIndex, fromId, toId: songs[index].id });
+          await onReorder(orderedIds);
           setDragHoverIndex(null);
         }}
         onRowDragStartCapture={(e: React.DragEvent) => {
           // Provide a simple id for intra-list reorder
           if (!currentPlaylist || selectedSongs.size > 0) return;
           e.dataTransfer.setData('text/song-id', song.id);
+          console.debug('[Reorder] drag start', { id: song.id, index });
         }}
       />
     ));