From ef0ee651602fe61ad50d684d37449b728d166505 Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Tue, 3 Feb 2026 17:40:47 -0500
Subject: [PATCH] Optimize UI: Update playlist status without refetching all
 playlists

- After linking/unlinking, update UI state directly instead of refetching
- Avoids 7+ second delay from fetching track stats for all playlists
- Added data-playlist-id attribute to table rows for easy lookup
- Only refreshes Active Playlists tab (fast operation)
- Much better UX when linking multiple playlists
---
 allstarr/wwwroot/index.html | 41 +++++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index 05f6874..cd4f065 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1182,7 +1182,7 @@
                     const externalAvail = p.externalAvailable || 0;
                     
                     return `
-                        <tr>
+                        <tr data-playlist-id="${escapeHtml(p.id)}">
                             <td><strong>${escapeHtml(p.name)}</strong></td>
                             <td class="track-count">${localCount}</td>
                             <td class="track-count">${externalCount > 0 ? `${externalAvail}/${externalCount}` : '-'}</td>
@@ -1246,9 +1246,22 @@
                     showToast('Playlist linked!', 'success');
                     showRestartBanner();
                     closeModal('link-playlist-modal');
-                    // Refresh both tabs to show updated status
-                    fetchJellyfinPlaylists();
-                    fetchPlaylists();
+                    
+                    // Update UI state without refetching all playlists
+                    const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
+                    if (playlistsTable) {
+                        const rows = playlistsTable.querySelectorAll('tr');
+                        rows.forEach(row => {
+                            if (row.dataset.playlistId === jellyfinId) {
+                                const actionCell = row.querySelector('td:last-child');
+                                if (actionCell) {
+                                    actionCell.innerHTML = `<button class="danger" onclick="unlinkPlaylist('${escapeJs(name)}')">Unlink</button>`;
+                                }
+                            }
+                        });
+                    }
+                    
+                    fetchPlaylists(); // Only refresh the Active Playlists tab
                 } else {
                     showToast(data.error || 'Failed to link playlist', 'error');
                 }
@@ -1270,8 +1283,24 @@
                 if (res.ok) {
                     showToast('Playlist unlinked.', 'success');
                     showRestartBanner();
-                    fetchJellyfinPlaylists();
-                    fetchPlaylists();
+                    
+                    // Update UI state without refetching all playlists
+                    const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
+                    if (playlistsTable) {
+                        const rows = playlistsTable.querySelectorAll('tr');
+                        rows.forEach(row => {
+                            const nameCell = row.querySelector('td:first-child');
+                            if (nameCell && nameCell.textContent === name) {
+                                const actionCell = row.querySelector('td:last-child');
+                                if (actionCell) {
+                                    const playlistId = row.dataset.playlistId;
+                                    actionCell.innerHTML = `<button class="primary" onclick="openLinkPlaylist('${escapeJs(playlistId)}', '${escapeJs(name)}')">Link to Spotify</button>`;
+                                }
+                            }
+                        });
+                    }
+                    
+                    fetchPlaylists(); // Only refresh the Active Playlists tab
                 } else {
                     showToast(data.error || 'Failed to unlink playlist', 'error');
                 }