refactor(webui): link stats artist chips

- replace manual artist-detail navigation with declarative anchors
- reuse the shared artist-detail helper for bubble and ranked views
- keep the no-id bubble fallback non-interactive

webui/src/routes/stats/-route.test.tsx

@@ -117,14 +117,29 @@ describe('stats route', () => {
     await waitFor(() => expect(history.location.search).toContain('range=30d'));
   });
 
-  it('hands artist detail navigation directly to the shell bridge', async () => {
+  it('links artist names to the artist-detail route', async () => {
-    renderStatsRoute();
+    const { history } = renderStatsRoute();
 
-    fireEvent.click(await screen.findByRole('button', { name: 'Artist A' }));
+    const bubbleLink = await screen.findByRole('link', {
+      name: 'Open artist detail for Artist A',
+    });
+    expect(bubbleLink).toHaveAttribute('href', '/artist-detail/library/7');
 
-    expect(window.SoulSyncWebShellBridge?.navigateToArtistDetail).toHaveBeenCalledWith(
+    const rankedLink = screen.getByRole('link', { name: 'Artist A' });
-      7,
+    expect(rankedLink).toHaveAttribute('href', '/artist-detail/library/7');
-      'Artist A',
+
+    fireEvent.click(bubbleLink);
+
+    await waitFor(() => expect(history.location.pathname).toBe('/artist-detail/library/7'));
+    await waitFor(() =>
+      expect(window.SoulSyncWebShellBridge?.navigateToArtistDetail).toHaveBeenCalledWith(
+        '7',
+        '',
+        null,
+        {
+          skipRouteChange: true,
+        },
+      ),
     );
   });
 

webui/src/routes/stats/-ui/stats-page.module.css

@@ -364,10 +364,13 @@
   border: none;
   padding: 0;
   cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  font: inherit;
   transition: transform 0.2s ease;
 }
 
-.statsArtistBubble:disabled {
+.statsArtistBubbleDisabled {
   cursor: default;
 }
 
@@ -375,6 +378,10 @@
   transform: translateY(-3px);
 }
 
+.statsArtistBubbleDisabled:hover {
+  transform: none;
+}
+
 .statsBubbleImage {
   border-radius: 50%;
   background-size: cover;

webui/src/routes/stats/-ui/stats-page.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
-import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode, useEffect, useRef, useState } from 'react';
 import {
   Bar,
   BarChart,
@@ -72,6 +72,8 @@ const STATS_CHART_CURSOR = {
   fill: 'rgba(var(--accent-rgb), 0.12)',
 } as const;
 
+const ARTIST_DETAIL_SOURCE = 'library' as const;
+
 export function StatsPage() {
   const bridge = useReactPageShell('stats');
 
@@ -136,10 +138,6 @@ export function StatsPage() {
     });
   };
 
-  const openArtistDetail = (artistId: string | number, artistName: string) => {
-    bridge.navigateToArtistDetail(artistId, artistName);
-  };
-
   return (
     <div id="stats-container" className={styles.statsContainer} data-testid="stats-page">
       <header className={styles.statsHeader}>
@@ -229,25 +227,15 @@ export function StatsPage() {
             </div>
             <div className={styles.statsRightCol}>
               <StatsSectionCard title="Top Artists">
-                <TopArtistsVisual
+                <TopArtistsVisual artists={cachedStats?.top_artists ?? []} />
-                  artists={cachedStats?.top_artists ?? []}
+                <StatsRankedArtists artists={cachedStats?.top_artists ?? []} />
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
-                <StatsRankedArtists
-                  artists={cachedStats?.top_artists ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
               </StatsSectionCard>
               <StatsSectionCard title="Top Albums">
-                <StatsRankedAlbums
+                <StatsRankedAlbums albums={cachedStats?.top_albums ?? []} />
-                  albums={cachedStats?.top_albums ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
-                />
               </StatsSectionCard>
               <StatsSectionCard title="Top Tracks">
                 <StatsRankedTracks
                   tracks={cachedStats?.top_tracks ?? []}
-                  onArtistSelect={(artistId, artistName) => openArtistDetail(artistId, artistName)}
                   onPlay={(track) => playStatsTrack(bridge, track)}
                 />
               </StatsSectionCard>
@@ -405,13 +393,7 @@ function StatsGenreLegend({
   );
 }
 
-function TopArtistsVisual({
+function TopArtistsVisual({ artists }: { artists: StatsArtistRow[] }) {
-  artists,
-  onArtistSelect,
-}: {
-  artists: StatsArtistRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
-}) {
   const topArtists = getTopArtistBubbles(artists);
   if (topArtists.length === 0) return null;
 
@@ -420,18 +402,8 @@ function TopArtistsVisual({
       <div className={styles.statsArtistBubbles}>
         {topArtists.map(({ artist, percent, size }) => {
           const isClickable = artist.id !== null && artist.id !== undefined;
-          return (
+          const bubbleContent = (
-            <button
+            <>
-              key={`${artist.name}-${artist.id ?? 'unknown'}`}
-              type="button"
-              className={styles.statsArtistBubble}
-              onClick={() => {
-                if (isClickable) {
-                  onArtistSelect(artist.id as string | number, artist.name);
-                }
-              }}
-              disabled={!isClickable}
-            >
               <div
                 className={styles.statsBubbleImage}
                 style={{
@@ -451,7 +423,25 @@ function TopArtistsVisual({
               <div className={styles.statsBubbleCount}>
                 {formatCompactNumber(artist.play_count)}
               </div>
-            </button>
+            </>
+          );
+          return isClickable ? (
+            <ArtistDetailLink
+              key={`${artist.name}-${artist.id ?? 'unknown'}`}
+              artistId={artist.id}
+              className={styles.statsArtistBubble}
+              aria-label={`Open artist detail for ${artist.name}`}
+            >
+              {bubbleContent}
+            </ArtistDetailLink>
+          ) : (
+            <div
+              key={`${artist.name}-${artist.id ?? 'unknown'}`}
+              className={`${styles.statsArtistBubble} ${styles.statsArtistBubbleDisabled}`}
+              aria-disabled="true"
+            >
+              {bubbleContent}
+            </div>
           );
         })}
       </div>
@@ -459,13 +449,30 @@ function TopArtistsVisual({
   );
 }
 
-function StatsRankedArtists({
+function ArtistDetailLink({
-  artists,
+  artistId,
-  onArtistSelect,
+  children,
+  ...linkProps
 }: {
-  artists: StatsArtistRow[];
+  artistId: string | number | null | undefined;
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
+  children: ReactNode;
-}) {
+} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'href'>) {
+  if (artistId == null) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Link
+      to="/artist-detail/$source/$id"
+      params={{ source: ARTIST_DETAIL_SOURCE, id: String(artistId) }}
+      {...linkProps}
+    >
+      {children}
+    </Link>
+  );
+}
+
+function StatsRankedArtists({ artists }: { artists: StatsArtistRow[] }) {
   return (
     <div id="stats-top-artists" className={styles.statsRankedList}>
       {artists.length === 0 ? <EmptyListState message="No data yet" /> : null}
@@ -479,17 +486,9 @@ function StatsRankedArtists({
           )}
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>
-              {artist.id ? (
+              <ArtistDetailLink artistId={artist.id} className={styles.statsArtistLink}>
-                <button
+                {artist.name}
-                  type="button"
+              </ArtistDetailLink>
-                  className={styles.statsArtistLink}
-                  onClick={() => onArtistSelect(artist.id as string | number, artist.name)}
-                >
-                  {artist.name}
-                </button>
-              ) : (
-                artist.name
-              )}
               {artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_') ? (
                 <img src="/static/trans2.png" className={styles.statsSoulIdBadge} alt="SoulID" />
               ) : null}
@@ -509,13 +508,7 @@ function StatsRankedArtists({
   );
 }
 
-function StatsRankedAlbums({
+function StatsRankedAlbums({ albums }: { albums: StatsAlbumRow[] }) {
-  albums,
-  onArtistSelect,
-}: {
-  albums: StatsAlbumRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
-}) {
   return (
     <div id="stats-top-albums" className={styles.statsRankedList}>
       {albums.length === 0 ? <EmptyListState message="No data yet" /> : null}
@@ -530,19 +523,9 @@ function StatsRankedAlbums({
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>{album.name}</div>
             <div className={styles.statsRankedMeta}>
-              {album.artist_id ? (
+              <ArtistDetailLink artistId={album.artist_id} className={styles.statsArtistLink}>
-                <button
+                {album.artist || ''}
-                  type="button"
+              </ArtistDetailLink>
-                  className={styles.statsArtistLink}
-                  onClick={() =>
-                    onArtistSelect(album.artist_id as string | number, album.artist || '')
-                  }
-                >
-                  {album.artist || ''}
-                </button>
-              ) : (
-                album.artist || ''
-              )}
             </div>
           </div>
           <span className={styles.statsRankedCount}>
@@ -556,11 +539,9 @@ function StatsRankedAlbums({
 
 function StatsRankedTracks({
   tracks,
-  onArtistSelect,
   onPlay,
 }: {
   tracks: StatsTrackRow[];
-  onArtistSelect: (artistId: string | number, artistName: string) => void;
   onPlay: (track: { title: string; artist: string; album: string }) => Promise<void>;
 }) {
   return (
@@ -577,19 +558,9 @@ function StatsRankedTracks({
           <div className={styles.statsRankedInfo}>
             <div className={styles.statsRankedName}>{track.name}</div>
             <div className={styles.statsRankedMeta}>
-              {track.artist_id ? (
+              <ArtistDetailLink artistId={track.artist_id} className={styles.statsArtistLink}>
-                <button
+                {track.artist || ''}
-                  type="button"
+              </ArtistDetailLink>
-                  className={styles.statsArtistLink}
-                  onClick={() =>
-                    onArtistSelect(track.artist_id as string | number, track.artist || '')
-                  }
-                >
-                  {track.artist || ''}
-                </button>
-              ) : (
-                track.artist || ''
-              )}
               {track.album ? ` · ${track.album}` : ''}
             </div>
           </div>