Add playlist grid views

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

@@ -1,233 +1,45 @@
-import { MutableRefObject, useCallback, useMemo } from 'react';
-import type {
-    BodyScrollEvent,
-    ColDef,
-    GridReadyEvent,
-    IDatasource,
-    PaginationChangedEvent,
-    RowDoubleClickedEvent,
-} from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Stack } from '@mantine/core';
+import { lazy, MutableRefObject, Suspense } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
+import { Spinner } from '/@/renderer/components';
-import { api } from '/@/renderer/api';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { queryKeys } from '/@/renderer/api/query-keys';
+import { usePlaylistListStore } from '/@/renderer/store';
-import {
-    useCurrentServer,
-    usePlaylistListStore,
-    usePlaylistTablePagination,
-    useSetPlaylistTable,
-    useSetPlaylistTablePagination,
-} from '/@/renderer/store';
 import { ListDisplayType } from '/@/renderer/types';
-import { AnimatePresence } from 'framer-motion';
+
-import debounce from 'lodash/debounce';
+const PlaylistListTableView = lazy(() =>
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+    import('/@/renderer/features/playlists/components/playlist-list-table-view').then((module) => ({
-import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+        default: module.PlaylistListTableView,
-import { generatePath, useNavigate } from 'react-router';
+    })),
-import { AppRoute } from '/@/renderer/router/routes';
+);
-import { LibraryItem } from '/@/renderer/api/types';
+
-import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+const PlaylistListGridView = lazy(() =>
-import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
+    import('/@/renderer/features/playlists/components/playlist-list-grid-view').then((module) => ({
+        default: module.PlaylistListGridView,
+    })),
+);
 
 interface PlaylistListContentProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistListContent = ({ tableRef, itemCount }: PlaylistListContentProps) => {
+export const PlaylistListContent = ({ gridRef, tableRef, itemCount }: PlaylistListContentProps) => {
-    const navigate = useNavigate();
+    const { display } = usePlaylistListStore();
-    const queryClient = useQueryClient();
-    const server = useCurrentServer();
-    const page = usePlaylistListStore();
-
-    const pagination = usePlaylistTablePagination();
-    const setPagination = useSetPlaylistTablePagination();
-    const setTable = useSetPlaylistTable();
-
-    const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
-
-    const columnDefs: ColDef[] = useMemo(
-        () => getColumnDefs(page.table.columns),
-        [page.table.columns],
-    );
-
-    const defaultColumnDefs: ColDef = useMemo(() => {
-        return {
-            lockPinned: true,
-            lockVisible: true,
-            resizable: true,
-        };
-    }, []);
-
-    const onGridReady = useCallback(
-        (params: GridReadyEvent) => {
-            const dataSource: IDatasource = {
-                getRows: async (params) => {
-                    const limit = params.endRow - params.startRow;
-                    const startIndex = params.startRow;
-
-                    const queryKey = queryKeys.playlists.list(server?.id || '', {
-                        limit,
-                        startIndex,
-                        ...page.filter,
-                    });
-
-                    const playlistsRes = await queryClient.fetchQuery(
-                        queryKey,
-                        async ({ signal }) =>
-                            api.controller.getPlaylistList({
-                                apiClientProps: {
-                                    server,
-                                    signal,
-                                },
-                                query: {
-                                    limit,
-                                    startIndex,
-                                    ...page.filter,
-                                },
-                            }),
-                        { cacheTime: 1000 * 60 * 1 },
-                    );
-
-                    params.successCallback(
-                        playlistsRes?.items || [],
-                        playlistsRes?.totalRecordCount || 0,
-                    );
-                },
-                rowCount: undefined,
-            };
-            params.api.setDatasource(dataSource);
-            params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
-        },
-        [page.filter, page.table.scrollOffset, queryClient, server],
-    );
-
-    const onPaginationChanged = useCallback(
-        (event: PaginationChangedEvent) => {
-            if (!isPaginationEnabled || !event.api) return;
-
-            try {
-                // Scroll to top of page on pagination change
-                const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
-                event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
-            } catch (err) {
-                console.log(err);
-            }
-
-            setPagination({
-                data: {
-                    itemsPerPage: event.api.paginationGetPageSize(),
-                    totalItems: event.api.paginationGetRowCount(),
-                    totalPages: event.api.paginationGetTotalPages() + 1,
-                },
-            });
-        },
-        [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
-    );
-
-    const handleGridSizeChange = () => {
-        if (page.table.autoFit) {
-            tableRef?.current?.api.sizeColumnsToFit();
-        }
-    };
-
-    const handleColumnChange = useCallback(() => {
-        const { columnApi } = tableRef?.current || {};
-        const columnsOrder = columnApi?.getAllGridColumns();
-
-        if (!columnsOrder) return;
-
-        const columnsInSettings = page.table.columns;
-        const updatedColumns = [];
-        for (const column of columnsOrder) {
-            const columnInSettings = columnsInSettings.find(
-                (c) => c.column === column.getColDef().colId,
-            );
-
-            if (columnInSettings) {
-                updatedColumns.push({
-                    ...columnInSettings,
-                    ...(!page.table.autoFit && {
-                        width: column.getActualWidth(),
-                    }),
-                });
-            }
-        }
-
-        setTable({ columns: updatedColumns });
-    }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
-
-    const debouncedColumnChange = debounce(handleColumnChange, 200);
-
-    const handleScroll = (e: BodyScrollEvent) => {
-        const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
-        setTable({ scrollOffset });
-    };
-
-    const handleContextMenu = useHandleTableContextMenu(
-        LibraryItem.PLAYLIST,
-        PLAYLIST_CONTEXT_MENU_ITEMS,
-    );
-
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
-        if (!e.data) return;
-        navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id }));
-    };
 
     return (
-        <Stack
+        <Suspense fallback={<Spinner container />}>
-            h="100%"
+            {display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
-            spacing={0}
+                <PlaylistListGridView
-        >
+                    gridRef={gridRef}
-            <VirtualGridAutoSizerContainer>
+                    itemCount={itemCount}
-                <VirtualTable
-                    // https://github.com/ag-grid/ag-grid/issues/5284
-                    // Key is used to force remount of table when display, rowHeight, or server changes
-                    key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
-                    ref={tableRef}
-                    alwaysShowHorizontalScroll
-                    suppressRowDrag
-                    autoFitColumns={page.table.autoFit}
-                    blockLoadDebounceMillis={200}
-                    cacheBlockSize={200}
-                    cacheOverflowSize={1}
-                    columnDefs={columnDefs}
-                    defaultColDef={defaultColumnDefs}
-                    enableCellChangeFlash={false}
-                    getRowId={(data) => data.data.id}
-                    infiniteInitialRowCount={itemCount || 100}
-                    pagination={isPaginationEnabled}
-                    paginationAutoPageSize={isPaginationEnabled}
-                    paginationPageSize={page.table.pagination.itemsPerPage || 100}
-                    rowBuffer={20}
-                    rowHeight={page.table.rowHeight || 40}
-                    rowModelType="infinite"
-                    rowSelection="multiple"
-                    onBodyScrollEnd={handleScroll}
-                    onCellContextMenu={handleContextMenu}
-                    onColumnMoved={handleColumnChange}
-                    onColumnResized={debouncedColumnChange}
-                    onGridReady={onGridReady}
-                    onGridSizeChanged={handleGridSizeChange}
-                    onPaginationChanged={onPaginationChanged}
-                    onRowDoubleClicked={handleRowDoubleClick}
                 />
-            </VirtualGridAutoSizerContainer>
+            ) : (
-            <AnimatePresence
+                <PlaylistListTableView
-                presenceAffectsLayout
+                    itemCount={itemCount}
-                initial={false}
-                mode="wait"
-            >
-                {page.display === ListDisplayType.TABLE_PAGINATED && (
-                    <TablePagination
-                        pageKey=""
-                        pagination={pagination}
-                        setPagination={setPagination}
                     tableRef={tableRef}
                 />
             )}
-            </AnimatePresence>
+            <div />
-        </Stack>
+        </Suspense>
     );
 };

