implement new lists for albums

src/renderer/features/albums/components/album-list-infinite-grid.tsx

@@ -2,11 +2,10 @@ import { UseSuspenseQueryOptions } from '@tanstack/react-query';
 import { forwardRef } from 'react';
 
 import { api } from '/@/renderer/api';
-import {
-    InfiniteListProps,
-    useItemListInfiniteLoader,
-} from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
 import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
+import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import {
     AlbumListQuery,
@@ -14,16 +13,20 @@ import {
     LibraryItem,
     SortOrder,
 } from '/@/shared/types/domain-types';
-
-interface AlbumListInfiniteGridProps extends InfiniteListProps<AlbumListQuery> {}
+import { ItemListKey } from '/@/shared/types/types';
+interface AlbumListInfiniteGridProps extends ItemListGridComponentProps<AlbumListQuery> {}
 
 export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>(
     (
         {
+            gap = 'md',
+            itemsPerPage = 100,
+            itemsPerRow,
             query = {
                 sortBy: AlbumListSort.NAME,
                 sortOrder: SortOrder.ASC,
             },
+            saveScrollOffset = true,
             serverId,
         },
         ref,
@@ -36,18 +39,31 @@ export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>
         const listQueryFn = api.controller.getAlbumList;
 
         const { data, onRangeChanged } = useItemListInfiniteLoader({
-            itemsPerPage: 100,
+            eventKey: ItemListKey.ALBUM,
+            itemsPerPage,
+            itemType: LibraryItem.ALBUM,
             listCountQuery,
             listQueryFn,
             query,
             serverId,
         });
 
+        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+            enabled: saveScrollOffset,
+        });
+
         return (
             <ItemGridList
-                data={data || []}
+                data={data}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ALBUM}
                 onRangeChanged={onRangeChanged}
+                onScrollEnd={handleOnScrollEnd}
                 ref={ref}
             />
         );