Fix list store for artist detail

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

@@ -10,7 +10,7 @@ import {
 import { AppRoute } from '/@/renderer/router/routes';
 import { ListDisplayType, CardRow } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { MutableRefObject, useCallback, useMemo, useState } from 'react';
+import { MutableRefObject, useCallback, useMemo } from 'react';
 import { ListOnScrollProps } from 'react-window';
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
@@ -21,7 +21,6 @@ import {
   useCurrentServer,
   useAlbumListStore,
   useAlbumListItemData,
-  AlbumListFilter,
   useListStoreActions,
   useAlbumListFilter,
 } from '/@/renderer/store';
@@ -44,30 +43,23 @@ import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/share
 import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
 
 interface AlbumListContentProps {
-  customFilters?: Partial<AlbumListFilter>;
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
   itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumListContent = ({
+export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
-  customFilters,
-  itemCount,
-  gridRef,
-  tableRef,
-}: AlbumListContentProps) => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const server = useCurrentServer();
   const handlePlayQueueAdd = usePlayQueueAdd();
 
   const { itemData, setItemData } = useAlbumListItemData();
-  const [localItemData, setLocalItemData] = useState<any[]>([]);
 
   const { id, pageKey } = useAlbumListContext();
   const filter = useAlbumListFilter({ id, key: pageKey });
   const { setTable, setTablePagination, setGrid } = useListStoreActions();
-  const { table, grid, display } = useAlbumListStore();
+  const { table, grid, display } = useAlbumListStore({ id, key: pageKey });
   const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
 
   const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]);
