From 0e89155c15cf5696af4da0ba8ff3a8fde4b0af16 Mon Sep 17 00:00:00 2001 From: Broque Thomas <26755000+Nezreka@users.noreply.github.com> Date: Fri, 13 Mar 2026 22:07:54 -0700 Subject: [PATCH] Add watchlist settings gear button to artist detail and artist card pages --- webui/index.html | 13 +++++--- webui/static/script.js | 54 +++++++++++++++++++++++++++---- webui/static/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+), 10 deletions(-) diff --git a/webui/index.html b/webui/index.html index eb6d5bf7..6a479d9e 100644 --- a/webui/index.html +++ b/webui/index.html @@ -2177,10 +2177,15 @@ - +
+ + +
diff --git a/webui/static/script.js b/webui/static/script.js index 2ace0a99..a1cfbe11 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -27925,10 +27925,13 @@ function createArtistCardHTML(artist) { ${popularityText}
- +
+ + +
@@ -29079,6 +29082,10 @@ async function initializeArtistDetailWatchlistButton(artist) { console.log(`🔧 Initializing watchlist button for artist: ${artist.name} (${artist.id})`); + // Store artist info on the button for settings gear access + button.dataset.artistId = artist.id; + button.dataset.artistName = artist.name; + // Reset button state completely button.disabled = false; button.classList.remove('watching'); @@ -29092,7 +29099,7 @@ async function initializeArtistDetailWatchlistButton(artist) { button.onclick = (event) => toggleArtistDetailWatchlist(event, artist.id, artist.name); // Check and update current status - await updateArtistDetailWatchlistButton(artist.id); + await updateArtistDetailWatchlistButton(artist.id, artist.name); } /** @@ -29157,6 +29164,20 @@ async function toggleArtistDetailWatchlist(event, artistId, artistName) { console.log(`✅ Added ${artistName} to watchlist`); } + // Show/hide watchlist settings gear + const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn'); + if (settingsBtn) { + if (!isWatching) { + // Just added to watchlist — show gear + settingsBtn.classList.remove('hidden'); + settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, artistName); + } else { + // Just removed from watchlist — hide gear + settingsBtn.classList.add('hidden'); + settingsBtn.onclick = null; + } + } + // Update dashboard watchlist count updateWatchlistButtonCount(); @@ -29181,13 +29202,16 @@ async function toggleArtistDetailWatchlist(event, artistId, artistName) { /** * Update artist detail watchlist button status */ -async function updateArtistDetailWatchlistButton(artistId) { +async function updateArtistDetailWatchlistButton(artistId, artistName) { const button = document.getElementById('artist-detail-watchlist-btn'); if (!button) { console.warn('⚠️ Artist detail watchlist button not found'); return; } + // Use passed name or fall back to stored data attribute + const name = artistName || button.dataset.artistName || ''; + try { console.log(`🔍 Checking watchlist status for artist: ${artistId}`); @@ -29207,6 +29231,18 @@ async function updateArtistDetailWatchlistButton(artistId) { // Ensure button is enabled button.disabled = false; + // Show/hide watchlist settings gear + const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn'); + if (settingsBtn) { + if (data.is_watching) { + settingsBtn.classList.remove('hidden'); + settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, name); + } else { + settingsBtn.classList.add('hidden'); + settingsBtn.onclick = null; + } + } + if (data.is_watching) { icon.textContent = '👁️'; text.textContent = 'Remove from Watchlist'; @@ -31591,17 +31627,20 @@ async function toggleWatchlist(event, artistId, artistName) { } // Update button appearance + const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn'); if (isWatching) { // Was watching, now removed icon.textContent = '👁️'; text.textContent = 'Add to Watchlist'; button.classList.remove('watching'); + if (gearBtn) gearBtn.classList.add('hidden'); console.log(`❌ Removed ${artistName} from watchlist`); } else { // Was not watching, now added icon.textContent = '👁️'; text.textContent = 'Watching...'; button.classList.add('watching'); + if (gearBtn) gearBtn.classList.remove('hidden'); console.log(`✅ Added ${artistName} to watchlist`); } @@ -31679,14 +31718,17 @@ async function updateArtistCardWatchlistStatus() { const icon = button.querySelector('.watchlist-icon'); const text = button.querySelector('.watchlist-text'); + const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn'); if (data.results[artistId]) { if (icon) icon.textContent = '👁️'; if (text) text.textContent = 'Watching...'; button.classList.add('watching'); + if (gearBtn) gearBtn.classList.remove('hidden'); } else { if (icon) icon.textContent = '👁️'; if (text) text.textContent = 'Add to Watchlist'; button.classList.remove('watching'); + if (gearBtn) gearBtn.classList.add('hidden'); } } } diff --git a/webui/static/style.css b/webui/static/style.css index 700ff091..201e1326 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -4311,6 +4311,11 @@ body { } /* Confirm Dialog Modal */ +/* Confirm dialog must sit above all other modals (playlist, download, etc.) */ +#confirm-modal-overlay { + z-index: 11000; +} + .confirm-modal { background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); border-radius: 20px; @@ -15386,6 +15391,73 @@ body { transform: none; } +/* Artist Detail Watchlist Button Group (with settings gear) */ +.artist-detail-watchlist-group { + display: flex; + align-items: center; + gap: 6px; +} + +.artist-detail-watchlist-settings-btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + padding: 0; + font-size: 18px; + color: #aaa; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; + outline: none; +} + +.artist-detail-watchlist-settings-btn:hover { + background: rgba(255, 193, 7, 0.15); + color: #ffc107; + border-color: rgba(255, 193, 7, 0.3); + transform: translateY(-1px); +} + +/* Artist Card Watchlist Button Group (artists/discover page) */ +.watchlist-btn-group { + display: flex; + align-items: center; + gap: 6px; +} + +.watchlist-btn-group .watchlist-toggle-btn { + flex: 1; +} + +.watchlist-settings-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0; + font-size: 16px; + color: #aaa; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 10px; + cursor: pointer; + transition: all 0.2s ease; + outline: none; + flex-shrink: 0; +} + +.watchlist-settings-btn:hover { + background: rgba(255, 193, 7, 0.15); + color: #ffc107; + border-color: rgba(255, 193, 7, 0.3); + transform: translateY(-1px); +} + /* Library Artist Watchlist Button */ .library-artist-watchlist-btn {