From 632834b30aaa5d8842e53021abcec905c144803c Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Sat, 30 Aug 2025 21:48:41 -0700
Subject: [PATCH] ui informaiton

---
 webui/static/script.js | 35 +++++++++++++++++++++++++++++++++--
 webui/static/style.css | 23 +++++++++++++++++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index de315e87..9d3bc0f7 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -1921,15 +1921,44 @@ function handleViewProgressClick(event, playlistId) {
 function updatePlaylistCardUI(playlistId) {
     const process = activeDownloadProcesses[playlistId];
     const progressBtn = document.getElementById(`progress-btn-${playlistId}`);
+    const actionBtn = document.getElementById(`action-btn-${playlistId}`);
+    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
 
-    if (!progressBtn) return;
+    if (!progressBtn || !actionBtn) return;
 
     if (process && process.status === 'running') {
         // A process is running: show the progress button
         progressBtn.classList.remove('hidden');
+        progressBtn.textContent = 'View Progress';
+        progressBtn.style.backgroundColor = '';  // Reset any custom styling
+        actionBtn.textContent = '📥 Downloading...';
+        actionBtn.disabled = true;
+        
+        // Remove completion styling from card
+        if (card) card.classList.remove('download-complete');
+        
+    } else if (process && process.status === 'complete') {
+        // Process completed: show "ready for review" indicator
+        progressBtn.classList.remove('hidden');
+        progressBtn.textContent = '📋 View Results';  
+        progressBtn.style.backgroundColor = '#28a745'; // Green success color
+        progressBtn.style.color = 'white';
+        actionBtn.textContent = '✅ Ready for Review';
+        actionBtn.disabled = false; // Allow clicking to see results
+        
+        // Add completion styling to card
+        if (card) card.classList.add('download-complete');
+        
     } else {
-        // No process or it's finished: hide the progress button
+        // No process or it's been cleaned up: normal state
         progressBtn.classList.add('hidden');
+        progressBtn.style.backgroundColor = '';  // Reset styling
+        progressBtn.style.color = '';  // Reset styling
+        actionBtn.textContent = 'Sync / Download';
+        actionBtn.disabled = false;
+        
+        // Remove completion styling from card
+        if (card) card.classList.remove('download-complete');
     }
 }
 
@@ -2690,9 +2719,11 @@ function startModalDownloadPolling(playlistId) {
                         showToast(`Process cancelled for ${process.playlist.name}.`, 'info');
                     } else if (data.phase === 'error') {
                         process.status = 'complete'; // Treat as complete to allow cleanup
+                        updatePlaylistCardUI(playlistId); // Update card to show ready for review
                         showToast(`Process for ${process.playlist.name} failed!`, 'error');
                     } else {
                         process.status = 'complete';
+                        updatePlaylistCardUI(playlistId); // Update card to show ready for review
                         
                         // Handle background wishlist processing completion specially
                         if (isBackgroundWishlist) {
diff --git a/webui/static/style.css b/webui/static/style.css
index a0e65bdf..ef56372b 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -5126,4 +5126,27 @@ body {
 
 .hidden {
     display: none !important;
+}
+
+/* Download Complete Styling - Ready for Review State */
+.playlist-card.download-complete {
+    /* Add subtle green left border to indicate completion */
+    border-left: 4px solid #28a745;
+    background: linear-gradient(135deg, 
+        rgba(40, 167, 69, 0.05) 0%, 
+        rgba(26, 26, 26, 0.95) 20%, 
+        rgba(18, 18, 18, 0.98) 100%);
+}
+
+.playlist-card.download-complete:hover {
+    /* Enhanced hover for completed cards */
+    background: linear-gradient(135deg, 
+        rgba(40, 167, 69, 0.08) 0%, 
+        rgba(30, 30, 30, 0.98) 20%, 
+        rgba(22, 22, 22, 1.0) 100%);
+    
+    box-shadow: 
+        0 8px 32px rgba(40, 167, 69, 0.15),
+        0 2px 8px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
\ No newline at end of file