src/renderer/features/playlists/components/playlist-list-grid-view.tsx

@@ -0,0 +1,157 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { MutableRefObject, useCallback, useMemo } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { ListOnScrollProps } from 'react-window';
+import { usePlaylistGridStore, usePlaylistStoreActions } from '../../../store/playlist.store';
+import { controller } from '/@/renderer/api/controller';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryItem, Playlist, PlaylistListQuery, PlaylistListSort } from '/@/renderer/api/types';
+import { PLAYLIST_CARD_ROWS } from '/@/renderer/components';
+import {
+    VirtualGridAutoSizerContainer,
+    VirtualInfiniteGrid,
+    VirtualInfiniteGridRef,
+} from '/@/renderer/components/virtual-grid';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useCurrentServer, usePlaylistListStore } from '/@/renderer/store';
+import { CardRow, ListDisplayType } from '/@/renderer/types';
+
+interface PlaylistListGridViewProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
+}
+
+export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridViewProps) => {
+    const queryClient = useQueryClient();
+    const server = useCurrentServer();
+    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { display } = usePlaylistListStore();
+    const grid = usePlaylistGridStore();
+    const { setGrid } = usePlaylistStoreActions();
+    const page = usePlaylistListStore();
+
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
+
+    const handleFavorite = (options: {
+        id: string[];
+        isFavorite: boolean;
+        itemType: LibraryItem;
+    }) => {
+        const { id, itemType, isFavorite } = options;
+        if (isFavorite) {
+            deleteFavoriteMutation.mutate({
+                query: {
+                    id,
+                    type: itemType,
+                },
+                serverId: server?.id,
+            });
+        } else {
+            createFavoriteMutation.mutate({
+                query: {
+                    id,
+                    type: itemType,
+                },
+                serverId: server?.id,
+            });
+        }
+    };
+
+    const cardRows = useMemo(() => {
+        const rows: CardRow<Playlist>[] = [PLAYLIST_CARD_ROWS.name];
+
+        switch (page.filter.sortBy) {
+            case PlaylistListSort.DURATION:
+                rows.push(PLAYLIST_CARD_ROWS.duration);
+                break;
+            case PlaylistListSort.NAME:
+                rows.push(PLAYLIST_CARD_ROWS.songCount);
+                break;
+            case PlaylistListSort.SONG_COUNT:
+                rows.push(PLAYLIST_CARD_ROWS.songCount);
+                break;
+            case PlaylistListSort.OWNER:
+                rows.push(PLAYLIST_CARD_ROWS.owner);
+                break;
+            case PlaylistListSort.PUBLIC:
+                rows.push(PLAYLIST_CARD_ROWS.public);
+                break;
+            case PlaylistListSort.UPDATED_AT:
+                break;
+        }
+
+        return rows;
+    }, [page.filter.sortBy]);
+
+    const handleGridScroll = useCallback(
+        (e: ListOnScrollProps) => {
+            setGrid({ data: { scrollOffset: e.scrollOffset } });
+        },
+        [setGrid],
+    );
+
+    const fetch = useCallback(
+        async ({ skip, take }: { skip: number; take: number }) => {
+            if (!server) {
+                return [];
+            }
+
+            const query: PlaylistListQuery = {
+                limit: take,
+                startIndex: skip,
+                ...page.filter,
+                _custom: {},
+            };
+
+            const queryKey = queryKeys.playlists.list(server?.id || '', query);
+
+            const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+                controller.getPlaylistList({
+                    apiClientProps: {
+                        server,
+                        signal,
+                    },
+                    query,
+                }),
+            );
+
+            return playlists;
+        },
+        [page.filter, queryClient, server],
+    );
+
+    return (
+        <VirtualGridAutoSizerContainer>
+            <AutoSizer>
+                {({ height, width }) => (
+                    <VirtualInfiniteGrid
+                        key={`playlist-list-${server?.id}`}
+                        ref={gridRef}
+                        cardRows={cardRows}
+                        display={display || ListDisplayType.CARD}
+                        fetchFn={fetch}
+                        handleFavorite={handleFavorite}
+                        handlePlayQueueAdd={handlePlayQueueAdd}
+                        height={height}
+                        initialScrollOffset={grid?.scrollOffset || 0}
+                        itemCount={itemCount || 0}
+                        itemGap={20}
+                        itemSize={grid?.itemsPerRow || 5}
+                        itemType={LibraryItem.PLAYLIST}
+                        loading={itemCount === undefined || itemCount === null}
+                        minimumBatchSize={40}
+                        route={{
+                            route: AppRoute.PLAYLISTS_DETAIL,
+                            slugs: [{ idProperty: 'id', slugProperty: 'playlistId' }],
+                        }}
+                        width={width}
+                        onScroll={handleGridScroll}
+                    />
+                )}
+            </AutoSizer>
+        </VirtualGridAutoSizerContainer>
+    );
+};

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

