From 77b6d4927c4ff8b95ac263e215b1ad415508f6f2 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Thu, 26 Mar 2026 08:01:31 -0700
Subject: [PATCH] Add View Discography button to watchlist artist detail
 overlay

Clicking the button closes the watchlist modal and navigates to the
Artists page with the artist's discography loaded. Uses the correct
source ID based on the active metadata source (Spotify/Deezer/iTunes).
---
 webui/static/script.js | 32 +++++++++++++++++++++++++++++++-
 webui/static/style.css | 16 +++++++++++++---
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index b6953b4a..dbe909ce 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -36806,7 +36806,7 @@ async function openWatchlistArtistDetailView(artistId, artistName) {
             return;
         }
 
-        const { config, artist, recent_releases } = data;
+        const { config, artist, recent_releases, spotify_artist_id, itunes_artist_id, deezer_artist_id } = data;
 
         // Remove existing overlay if any
         const existing = document.querySelector('.watchlist-artist-detail-overlay');
@@ -36917,6 +36917,7 @@ async function openWatchlistArtistDetailView(artistId, artistName) {
                 </div>
 
                 <div class="watchlist-detail-actions">
+                    <button class="watchlist-detail-discog-btn watchlist-detail-discog-action">View Discography</button>
                     <button class="watchlist-detail-settings-btn watchlist-detail-settings-action">Settings</button>
                     <button class="watchlist-detail-remove-btn watchlist-detail-remove-action">Remove from Watchlist</button>
                 </div>
@@ -36928,6 +36929,35 @@ async function openWatchlistArtistDetailView(artistId, artistName) {
             closeWatchlistArtistDetailView();
         });
 
+        overlay.querySelector('.watchlist-detail-discog-action').addEventListener('click', () => {
+            // Use the ID matching the active metadata source
+            let discogId, source;
+            const activeSrc = (currentMusicSourceName || '').toLowerCase();
+            if (activeSrc.includes('spotify') && spotify_artist_id) {
+                discogId = spotify_artist_id; source = 'spotify';
+            } else if (activeSrc.includes('deezer') && deezer_artist_id) {
+                discogId = deezer_artist_id; source = 'deezer';
+            } else if (itunes_artist_id) {
+                discogId = itunes_artist_id; source = 'itunes';
+            } else {
+                discogId = spotify_artist_id || deezer_artist_id || itunes_artist_id;
+                source = spotify_artist_id ? 'spotify' : deezer_artist_id ? 'deezer' : 'itunes';
+            }
+            if (discogId) {
+                // Close watchlist modal + detail overlay
+                closeWatchlistArtistDetailView();
+                closeWatchlistModal();
+                // Navigate to Artists page and load discography
+                navigateToPage('artists');
+                setTimeout(() => {
+                    selectArtistForDetail(
+                        { id: discogId, name: artistName, image_url: artist.image_url || '' },
+                        { source: source }
+                    );
+                }, 200);
+            }
+        });
+
         overlay.querySelector('.watchlist-detail-settings-action').addEventListener('click', () => {
             // Remove overlay immediately so it doesn't block the config modal
             const detailOverlay = document.querySelector('.watchlist-artist-detail-overlay');
diff --git a/webui/static/style.css b/webui/static/style.css
index e959805f..250b5577 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -13452,13 +13452,23 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     transform: scale(0.98);
 }
 
-.watchlist-detail-settings-btn {
-    background: rgba(var(--accent-rgb), 0.15);
+.watchlist-detail-discog-btn {
+    background: rgba(var(--accent-rgb), 0.2);
     color: rgb(var(--accent-rgb));
+    font-weight: 600;
+}
+
+.watchlist-detail-discog-btn:hover {
+    background: rgba(var(--accent-rgb), 0.35);
+}
+
+.watchlist-detail-settings-btn {
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .watchlist-detail-settings-btn:hover {
-    background: rgba(var(--accent-rgb), 0.25);
+    background: rgba(255, 255, 255, 0.12);
 }
 
 .watchlist-detail-remove-btn {