mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
move filter reset button to header
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user