@@ -1,18 +1,20 @@
 import { ChangeEvent, MutableRefObject, useCallback, MouseEvent } from 'react';
 import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Stack, Group } from '@mantine/core';
+import { Flex, Stack, Group, Divider } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
-import { RiSortAsc, RiSortDesc, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+import { RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { SortOrder, PlaylistListSort } from '/@/renderer/api/types';
+import { SortOrder, PlaylistListSort, PlaylistListQuery } from '/@/renderer/api/types';
 import { DropdownMenu, Text, Button, Slider, MultiSelect, Switch } from '/@/renderer/components';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
     PlaylistListFilter,
     useCurrentServer,
+    usePlaylistGridStore,
     usePlaylistListStore,
+    usePlaylistStoreActions,
     useSetPlaylistFilters,
     useSetPlaylistStore,
     useSetPlaylistTable,
@@ -20,6 +22,8 @@ import {
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
 import { PLAYLIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { OrderToggleButton } from '/@/renderer/features/shared';
 
 const FILTERS = {
     jellyfin: [
@@ -37,16 +41,15 @@ const FILTERS = {
     ],
 };
 
-const ORDER = [
-    { name: 'Ascending', value: SortOrder.ASC },
-    { name: 'Descending', value: SortOrder.DESC },
-];
-
 interface PlaylistListHeaderFiltersProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFiltersProps) => {
+export const PlaylistListHeaderFilters = ({
+    gridRef,
+    tableRef,
+}: PlaylistListHeaderFiltersProps) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const page = usePlaylistListStore();
@@ -54,8 +57,13 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
     const setFilter = useSetPlaylistFilters();
     const setTable = useSetPlaylistTable();
     const setPagination = useSetPlaylistTablePagination();
+    const grid = usePlaylistGridStore();
+    const { setGrid } = usePlaylistStoreActions();
+    const { display } = usePlaylistListStore();
     const cq = useContainerQuery();
 
+    const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
+
     const sortByLabel =
         (server?.type &&
             (
@@ -63,10 +71,49 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
             ).find((f) => f.value === page.filter.sortBy)?.name) ||
         'Unknown';
 
-    const sortOrderLabel = ORDER.find((s) => s.value === page.filter.sortOrder)?.name;
+    const fetch = useCallback(
+        async (skip: number, take: number, filters: PlaylistListFilter) => {
+            const query: PlaylistListQuery = {
+                _custom: {
+                    jellyfin: {
+                        ...filters._custom?.jellyfin,
+                    },
+                    navidrome: {
+                        ...filters._custom?.navidrome,
+                    },
+                },
+                limit: take,
+                startIndex: skip,
+                ...filters,
+            };
+
+            const queryKey = queryKeys.playlists.list(server?.id || '', query);
+
+            const playlists = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+                api.controller.getPlaylistList({
+                    apiClientProps: {
+                        server,
+                        signal,
+                    },
+                    query,
+                }),
+            );
+
+            return playlists;
+        },
+        [queryClient, server],
+    );
 
     const handleFilterChange = useCallback(
         async (filters?: PlaylistListFilter) => {
+            if (isGrid) {
+                console.log('filter change', filters);
+                gridRef.current?.scrollTo(0);
+                gridRef.current?.resetLoadMoreItemsCache();
+                const data = await fetch(0, 200, filters || page.filter);
+                if (!data?.items) return;
+                gridRef.current?.setItemData(data.items);
+            } else {
                 const dataSource: IDatasource = {
                     getRows: async (params) => {
                         const limit = params.endRow - params.startRow;
@@ -94,7 +141,6 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                                         ...pageFilters,
                                     },
                                 }),
-                        { cacheTime: 1000 * 60 * 1 },
                         );
 
                         params.successCallback(
@@ -108,8 +154,9 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                 tableRef.current?.api.purgeInfiniteCache();
                 tableRef.current?.api.ensureIndexVisible(0, 'top');
                 setPagination({ data: { currentPage: 0 } });
+            }
         },
-        [page.filter, queryClient, server, setPagination, tableRef],
+        [fetch, gridRef, isGrid, page.filter, queryClient, server, setPagination, tableRef],
     );
 
     const handleSetSortBy = useCallback(
@@ -186,12 +233,17 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
         }
     };
 
-    const handleRowHeight = (e: number) => {
+    const handleItemSize = (e: number) => {
+        if (isGrid) {
+            setGrid({ data: { itemsPerRow: e } });
+        } else {
             setTable({ rowHeight: e });
+        }
     };
 
     const handleRefresh = () => {
-        tableRef?.current?.api?.purgeInfiniteCache();
+        queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || '', page.filter));
+        handleFilterChange(page.filter);
     };
 
     return (
@@ -225,25 +277,12 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                         ))}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
-                <Button
+                <Divider orientation="vertical" />
-                    compact
+                <OrderToggleButton
-                    fw="600"
+                    sortOrder={page.filter.sortOrder}
-                    size="md"
+                    onToggle={handleToggleSortOrder}
-                    variant="subtle"
+                />
-                    onClick={handleToggleSortOrder}
+                <Divider orientation="vertical" />
-                >
-                    {cq.isSm ? (
-                        sortOrderLabel
-                    ) : (
-                        <>
-                            {page.filter.sortOrder === SortOrder.ASC ? (
-                                <RiSortAsc size="1.3rem" />
-                            ) : (
-                                <RiSortDesc size="1.3rem" />
-                            )}
-                        </>
-                    )}
-                </Button>
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button
@@ -278,6 +317,20 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
                         <DropdownMenu.Label>Display type</DropdownMenu.Label>
