From 589e6071c4874a5d36c3fa30a22a2e45efeeff35 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 2 Feb 2026 10:26:21 -0600
Subject: [PATCH] feat(genre): show parent genres by default with sub-genre
 toggle

- Default view shows only parent genres (less cluttered like Qobuz)
- When selecting a parent, filtering includes all its sub-genres
- Added "Show all sub-genres" toggle for granular control
- Store now tracks parent/child relationships for proper filtering
- getFilterGenreNames() returns selected + children for filtering
---
 src/lib/components/GenreFilterPopup.svelte    | 62 ++++++++++----
 src/lib/components/views/FavoritesView.svelte |  9 +-
 src/lib/components/views/HomeView.svelte      | 11 +--
 src/lib/stores/genreFilterStore.ts            | 83 +++++++++++++++----
 4 files changed, 124 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/GenreFilterPopup.svelte b/src/lib/components/GenreFilterPopup.svelte
index 95f08121a..f0fc11a21 100644
--- a/src/lib/components/GenreFilterPopup.svelte
+++ b/src/lib/components/GenreFilterPopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { SlidersHorizontal, X } from 'lucide-svelte';
+  import { SlidersHorizontal, X, ChevronRight } from 'lucide-svelte';
   import {
     getAvailableGenres,
     getSelectedGenreIds,
@@ -27,24 +27,31 @@
 
   let { isOpen, onClose, anchorEl = null, context = 'home', align = 'left' }: Props = $props();
 
-  let genres = $state<GenreInfo[]>([]);
+  let parentGenres = $state<GenreInfo[]>([]);
+  let allGenres = $state<GenreInfo[]>([]);
   let selectedIds = $state<Set<number>>(new Set());
   let rememberSelection = $state(true);
+  let showAllGenres = $state(false);
   let popupEl: HTMLDivElement | null = null;
   let popupStyle = $state('');
 
+  // Derived: which genres to display based on mode
+  let displayGenres = $derived(showAllGenres ? allGenres : parentGenres);
+
   // Subscribe to store changes for this context
   $effect(() => {
     const unsubscribe = subscribeGenre(() => {
       const state = getGenreFilterState(context);
-      genres = state.availableGenres;
+      parentGenres = state.availableGenres;
+      allGenres = state.allGenres;
       selectedIds = state.selectedGenreIds;
       rememberSelection = state.rememberSelection;
     }, context);
 
     // Initial load
     const state = getGenreFilterState(context);
-    genres = state.availableGenres;
+    parentGenres = state.availableGenres;
+    allGenres = state.allGenres;
     selectedIds = state.selectedGenreIds;
     rememberSelection = state.rememberSelection;
 
@@ -145,21 +152,35 @@
       </button>
     </div>
 
-    <div class="remember-row">
-      <span>Remember my selection</span>
-      <button
-        class="toggle-switch"
-        class:active={rememberSelection}
-        onclick={handleRememberToggle}
-        type="button"
-        aria-pressed={rememberSelection}
-      >
-        <span class="toggle-thumb"></span>
-      </button>
+    <div class="options-row">
+      <div class="option-item">
+        <span>Remember selection</span>
+        <button
+          class="toggle-switch"
+          class:active={rememberSelection}
+          onclick={handleRememberToggle}
+          type="button"
+          aria-pressed={rememberSelection}
+        >
+          <span class="toggle-thumb"></span>
+        </button>
+      </div>
+      <div class="option-item">
+        <span>Show all sub-genres</span>
+        <button
+          class="toggle-switch"
+          class:active={showAllGenres}
+          onclick={() => showAllGenres = !showAllGenres}
+          type="button"
+          aria-pressed={showAllGenres}
+        >
+          <span class="toggle-thumb"></span>
+        </button>
+      </div>
     </div>
 
     <div class="genres-grid">
-      {#each genres as genre (genre.id)}
+      {#each displayGenres as genre (genre.id)}
         <button
           class="genre-card"
           class:selected={selectedIds.has(genre.id)}
@@ -236,16 +257,23 @@
     color: var(--text-primary);
   }
 
-  .remember-row {
+  .options-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 16px;
+    gap: 24px;
     font-size: 12px;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--border-subtle);
   }
 
+  .option-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   .toggle-switch {
     width: 36px;
     height: 20px;
diff --git a/src/lib/components/views/FavoritesView.svelte b/src/lib/components/views/FavoritesView.svelte
index e1fe1386b..73b0cbbf2 100644
--- a/src/lib/components/views/FavoritesView.svelte
+++ b/src/lib/components/views/FavoritesView.svelte
@@ -19,7 +19,7 @@
   import GenreFilterButton from '../GenreFilterButton.svelte';
   import {
     hasActiveFilter as hasGenreFilter,
-    getSelectedGenreNames,
+    getFilterGenreNames,
     type GenreFilterContext
   } from '$lib/stores/genreFilterStore';
   import type { FavoritesPreferences, QobuzAlbum } from '$lib/types';
@@ -429,10 +429,11 @@
     let albums = favoriteAlbums;
 
     // Filter by genre (using favorites context)
-    const selectedGenreNames = getSelectedGenreNames(GENRE_CONTEXT);
-    if (selectedGenreNames.length > 0) {
+    // getFilterGenreNames returns selected genres + all children of selected parent genres
+    const filterGenreNames = getFilterGenreNames(GENRE_CONTEXT);
+    if (filterGenreNames.length > 0) {
       albums = albums.filter(a =>
-        a.genre && selectedGenreNames.some(genreName =>
+        a.genre && filterGenreNames.some(genreName =>
           a.genre!.name.toLowerCase().includes(genreName.toLowerCase())
         )
       );
diff --git a/src/lib/components/views/HomeView.svelte b/src/lib/components/views/HomeView.svelte
index c4401c9f1..5d36d1adf 100644
--- a/src/lib/components/views/HomeView.svelte
+++ b/src/lib/components/views/HomeView.svelte
@@ -19,7 +19,7 @@
   import {
     getSelectedGenreId,
     getSelectedGenreIds,
-    getSelectedGenreNames,
+    getFilterGenreNames,
     hasActiveFilter as hasGenreFilter
   } from '$lib/stores/genreFilterStore';
   import { setPlaybackContext } from '$lib/stores/playbackContextStore';
@@ -475,11 +475,12 @@
   }
 
   function filterAlbumsByGenre(albums: AlbumCardData[]): AlbumCardData[] {
-    const selectedGenreNames = getSelectedGenreNames();
-    if (selectedGenreNames.length === 0) return albums;
-    // Filter albums whose genre matches any of the selected genres (case-insensitive)
+    // getFilterGenreNames returns selected genres + all children of selected parent genres
+    const filterGenreNames = getFilterGenreNames();
+    if (filterGenreNames.length === 0) return albums;
+    // Filter albums whose genre matches any of the filter genres (case-insensitive)
     return albums.filter(album =>
-      selectedGenreNames.some(genreName =>
+      filterGenreNames.some(genreName =>
         album.genre.toLowerCase().includes(genreName.toLowerCase())
       )
     );
diff --git a/src/lib/stores/genreFilterStore.ts b/src/lib/stores/genreFilterStore.ts
index 9821016d9..e11556036 100644
--- a/src/lib/stores/genreFilterStore.ts
+++ b/src/lib/stores/genreFilterStore.ts
@@ -10,6 +10,7 @@ export interface GenreInfo {
   name: string;
   color?: string;
   slug?: string;
+  parentId?: number;
 }
 
 export type GenreFilterContext = 'home' | 'favorites';
@@ -21,7 +22,9 @@ interface ContextState {
 }
 
 interface GenreFilterState {
-  availableGenres: GenreInfo[];
+  parentGenres: GenreInfo[];
+  allGenres: GenreInfo[];
+  childrenByParent: Map<number, GenreInfo[]>;
   isLoading: boolean;
   contexts: Record<GenreFilterContext, ContextState>;
 }
@@ -35,7 +38,9 @@ const STORAGE_KEYS: Record<GenreFilterContext, string> = {
 let currentContext: GenreFilterContext = 'home';
 
 const state: GenreFilterState = {
-  availableGenres: [],
+  parentGenres: [],
+  allGenres: [],
+  childrenByParent: new Map(),
   isLoading: false,
   contexts: {
     home: {
@@ -97,7 +102,7 @@ export function getContext(): GenreFilterContext {
 }
 
 export async function loadGenres(): Promise<void> {
-  if (state.availableGenres.length > 0) return; // Already loaded
+  if (state.parentGenres.length > 0) return; // Already loaded
 
   state.isLoading = true;
   // Notify all contexts
@@ -109,11 +114,16 @@ export async function loadGenres(): Promise<void> {
     const parentGenres = await invoke<GenreInfo[]>('get_genres', {});
 
     // Fetch sub-genres for each parent in parallel
+    const childrenByParent = new Map<number, GenreInfo[]>();
     const subGenrePromises = parentGenres.map(async (parent) => {
       try {
         const children = await invoke<GenreInfo[]>('get_genres', { parentId: parent.id });
-        return children;
+        // Tag children with their parent ID
+        const taggedChildren = children.map(c => ({ ...c, parentId: parent.id }));
+        childrenByParent.set(parent.id, taggedChildren);
+        return taggedChildren;
       } catch {
+        childrenByParent.set(parent.id, []);
         return [];
       }
     });
@@ -122,22 +132,25 @@ export async function loadGenres(): Promise<void> {
     const allSubGenres = subGenreResults.flat();
 
     // Combine all genres and remove duplicates by ID
-    const allGenres = [...parentGenres, ...allSubGenres];
-    const uniqueGenres = Array.from(
-      new Map(allGenres.map(g => [g.id, g])).values()
+    const allGenresRaw = [...parentGenres, ...allSubGenres];
+    const allGenres = Array.from(
+      new Map(allGenresRaw.map(g => [g.id, g])).values()
     );
 
     // Sort alphabetically by name
-    uniqueGenres.sort((a, b) => a.name.localeCompare(b.name));
+    allGenres.sort((a, b) => a.name.localeCompare(b.name));
+    parentGenres.sort((a, b) => a.name.localeCompare(b.name));
 
-    state.availableGenres = uniqueGenres;
+    state.parentGenres = parentGenres;
+    state.allGenres = allGenres;
+    state.childrenByParent = childrenByParent;
 
     // Load saved selections for all contexts
     loadFromStorage('home');
     loadFromStorage('favorites');
 
     // Validate saved selections against available genres
-    const validIds = new Set(uniqueGenres.map((g) => g.id));
+    const validIds = new Set(allGenres.map((g) => g.id));
     for (const ctx of ['home', 'favorites'] as GenreFilterContext[]) {
       const ctxState = state.contexts[ctx];
       const validSelection = new Set<number>();
@@ -150,7 +163,9 @@ export async function loadGenres(): Promise<void> {
     }
   } catch (e) {
     console.error('Failed to load genres:', e);
-    state.availableGenres = [];
+    state.parentGenres = [];
+    state.allGenres = [];
+    state.childrenByParent = new Map();
   } finally {
     state.isLoading = false;
     notify('home');
@@ -161,7 +176,8 @@ export async function loadGenres(): Promise<void> {
 export function getGenreFilterState(context?: GenreFilterContext) {
   const ctx = getContextState(context);
   return {
-    availableGenres: state.availableGenres,
+    availableGenres: state.parentGenres,
+    allGenres: state.allGenres,
     selectedGenreIds: new Set(ctx.selectedGenreIds),
     isLoading: state.isLoading,
     rememberSelection: ctx.rememberSelection,
@@ -169,7 +185,15 @@ export function getGenreFilterState(context?: GenreFilterContext) {
 }
 
 export function getAvailableGenres(): GenreInfo[] {
-  return state.availableGenres;
+  return state.parentGenres;
+}
+
+export function getAllGenres(): GenreInfo[] {
+  return state.allGenres;
+}
+
+export function getChildGenres(parentId: number): GenreInfo[] {
+  return state.childrenByParent.get(parentId) || [];
 }
 
 export function getSelectedGenreIds(context?: GenreFilterContext): Set<number> {
@@ -184,17 +208,46 @@ export function getSelectedGenreId(context?: GenreFilterContext): number | undef
 export function getSelectedGenreName(context?: GenreFilterContext): string | undefined {
   const id = getSelectedGenreId(context);
   if (!id) return undefined;
-  const genre = state.availableGenres.find(g => g.id === id);
+  const genre = state.allGenres.find((g: GenreInfo) => g.id === id);
   return genre?.name;
 }
 
 export function getSelectedGenreNames(context?: GenreFilterContext): string[] {
   const ids = Array.from(getContextState(context).selectedGenreIds);
   return ids
-    .map(id => state.availableGenres.find(g => g.id === id)?.name)
+    .map(id => state.allGenres.find((g: GenreInfo) => g.id === id)?.name)
     .filter((name): name is string => !!name);
 }
 
+/**
+ * Get all genre names to filter by, including children of selected parent genres.
+ * Use this for client-side filtering to ensure albums with sub-genres are included.
+ */
+export function getFilterGenreNames(context?: GenreFilterContext): string[] {
+  const selectedIds = Array.from(getContextState(context).selectedGenreIds);
+  const names = new Set<string>();
+
+  for (const id of selectedIds) {
+    // Add the selected genre's name
+    const genre = state.allGenres.find((g: GenreInfo) => g.id === id);
+    if (genre?.name) {
+      names.add(genre.name);
+    }
+
+    // If it's a parent genre, also add all its children's names
+    const children = state.childrenByParent.get(id);
+    if (children) {
+      for (const child of children) {
+        if (child.name) {
+          names.add(child.name);
+        }
+      }
+    }
+  }
+
+  return Array.from(names);
+}
+
 export function isGenreSelected(genreId: number, context?: GenreFilterContext): boolean {
   return getContextState(context).selectedGenreIds.has(genreId);
 }