From 5e39f1ee09375667358fee50f6ebef4954bce034 Mon Sep 17 00:00:00 2001 From: Antti Kettunen Date: Tue, 19 May 2026 09:26:10 +0300 Subject: [PATCH] refactor(webui): centralize artist-detail handoff - add a canonical TanStack route for artist-detail and keep the legacy page as the renderer target - expose page-level artist-detail navigation on the shell bridge for legacy callers - remove artist-detail-specific routing, origin stack, and back-label logic from the shared shell helpers --- webui/index.html | 2 +- webui/src/platform/shell/globals.d.ts | 9 +- .../src/routes/artist-detail/$source/$id.tsx | 1 - .../src/routes/artist-detail/-route.test.tsx | 2 - webui/static/api-monitor.js | 2 +- webui/static/discover.js | 13 +- webui/static/downloads.js | 5 +- webui/static/library.js | 123 ++++-------------- webui/static/media-player.js | 3 +- webui/static/search.js | 4 +- webui/static/shared-helpers.js | 2 +- webui/static/shell-bridge.js | 1 + webui/static/stats-automations.js | 8 +- 13 files changed, 52 insertions(+), 123 deletions(-) diff --git a/webui/index.html b/webui/index.html index c0c86dd8..5ddbcb2a 100644 --- a/webui/index.html +++ b/webui/index.html @@ -2418,7 +2418,7 @@
- @@ -6595,7 +6595,7 @@ function _artMapSetupInteraction(canvas) {
ⓘ Artist Info
-
+
💿 View Discography
@@ -7275,7 +7275,7 @@ async function openGenreDeepDive(genre) { // Always open on Artists page with discography โ€” pass source for correct routing const imgUrl = _esc(a.image_url || ''); const artSource = _esc(a.source || ''); - const clickAction = `onclick="document.getElementById('genre-deep-dive-modal').remove();navigateToArtistDetail('${_esc(a.entity_id)}','${_esc(a.name)}','${artSource}' || null)"`; + const clickAction = `onclick="document.getElementById('genre-deep-dive-modal').remove();navigateToArtistDetailPage('${_esc(a.entity_id)}','${_esc(a.name)}','${artSource}' || null)"`; const srcClass = (a.source || '').toLowerCase(); return `
@@ -8768,4 +8768,3 @@ if (document.readyState === 'loading') { } // ============================================================================ - diff --git a/webui/static/downloads.js b/webui/static/downloads.js index 7374753d..5e5cad38 100644 --- a/webui/static/downloads.js +++ b/webui/static/downloads.js @@ -672,7 +672,7 @@ function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, play showToast(`Artist details are not available for ${artistName}`, 'warning'); return; } - navigateToArtistDetail(resolvedArtistId, artistName, resolvedSource); + navigateToArtistDetailPage(resolvedArtistId, artistName, resolvedSource); } async function closeDownloadMissingModal(playlistId) { @@ -5782,7 +5782,7 @@ function _gsClickArtist(id, name, isLibrary) { _gsDeactivate(); const activeSource = _gsController && _gsController.state.activeSource; const source = isLibrary ? null : (activeSource || null); - navigateToArtistDetail(id, name, source); + navigateToArtistDetailPage(id, name, source); } async function _gsClickAlbum(albumId, albumName, artistName, imageUrl, source) { @@ -6400,4 +6400,3 @@ const additionalStyles = ` document.head.insertAdjacentHTML('beforeend', additionalStyles); // ============================================================================ - diff --git a/webui/static/library.js b/webui/static/library.js index dfdc5fac..f96a2bee 100644 --- a/webui/static/library.js +++ b/webui/static/library.js @@ -235,7 +235,7 @@ function displayLibraryArtists(artists) { } const card = e.target.closest('.library-artist-card'); if (card) { - navigateToArtistDetail(card.dataset.artistId, card.dataset.artistName); + navigateToArtistDetailPage(card.dataset.artistId, card.dataset.artistName); } }; } @@ -688,11 +688,6 @@ let artistDetailPageState = { currentArtistId: null, currentArtistName: null, currentArtistSource: null, - // Stack of origins captured by navigateToArtistDetail for the back button. - // Each entry is either {type:'page', pageId} or {type:'artist', id, name, source} - // so chained navigation (Search โ†’ A โ†’ similar B โ†’ similar C) walks back one - // step at a time instead of jumping straight to Search. - originStack: [], enhancedView: false, enhancedData: null, expandedAlbums: new Set(), @@ -710,7 +705,6 @@ function clearArtistDetailPageState() { artistDetailPageState.currentArtistId = null; artistDetailPageState.currentArtistName = null; artistDetailPageState.currentArtistSource = null; - artistDetailPageState.originStack = []; } if (typeof window !== 'undefined') { @@ -786,21 +780,26 @@ if (typeof window !== 'undefined') { } -// Friendly labels for the dynamic "โ† Back to X" button on the artist-detail page. -// Page id (the value of currentPage) -> button label. -const _ARTIST_DETAIL_BACK_LABELS = { - library: 'Back to Library', - search: 'Back to Search', - discover: 'Back to Discover', - watchlist: 'Back to Watchlist', - wishlist: 'Back to Wishlist', - stats: 'Back to Stats', - 'playlist-explorer': 'Back to Explorer', - automations: 'Back to Automations', - dashboard: 'Back to Dashboard', - sync: 'Back to Sync', - 'active-downloads': 'Back to Downloads', -}; +// Public navigation entrypoint for artist detail. Callers should use this so +// artist-detail navigations stay URL-driven, while the renderer handoff below +// remains the legacy implementation detail. +function navigateToArtistDetailPage(artistId, artistName, sourceOverride = null, options = {}) { + const normalizedSource = sourceOverride || null; + + if (!artistId) return false; + if (currentPage === 'artist-detail' && + String(artistId) === String(artistDetailPageState.currentArtistId) && + String(normalizedSource || '') === String(artistDetailPageState.currentArtistSource || '')) { + return true; + } + + return navigateToPage('artist-detail', { + artistId, + artistSource: normalizedSource, + forceReload: true, + replace: options.replace === true, + }); +} function navigateToArtistDetail(artistId, artistName, sourceOverride = null, options = {}) { const normalizedSource = sourceOverride || null; @@ -817,49 +816,11 @@ function navigateToArtistDetail(artistId, artistName, sourceOverride = null, opt artistSource: normalizedSource, skipRouteChange: options.skipRouteChange === true }); - _updateArtistDetailBackButtonLabel(); } return; } console.log(`๐ŸŽต Navigating to artist detail: ${artistName} (ID: ${artistId}${sourceOverride ? `, source: ${sourceOverride}` : ''})`); - // Capture the current location on the origin stack BEFORE navigateToPage - // flips currentPage. The back button walks this stack one step at a time, - // so a chain like Search โ†’ A โ†’ similar B โ†’ similar C steps back through - // C โ†’ B โ†’ A โ†’ Search instead of jumping straight home. `skipOriginPush` - // lets the back button re-enter a prior artist without re-pushing. - if (!options.skipOriginPush) { - // Fresh entry (from a non-artist page) starts a new chain; any stale - // entries from a prior artist-detail visit are dropped. - if (currentPage !== 'artist-detail') { - artistDetailPageState.originStack = []; - } - - let entry; - if (currentPage === 'artist-detail' && artistDetailPageState.currentArtistId) { - entry = { - type: 'artist', - id: artistDetailPageState.currentArtistId, - name: artistDetailPageState.currentArtistName, - source: artistDetailPageState.currentArtistSource, - }; - } else { - const pageId = (typeof currentPage === 'string' && currentPage && currentPage !== 'artist-detail') - ? currentPage : 'library'; - entry = { type: 'page', pageId }; - } - - // Avoid pushing a duplicate top entry on repeated clicks of the same target. - const top = artistDetailPageState.originStack[artistDetailPageState.originStack.length - 1]; - const isDuplicate = top && top.type === entry.type && ( - (entry.type === 'page' && top.pageId === entry.pageId) || - (entry.type === 'artist' && String(top.id) === String(entry.id)) - ); - if (!isDuplicate) { - artistDetailPageState.originStack.push(entry); - } - } - // Abort any in-progress completion stream if (artistDetailPageState.completionController) { artistDetailPageState.completionController.abort(); @@ -909,9 +870,6 @@ function navigateToArtistDetail(artistId, artistName, sourceOverride = null, opt skipRouteChange: options.skipRouteChange === true }); - // Update back-button label to reflect where the next pop will land. - _updateArtistDetailBackButtonLabel(); - // Initialize if needed and load data if (!artistDetailPageState.isInitialized) { initializeArtistDetailPage(); @@ -921,27 +879,11 @@ function navigateToArtistDetail(artistId, artistName, sourceOverride = null, opt loadArtistDetailData(artistId, artistName); } -function _updateArtistDetailBackButtonLabel() { - const backBtnLabel = document.querySelector('#artist-detail-back-btn span'); - if (!backBtnLabel) return; - const stack = artistDetailPageState.originStack || []; - const top = stack[stack.length - 1]; - if (!top) { - backBtnLabel.textContent = `โ† ${_ARTIST_DETAIL_BACK_LABELS.library}`; - } else if (top.type === 'artist') { - backBtnLabel.textContent = `โ† Back to ${top.name}`; - } else { - const friendly = _ARTIST_DETAIL_BACK_LABELS[top.pageId] || _ARTIST_DETAIL_BACK_LABELS.library; - backBtnLabel.textContent = `โ† ${friendly}`; - } -} - function initializeArtistDetailPage() { console.log("๐Ÿ”ง Initializing Artist Detail page..."); - // Initialize back button โ€” pops the origin stack one step at a time so a - // chain like Search โ†’ A โ†’ B โ†’ C walks back through C โ†’ B โ†’ A โ†’ Search - // instead of jumping straight to the original entry page. + // Initialize back button โ€” use browser history when possible, with a + // simple library fallback if the user lands here without in-app history. const backBtn = document.getElementById("artist-detail-back-btn"); if (backBtn) { backBtn.addEventListener("click", () => { @@ -951,27 +893,12 @@ function initializeArtistDetailPage() { artistDetailPageState.completionController = null; } - const stack = artistDetailPageState.originStack || []; - if (stack.length > 0) { - const target = stack.pop(); - if (target.type === 'artist') { - // Re-enter a prior artist in the chain without re-pushing, - // so the stack keeps shrinking as the user steps back. - navigateToArtistDetail(target.id, target.name, target.source, { skipOriginPush: true }); - return; - } - // target.type === 'page' โ€” fully exit the artist-detail chain - artistDetailPageState.currentArtistId = null; - artistDetailPageState.currentArtistName = null; - artistDetailPageState.originStack = []; - navigateToPage(target.pageId); + if (window.history.length > 1) { + window.history.back(); return; } // No history โ€” default to library - artistDetailPageState.currentArtistId = null; - artistDetailPageState.currentArtistName = null; - artistDetailPageState.originStack = []; navigateToPage('library'); }); } diff --git a/webui/static/media-player.js b/webui/static/media-player.js index 85f25796..a6889aa4 100644 --- a/webui/static/media-player.js +++ b/webui/static/media-player.js @@ -1237,7 +1237,7 @@ function initExpandedPlayer() { gotoArtistBtn.addEventListener('click', () => { if (currentTrack && currentTrack.artist_id) { closeNowPlayingModal(); - navigateToArtistDetail(currentTrack.artist_id, currentTrack.artist || ''); + navigateToArtistDetailPage(currentTrack.artist_id, currentTrack.artist || ''); } }); } @@ -2396,4 +2396,3 @@ function updateMediaSessionPlaybackState() { } // =============================== - diff --git a/webui/static/search.js b/webui/static/search.js index 682d48f0..8cedc3c1 100644 --- a/webui/static/search.js +++ b/webui/static/search.js @@ -320,7 +320,7 @@ function initializeSearchModeToggle() { onClick: () => { console.log(`๐ŸŽต Opening library artist detail: ${artist.name} (ID: ${artist.id})`); hideDropdown(); - navigateToArtistDetail(artist.id, artist.name); + navigateToArtistDetailPage(artist.id, artist.name); } }) ); @@ -341,7 +341,7 @@ function initializeSearchModeToggle() { const sourceOverride = searchController.state.activeSource; console.log(`๐ŸŽต Opening artist detail: ${artist.name} (ID: ${artist.id}, source: ${sourceOverride})`); hideDropdown(); - navigateToArtistDetail(artist.id, artist.name, sourceOverride || null); + navigateToArtistDetailPage(artist.id, artist.name, sourceOverride || null); } }) ); diff --git a/webui/static/shared-helpers.js b/webui/static/shared-helpers.js index 7a509f6c..85957c65 100644 --- a/webui/static/shared-helpers.js +++ b/webui/static/shared-helpers.js @@ -3862,7 +3862,7 @@ function createSimilarArtistBubble(artist) { // library and source artists thanks to the source-aware backend endpoint. bubble.addEventListener('click', () => { console.log(`๐ŸŽต Clicked similar artist: ${artist.name} (ID: ${artist.id})`); - navigateToArtistDetail(artist.id, artist.name, artist.source || null); + navigateToArtistDetailPage(artist.id, artist.name, artist.source || null); }); return bubble; diff --git a/webui/static/shell-bridge.js b/webui/static/shell-bridge.js index 64c73f6e..9eb4b04e 100644 --- a/webui/static/shell-bridge.js +++ b/webui/static/shell-bridge.js @@ -165,6 +165,7 @@ window.SoulSyncWebShellBridge = { activateLegacyPath(pathname) { activateLegacyPath(pathname); }, + navigateToArtistDetailPage, navigateToArtistDetail, showReactHost(pageId) { showReactHost(pageId); diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js index 265d71eb..46304405 100644 --- a/webui/static/stats-automations.js +++ b/webui/static/stats-automations.js @@ -162,7 +162,7 @@ async function loadStatsData() { ${i + 1} ${item.image_url ? `` : ''}
-
${item.id ? `${_esc(item.name)}` : _esc(item.name)}${item.soul_id && !String(item.soul_id).startsWith('soul_unnamed_') ? ' ' : ''}
+
${item.id ? `${_esc(item.name)}` : _esc(item.name)}${item.soul_id && !String(item.soul_id).startsWith('soul_unnamed_') ? ' ' : ''}
${item.global_listeners ? _fmt(item.global_listeners) + ' global listeners' : ''}
${_fmt(item.play_count)} plays @@ -176,7 +176,7 @@ async function loadStatsData() { ${item.image_url ? `` : ''}
${_esc(item.name)}
-
${item.artist_id ? `${_esc(item.artist || '')}` : _esc(item.artist || '')}
+
${item.artist_id ? `${_esc(item.artist || '')}` : _esc(item.artist || '')}
${_fmt(item.play_count)} plays
@@ -189,7 +189,7 @@ async function loadStatsData() { ${item.image_url ? `` : ''}
${_esc(item.name)}
-
${item.artist_id ? `${_esc(item.artist || '')}` : _esc(item.artist || '')}${item.album ? ' ยท ' + _esc(item.album) : ''}
+
${item.artist_id ? `${_esc(item.artist || '')}` : _esc(item.artist || '')}${item.album ? ' ยท ' + _esc(item.album) : ''}
${_fmt(item.play_count)} plays @@ -231,7 +231,7 @@ function _renderTopArtistsVisual(artists) { ${top5.map((a, i) => { const pct = Math.round((a.play_count / maxPlays) * 100); const size = 44 + (4 - i) * 6; // Largest first: 68, 62, 56, 50, 44 - return `
+ return `
${!a.image_url ? `${(a.name || '?')[0]}` : ''}