+                        <DropdownMenu.Item
+                            $isActive={page.display === ListDisplayType.CARD}
+                            value={ListDisplayType.CARD}
+                            onClick={handleSetViewType}
+                        >
+                            Card
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                            $isActive={page.display === ListDisplayType.POSTER}
+                            value={ListDisplayType.POSTER}
+                            onClick={handleSetViewType}
+                        >
+                            Poster
+                        </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={page.display === ListDisplayType.TABLE}
                             value={ListDisplayType.TABLE}
@@ -293,16 +346,21 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                             Table (paginated)
                         </DropdownMenu.Item>
                         <DropdownMenu.Divider />
-                        <DropdownMenu.Label>Item Size</DropdownMenu.Label>
+                        <DropdownMenu.Label>
+                            {isGrid ? 'Items per row' : 'Item size'}
+                        </DropdownMenu.Label>
                         <DropdownMenu.Item closeMenuOnClick={false}>
                             <Slider
-                                defaultValue={page.table.rowHeight || 0}
+                                defaultValue={
-                                label={null}
+                                    isGrid ? grid?.itemsPerRow || 0 : page.table.rowHeight
-                                max={100}
+                                }
-                                min={25}
+                                max={isGrid ? 14 : 100}
-                                onChangeEnd={handleRowHeight}
+                                min={isGrid ? 2 : 25}
+                                onChangeEnd={handleItemSize}
                             />
                         </DropdownMenu.Item>
