move filter reset button to header

This commit is contained in:
jeffvli
2026-01-18 14:04:30 -08:00
parent 5c06624f8c
commit dad3d10a83
9 changed files with 27 additions and 50 deletions
@@ -39,7 +39,7 @@ const AlbumListFilters = () => {
return (
<ListWithSidebarContainer.SidebarPortal>
<Stack h="100%">
<ListFiltersTitle />
<ListFiltersTitle itemType={LibraryItem.ALBUM} />
<ScrollArea>
<ListFilters itemType={LibraryItem.ALBUM} />
</ScrollArea>
@@ -14,7 +14,6 @@ import {
import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
import { useCurrentServerId } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -44,7 +43,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
const isGenrePage = customFilters?.genreIds !== undefined;
const {
clear,
query,
setAlbumArtist,
setCompilation,
@@ -338,10 +336,6 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
/>
</Group>
<TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -14,7 +14,6 @@ import {
import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
import { useCurrentServer } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -43,7 +42,6 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
const isGenrePage = customFilters?.genreIds !== undefined;
const {
clear,
query,
setAlbumArtist,
setCompilation,
@@ -354,10 +352,6 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
value={query.minYear ?? undefined}
/>
<TagFilters query={query} setCustom={setCustom} type={LibraryItem.ALBUM} />
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -13,7 +13,6 @@ import {
} from '/@/renderer/features/shared/components/multi-select-rows';
import { useCurrentServerId } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -38,7 +37,7 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
const isGenrePage = customFilters?.genreIds !== undefined;
const { clear, query, setAlbumArtist, setFavorite, setGenreId, setMaxYear, setMinYear } =
const { query, setAlbumArtist, setFavorite, setGenreId, setMaxYear, setMinYear } =
useAlbumListFilters();
const albumArtistListQuery = useSuspenseQuery(
@@ -300,10 +299,6 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
value={query.maxYear ?? undefined}
/>
</Group>
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -5,19 +5,23 @@ import { useListContext } from '/@/renderer/context/list-context';
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
import { SubsonicAlbumFilters } from '/@/renderer/features/albums/components/subsonic-album-filters';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { ComponentErrorBoundary } from '/@/renderer/features/shared/components/component-error-boundary';
import { FilterButton } from '/@/renderer/features/shared/components/filter-button';
import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
import { SubsonicSongFilters } from '/@/renderer/features/songs/components/subsonic-song-filters';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { useCurrentServer } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group';
import { Modal } from '/@/shared/components/modal/modal';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { Text } from '/@/shared/components/text/text';
import { useDisclosure } from '/@/shared/hooks/use-disclosure';
import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
interface ListFiltersProps {
isActive?: boolean;
@@ -97,9 +101,13 @@ export const ListFilters = ({ itemType }: ListFiltersProps) => {
);
};
export const ListFiltersTitle = () => {
interface ListFiltersTitleProps {
itemType: LibraryItem;
}
export const ListFiltersTitle = ({ itemType }: ListFiltersTitleProps) => {
const { t } = useTranslation();
const { setIsSidebarOpen } = useListContext();
const { pageKey, setIsSidebarOpen } = useListContext();
const handleUnpin = () => {
setIsSidebarOpen?.(false);
@@ -107,12 +115,21 @@ export const ListFiltersTitle = () => {
const canUnpin = Boolean(setIsSidebarOpen);
const albumListFilters = useAlbumListFilters(pageKey as ItemListKey);
const songListFilters = useSongListFilters(pageKey as ItemListKey);
const clear = itemType === LibraryItem.ALBUM ? albumListFilters.clear : songListFilters.clear;
return (
<Group justify="space-between" pb={0} pl="md" pr="md" pt="md">
<Text fw={500} size="xl">
{t('common.filters', { postProcess: 'sentenceCase' })}
</Text>
{canUnpin && <ActionIcon icon="unpin" onClick={handleUnpin} variant="subtle" />}
<Group gap="xs">
<Button onClick={clear} size="xs" variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
{canUnpin && <ActionIcon icon="unpin" onClick={handleUnpin} variant="subtle" />}
</Group>
</Group>
);
};
@@ -14,7 +14,6 @@ import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { useCurrentServer } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -34,7 +33,7 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
const server = useCurrentServer();
const serverId = server.id;
const { t } = useTranslation();
const { clear, query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
const { query, setArtistIds, setCustom, setFavorite, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
@@ -319,10 +318,6 @@ export const JellyfinSongFilters = ({ disableArtistFilter }: JellyfinSongFilters
/>
</Group>
<TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -14,7 +14,6 @@ import { TagFilters } from '/@/renderer/features/shared/components/tag-filter';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { useCurrentServer } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store/app.store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -29,16 +28,8 @@ export const NavidromeSongFilters = () => {
const { t } = useTranslation();
const server = useCurrentServer();
const serverId = server.id;
const {
clear,
query,
setArtistIds,
setCustom,
setFavorite,
setGenreId,
setMaxYear,
setMinYear,
} = useSongListFilters();
const { query, setArtistIds, setCustom, setFavorite, setGenreId, setMaxYear, setMinYear } =
useSongListFilters();
const { customFilters } = useListContext();
@@ -298,10 +289,6 @@ export const NavidromeSongFilters = () => {
value={query.minYear ?? undefined}
/>
<TagFilters query={query} setCustom={setCustom} type={LibraryItem.SONG} />
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};
@@ -45,7 +45,7 @@ const SongListFilters = () => {
return (
<ListWithSidebarContainer.SidebarPortal>
<Stack h="100%">
<ListFiltersTitle />
<ListFiltersTitle itemType={LibraryItem.SONG} />
<ScrollArea>
<ListFilters itemType={LibraryItem.SONG} />
</ScrollArea>
@@ -12,7 +12,6 @@ import {
} from '/@/renderer/features/shared/components/multi-select-rows';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { useCurrentServerId } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { VirtualMultiSelect } from '/@/shared/components/multi-select/virtual-multi-select';
@@ -24,7 +23,7 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
export const SubsonicSongFilters = () => {
const { t } = useTranslation();
const serverId = useCurrentServerId();
const { clear, query, setArtistIds, setFavorite, setGenreId } = useSongListFilters();
const { query, setArtistIds, setFavorite, setGenreId } = useSongListFilters();
const { customFilters } = useListContext();
@@ -178,10 +177,6 @@ export const SubsonicSongFilters = () => {
/>
</>
)}
<Divider my="md" />
<Button fullWidth onClick={clear} variant="subtle">
{t('common.reset', { postProcess: 'sentenceCase' })}
</Button>
</Stack>
);
};