From f10beeea0a387d07b9ed97f836a3d3a4a3305bc1 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 16 Mar 2026 13:37:53 -0700
Subject: [PATCH] Add source badges (Spotify/iTunes/Deezer) to watchlist artist
 cards

Shows which metadata sources each artist is matched to with small
colored badges on the card. Also adds deezer_artist_id to the
watchlist API response and fixes the data-artist-id fallback chain
to include Deezer-only artists.
---
 web_server.py          |  1 +
 webui/static/script.js | 12 +++++++++---
 webui/static/style.css | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/web_server.py b/web_server.py
index d1210e43..ef51af77 100644
--- a/web_server.py
+++ b/web_server.py
@@ -30128,6 +30128,7 @@ def get_watchlist_artists():
                 "updated_at": artist.updated_at.isoformat() if artist.updated_at else None,
                 "image_url": artist.image_url,  # Cached during watchlist scans
                 "itunes_artist_id": artist.itunes_artist_id,  # For iTunes-only artists
+                "deezer_artist_id": getattr(artist, 'deezer_artist_id', None),
                 "include_albums": artist.include_albums,
                 "include_eps": artist.include_eps,
                 "include_singles": artist.include_singles,
diff --git a/webui/static/script.js b/webui/static/script.js
index 9cb5a672..6b07fc79 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -34267,21 +34267,26 @@ async function showWatchlistModal() {
                             if (artist.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
                             if (artist.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
                             if (artist.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
+                            const sourceBadges = [];
+                            if (artist.spotify_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-spotify">Spotify</span>');
+                            if (artist.itunes_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-itunes">iTunes</span>');
+                            if (artist.deezer_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-deezer">Deezer</span>');
+                            const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id;
                             return `
                             <div class="watchlist-artist-card"
                                  data-artist-name="${artist.artist_name.toLowerCase().replace(/"/g, '&quot;')}"
-                                 data-artist-id="${artist.spotify_artist_id || artist.itunes_artist_id}">
+                                 data-artist-id="${artistPrimaryId}">
 
                                 <label class="watchlist-card-checkbox" onclick="event.stopPropagation();">
                                     <input type="checkbox" class="watchlist-select-cb"
-                                           data-artist-id="${artist.spotify_artist_id || artist.itunes_artist_id}"
+                                           data-artist-id="${artistPrimaryId}"
                                            data-artist-name="${escapeHtml(artist.artist_name)}"
                                            onchange="updateWatchlistBatchBar()">
                                     <span class="watchlist-checkbox-custom"></span>
                                 </label>
 
                                 <button class="watchlist-card-gear"
-                                        data-artist-id="${artist.spotify_artist_id || artist.itunes_artist_id}"
+                                        data-artist-id="${artistPrimaryId}"
                                         data-artist-name="${escapeHtml(artist.artist_name)}"
                                         onclick="event.stopPropagation();"
                                         title="Artist settings">
@@ -34303,6 +34308,7 @@ async function showWatchlistModal() {
                                     <span class="watchlist-card-name">${escapeHtml(artist.artist_name)}</span>
                                     <span class="watchlist-card-meta">${formatRelativeScanTime(artist.last_scan_timestamp)}</span>
                                 </div>
+                                ${sourceBadges.length > 0 ? `<div class="watchlist-card-sources">${sourceBadges.join('')}</div>` : ''}
                                 ${pills.length > 0 ? `<div class="watchlist-card-pills">${pills.join('')}</div>` : ''}
                             </div>
                         `}).join('')}
diff --git a/webui/static/style.css b/webui/static/style.css
index d722b963..903a761e 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -12063,6 +12063,40 @@ body {
 }
 
 /* Card release-type pills */
+.watchlist-card-sources {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 2px 16px 4px;
+}
+
+.watchlist-source-badge {
+    font-size: 8px;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 3px;
+    letter-spacing: 0.4px;
+    line-height: 1.3;
+}
+
+.watchlist-source-spotify {
+    background: rgba(30, 215, 96, 0.15);
+    color: #1ed760;
+}
+
+.watchlist-source-itunes {
+    background: rgba(252, 60, 68, 0.15);
+    color: #fc3c44;
+}
+
+.watchlist-source-deezer {
+    background: rgba(162, 101, 230, 0.15);
+    color: #a265e6;
+}
+
 .watchlist-card-pills {
     position: relative;
     z-index: 2;