+                        {!isGrid && (
+                            <>
                                 <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
                                 <DropdownMenu.Item
                                     closeMenuOnClick={false}
@@ -328,6 +386,8 @@ export const PlaylistListHeaderFilters = ({ tableRef }: PlaylistListHeaderFilter
                                         </Group>
                                     </Stack>
                                 </DropdownMenu.Item>
+                            </>
+                        )}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>

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

@@ -3,6 +3,7 @@ import { Flex, Stack } from '@mantine/core';
 import { openModal, closeAllModals } from '@mantine/modals';
 import { MutableRefObject } from 'react';
 import { PageHeader, SpinnerIcon, Paper, Button } from '/@/renderer/components';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/create-playlist-form';
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
@@ -11,11 +12,12 @@ import { useCurrentServer } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/types';
 
 interface PlaylistListHeaderProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderProps) => {
+export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistListHeaderProps) => {
     const cq = useContainerQuery();
     const server = useCurrentServer();
 
@@ -56,11 +58,19 @@ export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderPr
                             )}
                         </Paper>
                     </LibraryHeaderBar>
-                    <Button onClick={handleCreatePlaylistModal}>Create playlist</Button>
+                    <Button
+                        variant="filled"
+                        onClick={handleCreatePlaylistModal}
+                    >
+                        Create
+                    </Button>
                 </Flex>
             </PageHeader>
             <Paper p="1rem">
