From 5219780c01f609af9aee87dee124aafad12dc8db Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Wed, 22 Apr 2026 16:43:36 -0700
Subject: [PATCH] Page-aware click on similar-artist bubbles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bubble click handler hardcoded selectArtistForDetail (the inline
Artists page navigator). On the standalone /artist-detail page it
fired but couldn't actually navigate anywhere — the page just
re-rendered the similar-artists section for the same artist instead
of moving to the clicked artist.

Now: detect whether the standalone page is active. If yes,
navigateToArtistDetail(id, name, source). Otherwise fall back to
selectArtistForDetail for the inline page (unchanged behaviour
there). Both surfaces work correctly without the caller having to
know which page they're on.
---
 webui/static/shared-helpers.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/webui/static/shared-helpers.js b/webui/static/shared-helpers.js
index d2da2042..598c02f7 100644
--- a/webui/static/shared-helpers.js
+++ b/webui/static/shared-helpers.js
@@ -3110,14 +3110,20 @@ function createSimilarArtistBubble(artist) {
         bubble.appendChild(genres);
     }
 
-    // Add click handler to navigate to artist detail page
+    // Add click handler — page-aware destination. From the standalone artist-
+    // detail page, navigate to the standalone route. From the inline Artists
+    // page, swap the inline view via selectArtistForDetail.
     bubble.addEventListener('click', () => {
         console.log(`🎵 Clicked similar artist: ${artist.name} (ID: ${artist.id})`);
-        // Navigate to this artist's detail page (same as clicking from search results)
-        selectArtistForDetail(
-            artist,
-            artist.source ? { source: artist.source, plugin: artist.plugin } : {}
-        );
+        const onStandalone = !!document.querySelector('#artist-detail-page.active');
+        if (onStandalone && typeof navigateToArtistDetail === 'function') {
+            navigateToArtistDetail(artist.id, artist.name, artist.source || null);
+        } else if (typeof selectArtistForDetail === 'function') {
+            selectArtistForDetail(
+                artist,
+                artist.source ? { source: artist.source, plugin: artist.plugin } : {}
+            );
+        }
     });
 
     return bubble;