fix album list filters

2026-05-07 04:20:12 +02:00 · 2025-11-30 15:32:18 -08:00
parent d75d1687a4
commit 6d87da2474
14 changed files with 441 additions and 174 deletions
@@ -299,6 +299,7 @@ export const NavidromeController: InternalControllerEndpoint = {
                genre_id: genres,
                library_id: getLibraryId(query.musicFolderId),
                name: query.searchTerm,
+                year: query.maxYear || query.minYear,
                ...query._custom,
                starred: query.favorite,
                ...excludeMissing(apiClientProps.server),
@@ -2,9 +2,12 @@ import { lazy, Suspense, useMemo } from 'react';

 import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
+import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
+import { ListWithSidebarContainer } from '/@/renderer/features/shared/components/list-with-sidebar-container';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
+import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Spinner } from '/@/shared/components/spinner/spinner';
-import { AlbumListQuery } from '/@/shared/types/domain-types';
+import { AlbumListQuery, LibraryItem } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, ListPaginationType } from '/@/shared/types/types';

 const AlbumListInfiniteGrid = lazy(() =>
@@ -37,16 +40,23 @@ export const AlbumListContent = () => {
    const { customFilters } = useListContext();

    return (
-        <Suspense fallback={<Spinner container />}>
-            <AlbumListView
-                display={display}
-                grid={grid}
-                itemsPerPage={itemsPerPage}
-                overrideQuery={customFilters}
-                pagination={pagination}
-                table={table}
-            />
-        </Suspense>
+        <>
+            <ListWithSidebarContainer.SidebarPortal>
+                <ScrollArea>
+                    <ListFilters itemType={LibraryItem.ALBUM} />
+                </ScrollArea>
+            </ListWithSidebarContainer.SidebarPortal>
+            <Suspense fallback={<Spinner container />}>
+                <AlbumListView
+                    display={display}
+                    grid={grid}
+                    itemsPerPage={itemsPerPage}
+                    overrideQuery={customFilters}
+                    pagination={pagination}
+                    table={table}
+                />
+            </Suspense>
+        </>
    );
 };

@@ -77,6 +87,10 @@ export const AlbumListView = ({
        };
    }, [query, overrideQuery]);

+    console.log('query', query);
+    console.log('overrideQuery', overrideQuery);
+    console.log('mergedQuery', mergedQuery);
+
    switch (display) {
        case ListDisplayType.GRID: {
            switch (pagination) {
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
-import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
+import { ListFiltersModal } 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';
@@ -65,7 +65,7 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                    defaultSortOrder={SortOrder.ASC}
                    listKey={ItemListKey.ALBUM}
                />
-                <ListFilters itemType={LibraryItem.ALBUM} />
+                <ListFiltersModal itemType={LibraryItem.ALBUM} />
                <ListRefreshButton listKey={ItemListKey.ALBUM} />
            </Group>
            <Group gap="sm" wrap="nowrap">
@@ -1,6 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo } from 'react';
+import { ChangeEvent, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

 import {
@@ -11,19 +10,17 @@ import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-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';
-import { hasFeature } from '/@/shared/api/utils';
+import { useCurrentServer, useCurrentServerId } from '/@/renderer/store';
+import { titleCase } from '/@/renderer/utils';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
-import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
+import { Spinner, SpinnerIcon } from '/@/shared/components/spinner/spinner';
 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, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
-import { ServerFeature } from '/@/shared/types/features-types';

 interface NavidromeAlbumFiltersProps {
    disableArtistFilter?: boolean;
@@ -38,7 +35,6 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
        query,
        setAlbumArtist,
        setCompilation,
-        setCustom,
        setFavorite,
        setGenreId,
        setHasRating,
@@ -57,60 +53,73 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
        }));
    }, [genreListQuery.data]);

