From 65b42295e99f74ebe2ae8ec155cd70447362219a Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 2 Feb 2026 09:49:06 -0600
Subject: [PATCH] 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.
---
 src/lib/components/views/FavoritesView.svelte | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/lib/components/views/FavoritesView.svelte b/src/lib/components/views/FavoritesView.svelte
index c42f9b919..435101e77 100644
--- a/src/lib/components/views/FavoritesView.svelte
+++ b/src/lib/components/views/FavoritesView.svelte
@@ -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>