Handle individual page column sorts

src/components/library/AlbumList.tsx

@@ -209,6 +209,7 @@ const AlbumList = () => {
             cacheType: 'album',
             cacheIdProperty: 'albumId',
           }}
+          page="albumListPage"
           listType="album"
           virtualized
           disabledContextMenuOptions={[

src/components/library/AlbumView.tsx

@@ -356,6 +356,7 @@ const AlbumView = ({ ...rest }: any) => {
             cacheType: 'album',
             cacheIdProperty: 'albumId',
           }}
+          page="albumPage"
           listType="music"
           isModal={rest.isModal}
           disabledContextMenuOptions={[

src/components/library/ArtistList.tsx

@@ -138,6 +138,7 @@ const ArtistList = () => {
             cacheType: 'artist',
             cacheIdProperty: 'id',
           }}
+          page="artistListPage"
           listType="artist"
           virtualized
           disabledContextMenuOptions={[

src/components/library/ArtistView.tsx

@@ -378,6 +378,7 @@ const ArtistView = ({ ...rest }: any) => {
                 cacheType: 'album',
                 cacheIdProperty: 'albumId',
               }}
+              page="artistPage"
               listType="album"
               isModal={rest.isModal}
               disabledContextMenuOptions={[

src/components/library/FolderList.tsx

@@ -227,6 +227,7 @@ const FolderList = () => {
                 cacheType: 'folder',
                 cacheIdProperty: 'albumId',
               }}
+              page="folderListPage"
               listType="folder"
               virtualized
               disabledContextMenuOptions={[

src/components/library/GenreList.tsx

@@ -80,6 +80,7 @@ const GenreList = () => {
           fontSize={config.lookAndFeel.listView.genre.fontSize}
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
+          page="genreListPage"
           listType="genre"
           virtualized
           disabledContextMenuOptions={[

src/components/playlist/PlaylistList.tsx

@@ -161,6 +161,7 @@ const PlaylistList = () => {
             cacheType: 'playlist',
             cacheIdProperty: 'id',
           }}
+          page="playlistListPage"
           listType="playlist"
           virtualized
           disabledContextMenuOptions={[

src/components/starred/StarredView.tsx

@@ -191,6 +191,7 @@ const StarredView = () => {
                 cacheType: 'album',
                 cacheIdProperty: 'albumId',
               }}
+              page="favoriteTracksPage"
               listType="music"
               virtualized
               disabledContextMenuOptions={[
@@ -217,6 +218,7 @@ const StarredView = () => {
                     cacheType: 'album',
                     cacheIdProperty: 'albumId',
                   }}
+                  page="favoriteAlbumsPage"
                   listType="album"
                   virtualized
                   disabledContextMenuOptions={[
@@ -264,6 +266,7 @@ const StarredView = () => {
                     cacheType: 'artist',
                     cacheIdProperty: 'id',
                   }}
+                  page="favoriteArtistsPage"
                   listType="artist"
                   virtualized
                   disabledContextMenuOptions={[

src/components/viewtypes/ListViewTable.tsx

@@ -46,7 +46,12 @@ import {
 } from '../../redux/multiSelectSlice';
 import CustomTooltip from '../shared/CustomTooltip';
 import { sortPlaylist } from '../../redux/playlistSlice';
-import { removePlaybackFilter, setColumnList, setPlaybackFilter } from '../../redux/configSlice';
+import {
+  removePlaybackFilter,
+  setColumnList,
+  setPageSort,
+  setPlaybackFilter,
+} from '../../redux/configSlice';
 import { setActive } from '../../redux/albumSlice';
 import { resetPlayer, setStatus } from '../../redux/playerSlice';
 
@@ -89,6 +94,7 @@ const ListViewTable = ({
   multiSelect,
   cacheImages,
   autoHeight,
+  page,
   listType,
   isModal,
   // onScroll,
@@ -139,6 +145,16 @@ const ListViewTable = ({
             sortType: type,
           })
         );
+      } else if (page) {
+        dispatch(
+          setPageSort({
+            page,
+            sort: {
+              sortColumn: column,
+              sortType: type,
+            },
+          })
+        );
       }
 
       if (column === (nowPlaying ? playQueue.sortColumn : sortColumn)) {
@@ -152,6 +168,16 @@ const ListViewTable = ({
                 sortType: 'asc',
               })
             );
+          } else if (page) {
+            dispatch(
+              setPageSort({
+                page,
+                sort: {
+                  sortColumn: undefined,
+                  sortType: 'asc',
+                },
+              })
+            );
           }
 
           setSortColumn(undefined);
@@ -211,6 +237,14 @@ const ListViewTable = ({
 
   useEffect(() => {
     if (!nowPlaying) {
+      if (page === 'favoritePage') {
+        setSortColumn(configState.sort[page.split('.')[0]][page.split('.')[1]]?.sortColumn);
+        setSortType(configState.sort[page.split('.')[0]][page.split('.')[1]]?.sortType);
+      } else if (page) {
+        setSortColumn(configState.sort[page]?.sortColumn);
+        setSortType(configState.sort[page]?.sortType);
+      }
+
       if (sortColumn && sortType) {
         // Since the column title(id) won't always match the actual column dataKey, we need to match it
         const normalizedSortColumn = columns.find((c: any) => c.id === sortColumn);
@@ -232,7 +266,7 @@ const ListViewTable = ({
         setSortedData(data);
       }
     }
-  }, [columns, data, nowPlaying, sortColumn, sortType]);
+  }, [columns, configState.sort, data, nowPlaying, page, sortColumn, sortType]);
 
   useEffect(() => {
     if (nowPlaying) {

src/components/viewtypes/ListViewType.tsx

@@ -25,6 +25,7 @@ const ListViewType = (
     fontSize,
     cacheImages,
     children,
+    page,
     listType,
     isModal,
     handleDragEnd,
@@ -325,6 +326,7 @@ const ListViewType = (
             playQueue={playQueue}
             multiSelect={multiSelect}
             cacheImages={cacheImages}
+            page={page}
             listType={listType}
             nowPlaying={rest.nowPlaying}
             playlist={rest.playlist}