Add play handlers and item count to list pages

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

@@ -19,7 +19,6 @@ import {
   VirtualGridAutoSizerContainer,
   VirtualTable,
 } from '/@/renderer/components';
-import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
 import {
   useCurrentServer,
   useSetSongTable,
@@ -38,10 +37,11 @@ import { LibraryItem, QueueSong } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 
 interface SongListContentProps {
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const SongListContent = ({ tableRef }: SongListContentProps) => {
+export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const page = useSongListStore();
@@ -54,12 +54,6 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
 
   const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
 
-  const checkSongList = useSongList({
-    limit: 1,
-    startIndex: 0,
-    ...page.filter,
-  });
-
   const columnDefs: ColDef[] = useMemo(
     () => getColumnDefs(page.table.columns),
     [page.table.columns],
@@ -224,7 +218,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
           defaultColDef={defaultColumnDefs}
           enableCellChangeFlash={false}
           getRowId={(data) => data.data.id}
-          infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 100}
+          infiniteInitialRowCount={itemCount || 100}
           pagination={isPaginationEnabled}
           paginationAutoPageSize={isPaginationEnabled}
           paginationPageSize={page.table.pagination.itemsPerPage || 100}

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

@@ -13,7 +13,13 @@ import {
 } from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { ServerType, SongListSort, SortOrder } from '/@/renderer/api/types';
+import {
+  LibraryItem,
+  ServerType,
+  SongListQuery,
+  SongListSort,
+  SortOrder,
+} from '/@/renderer/api/types';
 import {
   Button,
   DropdownMenu,
@@ -25,7 +31,10 @@ import {
   MultiSelect,
   Text,
   SONG_TABLE_COLUMNS,
+  Badge,
+  SpinnerIcon,
 } from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { useMusicFolders } from '/@/renderer/features/shared';
 import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
 import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
@@ -40,7 +49,7 @@ import {
   useSetSongTablePagination,
   useSongListStore,
 } from '/@/renderer/store';
-import { ListDisplayType, TableColumn } from '/@/renderer/types';
+import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
 
 const FILTERS = {
   jellyfin: [
@@ -80,16 +89,18 @@ const ORDER = [
 ];
 
 interface SongListHeaderProps {
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
+export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
   const server = useCurrentServer();
   const page = useSongListStore();
   const setPage = useSetSongStore();
   const setFilter = useSetSongFilters();
   const setTable = useSetSongTable();
   const setPagination = useSetSongTablePagination();
+  const handlePlayQueueAdd = usePlayQueueAdd();
   const cq = useContainerQuery();
 
   const musicFoldersQuery = useMusicFolders();
@@ -244,6 +255,24 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
     setTable({ rowHeight: e });
   };
 
+  const handleRefresh = () => {
+    queryClient.invalidateQueries(queryKeys.songs.list(server?.id || ''));
+    handleFilterChange(page.filter);
+  };
+
+  const handlePlay = async (play: Play) => {
+    if (!itemCount || itemCount === 0) return;
+    const query: SongListQuery = { startIndex: 0, ...page.filter };
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: query,
+        type: LibraryItem.SONG,
+      },
+      play,
+    });
+  };
+
   return (
     <PageHeader p="1rem">
       <Flex
@@ -265,12 +294,20 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
                 sx={{ paddingLeft: 0, paddingRight: 0 }}
                 variant="subtle"
               >
-                <TextTitle
-                  fw="bold"
-                  order={3}
-                >
-                  Tracks
-                </TextTitle>
+                <Group>
+                  <TextTitle
+                    fw="bold"
+                    order={3}
+                  >
+                    Tracks
+                  </TextTitle>
+                  <Badge
+                    radius="xl"
+                    size="lg"
+                  >
+                    {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+                  </Badge>
+                </Group>
               </Button>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
@@ -420,10 +457,15 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
               </Button>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
-              <DropdownMenu.Item disabled>Play</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue (last)</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
+                Add to queue (last)
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
+                Add to queue (next)
+              </DropdownMenu.Item>
+              <DropdownMenu.Divider />
+              <DropdownMenu.Item onClick={handleRefresh}>Refresh</DropdownMenu.Item>
             </DropdownMenu.Dropdown>
           </DropdownMenu>
         </Flex>

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

@@ -4,15 +4,42 @@ import { VirtualGridContainer } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
+import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
+import { useSongListFilters } from '/@/renderer/store';
 
 const TrackListRoute = () => {
   const tableRef = useRef<AgGridReactType | null>(null);
 
+  const filters = useSongListFilters();
+
+  const itemCountCheck = useSongList(
+    {
+      limit: 1,
+      startIndex: 0,
+      ...filters,
+    },
+    {
+      cacheTime: 1000 * 60 * 60 * 2,
+      staleTime: 1000 * 60 * 60 * 2,
+    },
+  );
+
+  const itemCount =
+    itemCountCheck.data?.totalRecordCount === null
+      ? undefined
+      : itemCountCheck.data?.totalRecordCount;
+
   return (
     <AnimatedPage>
       <VirtualGridContainer>
-        <SongListHeader tableRef={tableRef} />
-        <SongListContent tableRef={tableRef} />
+        <SongListHeader
+          itemCount={itemCount}
+          tableRef={tableRef}
+        />
+        <SongListContent
+          itemCount={itemCount}
+          tableRef={tableRef}
+        />
       </VirtualGridContainer>
     </AnimatedPage>
   );