joshpatra/allstarr
1
0
Fork 0
mirror of https://github.com/SoPat712/allstarr.git synced 2026-02-09 23:55:10 -05:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve progress bar visibility and add debug logging

Browse Source 
- 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
This commit is contained in:
Josh Patra
2026-02-04 16:50:20 -05:00
parent 7ccb660299
commit ee84770397
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
allstarr/wwwroot/index.html
View File

@@ -1201,6 +1201,11 @@
const externalPct = spotifyTotal > 0 ? Math.round((externalMatched / 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)'; 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 ` return `
<tr> <tr>
<td><strong>${escapeHtml(p.name)}</strong></td> <td><strong>${escapeHtml(p.name)}</strong></td>
@@ -1208,9 +1213,9 @@
<td>${statsHtml}${breakdown}</td> <td>${statsHtml}${breakdown}</td>
<td> <td>
<div style="display:flex;align-items:center;gap:8px;"> <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="flex:1;background:var(--bg-tertiary);height:12px;border-radius:6px;overflow:hidden;display:flex;">
<div style="width:${localPct}%;height:100%;background:#3b82f6;transition:width 0.3s;" title="${localCount} local tracks"></div> <div style="width:${localPct}%;height:100%;background:#10b981;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="width:${externalPct}%;height:100%;background:#f59e0b;transition:width 0.3s;" title="${externalMatched} external tracks"></div>
</div> </div>
<span style="font-size:0.85rem;color:${completionColor};font-weight:500;min-width:40px;">${completionPct}%</span> <span style="font-size:0.85rem;color:${completionColor};font-weight:500;min-width:40px;">${completionPct}%</span>
</div> </div>