refactor grid list to support index offset

src/renderer/components/item-list/item-grid-list/item-grid-list.tsx

@@ -8,6 +8,7 @@ import React, {
     CSSProperties,
     memo,
     ReactNode,
+    Ref,
     RefObject,
     useCallback,
     useEffect,
@@ -150,10 +151,21 @@ const VirtualizedGridList = React.memo(
             return null;
         }
 
+        const calculateInitialScrollOffset = (): number => {
+            if (!initialTop) return 0;
+
+            if (initialTop.type === 'offset') {
+                return initialTop.to;
+            }
+
+            const rowIndex = Math.floor(initialTop.to / (tableMeta?.columnCount || 1));
+            return rowIndex * (tableMeta?.itemHeight || 0);
+        };
+
         return (
             <FixedSizeList
                 height={height}
-                initialScrollOffset={initialTop || 0}
+                initialScrollOffset={calculateInitialScrollOffset()}
                 itemCount={itemData.tableMeta?.rowCount || 0}
                 itemData={itemData}
                 itemSize={itemData.tableMeta?.itemHeight || 0}
@@ -251,13 +263,16 @@ export interface ItemGridListProps {
     enableSelection?: boolean;
     gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     getRowId?: ((item: unknown) => string) | string;
-    initialTop?: number;
+    initialTop?: {
+        to: number;
+        type: 'index' | 'offset';
+    };
     itemsPerRow?: number;
     itemType: LibraryItem;
     onRangeChanged?: (range: { startIndex: number; stopIndex: number }) => void;
     onScroll?: (offset: number, direction: 'down' | 'up') => void;
     onScrollEnd?: (offset: number, direction: 'down' | 'up') => void;
-    ref?: RefObject<ItemListHandle>;
+    ref?: Ref<ItemListHandle>;
 }
 
 export const ItemGridList = ({
@@ -503,7 +518,7 @@ export const ItemGridList = ({
                                 internalState.extractRowId(rangeItem)
                             ) {
                                 rangeItems.push(
-                                    rangeItem as ItemListStateItemWithRequiredProperties,
+                                    rangeItem as unknown as ItemListStateItemWithRequiredProperties,
                                 );
                             }
                         }

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

@@ -56,7 +56,10 @@ export const AlbumListInfiniteGrid = forwardRef<any, AlbumListInfiniteGridProps>
             <ItemGridList
                 data={data}
                 gap={gap}
-                initialTop={scrollOffset ?? 0}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ALBUM}
                 onRangeChanged={onRangeChanged}

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

@@ -57,7 +57,10 @@ export const AlbumArtistListInfiniteGrid = forwardRef<any, AlbumArtistListInfini
             <ItemGridList
                 data={data}
                 gap={gap}
-                initialTop={scrollOffset ?? 0}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ALBUM_ARTIST}
                 onRangeChanged={onRangeChanged}

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

@@ -57,7 +57,10 @@ export const ArtistListInfiniteGrid = forwardRef<any, ArtistListInfiniteGridProp
             <ItemGridList
                 data={data}
                 gap={gap}
-                initialTop={scrollOffset ?? 0}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.ARTIST}
                 onRangeChanged={onRangeChanged}

src/renderer/features/genres/components/genre-list-infinite-grid.tsx

@@ -57,7 +57,10 @@ export const GenreListInfiniteGrid = forwardRef<any, GenreListInfiniteGridProps>
             <ItemGridList
                 data={data}
                 gap={gap}
-                initialTop={scrollOffset ?? 0}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.GENRE}
                 onRangeChanged={onRangeChanged}

src/renderer/features/songs/components/song-list-infinite-grid.tsx

@@ -52,7 +52,10 @@ export const SongListInfiniteGrid = forwardRef<any, SongListInfiniteGridProps>(
             <ItemGridList
                 data={data}
                 gap={gap}
-                initialTop={scrollOffset ?? 0}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
                 itemsPerRow={itemsPerRow}
                 itemType={LibraryItem.SONG}
                 onRangeChanged={onRangeChanged}