-                <PlaylistListHeaderFilters tableRef={tableRef} />
+                <PlaylistListHeaderFilters
+                    gridRef={gridRef}
+                    tableRef={tableRef}
+                />
             </Paper>
         </Stack>
     );

src/renderer/features/playlists/components/playlist-list-table-view.tsx

@@ -0,0 +1,232 @@
+import {
+    ColDef,
+    GridReadyEvent,
+    IDatasource,
+    PaginationChangedEvent,
+    BodyScrollEvent,
+    RowDoubleClickedEvent,
+} from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Stack } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import debounce from 'lodash/debounce';
+import { useMemo, useCallback } from 'react';
+import { generatePath, useNavigate } from 'react-router';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryItem } from '/@/renderer/api/types';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components/virtual-table';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { PLAYLIST_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { AppRoute } from '/@/renderer/router/routes';
+import {
+    usePlaylistTablePagination,
+    useSetPlaylistTablePagination,
+    useSetPlaylistTable,
+    useCurrentServer,
+    usePlaylistListStore,
+} from '/@/renderer/store';
+import { ListDisplayType } from '/@/renderer/types';
+
+interface PlaylistListTableViewProps {
+    itemCount?: number;
+    tableRef: React.MutableRefObject<AgGridReactType | null>;
+}
+
+export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTableViewProps) => {
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+    const server = useCurrentServer();
+    const page = usePlaylistListStore();
+    const pagination = usePlaylistTablePagination();
+    const setPagination = useSetPlaylistTablePagination();
+    const setTable = useSetPlaylistTable();
+
+    const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED;
+
+    const columnDefs: ColDef[] = useMemo(
+        () => getColumnDefs(page.table.columns),
+        [page.table.columns],
+    );
+
+    const defaultColumnDefs: ColDef = useMemo(() => {
+        return {
+            lockPinned: true,
+            lockVisible: true,
+            resizable: true,
+        };
+    }, []);
+
+    const onGridReady = useCallback(
+        (params: GridReadyEvent) => {
+            const dataSource: IDatasource = {
+                getRows: async (params) => {
+                    const limit = params.endRow - params.startRow;
+                    const startIndex = params.startRow;
+
+                    const queryKey = queryKeys.playlists.list(server?.id || '', {
+                        limit,
+                        startIndex,
+                        ...page.filter,
+                    });
+
+                    const playlistsRes = await queryClient.fetchQuery(
+                        queryKey,
+                        async ({ signal }) =>
+                            api.controller.getPlaylistList({
+                                apiClientProps: {
+                                    server,
+                                    signal,
+                                },
+                                query: {
+                                    limit,
+                                    startIndex,
+                                    ...page.filter,
+                                },
+                            }),
+                        { cacheTime: 1000 * 60 * 1 },
+                    );
+
+                    params.successCallback(
+                        playlistsRes?.items || [],
+                        playlistsRes?.totalRecordCount || 0,
+                    );
+                },
+                rowCount: undefined,
+            };
+            params.api.setDatasource(dataSource);
+            params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
+        },
+        [page.filter, page.table.scrollOffset, queryClient, server],
+    );
+
+    const onPaginationChanged = useCallback(
+        (event: PaginationChangedEvent) => {
+            if (!isPaginationEnabled || !event.api) return;
+
+            try {
+                // Scroll to top of page on pagination change
+                const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
+                event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
+            } catch (err) {
+                console.log(err);
+            }
+
+            setPagination({
+                data: {
+                    itemsPerPage: event.api.paginationGetPageSize(),
+                    totalItems: event.api.paginationGetRowCount(),
+                    totalPages: event.api.paginationGetTotalPages() + 1,
+                },
+            });
+        },
+        [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination],
+    );
+
+    const handleGridSizeChange = () => {
+        if (page.table.autoFit) {
+            tableRef?.current?.api.sizeColumnsToFit();
+        }
+    };
+
+    const handleColumnChange = useCallback(() => {
+        const { columnApi } = tableRef?.current || {};
+        const columnsOrder = columnApi?.getAllGridColumns();
+
+        if (!columnsOrder) return;
+
+        const columnsInSettings = page.table.columns;
+        const updatedColumns = [];
+        for (const column of columnsOrder) {
+            const columnInSettings = columnsInSettings.find(
+                (c) => c.column === column.getColDef().colId,
+            );
+
+            if (columnInSettings) {
+                updatedColumns.push({
+                    ...columnInSettings,
+                    ...(!page.table.autoFit && {
+                        width: column.getActualWidth(),
+                    }),
+                });
+            }
+        }
+
+        setTable({ columns: updatedColumns });
+    }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
+
+    const debouncedColumnChange = debounce(handleColumnChange, 200);
+
+    const handleScroll = (e: BodyScrollEvent) => {
+        const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
+        setTable({ scrollOffset });
+    };
+
+    const handleContextMenu = useHandleTableContextMenu(
+        LibraryItem.PLAYLIST,
+        PLAYLIST_CONTEXT_MENU_ITEMS,
+    );
+
+    const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
+        if (!e.data) return;
+        navigate(generatePath(AppRoute.PLAYLISTS_DETAIL, { playlistId: e.data.id }));
+    };
+
+    return (
+        <Stack
+            h="100%"
+            spacing={0}
+        >
+            <VirtualGridAutoSizerContainer>
+                <VirtualTable
+                    // https://github.com/ag-grid/ag-grid/issues/5284
+                    // Key is used to force remount of table when display, rowHeight, or server changes
+                    key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
+                    ref={tableRef}
+                    alwaysShowHorizontalScroll
+                    suppressRowDrag
+                    autoFitColumns={page.table.autoFit}
+                    blockLoadDebounceMillis={200}
+                    cacheBlockSize={200}
+                    cacheOverflowSize={1}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColumnDefs}
+                    enableCellChangeFlash={false}
+                    getRowId={(data) => data.data.id}
+                    infiniteInitialRowCount={itemCount || 100}
+                    pagination={isPaginationEnabled}
+                    paginationAutoPageSize={isPaginationEnabled}
+                    paginationPageSize={page.table.pagination.itemsPerPage || 100}
+                    rowBuffer={20}
+                    rowHeight={page.table.rowHeight || 40}
+                    rowModelType="infinite"
+                    rowSelection="multiple"
+                    onBodyScrollEnd={handleScroll}
+                    onCellContextMenu={handleContextMenu}
+                    onColumnMoved={handleColumnChange}
+                    onColumnResized={debouncedColumnChange}
+                    onGridReady={onGridReady}
+                    onGridSizeChanged={handleGridSizeChange}
+                    onPaginationChanged={onPaginationChanged}
+                    onRowDoubleClicked={handleRowDoubleClick}
+                />
+            </VirtualGridAutoSizerContainer>
+            <AnimatePresence
+                presenceAffectsLayout
+                initial={false}
+                mode="wait"
+            >
+                {page.display === ListDisplayType.TABLE_PAGINATED && (
+                    <TablePagination
+                        pageKey=""
+                        pagination={pagination}
+                        setPagination={setPagination}
+                        tableRef={tableRef}
+                    />
+                )}
+            </AnimatePresence>
+        </Stack>
+    );
+};

