move filter reset button to header

src/renderer/features/albums/components/album-list-content.tsx

@@ -39,7 +39,7 @@ const AlbumListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
             <Stack h="100%">
-                <ListFiltersTitle />
+                <ListFiltersTitle itemType={LibraryItem.ALBUM} />
                 <ScrollArea>
                     <ListFilters itemType={LibraryItem.ALBUM} />
                 </ScrollArea>

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

@@ -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>
     );
 };

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

@@ -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>
     );
 };

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

@@ -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>
     );
 };

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

@@ -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>
     );
 };

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

@@ -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>
     );
 };

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

@@ -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 {
+    const { query, setArtistIds, setCustom, setFavorite, setGenreId, setMaxYear, setMinYear } =
-        clear,
+        useSongListFilters();
-        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>
     );
 };

src/renderer/features/songs/components/song-list-content.tsx

@@ -45,7 +45,7 @@ const SongListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
             <Stack h="100%">
-                <ListFiltersTitle />
+                <ListFiltersTitle itemType={LibraryItem.SONG} />
                 <ScrollArea>
                     <ListFilters itemType={LibraryItem.SONG} />
                 </ScrollArea>

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

@@ -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>
     );
 };