reimplement genre detail route

src/renderer/features/albums/components/album-list-content.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useMemo } from 'react';
 
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
@@ -46,7 +46,7 @@ export const AlbumListContent = () => {
     );
 };
 
-export type OverrideAlbumListQuery = Omit<AlbumListQuery, 'limit' | 'startIndex'>;
+export type OverrideAlbumListQuery = Omit<Partial<AlbumListQuery>, 'limit' | 'startIndex'>;
 
 export const AlbumListView = ({
     display,
@@ -60,6 +60,18 @@ export const AlbumListView = ({
 
     const { query } = useAlbumListFilters();
 
+    const mergedQuery = useMemo(() => {
+        if (!overrideQuery) {
+            return query;
+        }
+
+        return {
+            ...overrideQuery,
+            sortBy: overrideQuery.sortBy || query.sortBy,
+            sortOrder: overrideQuery.sortOrder || query.sortOrder,
+        };
+    }, [query, overrideQuery]);
+
     switch (display) {
         case ListDisplayType.GRID: {
             switch (pagination) {
@@ -69,7 +81,7 @@ export const AlbumListView = ({
                             gap={grid.itemGap}
                             itemsPerPage={itemsPerPage}
                             itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                         />
                     );
@@ -80,7 +92,7 @@ export const AlbumListView = ({
                             gap={grid.itemGap}
                             itemsPerPage={itemsPerPage}
                             itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                         />
                     );
@@ -101,7 +113,7 @@ export const AlbumListView = ({
                             enableRowHoverHighlight={table.enableRowHoverHighlight}
                             enableVerticalBorders={table.enableVerticalBorders}
                             itemsPerPage={itemsPerPage}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                             size={table.size}
                         />
@@ -117,7 +129,7 @@ export const AlbumListView = ({
                             enableRowHoverHighlight={table.enableRowHoverHighlight}
                             enableVerticalBorders={table.enableVerticalBorders}
                             itemsPerPage={itemsPerPage}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                             size={table.size}
                         />

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,19 +1,51 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
+import { GenreTarget, useGenreTarget, useSettingsStoreActions } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
 import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
-export const AlbumListHeaderFilters = () => {
+export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget?: boolean }) => {
+    const { t } = useTranslation();
+    const target = useGenreTarget();
+    const { setGenreBehavior } = useSettingsStoreActions();
+
+    const choice = useMemo(() => {
+        return target === GenreTarget.ALBUM
+            ? t('entity.album_other', { postProcess: 'titleCase' })
+            : t('entity.track_other', { postProcess: 'titleCase' });
+    }, [target, t]);
+
+    const handleToggleGenreTarget = () => {
+        setGenreBehavior(target === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM);
+    };
+
     return (
         <Flex justify="space-between">
             <Group gap="sm" w="100%">
+                {toggleGenreTarget && (
+                    <>
+                        <Button
+                            leftSection={<Icon icon="arrowLeftRight" />}
+                            onClick={handleToggleGenreTarget}
+                            variant="subtle"
+                        >
+                            {choice}
+                        </Button>
+                        <Divider orientation="vertical" />
+                    </>
+                )}
                 <ListSortByDropdown
                     defaultSortByValue={AlbumListSort.NAME}
                     itemType={LibraryItem.ALBUM}

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -51,7 +51,6 @@ export const JellyfinAlbumFilters = ({
     const genreListQuery = useQuery(
         genresQueries.list({
             query: {
-                musicFolderId: query.musicFolderId,
                 sortBy: GenreListSort.NAME,
                 sortOrder: SortOrder.ASC,
                 startIndex: 0,
@@ -75,7 +74,6 @@ export const JellyfinAlbumFilters = ({
                 staleTime: 1000 * 60 * 1,
             },
             query: {
-                folder: query.musicFolderId,
                 type: LibraryItem.ALBUM,
             },
             serverId,
@@ -150,7 +148,7 @@ export const JellyfinAlbumFilters = ({
             label: artist.name,
             value: artist.id,
         }));
-    }, [albumArtistListQuery?.data?.items]);
+    }, [albumArtistListQuery.data?.items]);
 
     const handleAlbumArtistFilter = (e: null | string[]) => {
         setAlbumArtist(e ?? null);

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -9,7 +9,7 @@ import {
 } from '/@/renderer/components/select-with-invalid-data';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
-import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { useCurrentServer } from '/@/renderer/store';
 import { NDSongQueryFields } from '/@/shared/api/navidrome/navidrome-types';
@@ -22,12 +22,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
 import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
-import {
-    AlbumArtistListSort,
-    GenreListSort,
-    LibraryItem,
-    SortOrder,
-} from '/@/shared/types/domain-types';
+import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
 interface NavidromeAlbumFiltersProps {
@@ -52,20 +47,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
         setRecentlyPlayed,
     } = useAlbumListFilters();
 
-    const genreListQuery = useQuery(
-        genresQueries.list({
-            options: {
-                gcTime: 1000 * 60 * 2,
-                staleTime: 1000 * 60 * 1,
-            },
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId,
-        }),
-    );
+    const genreListQuery = useGenreList();
 
     const genreList = useMemo(() => {
         if (!genreListQuery?.data) return [];
@@ -152,7 +134,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
             label: artist.name,
             value: artist.id,
         }));
-    }, [albumArtistListQuery?.data?.items]);
+    }, [albumArtistListQuery.data?.items]);
 
     const handleTagFilter = debounce((tag: string, e: null | string) => {
         setCustom((prev) => ({

src/renderer/features/albums/components/subsonic-album-filters.tsx

@@ -105,7 +105,7 @@ export const SubsonicAlbumFilters = ({
     const handleGenresFilter = debounce((e: null | string) => {
         setGenreId(e ?? null);
         const updatedFilters: Partial<AlbumListFilter> = {
-            genres: e ? [e] : undefined,
+            genreIds: e ? [e] : undefined,
         };
         onFilterChange(updatedFilters as AlbumListFilter);
     }, 250);

src/renderer/features/genres/api/genres-api.ts

@@ -1,9 +1,15 @@
-import { queryOptions } from '@tanstack/react-query';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
 
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { GenreListQuery, ListCountQuery } from '/@/shared/types/domain-types';
+import { useCurrentServerId } from '/@/renderer/store';
+import {
+    GenreListQuery,
+    GenreListSort,
+    ListCountQuery,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 export const genresQueries = {
     list: (args: QueryHookArgs<GenreListQuery>) => {
@@ -37,3 +43,21 @@ export const genresQueries = {
         });
     },
 };
+
+export const useGenreList = () => {
+    const serverId = useCurrentServerId();
+
+    return useSuspenseQuery({
+        ...genresQueries.list({
+            query: {
+                limit: -1,
+                sortBy: GenreListSort.NAME,
+                sortOrder: SortOrder.ASC,
+                startIndex: 0,
+            },
+            serverId,
+        }),
+        gcTime: Infinity,
+        staleTime: Infinity,
+    });
+};

src/renderer/features/genres/components/genre-detail-content.tsx

@@ -0,0 +1,69 @@
+import { Suspense, useMemo } from 'react';
+import { useParams } from 'react-router';
+
+import { AlbumListView } from '/@/renderer/features/albums/components/album-list-content';
+import { SongListView } from '/@/renderer/features/songs/components/song-list-content';
+import { GenreTarget, useGenreTarget, useListSettings } from '/@/renderer/store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { ItemListKey } from '/@/shared/types/types';
+
+export const GenreDetailContent = () => {
+    const genreTarget = useGenreTarget();
+
+    switch (genreTarget) {
+        case GenreTarget.ALBUM:
+            return <GenreDetailContentAlbums />;
+        case GenreTarget.TRACK:
+            return <GenreDetailContentSongs />;
+        default:
+            return null;
+    }
+};
+
+function GenreDetailContentAlbums() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <AlbumListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}
+
+function GenreDetailContentSongs() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <SongListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}

src/renderer/features/genres/components/genre-detail-header.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
+import { useListContext } from '/@/renderer/context/list-context';
+import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
+import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
+import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
+import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
+import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
+import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
+import { GenreTarget, useGenreTarget } from '/@/renderer/store';
+import { Group } from '/@/shared/components/group/group';
+import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface GenreDetailHeaderProps {
+    title?: string;
+}
+
+export const GenreDetailHeader = ({ title }: GenreDetailHeaderProps) => {
+    const { t } = useTranslation();
+
+    const { itemCount } = useListContext();
+    const pageTitle = title || t('page.genreList.title', { postProcess: 'titleCase' });
+
+    const genreTarget = useGenreTarget();
+
+    return (
+        <Stack gap={0}>
+            <PageHeader>
+                <LibraryHeaderBar>
+                    <PlayButton />
+                    <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
+                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                        {itemCount}
+                    </LibraryHeaderBar.Badge>
+                </LibraryHeaderBar>
+                <Group>
+                    <ListSearchInput />
+                </Group>
+            </PageHeader>
+            <FilterBar>
+                {genreTarget === GenreTarget.ALBUM ? (
+                    <AlbumListHeaderFilters toggleGenreTarget />
+                ) : (
+                    <SongListHeaderFilters toggleGenreTarget />
+                )}
+            </FilterBar>
+        </Stack>
+    );
+};
+
+const PlayButton = () => {
+    const genreTarget = useGenreTarget();
+
+    switch (genreTarget) {
+        case GenreTarget.ALBUM:
+            return <AlbumPlayButton />;
+        case GenreTarget.TRACK:
+            return <SongPlayButton />;
+        default:
+            return null;
+    }
+};
+
+const AlbumPlayButton = () => {
+    const { query } = useAlbumListFilters();
+    const { id } = useListContext();
+
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            genreIds: [id],
+        };
+    }, [query, id]);
+
+    return (
+        <LibraryHeaderBar.PlayButton
+            itemType={LibraryItem.ALBUM}
+            listQuery={mergedQuery}
+            variant="filled"
+        />
+    );
+};
+
+const SongPlayButton = () => {
+    const { query } = useSongListFilters();
+    const { id } = useListContext();
+
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            genreIds: [id],
+        };
+    }, [query, id]);
+
+    return (
+        <LibraryHeaderBar.PlayButton
+            itemType={LibraryItem.SONG}
+            listQuery={mergedQuery}
+            variant="filled"
+        />
+    );
+};

src/renderer/features/genres/routes/genre-detail-route.tsx

@@ -0,0 +1,56 @@
+import { useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router';
+
+import { ListContext } from '/@/renderer/context/list-context';
+import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
+import { GenreDetailContent } from '/@/renderer/features/genres/components/genre-detail-content';
+import { GenreDetailHeader } from '/@/renderer/features/genres/components/genre-detail-header';
+import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+
+const GenreDetailRoute = () => {
+    const { genreId } = useParams() as { genreId: string };
+    const pageKey = 'genre';
+
+    const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+
+    const providerValue = useMemo(() => {
+        return {
+            id: genreId,
+            itemCount,
+            pageKey,
+            setItemCount,
+        };
+    }, [genreId, itemCount, pageKey, setItemCount]);
+
+    const { data: genres } = useGenreList();
+
+    const name = useMemo(() => {
+        return genres?.items.find((g) => g.id === genreId)?.name || '—';
+    }, [genreId, genres]);
+
+    const location = useLocation();
+    console.log('location', location.pathname);
+
+    return (
+        <AnimatedPage>
+            <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
+                    <GenreDetailHeader title={name} />
+                    <GenreDetailContent />
+                </LibraryContainer>
+            </ListContext.Provider>
+        </AnimatedPage>
+    );
+};
+
+const GenreDetailRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <GenreDetailRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default GenreDetailRouteWithBoundary;

src/renderer/features/home/components/featured-genres.tsx

@@ -99,7 +99,7 @@ export const FeaturedGenres = () => {
 
         return visibleGenres.map((genre: Genre) => {
             const { color, isLight } = stringToColor(genre.name);
-            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
+            const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: genre.id });
 
             return {
                 ...genre,

src/renderer/features/shared/components/list-search-input.tsx

@@ -5,6 +5,9 @@ export const ListSearchInput = () => {
     const { searchTerm, setSearchTerm } = useSearchTermFilter();
 
     return (
-        <SearchInput defaultValue={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
+        <SearchInput
+            defaultValue={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value || null)}
+        />
     );
 };

src/renderer/features/shared/hooks/use-search-term-filter.ts

@@ -9,10 +9,14 @@ export const useSearchTermFilter = (defaultValue?: string) => {
         defaultValue ? parseAsString.withDefault(defaultValue) : parseAsString,
     );
 
-    const debouncedSetSearchTerm = useDebouncedCallback(setSearchTerm, 300);
+    const handleSetSearchTerm = (value: null | string) => {
+        setSearchTerm(value === '' ? null : value);
+    };
+
+    const debouncedSetSearchTerm = useDebouncedCallback(handleSetSearchTerm, 300);
 
     return {
-        [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
+        [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm || undefined,
         setSearchTerm: debouncedSetSearchTerm,
     };
 };

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
-import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { genresQueries, useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { SongListFilter, useCurrentServer } from '/@/renderer/store';
@@ -29,20 +29,10 @@ export const JellyfinSongFilters = ({ customFilters }: JellyfinSongFiltersProps)
 
     // Despite the fact that getTags returns genres, it only returns genre names.
     // We prefer using IDs, hence the double query
-    const genreListQuery = useQuery(
-        genresQueries.list({
-            query: {
-                musicFolderId: query.musicFolderId,
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId: server.id,
-        }),
-    );
+    const genreListQuery = useGenreList();
 
     const genreList = useMemo(() => {
-        if (!genreListQuery?.data) return [];
+        if (!genreListQuery.data) return [];
         return genreListQuery.data.items.map((genre) => ({
             label: genre.name,
             value: genre.id,
@@ -52,7 +42,6 @@ export const JellyfinSongFilters = ({ customFilters }: JellyfinSongFiltersProps)
     const tagsQuery = useQuery(
         sharedQueries.tags({
             query: {
-                folder: query.musicFolderId,
                 type: LibraryItem.SONG,
             },
             serverId: server.id,

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -7,7 +7,7 @@ import {
     MultiSelectWithInvalidData,
     SelectWithInvalidData,
 } from '/@/renderer/components/select-with-invalid-data';
-import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { genresQueries, useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
 import {
     SongListFilter,
@@ -46,16 +46,7 @@ export const NavidromeSongFilters = ({
 
     const isGenrePage = customFilters?.genreIds !== undefined;
 
-    const genreListQuery = useQuery(
-        genresQueries.list({
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId,
-        }),
-    );
+    const genreListQuery = useGenreList();
 
     const tagsQuery = useQuery(
         sharedQueries.tags({

src/renderer/features/songs/components/song-list-content.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useMemo } from 'react';
 
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
@@ -43,7 +43,7 @@ export const SongListContent = () => {
     );
 };
 
-export type OverrideSongListQuery = Omit<SongListQuery, 'limit' | 'startIndex'>;
+export type OverrideSongListQuery = Omit<Partial<SongListQuery>, 'limit' | 'startIndex'>;
 
 export const SongListView = ({
     display,
@@ -57,6 +57,18 @@ export const SongListView = ({
 
     const { query } = useSongListFilters();
 
+    const mergedQuery = useMemo(() => {
+        if (!overrideQuery) {
+            return query;
+        }
+
+        return {
+            ...overrideQuery,
+            sortBy: overrideQuery.sortBy || query.sortBy,
+            sortOrder: overrideQuery.sortOrder || query.sortOrder,
+        };
+    }, [query, overrideQuery]);
+
     switch (display) {
         case ListDisplayType.GRID: {
             switch (pagination) {
@@ -66,7 +78,7 @@ export const SongListView = ({
                             gap={grid.itemGap}
                             itemsPerPage={itemsPerPage}
                             itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                         />
                     );
@@ -76,7 +88,7 @@ export const SongListView = ({
                             gap={grid.itemGap}
                             itemsPerPage={itemsPerPage}
                             itemsPerRow={grid.itemsPerRowEnabled ? grid.itemsPerRow : undefined}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                         />
                     );
@@ -96,7 +108,7 @@ export const SongListView = ({
                             enableRowHoverHighlight={table.enableRowHoverHighlight}
                             enableVerticalBorders={table.enableVerticalBorders}
                             itemsPerPage={itemsPerPage}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                             size={table.size}
                         />
@@ -111,7 +123,7 @@ export const SongListView = ({
                             enableRowHoverHighlight={table.enableRowHoverHighlight}
                             enableVerticalBorders={table.enableVerticalBorders}
                             itemsPerPage={itemsPerPage}
-                            query={overrideQuery ?? query}
+                            query={mergedQuery}
                             serverId={server.id}
                             size={table.size}
                         />

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -1,19 +1,51 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
+import { GenreTarget, useGenreTarget, useSettingsStoreActions } from '/@/renderer/store';
+import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
 import { LibraryItem, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
-export const SongListHeaderFilters = () => {
+export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget?: boolean }) => {
+    const { t } = useTranslation();
+    const target = useGenreTarget();
+    const { setGenreBehavior } = useSettingsStoreActions();
+
+    const handleToggleGenreTarget = () => {
+        setGenreBehavior(target === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM);
+    };
+
+    const choice = useMemo(() => {
+        return target === GenreTarget.ALBUM
+            ? t('entity.album_other', { postProcess: 'titleCase' })
+            : t('entity.track_other', { postProcess: 'titleCase' });
+    }, [target, t]);
+
     return (
         <Flex justify="space-between">
             <Group gap="sm" w="100%">
+                {toggleGenreTarget && (
+                    <>
+                        <Button
+                            leftSection={<Icon icon="arrowLeftRight" />}
+                            onClick={handleToggleGenreTarget}
+                            variant="subtle"
+                        >
+                            {choice}
+                        </Button>
+                        <Divider orientation="vertical" />
+                    </>
+                )}
                 <ListSortByDropdown
                     defaultSortByValue={SongListSort.NAME}
                     itemType={LibraryItem.SONG}

src/renderer/features/songs/components/subsonic-song-filters.tsx

@@ -1,43 +1,31 @@
-import { useQuery } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
-import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
+import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
-import { SongListFilter, useCurrentServer } from '/@/renderer/store';
+import { SongListFilter } from '/@/renderer/store';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
 import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
-import { GenreListSort, SortOrder } from '/@/shared/types/domain-types';
 
 interface SubsonicSongFiltersProps {
     customFilters?: Partial<SongListFilter>;
 }
 
 export const SubsonicSongFilters = ({ customFilters }: SubsonicSongFiltersProps) => {
-    const server = useCurrentServer();
     const { t } = useTranslation();
     const { query, setFavorite, setGenreId } = useSongListFilters();
 
     const isGenrePage = customFilters?.genreIds !== undefined;
 
-    const genreListQuery = useQuery(
-        genresQueries.list({
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId: server.id,
-        }),
-    );
+    const genreListQuery = useGenreList();
 
     const genreList = useMemo(() => {
-        if (!genreListQuery?.data) return [];
+        if (!genreListQuery.data) return [];
         return genreListQuery.data.items.map((genre) => ({
             label: genre.name,
             value: genre.id,

src/renderer/features/songs/routes/song-list-route.tsx

@@ -1,82 +1,31 @@
-import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router';
 
 import { ListContext } from '/@/renderer/context/list-context';
-import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
-import { useCurrentServer } from '/@/renderer/store';
-import { GenreListSort, SortOrder } from '/@/shared/types/domain-types';
 
 const SongListRoute = () => {
-    const server = useCurrentServer();
-    const [searchParams] = useSearchParams();
-    const { albumArtistId, genreId } = useParams();
-
-    const pageKey = albumArtistId ? `albumArtistSong` : 'song';
-
-    // const customFilters = useMemo(() => {
-    //     const value = {
-    //         ...(albumArtistId && { artistIds: [albumArtistId] }),
-    //         ...(genreId && {
-    //             genreIds: [genreId],
-    //         }),
-    //     };
-
-    //     if (isEmpty(value)) {
-    //         return undefined;
-    //     }
-
-    //     return value;
-    // }, [albumArtistId, genreId]);
-
-    const genreList = useQuery(
-        genresQueries.list({
-            options: {
-                enabled: !!genreId,
-                gcTime: 1000 * 60 * 60,
-            },
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId: server?.id,
-        }),
-    );
-
-    const genreTitle = useMemo(() => {
-        if (!genreList.data) return '';
-        const genre = genreList.data.items.find((g) => g.id === genreId);
-
-        if (!genre) return 'Unknown';
-
-        return genre?.name;
-    }, [genreId, genreList.data]);
+    const pageKey = 'song';
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
 
     const providerValue = useMemo(() => {
         return {
-            id: albumArtistId ?? genreId,
+            id: undefined,
             itemCount,
             pageKey,
             setItemCount,
         };
-    }, [albumArtistId, genreId, itemCount, pageKey, setItemCount]);
-
-    const artist = searchParams.get('artistName');
-    const title = artist ? artist : genreId ? genreTitle : undefined;
+    }, [itemCount, pageKey, setItemCount]);
 
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <LibraryContainer>
-                    <SongListHeader title={title} />
+                    <SongListHeader />
                     <SongListContent />
                 </LibraryContainer>
             </ListContext.Provider>