src/renderer/features/playlists/routes/playlist-list-route.tsx

@@ -1,6 +1,7 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
 import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
 import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
 import { usePlaylistList } from '/@/renderer/features/playlists/queries/playlist-list-query';
@@ -8,6 +9,7 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 import { useCurrentServer } from '/@/renderer/store';
 
 const PlaylistListRoute = () => {
+    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
 
@@ -33,10 +35,12 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <PlaylistListHeader
+                gridRef={gridRef}
                 itemCount={itemCount}
                 tableRef={tableRef}
             />
             <PlaylistListContent
+                gridRef={gridRef}
                 itemCount={itemCount}
                 tableRef={tableRef}
             />

src/renderer/store/playlist.store.ts

@@ -33,10 +33,16 @@ type DetailProps = {
     table: DetailTableProps;
 };
 
+type ListGridProps = {
+    itemsPerRow?: number;
+    scrollOffset?: number;
+};
+
 export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
 
 interface PlaylistState {
     detail: DetailProps;
+    grid: ListGridProps;
     list: ListProps<PlaylistListFilter>;
 }
 
@@ -46,6 +52,7 @@ export interface PlaylistSlice extends PlaylistState {
         setDetailTable: (data: Partial<DetailTableProps>) => void;
         setDetailTablePagination: (id: string, data: Partial<DetailPaginationProps>) => void;
         setFilters: (data: Partial<PlaylistListFilter>) => PlaylistListFilter;
+        setGrid: (args: { data: Partial<ListGridProps> }) => void;
         setStore: (data: Partial<PlaylistSlice>) => void;
         setTable: (data: Partial<TableProps>) => void;
         setTablePagination: (args: { data: Partial<TablePagination> }) => void;
@@ -90,6 +97,14 @@ export const usePlaylistStore = create<PlaylistSlice>()(
 
                         return get().list.filter;
                     },
+                    setGrid: (args) => {
+                        set((state) => {
+                            state.grid = {
+                                ...state.grid,
+                                ...args.data,
+                            };
+                        });
+                    },
                     setStore: (data) => {
                         set({ ...get(), ...data });
                     },
@@ -133,6 +148,10 @@ export const usePlaylistStore = create<PlaylistSlice>()(
                         rowHeight: 60,
                     },
                 },
+                grid: {
+                    itemsPerRow: 5,
+                    scrollOffset: 0,
+                },
                 list: {
                     display: ListDisplayType.TABLE,
                     filter: {
@@ -189,6 +208,8 @@ export const usePlaylistFilters = () => {
     return usePlaylistStore((state) => [state.list.filter, state.actions.setFilters]);
 };
 
+export const usePlaylistGridStore = () => usePlaylistStore((state) => state.grid);
+
 export const usePlaylistListStore = () => usePlaylistStore((state) => state.list);
 
 export const usePlaylistTablePagination = () =>