Change type name, add paginated table

src/renderer/components/virtual-grid/grid-card/index.tsx

@@ -4,7 +4,7 @@ import { areEqual } from 'react-window';
 import { DefaultCard } from '/@/renderer/components/virtual-grid/grid-card/default-card';
 import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster-card';
 import type { GridCardData } from '/@/renderer/types';
-import { CardDisplayType } from '/@/renderer/types';
+import { ListDisplayType } from '/@/renderer/types';
 
 export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => {
   const {
@@ -26,7 +26,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
   const startIndex = index * columnCount;
   const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
 
-  const View = display === CardDisplayType.CARD ? DefaultCard : PosterCard;
+  const View = display === ListDisplayType.CARD ? DefaultCard : PosterCard;
 
   for (let i = startIndex; i <= stopIndex; i += 1) {
     cards.push(

src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx

@@ -8,7 +8,7 @@ import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
 import type {
   CardRow,
   LibraryItem,
-  CardDisplayType,
+  ListDisplayType,
   CardRoute,
   PlayQueueAddOptions,
 } from '/@/renderer/types';
@@ -64,7 +64,7 @@ export const VirtualGridWrapper = ({
 }: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children'> & {
   cardRows: CardRow<Album | AlbumArtist | Artist>[];
   columnCount: number;
-  display: CardDisplayType;
+  display: ListDisplayType;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemData: any[];
   itemGap: number;

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -12,7 +12,7 @@ import type { FixedSizeListProps } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
 import type { CardRoute, CardRow, LibraryItem, PlayQueueAddOptions } from '/@/renderer/types';
-import { CardDisplayType } from '/@/renderer/types';
+import { ListDisplayType } from '/@/renderer/types';
 
 export type VirtualInfiniteGridRef = {
   resetLoadMoreItemsCache: () => void;
@@ -22,7 +22,7 @@ export type VirtualInfiniteGridRef = {
 
 interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> {
   cardRows: CardRow<any>[];
-  display?: CardDisplayType;
+  display?: ListDisplayType;
   fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
   itemGap: number;
@@ -144,7 +144,7 @@ export const VirtualInfiniteGrid = forwardRef(
           <VirtualGridWrapper
             cardRows={cardRows}
             columnCount={columnCount}
-            display={display || CardDisplayType.CARD}
+            display={display || ListDisplayType.CARD}
             handlePlayQueueAdd={handlePlayQueueAdd}
             height={height}
             initialScrollOffset={initialScrollOffset}
@@ -171,7 +171,7 @@ export const VirtualInfiniteGrid = forwardRef(
 );
 
 VirtualInfiniteGrid.defaultProps = {
-  display: CardDisplayType.CARD,
+  display: ListDisplayType.CARD,
   minimumBatchSize: 20,
   route: undefined,
 };

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

@@ -5,7 +5,7 @@ import {
   VirtualInfiniteGridRef,
 } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
-import { CardDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
+import { ListDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import { ListOnScrollProps } from 'react-window';
@@ -145,7 +145,7 @@ export const AlbumListContent = ({ gridRef }: AlbumListContentProps) => {
           <VirtualInfiniteGrid
             ref={gridRef}
             cardRows={cardRows}
-            display={page.display || CardDisplayType.CARD}
+            display={page.display || ListDisplayType.CARD}
             fetchFn={fetch}
             handlePlayQueueAdd={handlePlayQueueAdd}
             height={height}

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

@@ -37,7 +37,7 @@ import {
   useSetAlbumFilters,
   useSetAlbumStore,
 } from '/@/renderer/store';
-import { CardDisplayType } from '/@/renderer/types';
+import { ListDisplayType } from '/@/renderer/types';
 
 const FILTERS = {
   jellyfin: [
@@ -198,12 +198,12 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
       const type = e.currentTarget.value;
-      if (type === CardDisplayType.CARD) {
-        setPage({ list: { ...page, display: CardDisplayType.CARD } });
-      } else if (type === CardDisplayType.POSTER) {
-        setPage({ list: { ...page, display: CardDisplayType.POSTER } });
+      if (type === ListDisplayType.CARD) {
+        setPage({ list: { ...page, display: ListDisplayType.CARD } });
+      } else if (type === ListDisplayType.POSTER) {
+        setPage({ list: { ...page, display: ListDisplayType.POSTER } });
       } else {
-        setPage({ list: { ...page, display: CardDisplayType.TABLE } });
+        setPage({ list: { ...page, display: ListDisplayType.TABLE } });
       }
     },
     [page, setPage],
@@ -264,7 +264,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
               </DropdownMenu.Item>
               <DropdownMenu.Item
                 disabled
-                $isActive={page.display === CardDisplayType.TABLE}
+                $isActive={page.display === ListDisplayType.TABLE}
                 value="list"
                 onClick={handleSetViewType}
               >

src/renderer/store/album.store.ts

@@ -3,14 +3,14 @@ import create from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { AlbumListArgs, AlbumListSort, SortOrder } from '/@/renderer/api/types';
-import { CardDisplayType } from '/@/renderer/types';
+import { ListDisplayType } from '/@/renderer/types';
 
 type TableProps = {
   scrollOffset: number;
 };
 
 type ListProps<T> = {
-  display: CardDisplayType;
+  display: ListDisplayType;
   filter: T;
   grid: {
     scrollOffset: number;
@@ -49,7 +49,7 @@ export const useAlbumStore = create<AlbumSlice>()(
           },
         },
         list: {
-          display: CardDisplayType.CARD,
+          display: ListDisplayType.CARD,
           filter: {
             musicFolderId: undefined,
             sortBy: AlbumListSort.RECENTLY_ADDED,

src/renderer/store/song.store.ts

@@ -4,14 +4,14 @@ import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types';
 import { DataTableProps } from '/@/renderer/store/settings.store';
-import { CardDisplayType, TableColumn } from '/@/renderer/types';
+import { ListDisplayType, TableColumn } from '/@/renderer/types';
 
 type TableProps = {
   scrollOffset: number;
 } & DataTableProps;
 
 type ListProps<T> = {
-  display: CardDisplayType;
+  display: ListDisplayType;
   filter: T;
   table: TableProps;
 };
@@ -44,7 +44,7 @@ export const useSongStore = create<SongSlice>()(
           },
         },
         list: {
-          display: CardDisplayType.TABLE,
+          display: ListDisplayType.TABLE,
           filter: {
             musicFolderId: undefined,
             sortBy: SongListSort.RECENTLY_ADDED,

src/renderer/types.ts

@@ -19,16 +19,11 @@ export type CardRow<T> = {
   route?: CardRoute;
 };
 
-export enum CardDisplayType {
-  CARD = 'card',
-  POSTER = 'poster',
-  TABLE = 'table',
-}
-
 export enum ListDisplayType {
   CARD = 'card',
   POSTER = 'poster',
   TABLE = 'table',
+  TABLE_PAGINATED = 'paginatedTable',
 }
 
 export enum LibraryItem {
@@ -164,7 +159,7 @@ export type GridCardData = {
   cardControls: any;
   cardRows: CardRow<Album | AlbumArtist | Artist>[];
   columnCount: number;
-  display: CardDisplayType;
+  display: ListDisplayType;
   handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
   itemCount: number;
   itemData: any[];