@@ -83,14 +75,11 @@ export const AlbumListContent = ({
             limit,
             startIndex,
             ...filter,
-            ...customFilters,
             jfParams: {
               ...filter.jfParams,
-              ...customFilters?.jfParams,
             },
             ndParams: {
               ...filter.ndParams,
-              ...customFilters?.ndParams,
             },
           };
 
@@ -113,12 +102,8 @@ export const AlbumListContent = ({
         rowCount: undefined,
       };
       params.api.setDatasource(dataSource);
-
-      if (!customFilters) {
-        params.api.ensureIndexVisible(table.scrollOffset || 0, 'top');
-      }
     },
-    [customFilters, filter, table.scrollOffset, queryClient, server],
+    [filter, queryClient, server],
   );
 
   const onTablePaginationChanged = useCallback(
@@ -178,7 +163,6 @@ export const AlbumListContent = ({
   const debouncedTableColumnChange = debounce(handleTableColumnChange, 200);
 
   const handleTableScroll = (e: BodyScrollEvent) => {
-    if (customFilters) return;
     const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
     setTable({ data: { scrollOffset }, key: pageKey });
   };
@@ -189,14 +173,11 @@ export const AlbumListContent = ({
         limit: take,
         startIndex: skip,
         ...filter,
-        ...customFilters,
         jfParams: {
           ...filter.jfParams,
-          ...customFilters?.jfParams,
         },
         ndParams: {
           ...filter.ndParams,
-          ...customFilters?.ndParams,
         },
       };
 
@@ -212,15 +193,14 @@ export const AlbumListContent = ({
 
       return api.normalize.albumList(albums, server);
     },
-    [customFilters, filter, queryClient, server],
+    [filter, queryClient, server],
   );
 
   const handleGridScroll = useCallback(
     (e: ListOnScrollProps) => {
-      if (customFilters) return;
       setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
     },
-    [customFilters, pageKey, setGrid],
+    [pageKey, setGrid],
   );
 
   const cardRows = useMemo(() => {
@@ -334,9 +314,9 @@ export const AlbumListContent = ({
                   handleFavorite={handleFavorite}
                   handlePlayQueueAdd={handlePlayQueueAdd}
                   height={height}
-                  initialScrollOffset={customFilters ? 0 : grid?.scrollOffset || 0}
+                  initialScrollOffset={grid?.scrollOffset || 0}
                   itemCount={itemCount || 0}
-                  itemData={customFilters ? localItemData : itemData}
+                  itemData={itemData}
                   itemGap={20}
                   itemSize={150 + (grid?.size || 0)}
                   itemType={LibraryItem.ALBUM}
@@ -346,7 +326,7 @@ export const AlbumListContent = ({
                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                     slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
                   }}
-                  setItemData={customFilters ? setLocalItemData : setItemData}
+                  setItemData={setItemData}
                   width={width}
                   onScroll={handleGridScroll}
                 />

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

@@ -97,7 +97,7 @@ export const AlbumListHeaderFilters = ({
   const server = useCurrentServer();
   const { setFilter, setTablePagination, setTable, setGrid, setDisplayType, setTableColumns } =
     useListStoreActions();
-  const { display, filter, table, grid } = useAlbumListStore();
+  const { display, filter, table, grid } = useAlbumListStore({ id, key: pageKey });
   const cq = useContainerQuery();
 
   const musicFoldersQuery = useMusicFolders();

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

@@ -28,6 +28,7 @@ import { ListDisplayType, Play } from '/@/renderer/types';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context';
 
 interface AlbumListHeaderProps {
   customFilters?: Partial<AlbumListFilter>;
@@ -48,7 +49,8 @@ export const AlbumListHeader = ({
   const server = useCurrentServer();
   const { setFilter, setTablePagination } = useListStoreActions();
   const cq = useContainerQuery();
-  const { filter, display } = useAlbumListStore();
+  const { id, pageKey } = useAlbumListContext();
+  const { filter, display } = useAlbumListStore({ id, key: pageKey });
 
   const fetch = useCallback(
     async (skip: number, take: number, filters: AlbumListFilter) => {

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -23,8 +23,6 @@ export const NavidromeAlbumFilters = ({
   const filter = useAlbumListFilter({ id, key: pageKey });
   const { setFilter } = useListStoreActions();
 
-  console.log('pageKey, id', pageKey, id);
-
   const genreListQuery = useGenreList(null);
 
   const genreList = useMemo(() => {
@@ -74,7 +72,6 @@ export const NavidromeAlbumFilters = ({
           },
           key: pageKey,
         }) as AlbumListFilter;
-        console.log('updatedFilters :>> ', updatedFilters);
         handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.starred,

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

@@ -270,8 +270,6 @@ export const AlbumArtistDetailContent = () => {
     ARTIST_CONTEXT_MENU_ITEMS,
   );
 
-  console.log('topSongsQuery?.data :>> ', topSongsQuery?.data);
-
   const topSongs = topSongsQuery?.data?.items?.slice(0, 10);
 
   const showBiography =

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -53,7 +53,6 @@ export const NavidromeSongFilters = ({
           key: pageKey,
         }) as SongListFilter;
 
-        console.log('updatedFilters :>> ', updatedFilters);
         handleFilterChange(updatedFilters);
       },
       value: filter.ndParams?.starred,

src/renderer/features/songs/components/song-list-content.tsx

@@ -43,9 +43,9 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
   const queryClient = useQueryClient();
   const server = useCurrentServer();
 
-  const { display, table } = useSongListStore();
   const { id, pageKey } = useSongListContext();
   const filter = useSongListFilter({ id, key: pageKey });
+  const { display, table } = useSongListStore({ id, key: pageKey });
 
   const { setTable, setTablePagination } = useListStoreActions();
   const handlePlayQueueAdd = usePlayQueueAdd();
@@ -155,7 +155,6 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
   const debouncedColumnChange = debounce(handleColumnChange, 200);
 
   const handleScroll = (e: BodyScrollEvent) => {
-    if (id) return;
     const scrollOffset = Number((e.top / table.rowHeight).toFixed(0));
     setTable({ data: { scrollOffset }, key: pageKey });
   };

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -93,7 +93,7 @@ export const SongListHeaderFilters = ({
 }: SongListHeaderFiltersProps) => {
   const server = useCurrentServer();
   const { id, pageKey } = useSongListContext();
-  const { display, table } = useSongListStore();
+  const { display, table } = useSongListStore({ id, key: pageKey });
   const { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions();
   const filter = useSongListFilter({ id, key: pageKey });
 

src/renderer/features/songs/components/song-list-header.tsx

@@ -36,8 +36,8 @@ export const SongListHeader = ({
   tableRef,
 }: SongListHeaderProps) => {
   const server = useCurrentServer();
-  const { pageKey } = useSongListContext();
+  const { id, pageKey } = useSongListContext();
-  const { filter } = useSongListStore();
+  const { filter } = useSongListStore({ id, key: pageKey });
   const { setFilter, setTablePagination } = useListStoreActions();
   const handlePlayQueueAdd = usePlayQueueAdd();
   const cq = useContainerQuery();

src/renderer/store/list.store.ts

@@ -47,7 +47,7 @@ type ItemProps<TFilter = any> = {
 
 export interface ListState {
   detail: {
-    [key: string]: Omit<ItemProps<any>, 'display' | 'grid'>;
+    [key: string]: Omit<ItemProps<any>, 'display'>;
   };
   item: {
     album: ItemProps<AlbumListFilter>;
@@ -125,7 +125,6 @@ export const useListStore = create<ListSlice>()(
           },
           setFilter: (args) => {
             const [, id] = args.key.split('_');
-            console.log('args', args);
 
             set((state) => {
               if (id) {
@@ -158,10 +157,37 @@ export const useListStore = create<ListSlice>()(
             return get()._actions.getFilter({ id, key: args.key });
           },
           setGrid: (args) => {
+            const [page, id] = args.key.split('_');
+
             set((state) => {
-              if (state.item[args.key as keyof ListState['item']].grid) {
+              if (id) {
-                state.item[args.key as keyof ListState['item']].grid = {
+                if (!state.detail[args.key]) {
-                  ...state.item[args.key as keyof ListState['item']]?.grid,
+                  state.detail[args.key] = {
+                    filter: {} as FilterType,
+                    grid: {
+                      scrollOffset: 0,
+                      size: state.item[page as keyof ListState['item']].grid?.size || 200,
+                    },
+                    table: {
+                      pagination: {
+                        currentPage: 1,
+                        itemsPerPage: 100,
+                        totalItems: 0,
+                        totalPages: 0,
+                      },
+                    } as ListTableProps,
+                  };
+                }
+
+                if (state.detail[args.key as keyof ListState['item']].grid) {
+                  state.detail[args.key as keyof ListState['item']].grid = {
+                    ...state.detail[args.key as keyof ListState['item']]?.grid,
+                    ...args.data,
+                  };
+                }
+              } else if (state.item[page as keyof ListState['item']].grid) {
+                state.item[page as keyof ListState['item']].grid = {
+                  ...state.item[page as keyof ListState['item']]?.grid,
                   ...args.data,
                 };
               }
@@ -177,7 +203,11 @@ export const useListStore = create<ListSlice>()(
               if (id) {
                 if (!state.detail[args.key]) {
                   state.detail[args.key] = {
-                    filter: {} as FilterType,
+                    filter: {
+                      ...state.item[page as keyof ListState['item']].filter,
+                      jfParams: {},
+                      ndParams: {},
+                    } as FilterType,
                     table: {
                       pagination: {
                         currentPage: 1,
@@ -185,27 +215,15 @@ export const useListStore = create<ListSlice>()(
                         totalItems: 0,
                         totalPages: 0,
                       },
+                      scrollOffset: 0,
                     } as ListTableProps,
                   };
                 }
 
-                if (!state.detail[args.key]?.table) {
+                if (state.detail[args.key as keyof ListState['item']].table) {
-                  state.detail[args.key].table = {
+                  state.detail[args.key as keyof ListState['item']].table = {
-                    ...state.item[page as keyof ListState['item']].table,
+                    ...state.detail[args.key as keyof ListState['item']]?.table,
-                    pagination: {
+                    ...args.data,
-                      currentPage: 1,
-                      itemsPerPage: 100,
-                      totalItems: 0,
-                      totalPages: 0,
-                    },
-                  };
-                }
-
-                if (!state.detail[args.key]?.filter) {
-                  state.detail[args.key].filter = {
-                    ...state.item[page as keyof ListState['item']].filter,
-                    jfParams: {},
-                    ndParams: {},
                   };
                 }
               } else {
@@ -459,12 +477,50 @@ export const useListStore = create<ListSlice>()(
 
 export const useListStoreActions = () => useListStore((state) => state._actions);
 
-export const useAlbumListStore = () => useListStore((state) => state.item.album, shallow);
+export const useAlbumListStore = (args?: { id?: string; key?: string }) =>
+  useListStore((state) => {
+    const detail = args?.key ? state.detail[args.key] : undefined;
+
+    return {
+      ...state.item.album,
+      filter: {
+        ...state.item.album.filter,
+        ...detail?.filter,
+      },
+      grid: {
+        ...state.item.album.grid,
+        ...detail?.grid,
+      },
+      table: {
+        ...state.item.album.table,
+        ...detail?.table,
+      },
+    };
+  }, shallow);
 
 export const useAlbumArtistListStore = () =>
   useListStore((state) => state.item.albumArtist, shallow);
 
-export const useSongListStore = () => useListStore((state) => state.item.song, shallow);
+export const useSongListStore = (args?: { id?: string; key?: string }) =>
+  useListStore((state) => {
+    const detail = args?.key ? state.detail[args.key] : undefined;
+
+    return {
+      ...state.item.song,
+      filter: {
+        ...state.item.song.filter,
+        ...detail?.filter,
+      },
+      grid: {
+        ...state.item.song.grid,
+        ...detail?.grid,
+      },
+      table: {
+        ...state.item.song.table,
+        ...detail?.table,
+      },
+    };
+  }, shallow);
 
 export const useSongListFilter = (args: { id?: string; key?: string }) =>
   useListStore((state) => {