danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Live sidebar badges for Watchlist/Wishlist, update Wishlist icon to star

Browse source 
Sidebar nav badges now update from HTTP polling (every 10s), WebSocket
pushes, and page init — counts stay current regardless of which page
the user is on. Wishlist icon changed from music note to star in both
sidebar and page title to distinguish from Artists page.
This commit is contained in:
Broque Thomas 2026-04-16 13:47:42 -07:00
parent 258fc39364
commit 7317bd7c55
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/index.html
View file

@ -218,7 +218,7 @@
<span class="dl-nav-badge hidden" id="watchlist-nav-badge">0</span> <span class="dl-nav-badge hidden" id="watchlist-nav-badge">0</span>
</button> </button>
<button class="nav-button" data-page="wishlist"> <button class="nav-button" data-page="wishlist">
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/><line x1="1" y1="1" x2="5" y2="5" stroke-width="0"/></svg></span> <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
<span class="nav-text">Wishlist</span> <span class="nav-text">Wishlist</span>
<span class="dl-nav-badge hidden" id="wishlist-nav-badge">0</span> <span class="dl-nav-badge hidden" id="wishlist-nav-badge">0</span>
</button> </button>
@ -6734,7 +6734,7 @@
<div class="wishlist-page-header"> <div class="wishlist-page-header">
<div class="wishlist-page-header-left"> <div class="wishlist-page-header-left">
<h2 class="wishlist-page-title"> <h2 class="wishlist-page-title">
<span class="wishlist-page-title-icon">&#127925;</span> <span class="wishlist-page-title-icon">&#11088;</span>
Wishlist Wishlist
</h2> </h2>
<div class="wishlist-page-meta"> <div class="wishlist-page-meta">

24
webui/static/script.js
View file

@ -434,6 +434,12 @@ function _updateHeroBtnCount(buttonId, badgeId, count) {
function handleWatchlistCountUpdate(data) { function handleWatchlistCountUpdate(data) {
if (data.success) { if (data.success) {
_updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count); _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
// Update sidebar nav badge
const wlNavBadge = document.getElementById('watchlist-nav-badge');
if (wlNavBadge) {
wlNavBadge.textContent = data.count;
wlNavBadge.classList.toggle('hidden', data.count === 0);
}
const watchlistButton = document.getElementById('watchlist-button'); const watchlistButton = document.getElementById('watchlist-button');
if (watchlistButton) { if (watchlistButton) {
const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : ''; const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
@ -520,6 +526,12 @@ function handleDashboardDbStats(stats) {
function handleDashboardWishlistCount(data) { function handleDashboardWishlistCount(data) {
const count = data.count || 0; const count = data.count || 0;
_updateHeroBtnCount('wishlist-button', 'wishlist-badge', count); _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
// Update sidebar nav badge
const wlNavBadge = document.getElementById('wishlist-nav-badge');
if (wlNavBadge) {
wlNavBadge.textContent = count;
wlNavBadge.classList.toggle('hidden', count === 0);
}
const wishlistButton = document.getElementById('wishlist-button'); const wishlistButton = document.getElementById('wishlist-button');
if (wishlistButton) { if (wishlistButton) {
if (count === 0) { if (count === 0) {
@ -25730,6 +25742,12 @@ async function updateWishlistCount() {
const count = data.count || 0; const count = data.count || 0;
_updateHeroBtnCount('wishlist-button', 'wishlist-badge', count); _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
// Update sidebar nav badge
const wlNavBadge = document.getElementById('wishlist-nav-badge');
if (wlNavBadge) {
wlNavBadge.textContent = count;
wlNavBadge.classList.toggle('hidden', count === 0);
}
const wishlistButton = document.getElementById('wishlist-button'); const wishlistButton = document.getElementById('wishlist-button');
if (wishlistButton) { if (wishlistButton) {
if (count === 0) { if (count === 0) {
@ -40228,6 +40246,12 @@ async function updateWatchlistButtonCount() {
if (data.success) { if (data.success) {
_updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count); _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
// Update sidebar nav badge
const wlNavBadge = document.getElementById('watchlist-nav-badge');
if (wlNavBadge) {
wlNavBadge.textContent = data.count;
wlNavBadge.classList.toggle('hidden', data.count === 0);
}
const watchlistButton = document.getElementById('watchlist-button'); const watchlistButton = document.getElementById('watchlist-button');
if (watchlistButton) { if (watchlistButton) {
const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : ''; const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';