-    const tagsQuery = useQuery(
-        sharedQueries.tags({
-            options: {
-                gcTime: 1000 * 60 * 2,
-                staleTime: 1000 * 60 * 1,
+    const yesNoUndefinedFilters = useMemo(
+        () => [
+            {
+                label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
+                onChange: (favorite?: boolean) => {
+                    setFavorite(favorite ?? null);
+                },
+                value: query.favorite,
            },
-            query: {
-                type: LibraryItem.ALBUM,
+            {
+                label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
+                onChange: (compilation?: boolean) => {
+                    setCompilation(compilation ?? null);
+                },
+                value: query.compilation,
            },
-            serverId,
-        }),
+        ],
+        [t, query.favorite, query.compilation, setFavorite, setCompilation],
    );

-    const yesNoUndefinedFilters = [
-        {
-            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (favorite?: boolean) => {
-                setFavorite(favorite ?? null);
+    const toggleFilters = useMemo(
+        () => [
+            {
+                label: t('filter.isRated', { postProcess: 'sentenceCase' }),
+                onChange: (e: ChangeEvent<HTMLInputElement>) => {
+                    const hasRating = e.currentTarget.checked ? true : undefined;
+                    setHasRating(hasRating ?? null);
+                },
+                value: query.hasRating,
            },
-            value: query.favorite,
-        },
-        {
-            label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
-            onChange: (compilation?: boolean) => {
-                setCompilation(compilation ?? null);
+            {
+                label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
+                onChange: (e: ChangeEvent<HTMLInputElement>) => {
+                    const recentlyPlayed = e.currentTarget.checked ? true : undefined;
+                    setRecentlyPlayed(recentlyPlayed ?? null);
+                },
+                value: query.recentlyPlayed,
            },
-            value: query.compilation,
-        },
-    ];
+        ],
+        [t, query.hasRating, query.recentlyPlayed, setHasRating, setRecentlyPlayed],
+    );

-    const toggleFilters = [
-        {
-            label: t('filter.isRated', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const hasRating = e.currentTarget.checked ? true : undefined;
-                setHasRating(hasRating ?? null);
-            },
-            value: query.hasRating,
-        },
-        {
-            label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const recentlyPlayed = e.currentTarget.checked ? true : undefined;
-                setRecentlyPlayed(recentlyPlayed ?? null);
-            },
-            value: query.recentlyPlayed,
-        },
-    ];
+    const handleYearFilter = useMemo(
+        () => (e: number | string) => {
+            // Handle empty string, null, undefined, or invalid numbers as clearing

-    const handleYearFilter = debounce((e: number | string) => {
-        const year = e === '' ? undefined : (e as number);
-        setMinYear(year ?? null);
-        setMaxYear(year ?? null);
-    }, 500);
+            if (e === '' || e === null || e === undefined) {
+                console.log('clearing year filters');
+                setMinYear(null);
+                setMaxYear(null);
+                return;
+            }
+
+            const year = typeof e === 'number' ? e : Number(e);
+            // If it's a valid number, set it; otherwise clear
+            if (!isNaN(year) && isFinite(year) && year > 0) {
+                console.log('setting year filters', year);
+                setMinYear(year);
+                setMaxYear(year);
+            } else {
+                console.log('clearing year filters', year);
+                setMinYear(null);
+                setMaxYear(null);
+            }
+        },
+        [setMinYear, setMaxYear],
+    );

    const albumArtistListQuery = useQuery(
        artistsQueries.albumArtistList({
@@ -136,26 +145,15 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
        }));
    }, [albumArtistListQuery.data?.items]);

-    const handleTagFilter = debounce((tag: string, e: null | string) => {
-        setCustom((prev) => ({
-            ...prev,
-            [tag]: e || undefined,
-        }));
-    }, 250);
-
-    const hasBFR = hasFeature(server, ServerFeature.BFR);
-
    return (
        <Stack p="0.8rem">
            {yesNoUndefinedFilters.map((filter) => (
-                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
-                    <Text>{filter.label}</Text>
-                    <YesNoSelect
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value ?? undefined}
-                    />
-                </Group>
+                <YesNoSelect
+                    key={`nd-filter-${filter.label}`}
+                    label={filter.label}
+                    onChange={filter.onChange}
+                    value={filter.value ?? undefined}
+                />
            ))}
            {toggleFilters.map((filter) => (
                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
@@ -164,67 +162,153 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
                </Group>
            ))}
            <Divider my="0.5rem" />
-            <Group grow>
-                <NumberInput
-                    defaultValue={query.minYear ?? undefined}
-                    hideControls={false}
-                    label={t('common.year', { postProcess: 'titleCase' })}
-                    max={5000}
-                    min={0}
-                    onChange={(e) => handleYearFilter(e)}
-                />
-                <SelectWithInvalidData
-                    clearable
-                    data={genreList}
-                    defaultValue={query.genreId ? query.genreId[0] : undefined}
-                    label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
-                    onChange={(e) => (e ? setGenreId([e]) : undefined)}
-                    searchable
-                />
-            </Group>
-            {hasBFR && (
-                <Group grow>
-                    <MultiSelectWithInvalidData
-                        clearable
-                        data={genreList}
-                        defaultValue={query.genreId}
-                        label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
-                        onChange={(e) => (e ? setGenreId(e) : undefined)}
-                        searchable
-                    />
-                </Group>
-            )}
-            <Group grow>
-                <SelectWithInvalidData
-                    clearable
-                    data={selectableAlbumArtists}
-                    defaultValue={query.artistIds ? query.artistIds[0] : undefined}
-                    disabled={disableArtistFilter}
-                    label={t('entity.artist', { count: 1, postProcess: 'titleCase' })}
-                    limit={300}
-                    onChange={(e) => setAlbumArtist(e ? [e] : null)}
-                    rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
-                    searchable
-                />
-            </Group>
-            {tagsQuery.data?.enumTags?.length &&
-                tagsQuery.data.enumTags.length > 0 &&
-                tagsQuery.data.enumTags.map((tag) => (
-                    <Group grow key={tag.name}>
-                        <SelectWithInvalidData
-                            clearable
-                            data={tag.options}
-                            defaultValue={query._custom?.[tag.name] as string | undefined}
-                            label={
-                                NDSongQueryFields.find((i) => i.value === tag.name)?.label ||
-                                tag.name
-                            }
-                            onChange={(value) => handleTagFilter(tag.name, value)}
-                            searchable
-                            width={150}
-                        />
-                    </Group>
-                ))}
+            <NumberInput
+                defaultValue={query.minYear ?? undefined}
+                hideControls={false}
+                label={t('common.year', { postProcess: 'titleCase' })}
+                max={5000}
+                min={0}
+                onBlur={(e) => handleYearFilter(e.currentTarget.value)}
+            />
+            <MultiSelectWithInvalidData
+                clearable
+                data={genreList}
+                defaultValue={query.genreIds}
+                label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
+                onChange={(e) => (e && e.length > 0 ? setGenreId(e) : setGenreId(null))}
+                searchable
+            />
+            <SelectWithInvalidData
+                clearable
+                data={selectableAlbumArtists}
+                defaultValue={query.artistIds ? query.artistIds[0] : undefined}
+                disabled={disableArtistFilter}
+                label={t('entity.artist', { count: 1, postProcess: 'titleCase' })}
+                limit={300}
+                onChange={(e) => setAlbumArtist(e ? [e] : null)}
+                rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
+                searchable
+            />
+            <TagFilters />
        </Stack>
    );
 };
