Add play handlers and item count to list pages

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

@@ -16,7 +16,6 @@ import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { Album, AlbumListSort, LibraryItem } from '/@/renderer/api/types';
-import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   useCurrentServer,
@@ -47,10 +46,11 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 
 interface AlbumListContentProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) => {
+export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const server = useCurrentServer();
@@ -66,12 +66,6 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
 
   const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
 
-  const checkAlbumList = useAlbumList({
-    limit: 1,
-    startIndex: 0,
-    ...page.filter,
-  });
-
   const columnDefs: ColDef[] = useMemo(
     () => getColumnDefs(page.table.columns),
     [page.table.columns],
@@ -311,12 +305,12 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
                   handlePlayQueueAdd={handlePlayQueueAdd}
                   height={height}
                   initialScrollOffset={page?.grid.scrollOffset || 0}
-                  itemCount={checkAlbumList?.data?.totalRecordCount || 0}
+                  itemCount={itemCount || 0}
                   itemData={itemData}
                   itemGap={20}
                   itemSize={150 + page.grid?.size}
                   itemType={LibraryItem.ALBUM}
-                  loading={checkAlbumList.isLoading}
+                  loading={!itemCount}
                   minimumBatchSize={40}
                   route={{
                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
@@ -340,7 +334,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) =
             blockLoadDebounceMillis={200}
             columnDefs={columnDefs}
             getRowId={(data) => data.data.id}
-            infiniteInitialRowCount={checkAlbumList.data?.totalRecordCount || 1}
+            infiniteInitialRowCount={itemCount || 1}
             pagination={isPaginationEnabled}
             paginationAutoPageSize={isPaginationEnabled}
             paginationPageSize={page.table.pagination.itemsPerPage || 100}

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

@@ -17,9 +17,10 @@ import styled from 'styled-components';
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
+import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
 import {
   ALBUM_TABLE_COLUMNS,
+  Badge,
   Button,
   DropdownMenu,
   MultiSelect,
@@ -27,6 +28,7 @@ import {
   Popover,
   SearchInput,
   Slider,
+  SpinnerIcon,
   Switch,
   Text,
   TextTitle,
@@ -45,7 +47,8 @@ import {
   useSetAlbumTable,
   useSetAlbumTablePagination,
 } from '/@/renderer/store';
-import { ListDisplayType, TableColumn } from '/@/renderer/types';
+import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
 
 const FILTERS = {
   jellyfin: [
@@ -90,10 +93,11 @@ const HeaderItems = styled.div`
 
 interface AlbumListHeaderProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+  itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) => {
+export const AlbumListHeader = ({ itemCount, gridRef, tableRef }: AlbumListHeaderProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setPage = useSetAlbumStore();
@@ -213,6 +217,11 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
     [page.display, tableRef, setPagination, server, queryClient, gridRef, fetch],
   );
 
+  const handleRefresh = useCallback(() => {
+    queryClient.invalidateQueries(queryKeys.albums.list(server?.id || ''));
+    handleFilterChange(filters);
+  }, [filters, handleFilterChange, queryClient, server?.id]);
+
   const handleSetSortBy = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value || !server?.type) return;
@@ -301,6 +310,31 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
     }
   };
 
+  const handlePlayQueueAdd = usePlayQueueAdd();
+
+  const handlePlay = async (play: Play) => {
+    if (!itemCount || itemCount === 0) return;
+
+    const query = { startIndex: 0, ...filters };
+    const queryKey = queryKeys.albums.list(server?.id || '', query);
+
+    const albumListRes = await queryClient.fetchQuery({
+      queryFn: ({ signal }) => api.controller.getAlbumList({ query, server, signal }),
+      queryKey,
+    });
+
+    const albumIds =
+      api.normalize.albumList(albumListRes, server).items?.map((item) => item.id) || [];
+
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: albumIds,
+        type: LibraryItem.ALBUM,
+      },
+      play,
+    });
+  };
+
   return (
     <PageHeader p="1rem">
       <HeaderItems ref={cq.ref}>
@@ -311,20 +345,30 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
         >
           <DropdownMenu position="bottom-start">
             <DropdownMenu.Target>
-              <Button
-                compact
-                px={0}
-                rightIcon={<RiArrowDownSLine size={15} />}
-                size="xl"
-                variant="subtle"
-              >
-                <TextTitle
-                  fw="bold"
-                  order={3}
+              <Group>
+                <Button
+                  compact
+                  px={0}
+                  rightIcon={<RiArrowDownSLine size={15} />}
+                  size="xl"
+                  variant="subtle"
                 >
-                  Albums
-                </TextTitle>
-              </Button>
+                  <Group>
+                    <TextTitle
+                      fw="bold"
+                      order={3}
+                    >
+                      Albums
+                    </TextTitle>
+                    <Badge
+                      radius="xl"
+                      size="lg"
+                    >
+                      {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+                    </Badge>
+                  </Group>
+                </Button>
+              </Group>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
               <DropdownMenu.Label>Display type</DropdownMenu.Label>
@@ -495,10 +539,15 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
               </Button>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
-              <DropdownMenu.Item disabled>Play</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue (next)</DropdownMenu.Item>
-              <DropdownMenu.Item disabled>Add to queue (last)</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/albums/routes/album-list-route.tsx

@@ -4,20 +4,42 @@ import { AlbumListHeader } from '/@/renderer/features/albums/components/album-li
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
+import { useAlbumListFilters } from '/@/renderer/store';
 
 const AlbumListRoute = () => {
   const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
   const tableRef = useRef<AgGridReactType | null>(null);
+  const filters = useAlbumListFilters();
+
+  const itemCountCheck = useAlbumList(
+    {
+      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>
         <AlbumListHeader
           gridRef={gridRef}
+          itemCount={itemCount}
           tableRef={tableRef}
         />
         <AlbumListContent
           gridRef={gridRef}
+          itemCount={itemCount}
           tableRef={tableRef}
         />
       </VirtualGridContainer>