From 04bf2c5c4fe19c2ac56480b9970e1144a204468e Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 1 Apr 2026 15:19:29 -0700
Subject: [PATCH] Fix redownload progress bar visibility

Bar was using var(--accent) which can be dark/invisible against the
modal background. Now uses bright green gradient with glow shadow.
Also thicker (8px) and queries DOM fresh each poll tick to prevent
stale references.
---
 webui/static/script.js | 27 +++++++++++++--------------
 webui/static/style.css |  4 ++--
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 38ee4e6b..01fda8a3 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -43282,19 +43282,22 @@ if (false) {
 }
 
 function _pollRedownloadProgress(taskId, overlay) {
-    const bar = document.getElementById('redownload-progress-bar');
-    const status = document.getElementById('redownload-progress-status');
     let completed = false;
 
     const poll = setInterval(async () => {
         if (completed) return;
+
+        // Get fresh DOM references every tick (in case DOM was rebuilt)
+        const bar = document.getElementById('redownload-progress-bar');
+        const status = document.getElementById('redownload-progress-status');
+
         try {
             // Poll real download progress from /api/downloads/status
             const dlRes = await fetch('/api/downloads/status');
             const dlData = await dlRes.json();
             const transfers = dlData.transfers || [];
 
-            // Find our transfer — match by checking active non-completed transfers
+            // Find any active transfer
             let bestTransfer = null;
             for (const t of transfers) {
                 const st = (t.state || '').toLowerCase();
@@ -43313,22 +43316,17 @@ function _pollRedownloadProgress(taskId, overlay) {
 
                 if (bar) bar.style.width = `${Math.min(95, pct)}%`;
                 if (status) {
-                    if (total > 0) {
-                        status.textContent = `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`;
-                    } else {
-                        status.textContent = `Downloading... ${Math.round(pct)}%`;
-                    }
+                    status.textContent = total > 0
+                        ? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
+                        : `Downloading... ${Math.round(pct)}%`;
                 }
             } else {
-                // No active Soulseek transfer — might be a streaming source (Tidal/YouTube)
-                // or post-processing phase
-                if (bar && parseFloat(bar.style.width) < 50) {
-                    bar.style.width = '60%';
-                }
+                // No active slskd transfer — streaming source or post-processing
+                if (bar) bar.style.width = '80%';
                 if (status) status.textContent = 'Processing...';
             }
 
-            // Check for completion — look for completed transfers or batch gone
+            // Check for batch completion
             const procRes = await fetch('/api/active-processes');
             const procData = await procRes.json();
             const procs = procData.active_processes || [];
@@ -43354,6 +43352,7 @@ function _pollRedownloadProgress(taskId, overlay) {
     setTimeout(() => {
         if (!completed) {
             clearInterval(poll);
+            const status = document.getElementById('redownload-progress-status');
             if (status) status.textContent = 'Download may still be in progress. Check the dashboard.';
         }
     }, 300000);
diff --git a/webui/static/style.css b/webui/static/style.css
index 0f95298a..c44dd291 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -52354,8 +52354,8 @@ tr.tag-diff-same {
 .redownload-progress { padding: 20px 0; text-align: center; }
 .redownload-progress-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
 .redownload-progress-from { font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 16px; }
-.redownload-progress-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
-.redownload-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width 0.5s ease; }
+.redownload-progress-bar-wrap { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
+.redownload-progress-bar { height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); border-radius: 4px; width: 0; transition: width 0.5s ease; box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); }
 .redownload-progress-status { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 12px; }
 
 /* Action buttons */