fix(artist-info): id-gate fetchers, share ArtistCard, square hero (#739)

* fix(artist-info): id-gate fetcher tuples, reuse ArtistCard on ArtistDetail

The cache-mismatch bug PR #732 fixed in `NowPlayingInfo.tsx` had the same
shape inside `ArtistCard` on the NowPlaying page: `useNowPlayingFetchers`
returned `artistInfo` for the previously-current artist for one render
after `artistId` changed, and `CachedImage` persisted that mismatched
blob under the new `artistInfo:<new-id>:hero` key in IndexedDB —
sticky "previous artist" image on every subsequent track.

Apply the same `{ id, value }` tuple pattern from PR #732 inside the
hooks themselves so every consumer is safe by construction:

- `useNowPlayingFetchers`: gate `artistInfo`, `songMeta`, `albumData`,
  `discography` on id-match at the return. Late-arriving resolves for
  a stale id can no longer overwrite the displayed value.
- `useArtistDetailData`: same for `info`. Required because the
  `ArtistDetail` bio card now uses `CachedImage` via the shared
  `ArtistCard` (previously raw `<img>`, no persistence hazard).

Unify `ArtistDetail`'s inline "About the Artist" block onto the same
shared `ArtistCard` so there is one source of truth for hero / bio /
similar rendering. New optional props: `onNavigate?` (omitted on
`/artist/:id` since the user is already there), `coverFallback`
(coverArt fallback when artistInfo has no hero image),
`hideArtistName` (avoid duplicating the hero name), `hideSimilar`
(ArtistDetail has its own similar-artists section).

Tests cover the gating contract for both hooks (incl. stale-resolve
race) and the `ArtistCard` prop matrix.

* fix(artist-image): square queue info hero, drop artist-avatar glow

- Queue Info bar's artist hero was rendered in a 16:10 wrap with
  `object-fit: cover`, so portrait photos lost top/bottom equally
  while landscape ones lost the sides — perceived as cropped even
  on roughly square sources. Set the wrap to 1:1 so the crop is
  symmetric and matches the typical square framing of artist
  photography.

- `ArtistDetail` extracted the cover's accent colour on every image
  load and rendered a 36px / 8px-spread `boxShadow` ring around the
  avatar. Drop the glow, the state, the one-shot reset effect, the
  prop-passing through `ArtistDetailHero`, and the now-orphaned
  `extractCoverColors` import on this page. `extractCoverColors`
  itself stays in place (still used by `useFsDynamicAccent`).

* docs(changelog): artist-info image fix extension + UI tweaks (PR #739)

src/hooks/useArtistDetailData.test.ts

@@ -0,0 +1,98 @@
+/**
+ * Regression tests for the id-gating tuple pattern in `useArtistDetailData`.
+ *
+ * `info` (the SubsonicArtistInfo returned by getArtistInfo) is held as a
+ * `{ id, value }` tuple internally and gated on id-match at the return
+ * statement. Without this gate, navigating between /artist/A → /artist/B
+ * would render one frame with A's `largeImageUrl` paired with B's id —
+ * exactly the cache-mismatch shape that PR #732 fixed for the queue info
+ * panel and that the shared ArtistCard (now used on this page) would
+ * otherwise persist into IndexedDB.
+ */
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SubsonicArtistInfo } from '../api/subsonicTypes';
+
+vi.mock('../api/subsonicArtists');
+vi.mock('../api/subsonicSearch');
+
+import { getArtist, getArtistInfo, getTopSongs } from '../api/subsonicArtists';
+import { search } from '../api/subsonicSearch';
+import { useArtistDetailData } from './useArtistDetailData';
+
+const mockArtistInfo = vi.mocked(getArtistInfo) as unknown as {
+  mockImplementation: (impl: (id: string) => Promise<SubsonicArtistInfo | null>) => void;
+};
+
+beforeEach(() => {
+  vi.mocked(getTopSongs).mockResolvedValue([]);
+  vi.mocked(search).mockResolvedValue({ songs: [], albums: [], artists: [] } as any);
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function deferred<T>() {
+  let resolve!: (v: T) => void;
+  let reject!: (e?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => { resolve = res; reject = rej; });
+  return { promise, resolve, reject };
+}
+
+describe('useArtistDetailData — id-gated info', () => {
+  it('returns null info when id changes before the new fetch resolves', async () => {
+    vi.mocked(getArtist).mockImplementation(async (id) => (
+      { artist: { id, name: id }, albums: [] } as any
+    ));
+    const a = deferred<SubsonicArtistInfo | null>();
+    const b = deferred<SubsonicArtistInfo | null>();
+    mockArtistInfo.mockImplementation(async (id) => {
+      if (id === 'A') return a.promise;
+      if (id === 'B') return b.promise;
+      return null;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string }) => useArtistDetailData(id),
+      { initialProps: { id: 'A' } },
+    );
+
+    await act(async () => { a.resolve({ largeImageUrl: 'A.jpg' } as SubsonicArtistInfo); });
+    await waitFor(() => expect(result.current.info).toEqual({ largeImageUrl: 'A.jpg' }));
+
+    // Switch to artist B. info must flip to null until B's fetch resolves —
+    // it must never carry A's largeImageUrl paired with B's id, since the
+    // shared ArtistCard would build a `coverArtCacheKey(B, 80)` from `id`
+    // and pair it with A's URL inside CachedImage.
+    rerender({ id: 'B' });
+    expect(result.current.info).toBeNull();
+
+    await act(async () => { b.resolve({ largeImageUrl: 'B.jpg' } as SubsonicArtistInfo); });
+    await waitFor(() => expect(result.current.info).toEqual({ largeImageUrl: 'B.jpg' }));
+  });
+
+  it('ignores a late-arriving resolve for a stale id', async () => {
+    vi.mocked(getArtist).mockImplementation(async (id) => (
+      { artist: { id, name: id }, albums: [] } as any
+    ));
+    const a = deferred<SubsonicArtistInfo | null>();
+    mockArtistInfo.mockImplementation(async (id) => {
+      if (id === 'A') return a.promise;
+      if (id === 'B') return { largeImageUrl: 'B.jpg' } as SubsonicArtistInfo;
+      return null;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string }) => useArtistDetailData(id),
+      { initialProps: { id: 'A' } },
+    );
+
+    rerender({ id: 'B' });
+    await waitFor(() => expect(result.current.info).toEqual({ largeImageUrl: 'B.jpg' }));
+
+    // A's late resolve must not overwrite B's info.
+    await act(async () => { a.resolve({ largeImageUrl: 'A.jpg' } as SubsonicArtistInfo); });
+    expect(result.current.info).toEqual({ largeImageUrl: 'B.jpg' });
+  });
+});

src/hooks/useArtistDetailData.ts

@@ -30,7 +30,10 @@ export function useArtistDetailData(id: string | undefined): ArtistDetailDataRes
   const [albums, setAlbums] = useState<SubsonicAlbum[]>([]);
   const [featuredAlbums, setFeaturedAlbums] = useState<SubsonicAlbum[]>([]);
   const [topSongs, setTopSongs] = useState<SubsonicSong[]>([]);
-  const [info, setInfo] = useState<SubsonicArtistInfo | null>(null);
+  // Tuple gates `info` on id-match so a CachedImage-style consumer (shared
+  // ArtistCard) can never see info from a previously-viewed artist paired
+  // with the current `id`. Same pattern as `useNowPlayingFetchers`.
+  const [infoEntry, setInfoEntry] = useState<{ id: string; value: SubsonicArtistInfo | null } | null>(null);
   const [loading, setLoading] = useState(true);
   const [isStarred, setIsStarred] = useState(false);
   const [artistInfoLoading, setArtistInfoLoading] = useState(false);
@@ -40,7 +43,7 @@ export function useArtistDetailData(id: string | undefined): ArtistDetailDataRes
     if (!id) return;
     let cancelled = false;
     setLoading(true);
-    setInfo(null);
+    setInfoEntry(null);
     setTopSongs([]);
     setFeaturedAlbums([]);
     getArtist(id).then(artistData => {
@@ -66,10 +69,10 @@ export function useArtistDetailData(id: string | undefined): ArtistDetailDataRes
     setArtistInfoLoading(true);
     getArtistInfo(id, { similarArtistCount: audiomuseNavidromeEnabled ? 24 : undefined })
       .then(artistInfo => {
-        if (!cancelled) setInfo(artistInfo ?? null);
+        if (!cancelled) setInfoEntry({ id, value: artistInfo ?? null });
       })
       .catch(() => {
-        if (!cancelled) setInfo(null);
+        if (!cancelled) setInfoEntry({ id, value: null });
       })
       .finally(() => {
         if (!cancelled) setArtistInfoLoading(false);
@@ -113,6 +116,8 @@ export function useArtistDetailData(id: string | undefined): ArtistDetailDataRes
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [artist?.id, musicLibraryFilterVersion]);
 
+  const info = infoEntry && infoEntry.id === id ? infoEntry.value : null;
+
   return {
     artist, setArtist, albums, topSongs, info, featuredAlbums,
     loading, artistInfoLoading, featuredLoading,

src/hooks/useNowPlayingFetchers.test.ts

@@ -0,0 +1,211 @@
+/**
+ * Regression tests for the id-gating tuple pattern in `useNowPlayingFetchers`.
+ *
+ * Each id-keyed slot (`artistInfo`, `songMeta`, `albumData`, `discography`) is
+ * held as a `{ id, value }` tuple internally and gated on id-match at the
+ * return statement. This guarantees that consumers building a `cacheKey` from
+ * the current id can never receive a value paired with a previously-current
+ * id — the bug that PR #732 fixed inside `NowPlayingInfo.tsx` and that this
+ * hook would otherwise leak into every other consumer (e.g. ArtistCard on the
+ * NowPlaying page).
+ */
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SubsonicArtistInfo, SubsonicSong, SubsonicAlbum } from '../api/subsonicTypes';
+
+vi.mock('../api/subsonicArtists');
+vi.mock('../api/subsonicLibrary');
+vi.mock('../api/bandsintown');
+vi.mock('../api/lastfm');
+
+import { getArtist, getArtistInfo, getTopSongs } from '../api/subsonicArtists';
+import { getAlbum, getSong } from '../api/subsonicLibrary';
+import { fetchBandsintownEvents } from '../api/bandsintown';
+import { lastfmGetArtistStats, lastfmGetTrackInfo, lastfmIsConfigured } from '../api/lastfm';
+import { useNowPlayingFetchers, type NowPlayingFetchersDeps } from './useNowPlayingFetchers';
+
+// The real getArtistInfo signature returns `Promise<SubsonicArtistInfo>`, but
+// the hook treats `null` as the "no info available" case and stores it as
+// such in its tuple. The tests mirror that — cast to a nullable-returning
+// shape so we can mock the empty case without `as any` at every site.
+const mockArtistInfo = vi.mocked(getArtistInfo) as unknown as {
+  mockImplementation: (impl: (id: string) => Promise<SubsonicArtistInfo | null>) => void;
+  mockResolvedValue: (v: SubsonicArtistInfo | null) => void;
+};
+
+const baseDeps: NowPlayingFetchersDeps = {
+  songId: undefined,
+  artistId: undefined,
+  albumId: undefined,
+  artistName: '',
+  enableBandsintown: false,
+  audiomuseNavidromeEnabled: false,
+  lastfmUsername: '',
+  currentTrack: null,
+  subsonicServerId: 'srv1',
+  fetchEnabled: true,
+};
+
+beforeEach(() => {
+  vi.mocked(getTopSongs).mockResolvedValue([]);
+  vi.mocked(getArtist).mockResolvedValue({ albums: [] } as any);
+  vi.mocked(fetchBandsintownEvents).mockResolvedValue([]);
+  vi.mocked(lastfmIsConfigured).mockReturnValue(false);
+  vi.mocked(lastfmGetTrackInfo).mockResolvedValue(null);
+  vi.mocked(lastfmGetArtistStats).mockResolvedValue(null);
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+/** Deferred promise helper — lets a test step the fetch resolution manually. */
+function deferred<T>() {
+  let resolve!: (v: T) => void;
+  let reject!: (e?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => { resolve = res; reject = rej; });
+  return { promise, resolve, reject };
+}
+
+describe('useNowPlayingFetchers — id-gated artistInfo', () => {
+  it('returns null artistInfo while the previously-resolved info belongs to a different artistId', async () => {
+    const a = deferred<SubsonicArtistInfo | null>();
+    const b = deferred<SubsonicArtistInfo | null>();
+    mockArtistInfo.mockImplementation(async (id) => {
+      if (id === 'art-A') return a.promise;
+      if (id === 'art-B') return b.promise;
+      return null;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ artistId }: { artistId: string }) =>
+        useNowPlayingFetchers({ ...baseDeps, artistId, artistName: artistId }),
+      { initialProps: { artistId: 'art-A' } },
+    );
+
+    // Before any resolve, no info yet.
+    expect(result.current.artistInfo).toBeNull();
+
+    // Resolve A — artistInfo becomes A's info.
+    await act(async () => { a.resolve({ largeImageUrl: 'A.jpg' } as SubsonicArtistInfo); });
+    await waitFor(() => {
+      expect(result.current.artistInfo).toEqual({ largeImageUrl: 'A.jpg' });
+    });
+
+    // Switch to artistId B. Without id-gating, artistInfo would still be A's
+    // info paired with the new B id — the bug that PR #732 fixed in the queue
+    // info panel. With gating, artistInfo flips to null immediately.
+    rerender({ artistId: 'art-B' });
+    expect(result.current.artistInfo).toBeNull();
+
+    // Resolve B — artistInfo now becomes B's info, never paired with A.
+    await act(async () => { b.resolve({ largeImageUrl: 'B.jpg' } as SubsonicArtistInfo); });
+    await waitFor(() => {
+      expect(result.current.artistInfo).toEqual({ largeImageUrl: 'B.jpg' });
+    });
+  });
+
+  it('does not leak a late-arriving resolve for a stale artistId', async () => {
+    // Race: artist A's fetch resolves AFTER the consumer switched to B.
+    const a = deferred<SubsonicArtistInfo | null>();
+    mockArtistInfo.mockImplementation(async (id) => {
+      if (id === 'art-A') return a.promise;
+      if (id === 'art-B') return { largeImageUrl: 'B.jpg' } as SubsonicArtistInfo;
+      return null;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ artistId }: { artistId: string }) =>
+        useNowPlayingFetchers({ ...baseDeps, artistId, artistName: artistId }),
+      { initialProps: { artistId: 'art-A' } },
+    );
+
+    // Switch to B before A resolves.
+    rerender({ artistId: 'art-B' });
+    await waitFor(() => {
+      expect(result.current.artistInfo).toEqual({ largeImageUrl: 'B.jpg' });
+    });
+
+    // Late A resolve must not overwrite the displayed value for B.
+    await act(async () => { a.resolve({ largeImageUrl: 'A.jpg' } as SubsonicArtistInfo); });
+    expect(result.current.artistInfo).toEqual({ largeImageUrl: 'B.jpg' });
+  });
+});
+
+describe('useNowPlayingFetchers — id-gated songMeta / albumData / discography', () => {
+  it('gates songMeta on songId match', async () => {
+    const s1 = deferred<SubsonicSong | null>();
+    const s2 = deferred<SubsonicSong | null>();
+    vi.mocked(getSong).mockImplementation(async (id) => {
+      if (id === 's1') return s1.promise;
+      if (id === 's2') return s2.promise;
+      return null;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ songId }: { songId: string }) =>
+        useNowPlayingFetchers({ ...baseDeps, songId }),
+      { initialProps: { songId: 's1' } },
+    );
+
+    await act(async () => { s1.resolve({ id: 's1', title: 'Track 1' } as SubsonicSong); });
+    await waitFor(() => expect(result.current.songMeta?.title).toBe('Track 1'));
+
+    rerender({ songId: 's2' });
+    expect(result.current.songMeta).toBeNull();
+
+    await act(async () => { s2.resolve({ id: 's2', title: 'Track 2' } as SubsonicSong); });
+    await waitFor(() => expect(result.current.songMeta?.title).toBe('Track 2'));
+  });
+
+  it('gates albumData on albumId match', async () => {
+    const al1 = deferred<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>();
+    const al2 = deferred<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>();
+    vi.mocked(getAlbum).mockImplementation(async (id) => {
+      if (id === 'alb1') return al1.promise as any;
+      if (id === 'alb2') return al2.promise as any;
+      return null as any;
+    });
+
+    const { result, rerender } = renderHook(
+      ({ albumId }: { albumId: string }) =>
+        useNowPlayingFetchers({ ...baseDeps, albumId }),
+      { initialProps: { albumId: 'alb1' } },
+    );
+
+    await act(async () => { al1.resolve({ album: { id: 'alb1', name: 'A1' } as SubsonicAlbum, songs: [] }); });
+    await waitFor(() => expect(result.current.albumData?.album.name).toBe('A1'));
+
+    rerender({ albumId: 'alb2' });
+    expect(result.current.albumData).toBeNull();
+
+    await act(async () => { al2.resolve({ album: { id: 'alb2', name: 'A2' } as SubsonicAlbum, songs: [] }); });
+    await waitFor(() => expect(result.current.albumData?.album.name).toBe('A2'));
+  });
+
+  it('gates discography on artistId match (empty fallback while gated)', async () => {
+    const d1 = deferred<{ artist: any; albums: SubsonicAlbum[] }>();
+    const d2 = deferred<{ artist: any; albums: SubsonicAlbum[] }>();
+    vi.mocked(getArtist).mockImplementation(async (id) => {
+      if (id === 'art-D1') return d1.promise as any;
+      if (id === 'art-D2') return d2.promise as any;
+      return { albums: [] } as any;
+    });
+    mockArtistInfo.mockResolvedValue(null);
+
+    const { result, rerender } = renderHook(
+      ({ artistId }: { artistId: string }) =>
+        useNowPlayingFetchers({ ...baseDeps, artistId, artistName: artistId }),
+      { initialProps: { artistId: 'art-D1' } },
+    );
+
+    await act(async () => { d1.resolve({ artist: {}, albums: [{ id: 'al-D1' } as SubsonicAlbum] }); });
+    await waitFor(() => expect(result.current.discography.map(a => a.id)).toEqual(['al-D1']));
+
+    rerender({ artistId: 'art-D2' });
+    expect(result.current.discography).toEqual([]);
+
+    await act(async () => { d2.resolve({ artist: {}, albums: [{ id: 'al-D2' } as SubsonicAlbum] }); });
+    await waitFor(() => expect(result.current.discography.map(a => a.id)).toEqual(['al-D2']));
+  });
+});

src/hooks/useNowPlayingFetchers.ts

@@ -50,62 +50,81 @@ function subsonicCacheKey(serverId: string, id: string): string {
   return serverId ? `${serverId}:${id}` : id;
 }
 
+// id-keyed slots are held as `{ id, value }` tuples and gated on id-match in
+// the return statement. Without the gate, a track switch renders one frame
+// with the previous track's value paired with the new id — consumers that
+// build a cacheKey from the new id (e.g. CachedImage) would persist a
+// mismatched blob in IndexedDB and never recover. See PR #732 for the same
+// fix inside `NowPlayingInfo.tsx`.
+type IdSlot<T> = { id: string; value: T } | null;
+function seedSlot<T>(id: string, lookup: (id: string) => T | undefined): IdSlot<T> {
+  if (!id) return null;
+  const cached = lookup(id);
+  return cached === undefined ? null : { id, value: cached };
+}
+
 export function useNowPlayingFetchers(deps: NowPlayingFetchersDeps): NowPlayingFetchersResult {
   const {
     songId, artistId, albumId, artistName, enableBandsintown, audiomuseNavidromeEnabled,
     lastfmUsername, currentTrack, subsonicServerId, fetchEnabled = true,
   } = deps;
 
-  // Entity state, seeded from TTL cache so same-artist song switches are instant
-  const [songMeta,   setSongMeta]   = useState<SubsonicSong | null>(() =>
-    songId && subsonicServerId ? songMetaCache.get(subsonicCacheKey(subsonicServerId, songId)) ?? null : null);
-  const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(() =>
-    artistId && subsonicServerId ? artistInfoCache.get(subsonicCacheKey(subsonicServerId, artistId)) ?? null : null);
-  const [albumData,  setAlbumData]  = useState<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>(() =>
-    albumId && subsonicServerId ? albumCache.get(subsonicCacheKey(subsonicServerId, albumId)) ?? null : null);
+  // id-keyed entity state — seeded from TTL cache so same-artist song switches
+  // are instant. Held as `{ id, value }` tuples and gated below.
+  const [songMetaEntry,   setSongMetaEntry]   = useState<IdSlot<SubsonicSong | null>>(() =>
+    seedSlot(songId && subsonicServerId ? songId : '', k => songMetaCache.get(subsonicCacheKey(subsonicServerId, k))));
+  const [artistInfoEntry, setArtistInfoEntry] = useState<IdSlot<SubsonicArtistInfo | null>>(() =>
+    seedSlot(artistId && subsonicServerId ? artistId : '', k => artistInfoCache.get(subsonicCacheKey(subsonicServerId, k))));
+  const [albumDataEntry,  setAlbumDataEntry]  = useState<IdSlot<{ album: SubsonicAlbum; songs: SubsonicSong[] } | null>>(() =>
+    seedSlot(albumId && subsonicServerId ? albumId : '', k => albumCache.get(subsonicCacheKey(subsonicServerId, k))));
+  const [discographyEntry, setDiscographyEntry] = useState<IdSlot<SubsonicAlbum[]>>(() =>
+    seedSlot(artistId && subsonicServerId ? artistId : '', k => discographyCache.get(subsonicCacheKey(subsonicServerId, k))));
+
+  // Name-keyed / global state — no cacheKey/persistence hazard, kept as plain state.
   const [topSongs,   setTopSongs]   = useState<SubsonicSong[]>(() =>
     artistName && subsonicServerId ? topSongsCache.get(subsonicCacheKey(subsonicServerId, artistName)) ?? [] : []);
   const [tourEvents, setTourEvents] = useState<BandsintownEvent[]>(() => artistName ? tourCache.get(artistName) ?? [] : []);
   const [tourLoading, setTourLoading] = useState(false);
-  const [discography, setDiscography] = useState<SubsonicAlbum[]>(() =>
-    artistId && subsonicServerId ? discographyCache.get(subsonicCacheKey(subsonicServerId, artistId)) ?? [] : []);
   const [lfmTrack,   setLfmTrack]   = useState<LastfmTrackInfo | null>(null);
   const [lfmArtist,  setLfmArtist]  = useState<LastfmArtistStats | null>(null);
 
   // Fetch batch per entity change (not per song switch — same-artist songs share artist/top/tour fetches)
   useEffect(() => {
-    if (!fetchEnabled || !subsonicServerId || !songId) { setSongMeta(null); return; }
+    if (!fetchEnabled || !subsonicServerId || !songId) { setSongMetaEntry(null); return; }
     const cacheKey = subsonicCacheKey(subsonicServerId, songId);
     const cached = songMetaCache.get(cacheKey);
-    if (cached !== undefined) { setSongMeta(cached); return; }
+    if (cached !== undefined) { setSongMetaEntry({ id: songId, value: cached }); return; }
+    setSongMetaEntry(null);
     let cancelled = false;
     getSong(songId)
-      .then(v => { if (!cancelled) { songMetaCache.set(cacheKey, v ?? null); setSongMeta(v ?? null); } })
-      .catch(() => { if (!cancelled) { songMetaCache.set(cacheKey, null); setSongMeta(null); } });
+      .then(v => { if (!cancelled) { songMetaCache.set(cacheKey, v ?? null); setSongMetaEntry({ id: songId, value: v ?? null }); } })
+      .catch(() => { if (!cancelled) { songMetaCache.set(cacheKey, null); setSongMetaEntry({ id: songId, value: null }); } });
     return () => { cancelled = true; };
   }, [fetchEnabled, subsonicServerId, songId]);
 
   useEffect(() => {
-    if (!fetchEnabled || !subsonicServerId || !artistId) { setArtistInfo(null); return; }
+    if (!fetchEnabled || !subsonicServerId || !artistId) { setArtistInfoEntry(null); return; }
     const cacheKey = subsonicCacheKey(subsonicServerId, artistId);
     const cached = artistInfoCache.get(cacheKey);
-    if (cached !== undefined) { setArtistInfo(cached); return; }
+    if (cached !== undefined) { setArtistInfoEntry({ id: artistId, value: cached }); return; }
+    setArtistInfoEntry(null);
     let cancelled = false;
     getArtistInfo(artistId, { similarArtistCount: audiomuseNavidromeEnabled ? 24 : undefined })
-      .then(v => { if (!cancelled) { artistInfoCache.set(cacheKey, v ?? null); setArtistInfo(v ?? null); } })
-      .catch(() => { if (!cancelled) { artistInfoCache.set(cacheKey, null); setArtistInfo(null); } });
+      .then(v => { if (!cancelled) { artistInfoCache.set(cacheKey, v ?? null); setArtistInfoEntry({ id: artistId, value: v ?? null }); } })
+      .catch(() => { if (!cancelled) { artistInfoCache.set(cacheKey, null); setArtistInfoEntry({ id: artistId, value: null }); } });
     return () => { cancelled = true; };
   }, [fetchEnabled, subsonicServerId, artistId, audiomuseNavidromeEnabled]);
 
   useEffect(() => {
-    if (!fetchEnabled || !subsonicServerId || !albumId) { setAlbumData(null); return; }
+    if (!fetchEnabled || !subsonicServerId || !albumId) { setAlbumDataEntry(null); return; }
     const cacheKey = subsonicCacheKey(subsonicServerId, albumId);
     const cached = albumCache.get(cacheKey);
-    if (cached !== undefined) { setAlbumData(cached); return; }
+    if (cached !== undefined) { setAlbumDataEntry({ id: albumId, value: cached }); return; }
+    setAlbumDataEntry(null);
     let cancelled = false;
     getAlbum(albumId)
-      .then(v => { if (!cancelled) { albumCache.set(cacheKey, v); setAlbumData(v); } })
-      .catch(() => { if (!cancelled) { albumCache.set(cacheKey, null); setAlbumData(null); } });
+      .then(v => { if (!cancelled) { albumCache.set(cacheKey, v); setAlbumDataEntry({ id: albumId, value: v }); } })
+      .catch(() => { if (!cancelled) { albumCache.set(cacheKey, null); setAlbumDataEntry({ id: albumId, value: null }); } });
     return () => { cancelled = true; };
   }, [fetchEnabled, subsonicServerId, albumId]);
 
@@ -135,14 +154,15 @@ export function useNowPlayingFetchers(deps: NowPlayingFetchersDeps): NowPlayingF
 
   // Discography via getArtist
   useEffect(() => {
-    if (!fetchEnabled || !subsonicServerId || !artistId) { setDiscography([]); return; }
+    if (!fetchEnabled || !subsonicServerId || !artistId) { setDiscographyEntry(null); return; }
     const cacheKey = subsonicCacheKey(subsonicServerId, artistId);
     const cached = discographyCache.get(cacheKey);
-    if (cached !== undefined) { setDiscography(cached); return; }
+    if (cached !== undefined) { setDiscographyEntry({ id: artistId, value: cached }); return; }
+    setDiscographyEntry(null);
     let cancelled = false;
     getArtist(artistId)
-      .then(v => { if (!cancelled) { discographyCache.set(cacheKey, v.albums); setDiscography(v.albums); } })
-      .catch(() => { if (!cancelled) { discographyCache.set(cacheKey, []); setDiscography([]); } });
+      .then(v => { if (!cancelled) { discographyCache.set(cacheKey, v.albums); setDiscographyEntry({ id: artistId, value: v.albums }); } })
+      .catch(() => { if (!cancelled) { discographyCache.set(cacheKey, []); setDiscographyEntry({ id: artistId, value: [] }); } });
     return () => { cancelled = true; };
   }, [fetchEnabled, subsonicServerId, artistId]);
 
@@ -172,5 +192,13 @@ export function useNowPlayingFetchers(deps: NowPlayingFetchersDeps): NowPlayingF
     return () => { cancelled = true; };
   }, [lfmArtistKey, artistName, lastfmUsername]);
 
+  // Gate id-keyed slots on id-match so consumers never see a value paired
+  // with the wrong id, even on the single render between an id change and
+  // the next effect run.
+  const songMeta    = songMetaEntry    && songMetaEntry.id    === songId   ? songMetaEntry.value    : null;
+  const artistInfo  = artistInfoEntry  && artistInfoEntry.id  === artistId ? artistInfoEntry.value  : null;
+  const albumData   = albumDataEntry   && albumDataEntry.id   === albumId  ? albumDataEntry.value   : null;
+  const discography = discographyEntry && discographyEntry.id === artistId ? discographyEntry.value : [];
+
   return { songMeta, artistInfo, albumData, topSongs, tourEvents, tourLoading, discography, lfmTrack, lfmArtist };
 }