add play buttons for each list page header

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

@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
+import { usePlaylistListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-list-filters';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface PlaylistListHeaderProps {
     title?: string;
@@ -23,7 +25,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
         <Stack gap={0}>
             <PageHeader backgroundColor="var(--theme-colors-background)">
                 <LibraryHeaderBar>
-                    <LibraryHeaderBar.PlayButton />
+                    <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
                         {itemCount}
@@ -39,3 +41,9 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = usePlaylistListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} query={query} />;
+};