allow user to unpin list sidebar

src/renderer/context/list-context.tsx

@@ -5,11 +5,13 @@ import { ItemListKey } from '/@/shared/types/types';
 interface ListContextProps {
     customFilters?: Record<string, unknown>;
     id?: string;
+    isSidebarOpen?: boolean;
     isSmartPlaylist?: boolean;
     itemCount?: number;
     listData?: unknown[];
     mode?: 'edit' | 'view';
     pageKey: ItemListKey | string;
+    setIsSidebarOpen?: (isSidebarOpen: boolean) => void;
     setItemCount?: (itemCount: number) => void;
     setListData?: (items: unknown[]) => void;
     setMode?: (mode: 'edit' | 'view') => void;

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

@@ -2,11 +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 { ListFilters, ListFiltersTitle } 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 { Stack } from '/@/shared/components/stack/stack';
 import { AlbumListQuery, LibraryItem } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, ListPaginationType } from '/@/shared/types/types';
 
@@ -37,9 +38,12 @@ const AlbumListPaginatedTable = lazy(() =>
 const AlbumListFilters = () => {
     return (
         <ListWithSidebarContainer.SidebarPortal>
+            <Stack h="100%">
+                <ListFiltersTitle />
                 <ScrollArea>
                     <ListFilters itemType={LibraryItem.ALBUM} />
                 </ScrollArea>
+            </Stack>
         </ListWithSidebarContainer.SidebarPortal>
     );
 };

src/renderer/features/albums/components/album-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';
@@ -36,14 +40,29 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
     }, [target, t]);
 
     const handleToggleGenreTarget = useCallback(() => {
-        // Clear all filter query states
         albumFilters.clear();
         songFilters.clear();
 
-        // Toggle the genre target
         setGenreBehavior(target === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM);
     }, [target, setGenreBehavior, albumFilters, songFilters]);
 
