From 1ac354fb6781360b704cbc620d07b572dd9be35b Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com>
Date: Sat, 16 May 2026 13:51:11 +0200
Subject: [PATCH] fix(favorites): show artist name in filter label, not
 Subsonic ID (#736)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking a card under Top Artists by Favorites set the artist filter
to the artist's Subsonic ID, and the "Showing X of Y" label
interpolated that ID into the `{{artist}}` placeholder — so the user
saw a GUID like "OjdsOiMQ6ve5rZWPj2ePFc" instead of "Toto".

Look the name up from `topFavoriteArtists` (already on the page,
each entry carries `{id, name}`), and pass it to the header. The ID
filter itself is unchanged — the song-filtering hook still matches on
`artistId` / `artist` / `albumArtist`.

Reported by zunoz on Discord.
---
 src/components/favorites/FavoritesSongsSectionHeader.tsx | 5 +++--
 src/pages/Favorites.tsx                                  | 6 ++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/favorites/FavoritesSongsSectionHeader.tsx b/src/components/favorites/FavoritesSongsSectionHeader.tsx
index 9d48094a..ee67d39e 100644
--- a/src/components/favorites/FavoritesSongsSectionHeader.tsx
+++ b/src/components/favorites/FavoritesSongsSectionHeader.tsx
@@ -10,6 +10,7 @@ interface Props {
   visibleSongs: SubsonicSong[];
   songs: SubsonicSong[];
   selectedArtist: string | null;
+  selectedArtistName: string | null;
   setSelectedArtist: React.Dispatch<React.SetStateAction<string | null>>;
   selectedGenres: string[];
   setSelectedGenres: React.Dispatch<React.SetStateAction<string[]>>;
@@ -27,7 +28,7 @@ interface Props {
 }
 
 export default function FavoritesSongsSectionHeader({
-  visibleSongs, songs, selectedArtist, setSelectedArtist,
+  visibleSongs, songs, selectedArtist, selectedArtistName, setSelectedArtist,
   selectedGenres, setSelectedGenres, yearRange, setYearRange,
   showFilters, setShowFilters, setSortKey, setSortClickCount,
   playTrack, enqueue, starredOverrides, minYear, currentYear,
@@ -42,7 +43,7 @@ export default function FavoritesSongsSectionHeader({
         {(selectedArtist || selectedGenres.length > 0 || yearRange[0] !== minYear || yearRange[1] !== currentYear) && (
           <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontStyle: 'italic' }}>
             {selectedArtist
-              ? t('favorites.showingFiltered', { filtered: visibleSongs.length, total: songs.filter(s => starredOverrides[s.id] !== false).length, artist: selectedArtist })
+              ? t('favorites.showingFiltered', { filtered: visibleSongs.length, total: songs.filter(s => starredOverrides[s.id] !== false).length, artist: selectedArtistName ?? selectedArtist })
               : t('favorites.showingCount', { filtered: visibleSongs.length, total: songs.filter(s => starredOverrides[s.id] !== false).length })}
           </span>
         )}
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index ee066ffe..bb11414a 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -114,6 +114,11 @@ export default function Favorites() {
     selectedArtist, selectedGenres, yearRange, ratings,
   });
 
+  const selectedArtistName = useMemo(
+    () => selectedArtist ? topFavoriteArtists.find(a => a.id === selectedArtist)?.name ?? null : null,
+    [selectedArtist, topFavoriteArtists],
+  );
+
   const { toggleSelect } = useFavoritesSelection(songs, inSelectMode, tracklistRef);
 
 
@@ -174,6 +179,7 @@ export default function Favorites() {
                 visibleSongs={visibleSongs}
                 songs={songs}
                 selectedArtist={selectedArtist}
+                selectedArtistName={selectedArtistName}
                 setSelectedArtist={setSelectedArtist}
                 selectedGenres={selectedGenres}
                 setSelectedGenres={setSelectedGenres}