From 71bea66ab738b187fe7b46ba9cd00ccf18ec0253 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 18 Nov 2025 21:30:48 -0800
Subject: [PATCH] add play buttons for each list page header

---
 .../albums/components/album-list-header.tsx        | 10 +++++++++-
 .../components/album-artist-list-header.tsx        | 10 +++++++++-
 .../artists/components/artist-list-header.tsx      | 14 ++++++++++++--
 .../genres/components/genre-list-header.tsx        | 10 +++++++++-
 .../playlists/components/playlist-list-header.tsx  | 10 +++++++++-
 .../features/songs/components/song-list-header.tsx | 10 +++++++++-
 6 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index db3a82a88..b147af6d0 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-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 { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
+import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-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 AlbumListHeaderProps {
     title?: string;
@@ -23,7 +25,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
         <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 AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = useAlbumListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} query={query} />;
+};
diff --git a/src/renderer/features/artists/components/album-artist-list-header.tsx b/src/renderer/features/artists/components/album-artist-list-header.tsx
index 5fda224c4..c446a69b4 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-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 { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
+import { useAlbumArtistListFilters } from '/@/renderer/features/artists/hooks/use-album-artist-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 AlbumArtistListHeaderProps {
     title?: string;
@@ -23,7 +25,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
         <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 AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = useAlbumArtistListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} query={query} />;
+};
diff --git a/src/renderer/features/artists/components/artist-list-header.tsx b/src/renderer/features/artists/components/artist-list-header.tsx
index cf65ed7bb..10f5bda21 100644
--- a/src/renderer/features/artists/components/artist-list-header.tsx
+++ b/src/renderer/features/artists/components/artist-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 { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
+import { useArtistListFilters } from '/@/renderer/features/artists/hooks/use-artist-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 ArtistListHeaderProps {
     title?: string;
@@ -23,9 +25,11 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
         <Stack gap={0}>
             <PageHeader backgroundColor="var(--theme-colors-background)">
                 <LibraryHeaderBar>
-                    <LibraryHeaderBar.PlayButton />
+                    <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>{itemCount}</LibraryHeaderBar.Badge>
+                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                        {itemCount}
+                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -37,3 +41,9 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = useArtistListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} query={query} />;
+};
diff --git a/src/renderer/features/genres/components/genre-list-header.tsx b/src/renderer/features/genres/components/genre-list-header.tsx
index bf783e994..6cd4b43d1 100644
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-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 { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
+import { useGenreListFilters } from '/@/renderer/features/genres/hooks/use-genre-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 GenreListHeaderProps {
     title?: string;
@@ -23,7 +25,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
         <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 GenreListHeader = ({ title }: GenreListHeaderProps) => {
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = useGenreListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} query={query} />;
+};
diff --git a/src/renderer/features/playlists/components/playlist-list-header.tsx b/src/renderer/features/playlists/components/playlist-list-header.tsx
index f60560af0..074cccaf5 100644
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/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} />;
+};
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index c51298e3b..f0a4618f6 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -6,9 +6,11 @@ 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 { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
+import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface SongListHeaderProps {
     genreId?: string;
@@ -26,7 +28,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
             <PageHeader>
                 <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
-                        <LibraryHeaderBar.PlayButton onClick={() => {}} />
+                        <PlayButton />
                         <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                         <LibraryHeaderBar.Badge
                             isLoading={itemCount === null || itemCount === undefined}
@@ -45,3 +47,9 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
         </Stack>
     );
 };
+
+const PlayButton = () => {
+    const { query } = useSongListFilters();
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} query={query} />;
+};