Update album artist list views

src/renderer/features/artists/components/album-artist-list-content.tsx

@@ -1,343 +1,53 @@
-import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
-import { AppRoute } from '/@/renderer/router/routes';
-import { ListDisplayType, CardRow } from '/@/renderer/types';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { MutableRefObject, useCallback, useMemo } from 'react';
-import { ListOnScrollProps } from 'react-window';
-import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { AlbumArtist, AlbumArtistListSort, LibraryItem } from '/@/renderer/api/types';
-import { useQueryClient } from '@tanstack/react-query';
-import { useCurrentServer, useAlbumArtistListStore } from '/@/renderer/store';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import {
-    BodyScrollEvent,
-    ColDef,
-    GridReadyEvent,
-    IDatasource,
-    PaginationChangedEvent,
-    RowDoubleClickedEvent,
-} from '@ag-grid-community/core';
-import { AnimatePresence } from 'framer-motion';
-import debounce from 'lodash/debounce';
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { generatePath, useNavigate } from 'react-router';
-import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
-import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useAlbumArtistListFilter, useListStoreActions } from '../../../store/list.store';
-import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
-import {
-    VirtualInfiniteGridRef,
-    VirtualGridAutoSizerContainer,
-    VirtualInfiniteGrid,
-} from '/@/renderer/components/virtual-grid';
-import { getColumnDefs, VirtualTable, TablePagination } from '/@/renderer/components/virtual-table';
+import { lazy, MutableRefObject, Suspense } from 'react';
+import { Spinner } from '/@/renderer/components';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useAlbumArtistListStore } from '/@/renderer/store';
+import { ListDisplayType } from '/@/renderer/types';
+
+const AlbumArtistListGridView = lazy(() =>
+    import('/@/renderer/features/artists/components/album-artist-list-grid-view').then(
+        (module) => ({
+            default: module.AlbumArtistListGridView,
+        }),
+    ),
+);
+
+const AlbumArtistListTableView = lazy(() =>
+    import('/@/renderer/features/artists/components/album-artist-list-table-view').then(
+        (module) => ({
+            default: module.AlbumArtistListTableView,
+        }),
+    ),
+);
 
 interface AlbumArtistListContentProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListContentProps) => {
-    const queryClient = useQueryClient();
-    const navigate = useNavigate();
-    const server = useCurrentServer();
-    const handlePlayQueueAdd = usePlayQueueAdd();
-
-    const { id, pageKey } = useAlbumArtistListContext();
-    const filter = useAlbumArtistListFilter({ id, key: pageKey });
-    const { table, grid, display } = useAlbumArtistListStore();
-    const { setTable, setTablePagination, setGrid } = useListStoreActions();
-
-    const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
-
-    const checkAlbumArtistList = useAlbumArtistList({
-        options: {
-            cacheTime: Infinity,
-            staleTime: 60 * 1000 * 5,
-        },
-        query: {
-            limit: 1,
-            startIndex: 0,
-            ...filter,
-        },
-        serverId: server?.id,
-    });
-
-    const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
-
-    const onTableReady = useCallback(
-        (params: GridReadyEvent) => {
-            const dataSource: IDatasource = {
-                getRows: async (params) => {
-                    const limit = params.endRow - params.startRow;
-                    const startIndex = params.startRow;
-
-                    const queryKey = queryKeys.albumArtists.list(server?.id || '', {
-                        limit,
-                        startIndex,
-                        ...filter,
-                    });
-
-                    const albumArtistsRes = await queryClient.fetchQuery(
-                        queryKey,
-                        async ({ signal }) =>
-                            api.controller.getAlbumArtistList({
-                                apiClientProps: {
-                                    server,
-                                    signal,
-                                },
-                                query: {
-                                    limit,
-                                    startIndex,
-                                    ...filter,
-                                },
-                            }),
-                        { cacheTime: 1000 * 60 * 1 },
-                    );
-
-                    params.successCallback(
-                        albumArtistsRes?.items || [],
-                        albumArtistsRes?.totalRecordCount || 0,
-                    );
-                },
-                rowCount: undefined,
-            };
-
-            params.api.setDatasource(dataSource);
-            params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
-        },
-        [filter, table.scrollOffset, queryClient, server],
-    );
-
-    const onTablePaginationChanged = useCallback(
-        (event: PaginationChangedEvent) => {
-            if (!isPaginationEnabled || !event.api) return;
-
-            try {
-                // Scroll to top of page on pagination change
-                const currentPageStartIndex =
-                    table.pagination.currentPage * table.pagination.itemsPerPage;
-                event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
-            } catch (err) {
-                console.log(err);
-            }
-
-            setTablePagination({
-                data: {
-                    itemsPerPage: event.api.paginationGetPageSize(),
-                    totalItems: event.api.paginationGetRowCount(),
-                    totalPages: event.api.paginationGetTotalPages() + 1,
-                },
-                key: pageKey,
-            });
-        },
-        [
-            isPaginationEnabled,
-            pageKey,
-            setTablePagination,
-            table.pagination.currentPage,
-            table.pagination.itemsPerPage,
-        ],
-    );
-
-    const handleTableColumnChange = useCallback(() => {
-        const { columnApi } = tableRef?.current || {};
-        const columnsOrder = columnApi?.getAllGridColumns();
-
-        if (!columnsOrder) return;
-
-        const columnsInSettings = table.columns;
-        const updatedColumns = [];
-        for (const column of columnsOrder) {
-            const columnInSettings = columnsInSettings.find(
-                (c) => c.column === column.getColDef().colId,
-            );
-
-            if (columnInSettings) {
-                updatedColumns.push({
-                    ...columnInSettings,
-                    ...(!table.autoFit && {
-                        width: column.getColDef().width,
-                    }),
-                });
-            }
-        }
-
-        setTable({ data: { columns: updatedColumns }, key: pageKey });
-    }, [tableRef, table.columns, table.autoFit, setTable, pageKey]);
-
-    const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
-
-    const handleTableScroll = (e: BodyScrollEvent) => {
-        const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
-        setTable({ data: { scrollOffset }, key: pageKey });
-    };
-
-    const fetch = useCallback(
-        async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
-            const queryKey = queryKeys.albumArtists.list(server?.id || '', {
-                limit,
-                startIndex,
-                ...filter,
-            });
-
-            const albumArtistsRes = await queryClient.fetchQuery(
-                queryKey,
-                async ({ signal }) =>
-                    api.controller.getAlbumArtistList({
-                        apiClientProps: {
-                            server,
-                            signal,
-                        },
-                        query: {
-                            limit,
-                            startIndex,
-                            ...filter,
-                        },
-                    }),
-                { cacheTime: 1000 * 60 * 1 },
-            );
-
-            return albumArtistsRes;
-        },
-        [filter, queryClient, server],
-    );
-
-    const handleGridScroll = useCallback(
-        (e: ListOnScrollProps) => {
-            setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
-        },
-        [pageKey, setGrid],
-    );
-
-    const handleGridSizeChange = () => {
-        if (table.autoFit) {
-            tableRef?.current?.api.sizeColumnsToFit();
-        }
-    };
-
-    const cardRows = useMemo(() => {
-        const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
-
-        switch (filter.sortBy) {
-            case AlbumArtistListSort.DURATION:
-                rows.push(ALBUMARTIST_CARD_ROWS.duration);
-                break;
-            case AlbumArtistListSort.FAVORITED:
-                break;
-            case AlbumArtistListSort.NAME:
-                break;
-            case AlbumArtistListSort.ALBUM_COUNT:
-                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
-                break;
-            case AlbumArtistListSort.PLAY_COUNT:
-                rows.push(ALBUMARTIST_CARD_ROWS.playCount);
-                break;
-            case AlbumArtistListSort.RANDOM:
-                break;
-            case AlbumArtistListSort.RATING:
-                rows.push(ALBUMARTIST_CARD_ROWS.rating);
-                break;
-            case AlbumArtistListSort.RECENTLY_ADDED:
-                break;
-            case AlbumArtistListSort.SONG_COUNT:
-                rows.push(ALBUMARTIST_CARD_ROWS.songCount);
-                break;
-            case AlbumArtistListSort.RELEASE_DATE:
-                break;
-        }
-
-        return rows;
-    }, [filter.sortBy]);
-
-    const handleContextMenu = useHandleTableContextMenu(
-        LibraryItem.ALBUM_ARTIST,
-        ALBUM_CONTEXT_MENU_ITEMS,
-    );
-
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
-        navigate(generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: e.data.id }));
-    };
+export const AlbumArtistListContent = ({
+    itemCount,
+    gridRef,
+    tableRef,
+}: AlbumArtistListContentProps) => {
+    const { display } = useAlbumArtistListStore();
+    const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
 
     return (
-        <>
-            <VirtualGridAutoSizerContainer>
-                {display === ListDisplayType.CARD || display === ListDisplayType.POSTER ? (
-                    <AutoSizer>
-                        {({ height, width }) => (
-                            <>
-                                <VirtualInfiniteGrid
-                                    ref={gridRef}
-                                    cardRows={cardRows}
-                                    display={display || ListDisplayType.CARD}
-                                    fetchFn={fetch}
-                                    handlePlayQueueAdd={handlePlayQueueAdd}
-                                    height={height}
-                                    initialScrollOffset={grid?.scrollOffset || 0}
-                                    itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
-                                    itemGap={20}
-                                    itemSize={grid?.itemsPerRow || 5}
-                                    itemType={LibraryItem.ALBUM_ARTIST}
-                                    loading={checkAlbumArtistList.isLoading}
-                                    minimumBatchSize={40}
-                                    route={{
-                                        route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-                                        slugs: [
-                                            { idProperty: 'id', slugProperty: 'albumArtistId' },
-                                        ],
-                                    }}
-                                    width={width}
-                                    onScroll={handleGridScroll}
-                                />
-                            </>
-                        )}
-                    </AutoSizer>
-                ) : (
-                    <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-${display}-${table.rowHeight}-${server?.id}`}
-                        ref={tableRef}
-                        alwaysShowHorizontalScroll
-                        suppressRowDrag
-                        autoFitColumns={table.autoFit}
-                        columnDefs={columnDefs}
-                        getRowId={(data) => data.data.id}
-                        infiniteInitialRowCount={checkAlbumArtistList.data?.totalRecordCount || 1}
-                        pagination={isPaginationEnabled}
-                        paginationAutoPageSize={isPaginationEnabled}
-                        paginationPageSize={table.pagination.itemsPerPage || 100}
-                        rowHeight={table.rowHeight || 40}
-                        rowModelType="infinite"
-                        onBodyScrollEnd={handleTableScroll}
-                        onCellContextMenu={handleContextMenu}
-                        onColumnMoved={handleTableColumnChange}
-                        onColumnResized={debouncedTableColumnChange}
-                        onGridReady={onTableReady}
-                        onGridSizeChanged={handleGridSizeChange}
-                        onPaginationChanged={onTablePaginationChanged}
-                        onRowDoubleClicked={handleRowDoubleClick}
-                    />
-                )}
-            </VirtualGridAutoSizerContainer>
-            {isPaginationEnabled && (
-                <AnimatePresence
-                    presenceAffectsLayout
-                    initial={false}
-                    mode="wait"
-                >
-                    {display === ListDisplayType.TABLE_PAGINATED && (
-                        <TablePagination
-                            pageKey={pageKey}
-                            pagination={table.pagination}
-                            setPagination={setTablePagination}
-                            tableRef={tableRef}
-                        />
-                    )}
-                </AnimatePresence>
+        <Suspense fallback={<Spinner container />}>
+            {isGrid ? (
+                <AlbumArtistListGridView
+                    gridRef={gridRef}
+                    itemCount={itemCount}
+                />
+            ) : (
+                <AlbumArtistListTableView
+                    itemCount={itemCount}
+                    tableRef={tableRef}
+                />
             )}
-        </>
+        </Suspense>
     );
 };

src/renderer/features/artists/components/album-artist-list-grid-view.tsx

@@ -0,0 +1,137 @@
+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 { VirtualGridAutoSizerContainer } from '../../../components/virtual-grid/virtual-grid-wrapper';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AlbumArtist, AlbumArtistListSort, LibraryItem } from '/@/renderer/api/types';
+import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
+import { VirtualInfiniteGrid, VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { AppRoute } from '/@/renderer/router/routes';
+import {
+    useAlbumArtistListFilter,
+    useAlbumArtistListStore,
+    useCurrentServer,
+    useListStoreActions,
+} from '/@/renderer/store';
+import { CardRow, ListDisplayType } from '/@/renderer/types';
+
+interface AlbumArtistListGridViewProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
+}
+
+export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListGridViewProps) => {
+    const queryClient = useQueryClient();
+    const server = useCurrentServer();
+    const handlePlayQueueAdd = usePlayQueueAdd();
+
+    const { id, pageKey } = useAlbumArtistListContext();
+    const filter = useAlbumArtistListFilter({ id, key: pageKey });
+    const { grid, display } = useAlbumArtistListStore();
+    const { setGrid } = useListStoreActions();
+
+    const fetch = useCallback(
+        async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
+            const queryKey = queryKeys.albumArtists.list(server?.id || '', {
+                limit,
+                startIndex,
+                ...filter,
+            });
+
+            const albumArtistsRes = await queryClient.fetchQuery(
+                queryKey,
+                async ({ signal }) =>
+                    api.controller.getAlbumArtistList({
+                        apiClientProps: {
+                            server,
+                            signal,
+                        },
+                        query: {
+                            limit,
+                            startIndex,
+                            ...filter,
+                        },
+                    }),
+                { cacheTime: 1000 * 60 * 1 },
+            );
+
+            return albumArtistsRes;
+        },
+        [filter, queryClient, server],
+    );
+
+    const handleGridScroll = useCallback(
+        (e: ListOnScrollProps) => {
+            setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
+        },
+        [pageKey, setGrid],
+    );
+
+    const cardRows = useMemo(() => {
+        const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
+
+        switch (filter.sortBy) {
+            case AlbumArtistListSort.DURATION:
+                rows.push(ALBUMARTIST_CARD_ROWS.duration);
+                break;
+            case AlbumArtistListSort.FAVORITED:
+                break;
+            case AlbumArtistListSort.NAME:
+                break;
+            case AlbumArtistListSort.ALBUM_COUNT:
+                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
+                break;
+            case AlbumArtistListSort.PLAY_COUNT:
+                rows.push(ALBUMARTIST_CARD_ROWS.playCount);
+                break;
+            case AlbumArtistListSort.RANDOM:
+                break;
+            case AlbumArtistListSort.RATING:
+                rows.push(ALBUMARTIST_CARD_ROWS.rating);
+                break;
+            case AlbumArtistListSort.RECENTLY_ADDED:
+                break;
+            case AlbumArtistListSort.SONG_COUNT:
+                rows.push(ALBUMARTIST_CARD_ROWS.songCount);
+                break;
+            case AlbumArtistListSort.RELEASE_DATE:
+                break;
+        }
+
+        return rows;
+    }, [filter.sortBy]);
+
+    return (
+        <VirtualGridAutoSizerContainer>
+            <AutoSizer>
+                {({ height, width }) => (
+                    <VirtualInfiniteGrid
+                        ref={gridRef}
+                        cardRows={cardRows}
+                        display={display || ListDisplayType.CARD}
+                        fetchFn={fetch}
+                        handlePlayQueueAdd={handlePlayQueueAdd}
+                        height={height}
+                        initialScrollOffset={grid?.scrollOffset || 0}
+                        itemCount={itemCount || 0}
+                        itemGap={20}
+                        itemSize={grid?.itemsPerRow || 5}
+                        itemType={LibraryItem.ALBUM_ARTIST}
+                        loading={itemCount === undefined || itemCount === null}
+                        minimumBatchSize={40}
+                        route={{
+                            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+                            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+                        }}
+                        width={width}
+                        onScroll={handleGridScroll}
+                    />
+                )}
+            </AutoSizer>
+        </VirtualGridAutoSizerContainer>
+    );
+};

src/renderer/features/artists/components/album-artist-list-header-filters.tsx

@@ -1,34 +1,27 @@
-import { useCallback, ChangeEvent, MutableRefObject, MouseEvent } from 'react';
 import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Group, Stack, Flex } from '@mantine/core';
+import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
-import {
-    RiSortAsc,
-    RiSortDesc,
-    RiFolder2Line,
-    RiMoreFill,
-    RiRefreshLine,
-    RiSettings3Fill,
-} from 'react-icons/ri';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
+import { RiFolder2Line, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+import { useAlbumArtistListContext } from '../context/album-artist-list-context';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
-import { DropdownMenu, Text, Button, Slider, MultiSelect, Switch } from '/@/renderer/components';
-import { useMusicFolders } from '/@/renderer/features/shared';
-import { useContainerQuery } from '/@/renderer/hooks';
-import {
-    useCurrentServer,
-    useAlbumArtistListStore,
-    AlbumArtistListFilter,
-    useListStoreActions,
-    useAlbumArtistListFilter,
-} from '/@/renderer/store';
-import { ListDisplayType, TableColumn, ServerType } from '/@/renderer/types';
-import { useAlbumArtistListContext } from '../context/album-artist-list-context';
+import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
+import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
+import { useContainerQuery } from '/@/renderer/hooks';
+import {
+    AlbumArtistListFilter,
+    useAlbumArtistListFilter,
+    useAlbumArtistListStore,
+    useCurrentServer,
+    useListStoreActions,
+} from '/@/renderer/store';
+import { ListDisplayType, ServerType, TableColumn } from '/@/renderer/types';
 
 const FILTERS = {
     jellyfin: [
@@ -61,11 +54,6 @@ const FILTERS = {
     ],
 };
 
-const ORDER = [
-    { name: 'Ascending', value: SortOrder.ASC },
-    { name: 'Descending', value: SortOrder.DESC },
-];
-
 interface AlbumArtistListHeaderFiltersProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     tableRef: MutableRefObject<AgGridReactType | null>;
@@ -84,6 +72,7 @@ export const AlbumArtistListHeaderFilters = ({
     const filter = useAlbumArtistListFilter({ key: pageKey });
     const cq = useContainerQuery();
 
+    const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
     const musicFoldersQuery = useMusicFolders({ query: null, serverId: server?.id });
 
     const sortByLabel =
@@ -92,8 +81,6 @@ export const AlbumArtistListHeaderFilters = ({
                 ?.name) ||
         'Unknown';
 
-    const sortOrderLabel = ORDER.find((o) => o.value === filter.sortOrder)?.name || 'Unknown';
-
     const handleItemSize = (e: number) => {
         if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
             setTable({ data: { rowHeight: e }, key: pageKey });
@@ -332,51 +319,41 @@ export const AlbumArtistListHeaderFilters = ({
                         ))}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
-                <Button
-                    compact
-                    fw="600"
-                    size="md"
-                    variant="subtle"
-                    onClick={handleToggleSortOrder}
-                >
-                    {cq.isMd ? (
-                        sortOrderLabel
-                    ) : (
-                        <>
-                            {filter.sortOrder === SortOrder.ASC ? (
-                                <RiSortAsc size={15} />
-                            ) : (
-                                <RiSortDesc size={15} />
-                            )}
-                        </>
-                    )}
-                </Button>
+                <Divider orientation="vertical" />
+                <OrderToggleButton
+                    sortOrder={filter.sortOrder}
+                    onToggle={handleToggleSortOrder}
+                />
                 {server?.type === ServerType.JELLYFIN && (
-                    <DropdownMenu position="bottom-start">
-                        <DropdownMenu.Target>
-                            <Button
-                                compact
-                                fw="600"
-                                size="md"
-                                variant="subtle"
-                            >
-                                {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
-                            </Button>
-                        </DropdownMenu.Target>
-                        <DropdownMenu.Dropdown>
-                            {musicFoldersQuery.data?.items.map((folder) => (
-                                <DropdownMenu.Item
-                                    key={`musicFolder-${folder.id}`}
-                                    $isActive={filter.musicFolderId === folder.id}
-                                    value={folder.id}
-                                    onClick={handleSetMusicFolder}
+                    <>
+                        <Divider orientation="vertical" />
+                        <DropdownMenu position="bottom-start">
+                            <DropdownMenu.Target>
+                                <Button
+                                    compact
+                                    fw="600"
+                                    size="md"
+                                    variant="subtle"
                                 >
-                                    {folder.name}
-                                </DropdownMenu.Item>
-                            ))}
-                        </DropdownMenu.Dropdown>
-                    </DropdownMenu>
+                                    {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
+                                </Button>
+                            </DropdownMenu.Target>
+                            <DropdownMenu.Dropdown>
+                                {musicFoldersQuery.data?.items.map((folder) => (
+                                    <DropdownMenu.Item
+                                        key={`musicFolder-${folder.id}`}
+                                        $isActive={filter.musicFolderId === folder.id}
+                                        value={folder.id}
+                                        onClick={handleSetMusicFolder}
+                                    >
+                                        {folder.name}
+                                    </DropdownMenu.Item>
+                                ))}
+                            </DropdownMenu.Dropdown>
+                        </DropdownMenu>
+                    </>
                 )}
+                <Divider orientation="vertical" />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button
@@ -460,8 +437,7 @@ export const AlbumArtistListHeaderFilters = ({
                                 />
                             )}
                         </DropdownMenu.Item>
-                        {(display === ListDisplayType.TABLE ||
-                            display === ListDisplayType.TABLE_PAGINATED) && (
+                        {!isGrid && (
                             <>
                                 <DropdownMenu.Label>Table Columns</DropdownMenu.Label>
                                 <DropdownMenu.Item

src/renderer/features/artists/components/album-artist-list-table-view.tsx

@@ -0,0 +1,92 @@
+import { MutableRefObject, useCallback } from 'react';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { AlbumArtistListQuery, AlbumArtistListResponse, LibraryItem } from '/@/renderer/api/types';
+import {
+    AgGridFetchFn,
+    useVirtualTable,
+} from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
+import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
+import { ARTIST_CONTEXT_MENU_ITEMS } from '../../context-menu/context-menu-items';
+import {
+    useAlbumArtistListFilter,
+    useAlbumArtistListStore,
+    useCurrentServer,
+    useListStoreActions,
+} from '/@/renderer/store';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { VirtualTable } from '/@/renderer/components/virtual-table';
+
+interface AlbumArtistListTableViewProps {
+    itemCount?: number;
+    tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistListTableView = ({
+    itemCount,
+    tableRef,
+}: AlbumArtistListTableViewProps) => {
+    const server = useCurrentServer();
+    const { id, pageKey } = useAlbumArtistListContext();
+    const filter = useAlbumArtistListFilter({ id, key: pageKey });
+    const listProperties = useAlbumArtistListStore();
+    const { setTable, setTablePagination } = useListStoreActions();
+
+    const fetchFn: AgGridFetchFn<
+        AlbumArtistListResponse,
+        Omit<AlbumArtistListQuery, 'startIndex'>
+    > = useCallback(
+        async ({ filter, limit, startIndex }, signal) => {
+            const res = api.controller.getAlbumArtistList({
+                apiClientProps: {
+                    server,
+                    signal,
+                },
+                query: {
+                    ...filter,
+                    limit,
+                    sortBy: filter.sortBy,
+                    sortOrder: filter.sortOrder,
+                    startIndex,
+                },
+            });
+
+            return res;
+        },
+        [server],
+    );
+
+    const tableProps = useVirtualTable<
+        AlbumArtistListResponse,
+        Omit<AlbumArtistListQuery, 'startIndex'>
+    >({
+        contextMenu: ARTIST_CONTEXT_MENU_ITEMS,
+        fetch: {
+            filter,
+            fn: fetchFn,
+            itemCount,
+            queryKey: queryKeys.albums.list,
+            server,
+        },
+        itemCount,
+        itemType: LibraryItem.SONG,
+        pageKey,
+        properties: listProperties,
+        setTable,
+        setTablePagination,
+        tableRef,
+    });
+
+    return (
+        <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-${listProperties.display}-${listProperties.table.rowHeight}-${server?.id}`}
+                ref={tableRef}
+                {...tableProps}
+            />
+        </VirtualGridAutoSizerContainer>
+    );
+};

src/renderer/features/artists/routes/album-artist-list-route.tsx

@@ -45,6 +45,7 @@ const AlbumArtistListRoute = () => {
                 />
                 <AlbumArtistListContent
                     gridRef={gridRef}
+                    itemCount={itemCount}
                     tableRef={tableRef}
                 />
             </AlbumArtistListContext.Provider>