+
+interface TagFilterItemProps {
+    label: string;
+    onChange: (value: null | string) => void;
+    options: string[];
+    tagValue: string;
+    value: string | undefined;
+}
+
+const TagFilterItem = memo(
+    ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
+        return (
+            <SelectWithInvalidData
+                clearable
+                data={options}
+                defaultValue={value}
+                key={tagValue}
+                label={label}
+                limit={100}
+                onChange={onChange}
+                searchable
+            />
+        );
+    },
+    (prevProps, nextProps) => {
+        // Only re-render if the specific tag's value or options change
+        // We don't compare onChange since it's a stable wrapper around handleTagFilter
+        // and handleTagFilter itself is memoized and stable
+        return (
+            prevProps.tagValue === nextProps.tagValue &&
+            prevProps.label === nextProps.label &&
+            prevProps.value === nextProps.value &&
+            prevProps.options === nextProps.options
+        );
+    },
+);
+
+TagFilterItem.displayName = 'TagFilterItem';
+
+const TagFilters = () => {
+    const { query, setCustom } = useAlbumListFilters();
+
+    const serverId = useCurrentServerId();
+
+    const tagsQuery = useQuery(
+        sharedQueries.tags({
+            options: {
+                gcTime: 1000 * 60 * 60,
+                staleTime: 1000 * 60 * 60,
+            },
+            query: {
+                type: LibraryItem.ALBUM,
+            },
+            serverId,
+        }),
+    );
+
+    const handleTagFilter = useMemo(
+        () => (tag: string, e: null | string) => {
+            setCustom((prev) => {
+                if (!prev) {
+                    return e ? { [tag]: e } : null;
+                }
+
+                if (e === null) {
+                    const rest = Object.fromEntries(
+                        Object.entries(prev).filter(([key]) => key !== tag),
+                    );
+
+                    return Object.keys(rest).length === 0 ? null : rest;
+                }
+
+                return {
+                    ...prev,
+                    [tag]: e,
+                };
+            });
+        },
+        [setCustom],
+    );
+
+    const tags = useMemo(() => {
+        return (
+            tagsQuery.data?.enumTags?.map((tag) => ({
+                label: titleCase(tag.name),
+                options: tag.options,
+                value: tag.name,
+            })) || []
+        );
+    }, [tagsQuery.data?.enumTags]);
+
+    // Create stable onChange handlers for each tag using useMemo
+    const tagHandlers = useMemo(() => {
+        const handlers = new Map<string, (value: null | string) => void>();
+        tags.forEach((tag) => {
+            handlers.set(tag.value, (value: null | string) => handleTagFilter(tag.value, value));
+        });
+        return handlers;
+    }, [tags, handleTagFilter]);
+
+    if (tagsQuery.isLoading) {
+        return <Spinner container />;
+    }
+
+    return (
+        <>
+            {tags.map((tag) => (
+                <TagFilterItem
+                    key={tag.value}
+                    label={tag.label}
+                    onChange={tagHandlers.get(tag.value)!}
+                    options={tag.options}
+                    tagValue={tag.value}
+                    value={query._custom?.[tag.value] as string | undefined}
+                />
+            ))}
+        </>
+    );
+};
@@ -6,7 +6,7 @@ import {
    parseAsString,
    useQueryState,
 } from 'nuqs';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';

 import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
 import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
