reimplement genre detail route

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -208,7 +208,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 Fields: 'Genres, DateCreated, ExternalUrls, Overview',
                 ImageTypeLimit: 1,
                 Limit: query.limit,
-                ParentId: query.musicFolderId,
+                ParentId: getMusicFolderId(query.musicFolderId),
                 Recursive: true,
                 SearchTerm: query.searchTerm,
                 SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
@@ -316,11 +316,11 @@ export const JellyfinController: InternalControllerEndpoint = {
             query: {
                 ...artistQuery,
                 Fields: 'People, Tags',
-                GenreIds: query.genres ? query.genres.join(',') : undefined,
+                GenreIds: query.genreIds ? query.genreIds.join(',') : undefined,
                 IncludeItemTypes: 'MusicAlbum',
                 IsFavorite: query.favorite,
                 Limit: query.limit,
-                ParentId: query.musicFolderId,
+                ParentId: getMusicFolderId(query.musicFolderId),
                 Recursive: true,
                 SearchTerm: query.searchTerm,
                 SortBy: albumListSortMap.jellyfin[query.sortBy] || 'SortName',
@@ -354,7 +354,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 Fields: 'Genres, DateCreated, ExternalUrls, Overview',
                 ImageTypeLimit: 1,
                 Limit: query.limit,
-                ParentId: query.musicFolderId,
+                ParentId: getMusicFolderId(query.musicFolderId),
                 Recursive: true,
                 SearchTerm: query.searchTerm,
                 SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
@@ -398,7 +398,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                 EnableTotalRecordCount: true,
                 Fields: 'ItemCounts',
                 Limit: query.limit,
-                ParentId: query?.musicFolderId,
+                ParentId: getMusicFolderId(query.musicFolderId),
                 Recursive: true,
                 SearchTerm: query?.searchTerm,
                 SortBy: genreListSortMap.jellyfin[query.sortBy] || 'SortName',
@@ -588,7 +588,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                           ? true
                           : undefined,
                 Limit: query.limit,
-                ParentId: query.musicFolderId,
+                ParentId: getMusicFolderId(query.musicFolderId),
                 Recursive: true,
                 SortBy: JFSongListSort.RANDOM,
                 SortOrder: JFSortOrder.ASC,
@@ -742,7 +742,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                         IncludeItemTypes: 'Audio',
                         IsFavorite: query.favorite,
                         Limit: query.limit,
-                        ParentId: query.musicFolderId,
+                        ParentId: getMusicFolderId(query.musicFolderId),
                         Recursive: true,
                         SearchTerm: query.searchTerm,
                         SortBy: songListSortMap.jellyfin[query.sortBy] || 'Album,SortName',
@@ -777,7 +777,7 @@ export const JellyfinController: InternalControllerEndpoint = {
                     IncludeItemTypes: 'Audio',
                     IsFavorite: query.favorite,
                     Limit: query.limit,
-                    ParentId: query.musicFolderId,
+                    ParentId: getMusicFolderId(query.musicFolderId),
                     Recursive: true,
                     SearchTerm: query.searchTerm,
                     SortBy: songListSortMap.jellyfin[query.sortBy] || 'Album,SortName',
@@ -1160,3 +1160,7 @@ export const JellyfinController: InternalControllerEndpoint = {
 //         totalRecordCount: res.body.TotalRecordCount,
 //     };
 // };
+
+function getMusicFolderId(musicFolderId?: string | string[]) {
+    return Array.isArray(musicFolderId) ? musicFolderId[0] : musicFolderId;
+}

src/renderer/api/navidrome/navidrome-controller.ts

@@ -284,8 +284,8 @@ export const NavidromeController: InternalControllerEndpoint = {
         const { apiClientProps, query } = args;
 
         const genres = hasFeature(apiClientProps.server, ServerFeature.BFR)
-            ? query.genres
+            ? query.genreIds
-            : query.genres?.[0];
+            : query.genreIds?.[0];
 
         const res = await ndApiClient(apiClientProps).getAlbumList({
             query: {

src/renderer/api/subsonic/subsonic-controller.ts

@@ -219,7 +219,7 @@ export const SubsonicController: InternalControllerEndpoint = {
 
         const res = await ssApiClient(apiClientProps).getArtists({
             query: {
-                musicFolderId: query.musicFolderId,
+                musicFolderId: getMusicFolderId(query.musicFolderId),
             },
         });
 
@@ -340,7 +340,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         if (query.favorite) {
             const res = await ssApiClient(apiClientProps).getStarred({
                 query: {
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                 },
             });
 
@@ -360,7 +360,7 @@ export const SubsonicController: InternalControllerEndpoint = {
             };
         }
 
-        if (query.genres?.length) {
+        if (query.genreIds?.length) {
             type = AlbumListSortType.BY_GENRE;
         }
 
@@ -397,8 +397,8 @@ export const SubsonicController: InternalControllerEndpoint = {
         const res = await ssApiClient(apiClientProps).getAlbumList2({
             query: {
                 fromYear,
-                genre: query.genres?.length ? query.genres[0] : undefined,
+                genre: query.genreIds?.length ? query.genreIds[0] : undefined,
-                musicFolderId: query.musicFolderId,
+                musicFolderId: getMusicFolderId(query.musicFolderId),
                 offset: query.startIndex,
                 size: query.limit,
                 toYear,
@@ -485,7 +485,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         if (query.favorite) {
             const res = await ssApiClient(apiClientProps).getStarred({
                 query: {
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                 },
             });
 
@@ -502,7 +502,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         let startIndex = 0;
         let totalRecordCount = 0;
 
-        if (query.genres?.length) {
+        if (query.genreIds?.length) {
             type = AlbumListSortType.BY_GENRE;
         }
 
@@ -530,8 +530,8 @@ export const SubsonicController: InternalControllerEndpoint = {
             const res = await ssApiClient(apiClientProps).getAlbumList2({
                 query: {
                     fromYear,
-                    genre: query.genres?.length ? query.genres[0] : undefined,
+                    genre: query.genreIds?.length ? query.genreIds[0] : undefined,
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                     offset: startIndex,
                     size: MAX_SUBSONIC_ITEMS,
                     toYear,
@@ -567,7 +567,7 @@ export const SubsonicController: InternalControllerEndpoint = {
 
         const res = await ssApiClient(apiClientProps).getArtists({
             query: {
-                musicFolderId: query.musicFolderId,
+                musicFolderId: getMusicFolderId(query.musicFolderId),
             },
         });
 
@@ -783,7 +783,7 @@ export const SubsonicController: InternalControllerEndpoint = {
             query: {
                 fromYear: query.minYear,
                 genre: query.genre,
-                musicFolderId: query.musicFolderId,
+                musicFolderId: getMusicFolderId(query.musicFolderId),
                 size: query.limit,
                 toYear: query.maxYear,
             },
@@ -938,7 +938,7 @@ export const SubsonicController: InternalControllerEndpoint = {
                 query: {
                     count: query.limit,
                     genre: query.genreIds[0],
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                     offset: query.startIndex,
                 },
             });
@@ -959,7 +959,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         if (query.favorite) {
             const res = await ssApiClient(apiClientProps).getStarred({
                 query: {
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                 },
             });
 
@@ -1127,7 +1127,7 @@ export const SubsonicController: InternalControllerEndpoint = {
                     query: {
                         count: 1,
                         genre: query.genreIds[0],
-                        musicFolderId: query.musicFolderId,
+                        musicFolderId: getMusicFolderId(query.musicFolderId),
                         offset: sectionIndex,
                     },
                 });
@@ -1152,7 +1152,7 @@ export const SubsonicController: InternalControllerEndpoint = {
                     query: {
                         count: MAX_SUBSONIC_ITEMS,
                         genre: query.genreIds[0],
-                        musicFolderId: query.musicFolderId,
+                        musicFolderId: getMusicFolderId(query.musicFolderId),
                         offset: startIndex,
                     },
                 });
@@ -1175,7 +1175,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         if (query.favorite) {
             const res = await ssApiClient(apiClientProps).getStarred({
                 query: {
-                    musicFolderId: query.musicFolderId,
+                    musicFolderId: getMusicFolderId(query.musicFolderId),
                 },
             });
 
@@ -1423,3 +1423,7 @@ export const SubsonicController: InternalControllerEndpoint = {
         return null;
     },
 };
+
+function getMusicFolderId(musicFolderId?: string | string[]) {
+    return Array.isArray(musicFolderId) ? musicFolderId[0] : musicFolderId;
+}

src/renderer/components/item-list/helpers/get-title-path.ts

@@ -12,7 +12,7 @@ export const getTitlePath = (itemType: LibraryItem, id: string) => {
         case LibraryItem.ARTIST:
             return generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, { artistId: id });
         case LibraryItem.GENRE:
-            return generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: id });
+            return generatePath(AppRoute.LIBRARY_GENRES_DETAIL, { genreId: id });
         case LibraryItem.PLAYLIST:
             return generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId: id });
         default:

src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx

@@ -26,7 +26,7 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
         if (!row) return [];
         return row.map((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, color, isLight, path };
         });
     }, [row]);

src/renderer/components/item-list/item-table-list/columns/genre-column.tsx

@@ -22,7 +22,7 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
     const genres = useMemo(() => {
         if (!row) return [];
         return row.map((genre) => {
-            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
+            const path = generatePath(AppRoute.LIBRARY_GENRES_DETAIL, {
                 genreId: genre.id,
             });
             return { ...genre, path };

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 {
+import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
-    AlbumArtistListSort,
-    GenreListSort,
-    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(
+    const genreListQuery = useGenreList();
-        genresQueries.list({
-            options: {
-                gcTime: 1000 * 60 * 2,
-                staleTime: 1000 * 60 * 1,
-            },
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId,
-        }),
-    );
 
     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(
+    const genreListQuery = useGenreList();
-        genresQueries.list({
-            query: {
-                musicFolderId: query.musicFolderId,
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId: server.id,
-        }),
-    );
 
     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(
+    const genreListQuery = useGenreList();
-        genresQueries.list({
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId,
-        }),
-    );
 
     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(
+    const genreListQuery = useGenreList();
-        genresQueries.list({
-            query: {
-                sortBy: GenreListSort.NAME,
-                sortOrder: SortOrder.ASC,
-                startIndex: 0,
-            },
-            serverId: server.id,
-        }),
-    );
 
     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 pageKey = 'song';
-    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 [itemCount, setItemCount] = useState<number | undefined>(undefined);
 
     const providerValue = useMemo(() => {
         return {
-            id: albumArtistId ?? genreId,
+            id: undefined,
             itemCount,
             pageKey,
             setItemCount,
         };
-    }, [albumArtistId, genreId, itemCount, pageKey, setItemCount]);
+    }, [itemCount, pageKey, setItemCount]);
-
-    const artist = searchParams.get('artistName');
-    const title = artist ? artist : genreId ? genreTitle : undefined;
 
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <LibraryContainer>
-                    <SongListHeader title={title} />
+                    <SongListHeader />
                     <SongListContent />
                 </LibraryContainer>
             </ListContext.Provider>

src/renderer/hooks/use-genre-route.ts

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { useLocation } from 'react-router';
 
 import { AppRoute } from '/@/renderer/router/routes';
-import { GenreTarget, useSettingsStore } from '/@/renderer/store';
 
 const ALBUM_REGEX = /albums$/;
 const SONG_REGEX = /songs$/;
@@ -12,18 +11,14 @@ export const useGenreRoute = () => {
     const matchAlbum = ALBUM_REGEX.test(pathname);
     const matchSongs = SONG_REGEX.test(pathname);
 
-    const baseState = useSettingsStore((state) =>
+    const baseState = AppRoute.LIBRARY_GENRES_DETAIL;
-        state.general.genreTarget === GenreTarget.ALBUM
-            ? AppRoute.LIBRARY_GENRES_ALBUMS
-            : AppRoute.LIBRARY_GENRES_SONGS,
-    );
 
     return useMemo(() => {
         if (matchAlbum) {
-            return AppRoute.LIBRARY_GENRES_ALBUMS;
+            return AppRoute.LIBRARY_GENRES_DETAIL;
         }
         if (matchSongs) {
-            return AppRoute.LIBRARY_GENRES_SONGS;
+            return AppRoute.LIBRARY_GENRES_DETAIL;
         }
         return baseState;
     }, [baseState, matchAlbum, matchSongs]);

src/renderer/router/app-router.tsx

@@ -63,6 +63,10 @@ const DummyAlbumDetailRoute = lazy(
 
 const GenreListRoute = lazy(() => import('/@/renderer/features/genres/routes/genre-list-route'));
 
+const GenreDetailRoute = lazy(
+    () => import('/@/renderer/features/genres/routes/genre-detail-route'),
+);
+
 const SearchRoute = lazy(() => import('/@/renderer/features/search/routes/search-route'));
 
 export const AppRouter = () => {
@@ -91,12 +95,8 @@ export const AppRouter = () => {
                                     <Route path={AppRoute.LIBRARY_GENRES}>
                                         <Route element={<GenreListRoute />} index />
                                         <Route
-                                            element={<AlbumListRoute />}
+                                            element={<GenreDetailRoute />}
-                                            path={AppRoute.LIBRARY_GENRES_ALBUMS}
+                                            path={AppRoute.LIBRARY_GENRES_DETAIL}
-                                        />
-                                        <Route
-                                            element={<SongListRoute />}
-                                            path={AppRoute.LIBRARY_GENRES_SONGS}
                                         />
                                     </Route>
                                     <Route

src/renderer/router/routes.ts

@@ -1,7 +1,6 @@
 export enum AppRoute {
     ACTION_REQUIRED = '/action-required',
     EXPLORE = '/explore',
-    LOGIN = '/login',
     FAKE_LIBRARY_ALBUM_DETAILS = '/library/albums/dummy/:albumId',
     HOME = '/',
     LIBRARY_ALBUM_ARTISTS = '/library/album-artists',
@@ -18,9 +17,9 @@ export enum AppRoute {
     LIBRARY_ARTISTS_DETAIL_TOP_SONGS = '/library/artists/:artistId/top-songs',
     LIBRARY_FOLDERS = '/library/folders',
     LIBRARY_GENRES = '/library/genres',
-    LIBRARY_GENRES_ALBUMS = '/library/genres/:genreId/albums',
+    LIBRARY_GENRES_DETAIL = '/library/genres/:genreId',
-    LIBRARY_GENRES_SONGS = '/library/genres/:genreId/songs',
     LIBRARY_SONGS = '/library/songs',
+    LOGIN = '/login',
     NOW_PLAYING = '/now-playing',
     PLAYING = '/playing',
     PLAYLISTS = '/playlists',

src/renderer/store/settings.store.ts

@@ -1321,3 +1321,5 @@ export const useListSettings = (type: ItemListKey) =>
 export const usePrimaryColor = () => useSettingsStore((store) => store.general.accent);
 
 export const usePlayerbarSlider = () => useSettingsStore((store) => store.general.playerbarSlider);
+
+export const useGenreTarget = () => useSettingsStore((store) => store.general.genreTarget);

src/shared/components/icon/icon.tsx

@@ -12,6 +12,7 @@ import {
     LuArrowDownToLine,
     LuArrowDownWideNarrow,
     LuArrowLeft,
+    LuArrowLeftRight,
     LuArrowLeftToLine,
     LuArrowRight,
     LuArrowRightToLine,
@@ -126,6 +127,7 @@ export const AppIcon = {
     arrowDownS: LuChevronDown,
     arrowDownToLine: LuArrowDownToLine,
     arrowLeft: LuArrowLeft,
+    arrowLeftRight: LuArrowLeftRight,
     arrowLeftS: LuChevronLeft,
     arrowLeftToLine: LuArrowLeftToLine,
     arrowRight: LuArrowRight,

src/shared/types/domain-types.ts

@@ -431,7 +431,7 @@ export interface AlbumListQuery extends AlbumListNavidromeQuery, BaseQuery<Album
     artistIds?: string[];
     compilation?: boolean;
     favorite?: boolean;
-    genres?: string[];
+    genreIds?: string[];
     limit?: number;
     maxYear?: number;
     minYear?: number;
@@ -765,7 +765,7 @@ export interface ArtistListQuery extends BaseQuery<ArtistListSort> {
 }
 
 // Artist List
-export type ArtistListResponse = BasePaginatedResponse<Artist[]>;
+export type ArtistListResponse = BasePaginatedResponse<AlbumArtist[]>;
 
 type ArtistListSortMap = {
     jellyfin: Record<ArtistListSort, JFArtistListSort | undefined>;