From 7a7b884af27793008d3a11a8c40a3d3d4066c0c9 Mon Sep 17 00:00:00 2001
From: Josh Patra <joshpatra12@gmail.com>
Date: Wed, 4 Feb 2026 15:37:07 -0500
Subject: [PATCH] Update playlist progress bar to show stacked blue/yellow
 segments

- Blue segment shows local tracks percentage
- Yellow segment shows external matched tracks percentage
- Bar fills to 100% when all tracks are matched
- Added tooltips showing track counts on hover
---
 allstarr/wwwroot/index.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index b9b40bc..8161b7a 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1164,6 +1164,8 @@
                     
                     // Calculate completion percentage
                     const completionPct = spotifyTotal > 0 ? Math.round((totalInJellyfin / spotifyTotal) * 100) : 0;
+                    const localPct = spotifyTotal > 0 ? Math.round((localCount / spotifyTotal) * 100) : 0;
+                    const externalPct = spotifyTotal > 0 ? Math.round((externalMatched / spotifyTotal) * 100) : 0;
                     const completionColor = completionPct === 100 ? 'var(--success)' : completionPct >= 80 ? 'var(--accent)' : 'var(--warning)';
                     
                     return `
@@ -1173,8 +1175,9 @@
                             <td>${statsHtml}${breakdown}</td>
                             <td>
                                 <div style="display:flex;align-items:center;gap:8px;">
-                                    <div style="flex:1;background:var(--bg-tertiary);height:6px;border-radius:3px;overflow:hidden;">
-                                        <div style="width:${completionPct}%;height:100%;background:${completionColor};transition:width 0.3s;"></div>
+                                    <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>
                                     <span style="font-size:0.85rem;color:${completionColor};font-weight:500;min-width:40px;">${completionPct}%</span>
                                 </div>