From 1e9abb588c549ef766922a8f2c7f0b9e1061f7b9 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Thu, 26 Mar 2026 08:22:52 -0700
Subject: [PATCH] Add clickable artist name link in download modal hero
 subtitle

The artist name in album download modals is now a clickable link
that navigates to the Artists page with that artist's discography.
Uses the correct source-specific artist ID from the album data.
Works on enhanced search, artists page, and discover page modals.
Excluded from playlist, wishlist, and default contexts where the
subtitle isn't an artist name.
---
 webui/static/script.js | 27 +++++++++++++++++++++++----
 webui/static/style.css | 12 ++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index dbe909ce..d1dc9288 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -8261,10 +8261,13 @@ function initializeSearchModeToggle() {
             // Format playlist name
             const playlistName = `[${album.artist}] ${albumData.name}`;
 
-            // Create minimal artist object for the modal
+            // Create artist object for the modal — extract ID from album data
+            const firstArtist = (albumData.artists || [])[0] || {};
             const artistObject = {
-                id: null, // No artist ID from enhanced search
-                name: album.artist
+                id: firstArtist.id || album.id?.split?.('_')?.[0] || '',
+                name: firstArtist.name || album.artist,
+                image_url: firstArtist.image_url || firstArtist.images?.[0]?.url || '',
+                source: _activeSearchSource || '',
             };
 
             // Prepare full album object for modal
@@ -10710,7 +10713,7 @@ function generateDownloadModalHeroSection(context) {
                     </div>
                     <div class="download-missing-modal-hero-metadata">
                         <h1 class="download-missing-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
-                        <div class="download-missing-modal-hero-subtitle">by ${escapeHtml(artist.name || 'Unknown Artist')}</div>
+                        <div class="download-missing-modal-hero-subtitle">by <a href="#" class="hero-artist-link" onclick="event.preventDefault();_navigateToArtistFromModal('${escapeHtml(artist.id || '')}','${escapeForInlineJs(artist.name || '')}','${escapeHtml(artist.image_url || '')}','${escapeHtml(artist.source || '')}','${escapeHtml(context.playlistId || '')}')">${escapeHtml(artist.name || 'Unknown Artist')}</a></div>
                         <div class="download-missing-modal-hero-details">
                             <span class="download-missing-modal-hero-detail">${album.album_type || 'Album'}</span>
                             <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
@@ -11445,6 +11448,22 @@ async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistNam
     hideLoadingOverlay();
 }
 
+function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
+    if (!artistName) return;
+    // Close the download modal
+    if (playlistId) closeDownloadMissingModal(playlistId);
+    // Navigate to Artists page and load discography
+    navigateToPage('artists');
+    setTimeout(() => {
+        // If we have an artist ID, use it directly
+        // If not, search by name — selectArtistForDetail handles both
+        selectArtistForDetail(
+            { id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
+            source ? { source: source } : undefined
+        );
+    }, 200);
+}
+
 async function closeDownloadMissingModal(playlistId) {
     const process = activeDownloadProcesses[playlistId];
     if (!process) {
diff --git a/webui/static/style.css b/webui/static/style.css
index 250b5577..75ca03a6 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -15339,6 +15339,18 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     font-weight: 500;
     margin: 0;
     opacity: 0.9;
+}
+
+.hero-artist-link {
+    color: rgb(var(--accent-light-rgb));
+    text-decoration: none;
+    transition: color 0.15s ease, opacity 0.15s ease;
+    cursor: pointer;
+}
+
+.hero-artist-link:hover {
+    color: rgb(var(--accent-rgb));
+    text-decoration: underline;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;