add header to playlist page

src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx

@@ -11,16 +11,20 @@ import { ContextMenuController } from '/@/renderer/features/context-menu/context
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
 import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
 import { MoreButton } from '/@/renderer/features/shared/components/more-button';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useCurrentServerId } from '/@/renderer/store';
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Button } from '/@/shared/components/button/button';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
+import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { LibraryItem, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
@@ -55,6 +59,11 @@ export const PlaylistDetailSongListHeaderFilters = ({
     const isViewEditMode = !isSmartPlaylist && breakpoints.isSm;
     const isEditMode = mode === 'edit';
 
+    const [collapsed, setCollapsed] = useLocalStorage<boolean>({
+        defaultValue: false,
+        key: 'playlist-header-collapsed',
+    });
+
     return (
         <Flex justify="space-between" ref={containerRef}>
             <Group gap="sm" w="100%">
@@ -70,6 +79,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
                     disabled={isEditMode}
                     listKey={ItemListKey.PLAYLIST_SONG}
                 />
+                {!collapsed && <ListSearchInput />}
                 <ListRefreshButton disabled={isEditMode} listKey={ItemListKey.PLAYLIST_SONG} />
                 <MoreButton onClick={handleMore} />
             </Group>
@@ -86,6 +96,18 @@ export const PlaylistDetailSongListHeaderFilters = ({
                             : t('common.edit', { postProcess: 'titleCase' })}
                     </Button>
                 )}
+                <Tooltip
+                    label={t(`common.${collapsed ? 'expand' : 'collapse'}`, {
+                        postProcess: 'titleCase',
+                    })}
+                >
+                    <ActionIcon
+                        icon={collapsed ? 'arrowDownS' : 'arrowUpS'}
+                        iconProps={{ size: 'xl' }}
+                        onClick={() => setCollapsed((prev) => !prev)}
+                        variant="subtle"
+                    />
+                </Tooltip>
                 <ListConfigMenu
                     displayTypes={[
                         {

src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

@@ -4,15 +4,23 @@ import { useLocation, useParams } from 'react-router';
 
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
 import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
+import {
+    LibraryHeader,
+    LibraryHeaderMenu,
+} from '/@/renderer/features/shared/components/library-header';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
+import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
 import { Stack } from '/@/shared/components/stack/stack';
+import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { LibraryItem, Song } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 interface PlaylistDetailSongListHeaderProps {
     isSmartPlaylist?: boolean;
@@ -37,31 +45,57 @@ export const PlaylistDetailSongListHeader = ({
 
     const playlistDuration = detailQuery?.data?.duration;
 
+    const [collapsed] = useLocalStorage<boolean>({
+        defaultValue: false,
+        key: 'playlist-header-collapsed',
+    });
+
+    const player = usePlayer();
+
+    const handlePlay = (type?: Play) => {
+        player.addToQueueByData(listData as Song[], type || Play.NOW);
+    };
+
     return (
         <Stack gap={0}>
-            <PageHeader>
+            {collapsed ? (
-                <LibraryHeaderBar ignoreMaxWidth>
+                <PageHeader>
-                    <LibraryHeaderBar.PlayButton
+                    <LibraryHeaderBar ignoreMaxWidth>
-                        itemType={LibraryItem.PLAYLIST}
+                        <LibraryHeaderBar.PlayButton
-                        songs={listData as Song[]}
+                            itemType={LibraryItem.PLAYLIST}
-                    />
+                            songs={listData as Song[]}
-                    <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
+                        />
-                    {isSmartPlaylist && (
+                        <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
-                        <LibraryHeaderBar.Badge>{t('entity.smartPlaylist')}</LibraryHeaderBar.Badge>
+                        {isSmartPlaylist && (
-                    )}
+                            <LibraryHeaderBar.Badge>
-                    {!!playlistDuration && (
+                                {t('entity.smartPlaylist')}
-                        <LibraryHeaderBar.Badge>
+                            </LibraryHeaderBar.Badge>
-                            {formatDurationString(playlistDuration)}
+                        )}
+                        {!!playlistDuration && (
+                            <LibraryHeaderBar.Badge>
+                                {formatDurationString(playlistDuration)}
+                            </LibraryHeaderBar.Badge>
+                        )}
+                        <LibraryHeaderBar.Badge
+                            isLoading={itemCount === null || itemCount === undefined}
+                        >
+                            {itemCount}
                         </LibraryHeaderBar.Badge>
-                    )}
+                    </LibraryHeaderBar>
-                    <LibraryHeaderBar.Badge
+                    <ListSearchInput />
-                        isLoading={itemCount === null || itemCount === undefined}
+                </PageHeader>
-                    >
+            ) : (
-                        {itemCount}
+                <LibraryHeader
-                    </LibraryHeaderBar.Badge>
+                    imageUrl={detailQuery?.data?.imageUrl}
-                </LibraryHeaderBar>
+                    item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
-                <ListSearchInput />
+                    title={detailQuery?.data?.name}
-            </PageHeader>
+                >
+                    <LibraryHeaderMenu
+                        onPlay={() => handlePlay(Play.NOW)}
+                        onShuffle={() => handlePlay(Play.SHUFFLE)}
+                    />
+                </LibraryHeader>
+            )}
             <FilterBar>
                 <PlaylistDetailSongListHeaderFilters isSmartPlaylist={isSmartPlaylist} />
             </FilterBar>

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -159,7 +159,7 @@ const PlaylistQueryEditor = ({
 
     return (
         <div className="query-editor-container">
-            <Stack gap={0} h="100%" mah="50dvh" p="md" w="100%">
+            <Stack gap={0} h="100%" mah="30dvh" p="md" w="100%">
                 <Group justify="space-between" pb="md" wrap="nowrap">
                     <Group gap="sm" wrap="nowrap">
                         <Button
@@ -178,12 +178,7 @@ const PlaylistQueryEditor = ({
                         </Button>
                     </Group>
                     <Group gap="xs">
-                        <Button
+                        <Button onClick={openPreviewModal} size="sm" variant="subtle">
-                            disabled={!isQueryBuilderExpanded}
-                            onClick={openPreviewModal}
-                            size="sm"
-                            variant="subtle"
-                        >
                             {t('common.preview', { postProcess: 'titleCase' })}
                         </Button>
                         <Button

src/renderer/features/shared/components/library-header.tsx

@@ -1,4 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
+import clsx from 'clsx';
 import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
@@ -22,6 +23,7 @@ import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface LibraryHeaderProps {
     children?: ReactNode;
+    containerClassName?: string;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
     item: { route: string; type: LibraryItem };
@@ -30,7 +32,10 @@ interface LibraryHeaderProps {
 }
 
 export const LibraryHeader = forwardRef(
-    ({ children, imageUrl, item, title }: LibraryHeaderProps, ref: Ref<HTMLDivElement>) => {
+    (
+        { children, containerClassName, imageUrl, item, title }: LibraryHeaderProps,
+        ref: Ref<HTMLDivElement>,
+    ) => {
         const { t } = useTranslation();
         const [isImageError, setIsImageError] = useState<boolean | null>(false);
 
@@ -85,7 +90,7 @@ export const LibraryHeader = forwardRef(
         }, [imageUrl, isImageError]);
 
         return (
-            <div className={styles.libraryHeader} ref={ref}>
+            <div className={clsx(styles.libraryHeader, containerClassName)} ref={ref}>
                 <div
                     className={styles.imageSection}
                     onClick={() => openImage()}