Add watchlist settings gear button to artist detail and artist card pages

webui/index.html

@@ -2177,10 +2177,15 @@
                             </div>
                         </div>
 
-                        <button class="artist-detail-watchlist-btn" id="artist-detail-watchlist-btn">
+                        <div class="artist-detail-watchlist-group">
-                            <span class="watchlist-icon">👁️</span>
+                            <button class="artist-detail-watchlist-btn" id="artist-detail-watchlist-btn">
-                            <span class="watchlist-text">Add to Watchlist</span>
+                                <span class="watchlist-icon">👁️</span>
-                        </button>
+                                <span class="watchlist-text">Add to Watchlist</span>
+                            </button>
+                            <button class="artist-detail-watchlist-settings-btn hidden" id="artist-detail-watchlist-settings-btn" title="Watchlist Settings">
+                                &#9881;
+                            </button>
+                        </div>
                     </div>
 
                     <div class="artist-detail-content">

webui/static/script.js

@@ -27925,10 +27925,13 @@ function createArtistCardHTML(artist) {
                     <span>${popularityText}</span>
                 </div>
                 <div class="artist-card-actions">
-                    <button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
+                    <div class="watchlist-btn-group">
-                        <span class="watchlist-icon">👁️</span>
+                        <button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
-                        <span class="watchlist-text">Add to Watchlist</span>
+                            <span class="watchlist-icon">👁️</span>
-                    </button>
+                            <span class="watchlist-text">Add to Watchlist</span>
+                        </button>
+                        <button class="watchlist-settings-btn hidden" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="event.stopPropagation(); openWatchlistArtistConfigModal('${artist.id}', '${escapeForInlineJs(artist.name)}')" title="Watchlist Settings">&#9881;</button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -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');
                 }
             }
         }

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 {