From c9704764ae384554b5be432c28ce604367641d8f Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Tue, 26 Aug 2025 22:16:50 -0700
Subject: [PATCH] active modal adjustments

---
 webui/static/script.js | 24 ++++++++++--------------
 webui/static/style.css |  5 +++++
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 112fb597..805509d7 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -1449,8 +1449,8 @@ function renderSpotifyPlaylists() {
                     <div class="sync-progress-indicator" id="progress-${p.id}"></div>
                 </div>
                 <div class="playlist-card-actions">
-                    <button id="action-btn-${p.id}" onclick="handleCardActionClick(event, '${p.id}')">Sync / Download</button>
-                    <button id="progress-btn-${p.id}" class="view-progress-btn hidden" onclick="handleCardActionClick(event, '${p.id}')">
+                    <button id="action-btn-${p.id}" onclick="openPlaylistDetailsModal(event, '${p.id}')">Sync / Download</button>
+                    <button id="progress-btn-${p.id}" class="view-progress-btn hidden" onclick="handleViewProgressClick(event, '${p.id}')">
                         View Progress
                     </button>
                 </div>
@@ -1460,34 +1460,28 @@ function renderSpotifyPlaylists() {
     }).join('');
 }
 
-function handleCardActionClick(event, playlistId) {
-    event.stopPropagation();
+function handleViewProgressClick(event, playlistId) {
+    event.stopPropagation(); // Prevent the card selection from toggling
     const process = activeDownloadProcesses[playlistId];
 
     if (process && process.modalElement) {
-        // If a process is active, show its modal
+        // If a process is active, just show its modal
         console.log(`Re-opening active download modal for playlist ${playlistId}`);
         process.modalElement.style.display = 'flex';
-    } else {
-        // Otherwise, open the details modal as normal
-        openPlaylistDetailsModal(event, playlistId);
     }
 }
 
 function updatePlaylistCardUI(playlistId) {
     const process = activeDownloadProcesses[playlistId];
-    const defaultBtn = document.getElementById(`action-btn-${playlistId}`);
     const progressBtn = document.getElementById(`progress-btn-${playlistId}`);
 
-    if (!defaultBtn || !progressBtn) return;
+    if (!progressBtn) return;
 
     if (process && process.status === 'running') {
-        // A process is running: show progress button, hide default
-        defaultBtn.classList.add('hidden');
+        // A process is running: show the progress button
         progressBtn.classList.remove('hidden');
     } else {
-        // No process or it's finished: show default, hide progress
-        defaultBtn.classList.remove('hidden');
+        // No process or it's finished: hide the progress button
         progressBtn.classList.add('hidden');
     }
 }
@@ -3539,6 +3533,8 @@ window.closeDownloadMissingModal = closeDownloadMissingModal;
 window.startTrackAnalysis = startTrackAnalysis;
 window.cancelAllOperations = cancelAllOperations;
 window.cancelTrackDownload = cancelTrackDownload;
+window.handleViewProgressClick = handleViewProgressClick;
+
 
 // APPEND THIS JAVASCRIPT SNIPPET (B)
 
diff --git a/webui/static/style.css b/webui/static/style.css
index 5c1854e7..d445208d 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -4964,6 +4964,11 @@ body {
     transition: all 0.2s ease;
 }
 
+.playlist-card-actions .view-progress-btn {
+    background: #1db954;
+    color: #000000;
+}
+
 .playlist-card-actions button:hover {
     background: #1db954;
     color: #000000;