properly handle disableArtistFilter and disableGenreFilter props for all list filters

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

@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 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';
@@ -32,16 +31,16 @@ import {
 
 interface JellyfinAlbumFiltersProps {
     disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
 }
 
-export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFiltersProps) => {
+export const JellyfinAlbumFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: JellyfinAlbumFiltersProps) => {
     const { t } = useTranslation();
     const serverId = useCurrentServerId();
 
-    const { customFilters } = useListContext();
-
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     const {
         query,
         setAlbumArtist,
@@ -298,7 +297,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
                     />
                 </>
             )}
-            {!isGenrePage && (
+            {!disableGenreFilter && (
                 <>
                     <Divider my="md" />
                     <VirtualMultiSelect

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

@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
@@ -27,20 +26,21 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
 
 interface NavidromeAlbumFiltersProps {
     disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
 }
 
-export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFiltersProps) => {
+export const NavidromeAlbumFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: NavidromeAlbumFiltersProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const serverId = server.id;
 
-    const { customFilters } = useListContext();
     const artistSelectMode = useAppStore((state) => state.artistSelectMode);
     const genreSelectMode = useAppStore((state) => state.genreSelectMode);
     const { setArtistSelectMode, setGenreSelectMode } = useAppStoreActions();
 
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     const {
         query,
         setAlbumArtist,
@@ -327,7 +327,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
                     />
                 </>
             )}
-            {!isGenrePage && (
+            {!disableGenreFilter && (
                 <>
                     <Divider my="md" />
                     <VirtualMultiSelect

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

@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
@@ -26,17 +25,17 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
 
 interface SubsonicAlbumFiltersProps {
     disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
 }
 
-export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFiltersProps) => {
+export const SubsonicAlbumFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: SubsonicAlbumFiltersProps) => {
     const { t } = useTranslation();
 
     const serverId = useCurrentServerId();
 
-    const { customFilters } = useListContext();
-
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     const { query, setAlbumArtist, setFavorite, setGenreId, setMaxYear, setMinYear } =
         useAlbumListFilters();
 
@@ -262,7 +261,7 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
                     />
                 </>
             )}
-            {!isGenrePage && (
+            {!disableGenreFilter && (
                 <>
                     <Divider my="md" />
                     <VirtualMultiSelect

src/renderer/features/shared/components/list-filters.tsx

@@ -39,7 +39,7 @@ export const isFilterValueSet = (value: unknown): boolean => {
 export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const { isSidebarOpen, setIsSidebarOpen } = useListContext();
+    const { isSidebarOpen, pageKey, setIsSidebarOpen } = useListContext();
 
     const serverType = server.type;
 
@@ -53,6 +53,9 @@ export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
 
     const canPin = Boolean(setIsSidebarOpen);
 
+    const disableArtistFilter = pageKey === ItemListKey.ALBUM_ARTIST_ALBUM;
+    const disableGenreFilter = pageKey === ItemListKey.GENRE_ALBUM;
+
     return (
         <>
             <FilterButton isActive={isActive} onClick={handlers.toggle} />
@@ -81,7 +84,10 @@ export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
                     </Group>
                 }
             >
-                <FilterComponent />
+                <FilterComponent
+                    disableArtistFilter={disableArtistFilter}
+                    disableGenreFilter={disableGenreFilter}
+                />
             </Modal>
         </>
     );
@@ -91,11 +97,18 @@ export const ListFilters = ({ itemType }: ListFiltersProps) => {
     const server = useCurrentServer();
     const serverType = server.type;
     const FilterComponent = FILTERS[serverType][itemType];
+    const { pageKey } = useListContext();
+
+    const disableArtistFilter = pageKey === ItemListKey.ALBUM_ARTIST_ALBUM;
+    const disableGenreFilter = pageKey === ItemListKey.GENRE_ALBUM;
 
     return (
         <ComponentErrorBoundary>
             <Suspense fallback={<Spinner container />}>
-                <FilterComponent />
+                <FilterComponent
+                    disableArtistFilter={disableArtistFilter}
+                    disableGenreFilter={disableGenreFilter}
+                />
             </Suspense>
         </ComponentErrorBoundary>
     );

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

@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import {
@@ -27,19 +26,19 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
 
 interface JellyfinSongFiltersProps {
     disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
 }
 
-export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFiltersProps) => {
+export const JellyfinSongFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: JellyfinSongFiltersProps) => {
     const server = useCurrentServer();
     const serverId = server.id;
     const { t } = useTranslation();
     const { query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
         useSongListFilters();
 
-    const { customFilters } = useListContext();
-
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     // Despite the fact that getTags returns genres, it only returns genre names.
     // We prefer using IDs, hence the double query
     const genreListQuery = useGenreList();
@@ -280,7 +279,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
                     />
                 </>
             )}
-            {!isGenrePage && (
+            {!disableGenreFilter && (
                 <>
                     <Divider my="md" />
                     <VirtualMultiSelect

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

@@ -3,7 +3,6 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import {
@@ -24,17 +23,21 @@ import { Text } from '/@/shared/components/text/text';
 import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
 import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
 
-export const NavidromeSongFilters = () => {
+interface NavidromeSongFiltersProps {
+    disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
+}
+
+export const NavidromeSongFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: NavidromeSongFiltersProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const serverId = server.id;
     const { query, setArtistIds, setCustom, setFavorite, setGenreId, setMaxYear, setMinYear } =
         useSongListFilters();
 
-    const { customFilters } = useListContext();
-
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     const genreListQuery = useGenreList();
 
     const genreList = useMemo(() => {
@@ -257,18 +260,22 @@ export const NavidromeSongFilters = () => {
                     w="100%"
                 />
             </Stack>
-            <Divider my="md" />
+            {!disableArtistFilter && (
-            <VirtualMultiSelect
+                <>
-                displayCountType="song"
+                    <Divider my="md" />
-                height={300}
+                    <VirtualMultiSelect
-                label={artistFilterLabel}
+                        displayCountType="song"
-                onChange={handleArtistChange}
+                        height={300}
-                options={selectableAlbumArtists}
+                        label={artistFilterLabel}
-                RowComponent={ArtistMultiSelectRow}
+                        onChange={handleArtistChange}
-                singleSelect={artistSelectMode === 'single'}
+                        options={selectableAlbumArtists}
-                value={selectedArtistIds}
+                        RowComponent={ArtistMultiSelectRow}
-            />
+                        singleSelect={artistSelectMode === 'single'}
-            {!isGenrePage && (
+                        value={selectedArtistIds}
+                    />
+                </>
+            )}
+            {!disableGenreFilter && (
                 <VirtualMultiSelect
                     displayCountType="song"
                     height={220}

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

@@ -3,7 +3,6 @@ import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
-import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 import {
@@ -20,15 +19,19 @@ import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
 import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
 
-export const SubsonicSongFilters = () => {
+interface SubsonicSongFiltersProps {
+    disableArtistFilter?: boolean;
+    disableGenreFilter?: boolean;
+}
+
+export const SubsonicSongFilters = ({
+    disableArtistFilter,
+    disableGenreFilter,
+}: SubsonicSongFiltersProps) => {
     const { t } = useTranslation();
     const serverId = useCurrentServerId();
     const { query, setArtistIds, setFavorite, setGenreId } = useSongListFilters();
 
-    const { customFilters } = useListContext();
-
-    const isGenrePage = customFilters?.genreIds !== undefined;
-
     const genreListQuery = useGenreList();
 
     const genreList = useMemo(() => {
@@ -149,19 +152,23 @@ export const SubsonicSongFilters = () => {
                     />
                 </Group>
             ))}
-            <Divider my="md" />
+            {!disableArtistFilter && (
-            <VirtualMultiSelect
+                <>
-                disabled={isArtistDisabled}
+                    <Divider my="md" />
-                displayCountType="song"
+                    <VirtualMultiSelect
-                height={300}
+                        disabled={isArtistDisabled}
-                label={artistFilterLabel}
+                        displayCountType="song"
-                onChange={handleArtistFilter}
+                        height={300}
-                options={selectableAlbumArtists}
+                        label={artistFilterLabel}
-                RowComponent={ArtistMultiSelectRow}
+                        onChange={handleArtistFilter}
-                singleSelect={true}
+                        options={selectableAlbumArtists}
-                value={selectedArtistIds}
+                        RowComponent={ArtistMultiSelectRow}
-            />
+                        singleSelect={true}
-            {!isGenrePage && (
+                        value={selectedArtistIds}
+                    />
+                </>
+            )}
+            {!disableGenreFilter && (
                 <>
                     <Divider my="md" />
                     <VirtualMultiSelect