fix(favorites): show artist name in filter label, not Subsonic ID (#736)

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.
This commit is contained in:
Frank Stellmacher
2026-05-16 13:51:11 +02:00
committed by GitHub
parent 31abdc03ef
commit 1ac354fb67
2 changed files with 9 additions and 2 deletions
@@ -10,6 +10,7 @@ interface Props {
visibleSongs: SubsonicSong[]; visibleSongs: SubsonicSong[];
songs: SubsonicSong[]; songs: SubsonicSong[];
selectedArtist: string | null; selectedArtist: string | null;
selectedArtistName: string | null;
setSelectedArtist: React.Dispatch<React.SetStateAction<string | null>>; setSelectedArtist: React.Dispatch<React.SetStateAction<string | null>>;
selectedGenres: string[]; selectedGenres: string[];
setSelectedGenres: React.Dispatch<React.SetStateAction<string[]>>; setSelectedGenres: React.Dispatch<React.SetStateAction<string[]>>;
@@ -27,7 +28,7 @@ interface Props {
} }
export default function FavoritesSongsSectionHeader({ export default function FavoritesSongsSectionHeader({
visibleSongs, songs, selectedArtist, setSelectedArtist, visibleSongs, songs, selectedArtist, selectedArtistName, setSelectedArtist,
selectedGenres, setSelectedGenres, yearRange, setYearRange, selectedGenres, setSelectedGenres, yearRange, setYearRange,
showFilters, setShowFilters, setSortKey, setSortClickCount, showFilters, setShowFilters, setSortKey, setSortClickCount,
playTrack, enqueue, starredOverrides, minYear, currentYear, playTrack, enqueue, starredOverrides, minYear, currentYear,
@@ -42,7 +43,7 @@ export default function FavoritesSongsSectionHeader({
{(selectedArtist || selectedGenres.length > 0 || yearRange[0] !== minYear || yearRange[1] !== currentYear) && ( {(selectedArtist || selectedGenres.length > 0 || yearRange[0] !== minYear || yearRange[1] !== currentYear) && (
<span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontStyle: 'italic' }}> <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontStyle: 'italic' }}>
{selectedArtist {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 })} : t('favorites.showingCount', { filtered: visibleSongs.length, total: songs.filter(s => starredOverrides[s.id] !== false).length })}
</span> </span>
)} )}
+6
View File
@@ -114,6 +114,11 @@ export default function Favorites() {
selectedArtist, selectedGenres, yearRange, ratings, 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); const { toggleSelect } = useFavoritesSelection(songs, inSelectMode, tracklistRef);
@@ -174,6 +179,7 @@ export default function Favorites() {
visibleSongs={visibleSongs} visibleSongs={visibleSongs}
songs={songs} songs={songs}
selectedArtist={selectedArtist} selectedArtist={selectedArtist}
selectedArtistName={selectedArtistName}
setSelectedArtist={setSelectedArtist} setSelectedArtist={setSelectedArtist}
selectedGenres={selectedGenres} selectedGenres={selectedGenres}
setSelectedGenres={setSelectedGenres} setSelectedGenres={setSelectedGenres}