allow user to unpin list sidebar

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

@@ -1,12 +1,13 @@
 import { lazy, Suspense, useMemo } from 'react';
 
 import { useListContext } from '/@/renderer/context/list-context';
-import { ListFilters } from '/@/renderer/features/shared/components/list-filters';
+import { ListFilters, ListFiltersTitle } from '/@/renderer/features/shared/components/list-filters';
 import { ListWithSidebarContainer } from '/@/renderer/features/shared/components/list-with-sidebar-container';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Spinner } from '/@/shared/components/spinner/spinner';
+import { Stack } from '/@/shared/components/stack/stack';
 import { LibraryItem, SongListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, ListPaginationType } from '/@/shared/types/types';
 
@@ -43,9 +44,12 @@ export const SongListContent = () => {
 const SongListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
-            <ScrollArea>
-                <ListFilters itemType={LibraryItem.SONG} />
-            </ScrollArea>
+            <Stack h="100%">
+                <ListFiltersTitle />
+                <ScrollArea>
+                    <ListFilters itemType={LibraryItem.SONG} />
+                </ScrollArea>
+            </Stack>
         </ListWithSidebarContainer.SidebarPortal>
     );
 };

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -6,10 +6,14 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { ListDisplayTypeToggleButton } from '/@/renderer/features/shared/components/list-display-type-toggle-button';
-import { ListFiltersModal } from '/@/renderer/features/shared/components/list-filters';
+import {
+    isFilterValueSet,
+    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';
+import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { GenreTarget, useGenreTarget, useSettingsStoreActions } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
@@ -44,6 +48,20 @@ export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget
             : t('entity.track_other', { postProcess: 'titleCase' });
     }, [target, t]);
 
+    const hasActiveFilters = useMemo(() => {
+        const query = songFilters.query;
+        return Boolean(
+            isFilterValueSet(query[FILTER_KEYS.SONG._CUSTOM]) ||
+                isFilterValueSet(query[FILTER_KEYS.SONG.ALBUM_IDS]) ||
+                isFilterValueSet(query[FILTER_KEYS.SONG.ARTIST_IDS]) ||
+                query[FILTER_KEYS.SONG.FAVORITE] !== undefined ||
+                isFilterValueSet(query[FILTER_KEYS.SONG.GENRE_ID]) ||
+                isFilterValueSet(query[FILTER_KEYS.SONG.MAX_YEAR]) ||
+                isFilterValueSet(query[FILTER_KEYS.SONG.MIN_YEAR]) ||
+                isFilterValueSet(query[FILTER_KEYS.SHARED.SEARCH_TERM]),
+        );
+    }, [songFilters.query]);
+
     return (
         <Flex justify="space-between">
             <Group gap="sm" w="100%">
@@ -69,7 +87,7 @@ export const SongListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarget
                     defaultSortOrder={SortOrder.ASC}
                     listKey={pageKey as ItemListKey}
                 />
-                <ListFiltersModal itemType={LibraryItem.SONG} />
+                <ListFiltersModal isActive={hasActiveFilters} itemType={LibraryItem.SONG} />
                 <ListRefreshButton listKey={pageKey as ItemListKey} />
             </Group>
             <Group gap="sm" wrap="nowrap">

src/renderer/features/songs/routes/song-list-route.tsx

@@ -7,6 +7,7 @@ import { ListWithSidebarContainer } from '/@/renderer/features/shared/components
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
+import { usePageSidebar } from '/@/renderer/store/app.store';
 import { SongListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -27,6 +28,7 @@ const SongListRoute = () => {
     const pageKey = getPageKey({ albumArtistId, genreId });
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+    const [isSidebarOpen, setIsSidebarOpen] = usePageSidebar(pageKey);
 
     const customFilters: Partial<SongListQuery> = useMemo(() => {
         if (albumArtistId) {
@@ -48,11 +50,21 @@ const SongListRoute = () => {
         return {
             customFilters,
             id: albumArtistId ?? genreId,
+            isSidebarOpen,
             itemCount,
             pageKey,
+            setIsSidebarOpen,
             setItemCount,
         };
-    }, [albumArtistId, customFilters, genreId, itemCount, pageKey]);
+    }, [
+        albumArtistId,
+        customFilters,
+        genreId,
+        isSidebarOpen,
+        itemCount,
+        pageKey,
+        setIsSidebarOpen,
+    ]);
 
     return (
         <AnimatedPage>