feat(favorites): add genre filter to Albums tab

- Add GenreFilterButton to Favorites > Albums toolbar
- Filter albums by genre name (multi-select supported)
- Use genreFilterVersion for reactivity tracking

Note: Artists tab doesn't have genre filter since artist
objects don't contain genre info directly.
This commit is contained in:
vicrodh committed 2026-02-02 09:49:06 -06:00
1 parent 6e4f48ff2e
commit 65b42295e9
1 file changed
+26
@@ -16,6 +16,11 @@
import { syncCache as syncAlbumCache } from '$lib/stores/albumFavoritesStore';
import { syncCache as syncArtistCache } from '$lib/stores/artistFavoritesStore';
import { categorizeAlbum, getQobuzImage, formatQuality } from '$lib/adapters/qobuzAdapters';
import GenreFilterButton from '../GenreFilterButton.svelte';
import {
hasActiveFilter as hasGenreFilter,
getSelectedGenreNames
} from '$lib/stores/genreFilterStore';
import type { FavoritesPreferences, QobuzAlbum } from '$lib/types';
interface FavoriteAlbum {
@@ -397,9 +402,29 @@
return new Map(filteredTracks.map((track, index) => [track.id, index]));
});
// Genre filter version to trigger reactivity
let genreFilterVersion = $state(0);
function handleGenreFilterChange() {
genreFilterVersion++;
}
let filteredAlbums = $derived.by(() => {
// Track genre filter changes for reactivity
void genreFilterVersion;
let albums = favoriteAlbums;
// Filter by genre
const selectedGenreNames = getSelectedGenreNames();
if (selectedGenreNames.length > 0) {
albums = albums.filter(a =>
a.genre && selectedGenreNames.some(genreName =>
a.genre!.name.toLowerCase().includes(genreName.toLowerCase())
)
);
}
// Filter by search
if (albumSearch.trim()) {
const query = albumSearch.toLowerCase();
@@ -1227,6 +1252,7 @@
<div class="toolbar">
{#if activeTab === 'albums'}
<div class="toolbar-controls">
<GenreFilterButton onFilterChange={handleGenreFilterChange} />
<div class="dropdown-container">
<button class="control-btn" onclick={() => (showAlbumGroupMenu = !showAlbumGroupMenu)}>
<span>