From 82a621ff05bdd8ee4053f7fce5ff79d6c35a8513 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 13 Apr 2026 10:10:41 -0700
Subject: [PATCH] Use anchors for artist badges and update styles

Replace div badges with data-url/onclick handlers by semantic <a> elements (with href, target="_blank" and rel="noopener noreferrer") for clickable artist badges, keeping non-clickable badges as divs. Update CSS to target .artist-hero-badge and unify hover/image rules instead of relying on data-url attribute, preserving visual behavior and removing pointer cursor for non-clickable divs. Also remove rendering of the server_source badge from the artist meta panel. These changes improve accessibility, security, and maintainability of badge markup and styling.
---
 webui/static/script.js | 14 ++++----------
 webui/static/style.css | 10 ++++++----
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 33294adb..873bcb8c 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -36067,11 +36067,11 @@ function updateArtistDetailHeader(artist) {
     const badgesEl = document.getElementById('artists-hero-badges');
     if (badgesEl) {
         const _hb = (logo, fallback, title, url) => {
-            const attr = url ? `data-url="${_esc(url)}" onclick="window.open(this.dataset.url,'_blank')"` : '';
             const inner = logo
                 ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
                 : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
-            return `<div class="artists-hero-badge" title="${title}" ${attr}>${inner}</div>`;
+            if (url) return `<a class="artists-hero-badge" title="${title}" href="${_esc(url)}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
+            return `<div class="artists-hero-badge" title="${title}">${inner}</div>`;
         };
         const badges = [];
         if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`));
@@ -42906,11 +42906,11 @@ function updateArtistDetailPageHeaderWithData(artist) {
     const badgesContainer = document.getElementById("artist-hero-badges");
     if (badgesContainer) {
         const _hb = (logo, fallback, title, url) => {
-            const attr = url ? `data-url="${url}" onclick="window.open(this.dataset.url,'_blank')"` : '';
             const inner = logo
                 ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
                 : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
-            return `<div class="artist-hero-badge" title="${title}" ${attr}>${inner}</div>`;
+            if (url) return `<a class="artist-hero-badge" title="${title}" href="${url}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
+            return `<div class="artist-hero-badge" title="${title}">${inner}</div>`;
         };
 
         const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
@@ -44595,12 +44595,6 @@ function renderArtistMetaPanel(artist) {
             idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label));
         }
     });
-    if (artist.server_source) {
-        const srcBadge = document.createElement('span');
-        srcBadge.className = 'enhanced-id-badge server';
-        srcBadge.textContent = artist.server_source;
-        idBadges.appendChild(srcBadge);
-    }
     headerInfo.appendChild(idBadges);
     headerLeft.appendChild(headerInfo);
     header.appendChild(headerLeft);
diff --git a/webui/static/style.css b/webui/static/style.css
index 242457a1..72921e60 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -23211,19 +23211,21 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 .artist-hero-badge[title="Qobuz"] img {
     filter: invert(1);
 }
-.artist-hero-badge[data-url] {
+a.artist-hero-badge {
     cursor: pointer;
+    text-decoration: none;
+    color: inherit;
 }
-.artist-hero-badge[data-url]:hover {
+a.artist-hero-badge:hover {
     background: rgba(255, 255, 255, 0.12);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
-.artist-hero-badge[data-url]:hover img {
+a.artist-hero-badge:hover img {
     opacity: 1;
 }
-.artist-hero-badge:not([data-url]) {
+div.artist-hero-badge {
     cursor: default;
 }