@@ -86,20 +86,36 @@ export const useAlbumListFilters = () => {
        setSortOrder,
    ]);

-    const query = {
-        [FILTER_KEYS.ALBUM._CUSTOM]: custom ?? undefined,
-        [FILTER_KEYS.ALBUM.ARTIST_IDS]: albumArtist ?? undefined,
-        [FILTER_KEYS.ALBUM.COMPILATION]: compilation ?? undefined,
-        [FILTER_KEYS.ALBUM.FAVORITE]: favorite ?? undefined,
-        [FILTER_KEYS.ALBUM.GENRE_ID]: genreId ?? undefined,
-        [FILTER_KEYS.ALBUM.HAS_RATING]: hasRating ?? undefined,
-        [FILTER_KEYS.ALBUM.MAX_YEAR]: maxYear ?? undefined,
-        [FILTER_KEYS.ALBUM.MIN_YEAR]: minYear ?? undefined,
-        [FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: recentlyPlayed ?? undefined,
-        [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
-        [FILTER_KEYS.SHARED.SORT_BY]: sortBy ?? undefined,
-        [FILTER_KEYS.SHARED.SORT_ORDER]: sortOrder ?? undefined,
-    };
+    const query = useMemo(
+        () => ({
+            [FILTER_KEYS.ALBUM._CUSTOM]: custom ?? undefined,
+            [FILTER_KEYS.ALBUM.ARTIST_IDS]: albumArtist ?? undefined,
+            [FILTER_KEYS.ALBUM.COMPILATION]: compilation ?? undefined,
+            [FILTER_KEYS.ALBUM.FAVORITE]: favorite ?? undefined,
+            [FILTER_KEYS.ALBUM.GENRE_ID]: genreId ?? undefined,
+            [FILTER_KEYS.ALBUM.HAS_RATING]: hasRating ?? undefined,
+            [FILTER_KEYS.ALBUM.MAX_YEAR]: maxYear ?? undefined,
+            [FILTER_KEYS.ALBUM.MIN_YEAR]: minYear ?? undefined,
+            [FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: recentlyPlayed ?? undefined,
+            [FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
+            [FILTER_KEYS.SHARED.SORT_BY]: sortBy ?? undefined,
+            [FILTER_KEYS.SHARED.SORT_ORDER]: sortOrder ?? undefined,
+        }),
+        [
+            custom,
+            albumArtist,
+            compilation,
+            favorite,
+            genreId,
+            hasRating,
+            maxYear,
+            minYear,
+            recentlyPlayed,
+            searchTerm,
+            sortBy,
+            sortOrder,
+        ],
+    );

    return {
        clear,
@@ -5,6 +5,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { ListWithSidebarContainer } from '/@/renderer/features/shared/components/list-with-sidebar-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AlbumListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
@@ -28,10 +29,19 @@ const AlbumListRoute = () => {
    const [itemCount, setItemCount] = useState<number | undefined>(undefined);

    const customFilters: Partial<AlbumListQuery> = useMemo(() => {
-        return {
-            artistIds: albumArtistId ? [albumArtistId] : undefined,
-            genreIds: genreId ? [genreId] : undefined,
-        };
+        if (albumArtistId) {
+            return {
+                artistIds: [albumArtistId],
+            };
+        }
+
+        if (genreId) {
+            return {
+                genreIds: [genreId],
+            };
+        }
+
+        return {};
    }, [albumArtistId, genreId]);

    const providerValue = useMemo(() => {
@@ -48,7 +58,9 @@ const AlbumListRoute = () => {
        <AnimatedPage>
            <ListContext.Provider value={providerValue}>
                <AlbumListHeader />
-                <AlbumListContent />
+                <ListWithSidebarContainer>
+                    <AlbumListContent />
+                </ListWithSidebarContainer>
            </ListContext.Provider>
        </AnimatedPage>
    );
@@ -1,6 +1,6 @@
 import { GENRE_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 { ListFiltersModal } 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';
@@ -24,7 +24,7 @@ export const GenreListHeaderFilters = () => {
                    defaultSortOrder={SortOrder.ASC}
                    listKey={ItemListKey.GENRE}
                />
-                <ListFilters itemType={LibraryItem.GENRE} />
+                <ListFiltersModal itemType={LibraryItem.GENRE} />
                <ListRefreshButton listKey={ItemListKey.GENRE} />
            </Group>
            <Group gap="sm" wrap="nowrap">
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
-import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
+import { ListFiltersModal } 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';
@@ -39,7 +39,7 @@ export const PlaylistListHeaderFilters = () => {
                    defaultSortOrder={SortOrder.ASC}
                    listKey={ItemListKey.PLAYLIST}
                />
-                <ListFilters itemType={LibraryItem.PLAYLIST} />
+                <ListFiltersModal itemType={LibraryItem.PLAYLIST} />
                <ListRefreshButton listKey={ItemListKey.PLAYLIST} />
            </Group>
            <Group gap="sm" wrap="nowrap">
@@ -17,7 +17,7 @@ interface ListFiltersProps {
    itemType: LibraryItem;
 }

-export const ListFilters = ({ isActive, itemType }: ListFiltersProps) => {
+export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
    const { t } = useTranslation();
    const server = useCurrentServer();

@@ -41,6 +41,14 @@ export const ListFilters = ({ isActive, itemType }: ListFiltersProps) => {
    );
 };

+export const ListFilters = ({ itemType }: ListFiltersProps) => {
+    const server = useCurrentServer();
+    const serverType = server.type;
+    const FilterComponent = FILTERS[serverType][itemType];
+
+    return <FilterComponent />;
+};
+
 const FILTERS = {
    [ServerType.JELLYFIN]: {
        [LibraryItem.ALBUM]: JellyfinAlbumFilters,
@@ -0,0 +1,31 @@
+.container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    container-type: inline-size;
+    overflow: hidden;
+}
+
+.sidebar-container {
+    position: relative;
+    flex-shrink: 0;
+    width: 300px;
+    min-width: 300px;
+    max-width: 300px;
+    height: 100%;
+    overflow: hidden;
+    border-right: 1px solid var(--theme-colors-border);
+}
+
+.content-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
+}
@@ -0,0 +1,100 @@
+import { motion } from 'motion/react';
+import { createContext, ReactNode, useContext, useMemo, useRef } from 'react';
+
+import styles from './list-with-sidebar-container.module.css';
+
+import { useContainerQuery } from '/@/renderer/hooks';
+import { animationProps } from '/@/shared/components/animations/animation-props';
+import { Portal } from '/@/shared/components/portal/portal';
+
+interface ListWithSidebarContainerContextValue {
+    showSidebar: boolean;
+    sidebarRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const ListWithSidebarContainerContext = createContext<ListWithSidebarContainerContextValue | null>(
+    null,
+);
+
+interface ListWithSidebarContainerProps {
+    children: ReactNode;
+    sidebarBreakpoint?: number;
+}
+
+interface SidebarPortalProps {
+    children: ReactNode;
+}
+
+interface SidebarProps {
+    children: ReactNode;
+}
+
+function Sidebar({ children }: SidebarProps) {
+    const context = useContext(ListWithSidebarContainerContext);
+
+    if (!context) {
+        throw new Error('Sidebar must be used within ResponsiveAnimatedPage');
+    }
+
+    if (!context.showSidebar || !context.sidebarRef?.current) {
+        return null;
+    }
+
+    return (
+        <Portal target={context.sidebarRef.current}>
+            <motion.div {...animationProps.slideInLeft} style={{ height: '100%', width: '100%' }}>
+                {children}
+            </motion.div>
+        </Portal>
+    );
+}
+
+function SidebarPortal({ children }: SidebarPortalProps) {
+    const context = useContext(ListWithSidebarContainerContext);
+
+    if (!context) {
+        throw new Error('SidebarPortal must be used within ResponsiveAnimatedPage');
+    }
+
+    if (!context.showSidebar || !context.sidebarRef?.current) {
+        return null;
+    }
+
+    return <Portal target={context.sidebarRef.current}>{children}</Portal>;
+}
+
+export const ListWithSidebarContainer = ({
+    children,
+    sidebarBreakpoint,
+}: ListWithSidebarContainerProps) => {
+    const sidebarRef = useRef<HTMLDivElement>(null);
+    const { isLg, ref: containerQueryRef } = useContainerQuery({
+        lg: sidebarBreakpoint,
+    });
+
+    const showSidebar = isLg;
+
+    const contextValue = useMemo(
+        () => ({
+            showSidebar,
+            sidebarRef,
+        }),
+        [showSidebar],
+    );
+
+    return (
+        <ListWithSidebarContainerContext.Provider value={contextValue}>
+            <div className={styles.container} ref={containerQueryRef}>
+                <div
+                    className={styles.sidebarContainer}
+                    ref={sidebarRef}
+                    style={{ display: showSidebar ? 'block' : 'none' }}
+                />
+                <div className={styles.contentContainer}>{children}</div>
+            </div>
+        </ListWithSidebarContainerContext.Provider>
+    );
+};
+
+ListWithSidebarContainer.Sidebar = Sidebar;
+ListWithSidebarContainer.SidebarPortal = SidebarPortal;
@@ -40,7 +40,7 @@ enum AlbumFilterKeys {
    ARTIST_IDS = 'artistIds',
    COMPILATION = 'compilation',
    FAVORITE = 'favorite',
-    GENRE_ID = 'genreId',
+    GENRE_ID = 'genreIds',
    HAS_RATING = 'hasRating',
    MAX_YEAR = 'maxYear',
    MIN_YEAR = 'minYear',
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
-import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
+import { ListFiltersModal } 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';
@@ -65,7 +65,7 @@ export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget
                    defaultSortOrder={SortOrder.ASC}
                    listKey={ItemListKey.SONG}
                />
-                <ListFilters itemType={LibraryItem.SONG} />
+                <ListFiltersModal itemType={LibraryItem.SONG} />
                <ListRefreshButton listKey={ItemListKey.SONG} />
            </Group>
            <Group gap="sm" wrap="nowrap">
@@ -31,7 +31,8 @@ export const Select = ({
                section: styles.section,
                ...classNames,
            }}
-            clearable={false}
+            clearable={clearable}
+            spellCheck={false}
            style={{ maxWidth, width }}
            variant={variant}
            withCheckIcon={false}