Update album table view

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

@@ -86,7 +86,6 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
                 column: TableColumn.TITLE_COMBINED,
                 width: 0,
             },
-
             {
                 column: TableColumn.DURATION,
                 width: 0,

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

@@ -1,13 +1,10 @@
 import { MutableRefObject, useCallback, MouseEvent, ChangeEvent, useMemo } from 'react';
 import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Group, Stack } from '@mantine/core';
+import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
-import debounce from 'lodash/debounce';
 import {
-    RiSortAsc,
-    RiSortDesc,
     RiFolder2Line,
     RiMoreFill,
     RiAddBoxFill,
@@ -29,7 +26,7 @@ import {
     useListStoreActions,
 } from '/@/renderer/store';
 import { ServerType, Play, ListDisplayType, TableColumn } from '/@/renderer/types';
-import { useMusicFolders } from '/@/renderer/features/shared';
+import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
 import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
@@ -79,11 +76,6 @@ const FILTERS = {
     ],
 };
 
-const ORDER = [
-    { name: 'Ascending', value: SortOrder.ASC },
-    { name: 'Descending', value: SortOrder.DESC },
-];
-
 interface AlbumListHeaderFiltersProps {
     customFilters?: Partial<AlbumListFilter>;
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -100,7 +92,7 @@ export const AlbumListHeaderFilters = ({
     const queryClient = useQueryClient();
     const { id, pageKey } = useAlbumListContext();
     const server = useCurrentServer();
-    const { setFilter, setTablePagination, setTable, setGrid, setDisplayType, setTableColumns } =
+    const { setFilter, setTablePagination, setTable, setGrid, setDisplayType } =
         useListStoreActions();
     const { display, filter, table, grid } = useAlbumListStore({ id, key: pageKey });
     const cq = useContainerQuery();
@@ -113,8 +105,6 @@ export const AlbumListHeaderFilters = ({
                 ?.name) ||
         'Unknown';
 
-    const sortOrderLabel = ORDER.find((o) => o.value === filter.sortOrder)?.name || 'Unknown';
-
     const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;
 
     const fetch = useCallback(
@@ -371,8 +361,6 @@ export const AlbumListHeaderFilters = ({
         }
     };
 
-    const debouncedHandleItemSize = debounce(handleItemSize, 20);
-
     const handleSetViewType = useCallback(
         (e: MouseEvent<HTMLButtonElement>) => {
             if (!e.currentTarget?.value) return;
@@ -385,8 +373,8 @@ export const AlbumListHeaderFilters = ({
         const existingColumns = table.columns;
 
         if (values.length === 0) {
-            return setTableColumns({
+            return setTable({
-                data: [],
+                data: { columns: [] },
                 key: 'album',
             });
         }
@@ -395,13 +383,13 @@ export const AlbumListHeaderFilters = ({
         if (values.length > existingColumns.length) {
             const newColumn = { column: values[values.length - 1], width: 100 };
 
-            setTableColumns({ data: [...existingColumns, newColumn], key: 'album' });
+            setTable({ data: { columns: [...existingColumns, newColumn] }, key: 'album' });
         } else {
             // If removing a column
             const removed = existingColumns.filter((column) => !values.includes(column.column));
             const newColumns = existingColumns.filter((column) => !removed.includes(column));
 
-            setTableColumns({ data: newColumns, key: 'album' });
+            setTable({ data: { columns: newColumns }, key: 'album' });
         }
 
         return tableRef.current?.api.sizeColumnsToFit();
@@ -460,26 +448,14 @@ export const AlbumListHeaderFilters = ({
                         ))}
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
-                <Button
+                <Divider orientation="vertical" />
-                    compact
+                <OrderToggleButton
-                    fw={600}
+                    sortOrder={filter.sortOrder}
-                    size="md"
+                    onToggle={handleToggleSortOrder}
-                    variant="subtle"
+                />
-                    onClick={handleToggleSortOrder}
-                >
-                    {cq.isSm ? (
-                        sortOrderLabel
-                    ) : (
-                        <>
-                            {filter.sortOrder === SortOrder.ASC ? (
-                                <RiSortAsc size={15} />
-                            ) : (
-                                <RiSortDesc size={15} />
-                            )}
-                        </>
-                    )}
-                </Button>
                 {server?.type === ServerType.JELLYFIN && (
+                    <>
+                        <Divider orientation="vertical" />
                         <DropdownMenu position="bottom-start">
                             <DropdownMenu.Target>
                                 <Button
@@ -504,7 +480,24 @@ export const AlbumListHeaderFilters = ({
                                 ))}
                             </DropdownMenu.Dropdown>
                         </DropdownMenu>
+                    </>
                 )}
+                <Divider orientation="vertical" />
+                <Button
+                    compact
+                    size="md"
+                    sx={{
+                        svg: {
+                            fill: isFilterApplied ? 'var(--primary-color) !important' : undefined,
+                        },
+                    }}
+                    tooltip={{ label: 'Filters' }}
+                    variant="subtle"
+                    onClick={handleOpenFiltersModal}
+                >
+                    <RiFilterFill size="1.3rem" />
+                </Button>
+                <Divider orientation="vertical" />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button
@@ -548,20 +541,6 @@ export const AlbumListHeaderFilters = ({
                 noWrap
                 spacing="sm"
             >
-                <Button
-                    compact
-                    size="md"
-                    sx={{
-                        svg: {
-                            fill: isFilterApplied ? 'var(--primary-color) !important' : undefined,
-                        },
-                    }}
-                    tooltip={{ label: 'Filters' }}
-                    variant="subtle"
-                    onClick={handleOpenFiltersModal}
-                >
-                    <RiFilterFill size="1.3rem" />
-                </Button>
                 <DropdownMenu position="bottom-end">
                     <DropdownMenu.Target>
                         <Button
@@ -612,7 +591,7 @@ export const AlbumListHeaderFilters = ({
                                 defaultValue={isGrid ? grid?.itemsPerRow || 0 : table.rowHeight}
                                 max={isGrid ? 14 : 100}
                                 min={isGrid ? 2 : 25}
-                                onChange={debouncedHandleItemSize}
+                                onChangeEnd={handleItemSize}
                             />
                         </DropdownMenu.Item>
                         {(display === ListDisplayType.TABLE ||

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

@@ -1,16 +1,8 @@
-import { useMemo, useCallback } from 'react';
+import { useCallback } from 'react';
-import {
-    ColDef,
-    GridReadyEvent,
-    IDatasource,
-    PaginationChangedEvent,
-    BodyScrollEvent,
-    RowDoubleClickedEvent,
-} from '@ag-grid-community/core';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types';
+import { AlbumListQuery, AlbumListResponse, LibraryItem } from '/@/renderer/api/types';
-import { getColumnDefs, TablePagination, VirtualTable } from '/@/renderer/components/virtual-table';
+import { VirtualTable } from '/@/renderer/components/virtual-table';
 import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
 import {
     useCurrentServer,
@@ -18,199 +10,71 @@ import {
     useListStoreActions,
     useAlbumListStore,
 } from '/@/renderer/store';
-import { useQueryClient } from '@tanstack/react-query';
-import { AnimatePresence } from 'framer-motion';
-import debounce from 'lodash/debounce';
-import { ListDisplayType } from '/@/renderer/types';
-import { generatePath, useNavigate } from 'react-router';
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { AppRoute } from '/@/renderer/router/routes';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import {
+    useVirtualTable,
+    AgGridFetchFn,
+} from '../../../components/virtual-table/hooks/use-virtual-table';
 
 export const AlbumListTableView = ({ tableRef, itemCount }: any) => {
-    const queryClient = useQueryClient();
-    const navigate = useNavigate();
     const server = useCurrentServer();
     const { id, pageKey } = useAlbumListContext();
     const filter = useAlbumListFilter({ id, key: pageKey });
     const { setTable, setTablePagination } = useListStoreActions();
-    const { table, display } = useAlbumListStore({ id, key: pageKey });
+    const listProperties = useAlbumListStore({ id, key: pageKey });
-    const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
-    const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
 
-    const onTableReady = useCallback(
+    const fetchFn: AgGridFetchFn<
-        (params: GridReadyEvent) => {
+        AlbumListResponse,
-            const dataSource: IDatasource = {
+        Omit<AlbumListQuery, 'startIndex'>
-                getRows: async (params) => {
+    > = useCallback(
-                    const limit = params.endRow - params.startRow;
+        async ({ filter, limit, startIndex }, signal) => {
-                    const startIndex = params.startRow;
+            const res = api.controller.getAlbumList({
-
-                    const query: AlbumListQuery = {
-                        limit,
-                        startIndex,
-                        ...filter,
-                        _custom: {
-                            jellyfin: {
-                                ...filter._custom?.jellyfin,
-                            },
-                            navidrome: {
-                                ...filter._custom?.navidrome,
-                            },
-                        },
-                    };
-
-                    const queryKey = queryKeys.albums.list(server?.id || '', query);
-
-                    if (!server) {
-                        return params.failCallback();
-                    }
-
-                    const albumsRes = await queryClient.fetchQuery(
-                        queryKey,
-                        async ({ signal }) =>
-                            api.controller.getAlbumList({
                 apiClientProps: {
                     server,
                     signal,
                 },
-                                query,
+                query: {
-                            }),
+                    ...filter,
-                        { cacheTime: 1000 * 60 * 1 },
+                    limit,
-                    );
+                    sortBy: filter.sortBy,
-
+                    sortOrder: filter.sortOrder,
-                    return params.successCallback(
+                    startIndex,
-                        albumsRes?.items || [],
-                        albumsRes?.totalRecordCount || 0,
-                    );
                 },
-                rowCount: undefined,
-            };
-            params.api.setDatasource(dataSource);
-            params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
-        },
-        [filter, queryClient, server, table.scrollOffset],
-    );
-
-    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,
             });
+
+            return res;
         },
-        [
+        [server],
-            isPaginationEnabled,
+    );
-            setTablePagination,
+
+    const tableProps = useVirtualTable<AlbumListResponse, Omit<AlbumListQuery, 'startIndex'>>({
+        contextMenu: ALBUM_CONTEXT_MENU_ITEMS,
+        fetch: {
+            filter,
+            fn: fetchFn,
+            itemCount,
+            queryKey: queryKeys.albums.list,
+            server,
+        },
+        itemCount,
+        itemType: LibraryItem.ALBUM,
         pageKey,
-            table.pagination.currentPage,
+        properties: listProperties,
-            table.pagination.itemsPerPage,
+        setTable,
-        ],
+        setTablePagination,
-    );
+        tableRef,
-
-    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 handleContextMenu = useHandleTableContextMenu(
-        LibraryItem.ALBUM,
-        ALBUM_CONTEXT_MENU_ITEMS,
-    );
-
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
-        navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
-    };
 
     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-${display}-${table.rowHeight}-${server?.id}`}
+                key={`table-${listProperties.display}-${listProperties.table.rowHeight}-${server?.id}`}
                 ref={tableRef}
-                    alwaysShowHorizontalScroll
+                {...tableProps}
-                    suppressRowDrag
-                    autoFitColumns={table.autoFit}
-                    blockLoadDebounceMillis={200}
-                    columnDefs={columnDefs}
-                    getRowId={(data) => data.data.id}
-                    infiniteInitialRowCount={itemCount || 100}
-                    pagination={isPaginationEnabled}
-                    paginationAutoPageSize={isPaginationEnabled}
-                    paginationPageSize={table.pagination.itemsPerPage || 100}
-                    rowBuffer={20}
-                    rowHeight={table.rowHeight || 40}
-                    rowModelType="infinite"
-                    onBodyScrollEnd={handleTableScroll}
-                    onCellContextMenu={handleContextMenu}
-                    onColumnMoved={handleTableColumnChange}
-                    onColumnResized={debouncedTableColumnChange}
-                    onGridReady={onTableReady}
-                    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>
-            )}
-        </>
     );
 };