+    const hasActiveFilters = useMemo(() => {
+        const query = albumFilters.query;
+
+        return Boolean(
+            isFilterValueSet(query[FILTER_KEYS.ALBUM._CUSTOM]) ||
+                isFilterValueSet(query[FILTER_KEYS.ALBUM.ARTIST_IDS]) ||
+                query[FILTER_KEYS.ALBUM.COMPILATION] !== undefined ||
+                query[FILTER_KEYS.ALBUM.FAVORITE] !== undefined ||
+                isFilterValueSet(query[FILTER_KEYS.ALBUM.GENRE_ID]) ||
+                query[FILTER_KEYS.ALBUM.HAS_RATING] !== undefined ||
+                isFilterValueSet(query[FILTER_KEYS.ALBUM.MAX_YEAR]) ||
+                isFilterValueSet(query[FILTER_KEYS.ALBUM.MIN_YEAR]) ||
+                query[FILTER_KEYS.ALBUM.RECENTLY_PLAYED] !== undefined ||
+                isFilterValueSet(query[FILTER_KEYS.SHARED.SEARCH_TERM]),
+        );
+    }, [albumFilters.query]);
+
     return (
         <Flex justify="space-between">
             <Group gap="sm" w="100%">
@@ -69,7 +88,7 @@ export const AlbumListHeaderFilters = ({ toggleGenreTarget }: { toggleGenreTarge
                     defaultSortOrder={SortOrder.ASC}
                     listKey={pageKey as ItemListKey}
                 />
-                <ListFiltersModal itemType={LibraryItem.ALBUM} />
+                <ListFiltersModal isActive={hasActiveFilters} itemType={LibraryItem.ALBUM} />
                 <ListRefreshButton listKey={pageKey as ItemListKey} />
             </Group>
             <Group gap="sm" wrap="nowrap">

src/renderer/features/albums/routes/album-list-route.tsx

@@ -7,6 +7,7 @@ import { AlbumListHeader } from '/@/renderer/features/albums/components/album-li
 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 { usePageSidebar } from '/@/renderer/store/app.store';
 import { AlbumListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -27,6 +28,7 @@ const AlbumListRoute = () => {
     const pageKey = getPageKey({ albumArtistId, genreId });
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+    const [isSidebarOpen, setIsSidebarOpen] = usePageSidebar(pageKey);
 
     const customFilters: Partial<AlbumListQuery> = useMemo(() => {
         if (albumArtistId) {
@@ -48,11 +50,21 @@ const AlbumListRoute = () => {
         return {
             customFilters,
             id: albumArtistId ?? genreId,
+            isSidebarOpen,
             itemCount,
             pageKey,
+            setIsSidebarOpen,
             setItemCount,
         };
-    }, [albumArtistId, customFilters, genreId, itemCount, pageKey]);
+    }, [
+        albumArtistId,
+        customFilters,
+        genreId,
+        isSidebarOpen,
+        itemCount,
+        pageKey,
+        setIsSidebarOpen,
+    ]);
 
     return (
         <AnimatedPage>

src/renderer/features/folders/routes/folder-list-route.tsx

@@ -20,13 +20,13 @@ const FolderListRoute = () => {
             pageKey,
             setItemCount,
         };
-    }, [itemCount, pageKey, setItemCount]);
+    }, [itemCount, pageKey]);
 
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <FolderListHeader />
-                <ListWithSidebarContainer>
+                <ListWithSidebarContainer useBreakpoint>
                     <FolderListContent />
                 </ListWithSidebarContainer>
             </ListContext.Provider>

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

@@ -1,6 +1,7 @@
 import { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
+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';
@@ -10,8 +11,11 @@ import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jelly
 import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
 import { SubsonicSongFilters } from '/@/renderer/features/songs/components/subsonic-song-filters';
 import { useCurrentServer } from '/@/renderer/store';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+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';
 
@@ -20,9 +24,18 @@ interface ListFiltersProps {
     itemType: LibraryItem;
 }
 
+export const isFilterValueSet = (value: unknown): boolean => {
+    if (value === undefined || value === null) return false;
+    if (typeof value === 'string' && value.trim() === '') return false;
+    if (Array.isArray(value) && value.length === 0) return false;
+    if (typeof value === 'object' && Object.keys(value).length === 0) return false;
+    return true;
+};
+
 export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
+    const { isSidebarOpen, setIsSidebarOpen } = useListContext();
 
     const serverType = server.type;
 
@@ -30,13 +43,39 @@ export const ListFiltersModal = ({ isActive, itemType }: ListFiltersProps) => {
 
     const [isOpen, handlers] = useDisclosure(false);
 
+    const handlePin = () => {
+        setIsSidebarOpen?.(!isSidebarOpen);
+    };
+
+    const canPin = Boolean(setIsSidebarOpen);
+
     return (
         <>
             <FilterButton isActive={isActive} onClick={handlers.toggle} />
             <Modal
                 handlers={handlers}
                 opened={isOpen}
-                title={t('common.filters', { postProcess: 'sentenceCase' })}
+                size="lg"
+                styles={{
+                    content: {
+                        height: '100%',
+                        maxHeight: '640px',
+                        maxWidth: 'var(--theme-content-max-width)',
+                        width: '100%',
+                    },
+                }}
+                title={
+                    <Group>
+                        {canPin && (
+                            <ActionIcon
+                                icon={isSidebarOpen ? 'unpin' : 'pin'}
+                                onClick={handlePin}
+                                variant="subtle"
+                            />
+                        )}
+                        {t('common.filters', { postProcess: 'sentenceCase' })}
+                    </Group>
+                }
             >
                 <FilterComponent />
             </Modal>
@@ -58,6 +97,26 @@ export const ListFilters = ({ itemType }: ListFiltersProps) => {
     );
 };
 
+export const ListFiltersTitle = () => {
+    const { t } = useTranslation();
+    const { setIsSidebarOpen } = useListContext();
+
+    const handleUnpin = () => {
+        setIsSidebarOpen?.(false);
+    };
+
+    const canUnpin = Boolean(setIsSidebarOpen);
+
+    return (
+        <Group justify="space-between" p="md" pb={0}>
+            <Text fw={500} size="xl">
+                {t('common.filters', { postProcess: 'sentenceCase' })}
+            </Text>
+            {canUnpin && <ActionIcon icon="unpin" onClick={handleUnpin} variant="subtle" />}
+        </Group>
+    );
+};
+
 const FILTERS = {
     [ServerType.JELLYFIN]: {
         [LibraryItem.ALBUM]: JellyfinAlbumFilters,

src/renderer/features/shared/components/list-with-sidebar-container.module.css

@@ -21,10 +21,16 @@
     border-right: 1px solid var(--theme-colors-border);
 }
 
-@container (min-width: $mantine-breakpoint-lg) {
+@container (min-width: $mantine-breakpoint-xs) {
-    .sidebar-container {
+    .container[data-sidebar-open='true'] .sidebar-container {
         display: block;
     }
+
+    @container (min-width: $mantine-breakpoint-lg) {
+        .container[data-use-breakpoint='true'] .sidebar-container {
+            display: block;
+        }
+    }
 }
 
 .content-container {

src/renderer/features/shared/components/list-with-sidebar-container.tsx

@@ -3,6 +3,7 @@ import { createContext, ReactNode, useContext, useMemo, useRef } from 'react';
 
 import styles from './list-with-sidebar-container.module.css';
 
+import { useListContext } from '/@/renderer/context/list-context';
 import { animationProps } from '/@/shared/components/animations/animation-props';
 import { Portal } from '/@/shared/components/portal/portal';
 
@@ -17,6 +18,7 @@ const ListWithSidebarContainerContext = createContext<ListWithSidebarContainerCo
 interface ListWithSidebarContainerProps {
     children: ReactNode;
     sidebarBreakpoint?: number;
+    useBreakpoint?: boolean;
 }
 
 interface SidebarPortalProps {
@@ -63,9 +65,10 @@ function SidebarPortal({ children }: SidebarPortalProps) {
 
 export const ListWithSidebarContainer = ({
     children,
-    sidebarBreakpoint = 1200,
+    useBreakpoint = false,
 }: ListWithSidebarContainerProps) => {
     const sidebarRef = useRef<HTMLDivElement>(null);
+    const { isSidebarOpen = false } = useListContext();
 
     const contextValue = useMemo(
         () => ({
@@ -76,7 +79,11 @@ export const ListWithSidebarContainer = ({
 
     return (
         <ListWithSidebarContainerContext.Provider value={contextValue}>
-            <div className={styles.container} data-sidebar-breakpoint={sidebarBreakpoint}>
+            <div
+                className={styles.container}
+                data-sidebar-open={useBreakpoint ? undefined : isSidebarOpen}
+                data-use-breakpoint={useBreakpoint}
+            >
                 <div className={styles.sidebarContainer} ref={sidebarRef} />
                 <div className={styles.contentContainer}>{children}</div>
             </div>

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>
+            <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>

src/renderer/store/app.store.ts

@@ -8,6 +8,7 @@ import { Platform } from '/@/shared/types/types';
 export interface AppSlice extends AppState {
     actions: {
         setAppStore: (data: Partial<AppSlice>) => void;
+        setPageSidebar: (key: string, value: boolean) => void;
         setPrivateMode: (enabled: boolean) => void;
         setShowTimeRemaining: (enabled: boolean) => void;
         setSideBar: (options: Partial<SidebarProps>) => void;
@@ -18,6 +19,7 @@ export interface AppSlice extends AppState {
 export interface AppState {
     commandPalette: CommandPaletteProps;
     isReorderingQueue: boolean;
+    pageSidebar: Record<string, boolean>;
     platform: Platform;
     privateMode: boolean;
     showTimeRemaining: boolean;
@@ -54,6 +56,15 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                     setAppStore: (data) => {
                         set({ ...get(), ...data });
                     },
+                    setPageSidebar: (key, value) => {
+                        set((state) => {
+                            if (value) {
+                                state.pageSidebar[key] = value;
+                            } else {
+                                delete state.pageSidebar[key];
+                            }
+                        });
+                    },
                     setPrivateMode: (privateMode) => {
                         set((state) => {
                             state.privateMode = privateMode;
@@ -94,6 +105,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                     },
                 },
                 isReorderingQueue: false,
+                pageSidebar: {},
                 platform: Platform.WINDOWS,
                 privateMode: false,
                 showTimeRemaining: false,
@@ -140,3 +152,14 @@ export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitl
 export const useTitlebarStore = () => useAppStore((state) => state.titlebar);
 
 export const useCommandPalette = () => useAppStore((state) => state.commandPalette);
+
+export const usePageSidebar = (key: string): [boolean, (value: boolean) => void] => {
+    const isOpen = useAppStore((state) => state.pageSidebar[key] ?? false);
+    const setPageSidebar = useAppStore((state) => state.actions.setPageSidebar);
+
+    const setIsOpen = (value: boolean) => {
+        setPageSidebar(key, value);
+    };
+
+    return [isOpen, setIsOpen];
+};

src/shared/components/icon/icon.tsx

@@ -77,6 +77,8 @@ import {
     LuPanelRightOpen,
     LuPause,
     LuPencilLine,
+    LuPin,
+    LuPinOff,
     LuPlay,
     LuPlus,
     LuRadio,
@@ -200,6 +202,7 @@ export const AppIcon = {
     minus: LuMinus,
     panelRightClose: LuPanelRightClose,
     panelRightOpen: LuPanelRightOpen,
+    pin: LuPin,
     playlist: LuListMusic,
     playlistAdd: LuListPlus,
     playlistDelete: LuListMinus,
@@ -228,6 +231,7 @@ export const AppIcon = {
     themeLight: LuSun,
     track: LuMusic2,
     unfavorite: LuHeartCrack,
+    unpin: LuPinOff,
     upload: LuUpload,
     user: LuUser,
     userManage: LuUserRoundCog,