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:
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>
|
||||
|
||||
Reference in new issue
Block a user