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/components/artistDetail/ArtistDetailHero.tsx

@@ -10,7 +10,6 @@ import { useOfflineStore } from '../../store/offlineStore';
 import { useOfflineJobStore } from '../../store/offlineJobStore';
 import { useAuthStore } from '../../store/authStore';
 import { useIsMobile } from '../../hooks/useIsMobile';
-import { extractCoverColors } from '../../utils/ui/dynamicColors';
 import CachedImage from '../CachedImage';
 import CoverLightbox from '../CoverLightbox';
 import LastfmIcon from '../LastfmIcon';
@@ -42,8 +41,6 @@ interface Props {
   coverRevision: number;
   headerCoverFailed: boolean;
   setHeaderCoverFailed: React.Dispatch<React.SetStateAction<boolean>>;
-  avatarGlow: string;
-  setAvatarGlow: React.Dispatch<React.SetStateAction<string>>;
   lightboxOpen: boolean;
   setLightboxOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -55,7 +52,7 @@ export default function ArtistDetailHero({
   openedLink, openLink,
   coverId, artistCover300Src, artistCover300Key, artistCover2000Src,
   coverRevision, headerCoverFailed, setHeaderCoverFailed,
-  avatarGlow, setAvatarGlow, lightboxOpen, setLightboxOpen,
+  lightboxOpen, setLightboxOpen,
 }: Props) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -88,14 +85,7 @@ export default function ArtistDetailHero({
       )}
 
       <div className="artist-detail-header">
-        <div
-          className="artist-detail-avatar"
-          style={{
-            position: 'relative',
-            boxShadow: avatarGlow ? `0 0 36px 8px ${avatarGlow.replace('rgb(', 'rgba(').replace(')', ', 0.55)')}` : undefined,
-            transition: 'box-shadow 0.6s ease',
-          }}
-        >
+        <div className="artist-detail-avatar" style={{ position: 'relative' }}>
           {coverId ? (
             <button
               className="artist-detail-avatar-btn"
@@ -109,7 +99,6 @@ export default function ArtistDetailHero({
                   cacheKey={artistCover300Key}
                   alt={artist.name}
                   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                  onLoad={e => extractCoverColors(e.currentTarget.src).then(({ accent }) => { if (accent) setAvatarGlow(accent); })}
                   onError={() => setHeaderCoverFailed(true)}
                 />
               ) : (

src/components/nowPlaying/ArtistCard.test.tsx

@@ -0,0 +1,80 @@
+/**
+ * `ArtistCard` characterization — covers the prop surface added when the
+ * card became the shared "About the Artist" component for both the
+ * NowPlaying page and ArtistDetail (replacing the inline bio block on
+ * /artist/:id and the previously-divergent rendering).
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { renderWithProviders } from '@/test/helpers/renderWithProviders';
+import ArtistCard from './ArtistCard';
+import type { SubsonicArtistInfo } from '../../api/subsonicTypes';
+
+const infoWithImage: SubsonicArtistInfo = {
+  biography: 'Some bio text here.',
+  largeImageUrl: 'https://example.test/a-large.jpg',
+  similarArtist: [{ id: 'sim-1', name: 'Sister Act' }],
+} as unknown as SubsonicArtistInfo;
+
+describe('ArtistCard — optional onNavigate', () => {
+  it('hides the "Go to Artist" link when onNavigate is omitted', () => {
+    const { container } = renderWithProviders(
+      <ArtistCard artistName="A" artistId="art-1" artistInfo={infoWithImage} />,
+    );
+    expect(container.querySelector('.np-card-link')).toBeNull();
+  });
+
+  it('renders the "Go to Artist" link when onNavigate is provided', () => {
+    const { container } = renderWithProviders(
+      <ArtistCard artistName="A" artistId="art-1" artistInfo={infoWithImage} onNavigate={vi.fn()} />,
+    );
+    expect(container.querySelector('.np-card-link')).not.toBeNull();
+  });
+});
+
+describe('ArtistCard — hideArtistName / hideSimilar', () => {
+  it('does not render the artist name row when hideArtistName is set', () => {
+    const { container } = renderWithProviders(
+      <ArtistCard artistName="A" artistId="art-1" artistInfo={infoWithImage} hideArtistName />,
+    );
+    expect(container.querySelector('.np-dash-artist-name')).toBeNull();
+  });
+
+  it('does not render the similar-artists chip row when hideSimilar is set', () => {
+    const { container } = renderWithProviders(
+      <ArtistCard artistName="A" artistId="art-1" artistInfo={infoWithImage} hideSimilar />,
+    );
+    expect(container.querySelector('.np-dash-similar')).toBeNull();
+  });
+});
+
+describe('ArtistCard — coverFallback', () => {
+  it('uses coverFallback src + cacheKey when artistInfo has no hero image', () => {
+    const noImageInfo = { biography: 'b', similarArtist: [] } as unknown as SubsonicArtistInfo;
+    const { container } = renderWithProviders(
+      <ArtistCard
+        artistName="A"
+        artistId="art-1"
+        artistInfo={noImageInfo}
+        coverFallback={{ src: 'https://fallback.test/cover.jpg', cacheKey: 'fb:art-1:cover' }}
+      />,
+    );
+    const img = container.querySelector<HTMLImageElement>('img.np-dash-artist-image');
+    expect(img).not.toBeNull();
+    // CachedImage swaps src to a blob URL asynchronously; the initial render
+    // shows the fetch URL — assert the *configured* fallback src is in play.
+    expect(img!.getAttribute('src') || '').toContain('fallback.test');
+  });
+
+  it('prefers info.largeImageUrl over the fallback when both are present', () => {
+    const { container } = renderWithProviders(
+      <ArtistCard
+        artistName="A"
+        artistId="art-1"
+        artistInfo={infoWithImage}
+        coverFallback={{ src: 'https://fallback.test/cover.jpg', cacheKey: 'fb:art-1:cover' }}
+      />,
+    );
+    const img = container.querySelector<HTMLImageElement>('img.np-dash-artist-image');
+    expect(img!.getAttribute('src') || '').toContain('a-large.jpg');
+  });
+});

src/components/nowPlaying/ArtistCard.tsx

@@ -9,10 +9,20 @@ interface ArtistCardProps {
   artistName: string;
   artistId?: string;
   artistInfo: SubsonicArtistInfo | null;
-  onNavigate: (path: string) => void;
+  /** When omitted the "Go to Artist" link and similar-artist chip click handlers do nothing — used on /artist/:id where the user is already there. */
+  onNavigate?: (path: string) => void;
+  /** Render fallback cover when artistInfo has no hero image (ArtistDetail's coverArt fallback). */
+  coverFallback?: { src: string; cacheKey: string };
+  /** Suppress the artist-name row — ArtistDetail shows the name in its hero already. */
+  hideArtistName?: boolean;
+  /** Suppress the similar-artists chip row — ArtistDetail has its own similar section. */
+  hideSimilar?: boolean;
 }
 
-const ArtistCard = memo(function ArtistCard({ artistName, artistId, artistInfo, onNavigate }: ArtistCardProps) {
+const ArtistCard = memo(function ArtistCard({
+  artistName, artistId, artistInfo, onNavigate, coverFallback,
+  hideArtistName = false, hideSimilar = false,
+}: ArtistCardProps) {
   const { t } = useTranslation();
   const [bioExpanded, setBioExpanded] = useState(false);
   const [bioOverflows, setBioOverflows] = useState(false);
@@ -28,13 +38,16 @@ const ArtistCard = memo(function ArtistCard({ artistName, artistId, artistInfo,
     setBioOverflows(el.scrollHeight - el.clientHeight > 1);
   }, [bioHtml]);
 
-  const similar = artistInfo?.similarArtist ?? [];
+  const similar = hideSimilar ? [] : (artistInfo?.similarArtist ?? []);
   const rawLarge = artistInfo?.largeImageUrl;
   const rawMed   = artistInfo?.mediumImageUrl;
-  const heroImage = isRealArtistImage(rawLarge)
+  const heroFromInfo = isRealArtistImage(rawLarge)
     ? rawLarge!
     : isRealArtistImage(rawMed) ? rawMed! : '';
-  const heroCacheKey = artistId ? `artistInfo:${artistId}:hero` : '';
+  const heroImage = heroFromInfo || coverFallback?.src || '';
+  const heroCacheKey = heroFromInfo
+    ? (artistId ? `artistInfo:${artistId}:hero` : '')
+    : (coverFallback?.cacheKey ?? '');
 
   if (!bioHtml && similar.length === 0 && !heroImage) return null;
 
@@ -42,7 +55,7 @@ const ArtistCard = memo(function ArtistCard({ artistName, artistId, artistInfo,
     <div className="np-info-card np-dash-card">
       <div className="np-card-header">
         <h3 className="np-card-title">{t('nowPlaying.aboutArtist')}</h3>
-        {artistId && (
+        {artistId && onNavigate && (
           <button className="np-card-link" onClick={() => onNavigate(`/artist/${artistId}`)}>
             {t('nowPlaying.goToArtist')} <ExternalLink size={12} />
           </button>
@@ -60,7 +73,7 @@ const ArtistCard = memo(function ArtistCard({ artistName, artistId, artistInfo,
           />
         )}
         <div className="np-dash-artist-text">
-          <div className="np-dash-artist-name">{artistName}</div>
+          {!hideArtistName && <div className="np-dash-artist-name">{artistName}</div>}
           {bioHtml && (
             <>
               <div
@@ -83,7 +96,7 @@ const ArtistCard = memo(function ArtistCard({ artistName, artistId, artistInfo,
           <div className="np-dash-chip-row">
             {similar.slice(0, 12).map((a, idx) => (
               <span key={`${a.id}-${idx}`} className="np-chip"
-                onClick={() => a.id && onNavigate(`/artist/${a.id}`)}
+                onClick={() => a.id && onNavigate?.(`/artist/${a.id}`)}
                 data-tooltip={t('nowPlaying.goToArtist')}>
                 {a.name}
               </span>