From ee8477039781320ac69dcbcf818b823286f1f2ec Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Wed, 4 Feb 2026 16:50:20 -0500
Subject: [PATCH] Improve progress bar visibility and add debug logging

- Increased progress bar height from 8px to 12px for better visibility
- Changed colors to more vibrant shades (green #10b981, orange #f59e0b)
- Added console debug logging for playlist stats
- Shows local (green) and external (orange) track percentages side-by-side
---
 allstarr/wwwroot/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index f01ba26..0f589bf 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1201,6 +1201,11 @@
                     const externalPct = spotifyTotal > 0 ? Math.round((externalMatched / spotifyTotal) * 100) : 0;
                     const completionColor = completionPct === 100 ? 'var(--success)' : completionPct >= 80 ? 'var(--accent)' : 'var(--warning)';
                     
+                    // Debug logging
+                    if (p.name && (localCount > 0 || externalMatched > 0)) {
+                        console.log(`Playlist ${p.name}: total=${spotifyTotal}, local=${localCount} (${localPct}%), external=${externalMatched} (${externalPct}%)`);
+                    }
+                    
                     return `
                         <tr>
                             <td><strong>${escapeHtml(p.name)}</strong></td>
@@ -1208,9 +1213,9 @@
                             <td>${statsHtml}${breakdown}</td>
                             <td>
                                 <div style="display:flex;align-items:center;gap:8px;">
-                                    <div style="flex:1;background:var(--bg-tertiary);height:8px;border-radius:4px;overflow:hidden;display:flex;">
-                                        <div style="width:${localPct}%;height:100%;background:#3b82f6;transition:width 0.3s;" title="${localCount} local tracks"></div>
-                                        <div style="width:${externalPct}%;height:100%;background:#eab308;transition:width 0.3s;" title="${externalMatched} external tracks"></div>
+                                    <div style="flex:1;background:var(--bg-tertiary);height:12px;border-radius:6px;overflow:hidden;display:flex;">
+                                        <div style="width:${localPct}%;height:100%;background:#10b981;transition:width 0.3s;" title="${localCount} local tracks"></div>
+                                        <div style="width:${externalPct}%;height:100%;background:#f59e0b;transition:width 0.3s;" title="${externalMatched} external tracks"></div>
                                     </div>
                                     <span style="font-size:0.85rem;color:${completionColor};font-weight:500;min-width:40px;">${completionPct}%</span>
                                 </div>