[bugfix]: use persistent columns def instead of default merge behavior

src/renderer/store/album-artist.store.ts

@@ -1,10 +1,10 @@
-import merge from 'lodash/merge';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { AlbumArtistListArgs, AlbumArtistListSort, SortOrder } from '/@/renderer/api/types';
 import { DataTableProps } from '/@/renderer/store/settings.store';
 import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
+import { mergeOverridingColumns } from '/@/renderer/store/utils';
 
 type TableProps = {
     pagination: TablePagination;
@@ -102,9 +102,7 @@ export const useAlbumArtistStore = create<AlbumArtistSlice>()(
             { name: 'store_album_artist' },
         ),
         {
-            merge: (persistedState, currentState) => {
-                return merge(currentState, persistedState);
-            },
+            merge: mergeOverridingColumns,
             name: 'store_album_artist',
             version: 1,
         },

src/renderer/store/list.store.ts

@@ -1,4 +1,3 @@
-import merge from 'lodash/merge';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
@@ -19,6 +18,7 @@ import {
 } from '/@/renderer/api/types';
 import { DataTableProps, PersistedTableColumn } from '/@/renderer/store/settings.store';
 import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
+import { mergeOverridingColumns } from '/@/renderer/store/utils';
 
 export const generatePageKey = (page: string, id?: string) => {
     return id ? `${page}_${id}` : page;
@@ -613,9 +613,7 @@ export const useListStore = create<ListSlice>()(
             { name: 'store_list' },
         ),
         {
-            merge: (persistedState, currentState) => {
-                return merge(currentState, persistedState);
-            },
+            merge: mergeOverridingColumns,
             name: 'store_list',
             partialize: (state) => {
                 return Object.fromEntries(

src/renderer/store/playlist.store.ts

@@ -1,4 +1,3 @@
-import merge from 'lodash/merge';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
@@ -6,6 +5,7 @@ import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
 import { PlaylistListFilter, SongListFilter } from '/@/renderer/store/list.store';
 import { DataTableProps } from '/@/renderer/store/settings.store';
 import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
+import { mergeOverridingColumns } from '/@/renderer/store/utils';
 
 type TableProps = {
     pagination: TablePagination;
@@ -187,9 +187,7 @@ export const usePlaylistStore = create<PlaylistSlice>()(
             { name: 'store_playlist' },
         ),
         {
-            merge: (persistedState, currentState) => {
-                return merge(currentState, persistedState);
-            },
+            merge: mergeOverridingColumns,
             name: 'store_playlist',
             version: 1,
         },

src/renderer/store/settings.store.ts

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { ColDef } from '@ag-grid-community/core';
 import isElectron from 'is-electron';
-import merge from 'lodash/merge';
 import { generatePath } from 'react-router';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
@@ -24,6 +23,7 @@ import {
 import { randomString } from '/@/renderer/utils';
 import i18n from '/@/i18n/i18n';
 import { usePlayerStore } from '/@/renderer/store/player.store';
+import { mergeOverridingColumns } from '/@/renderer/store/utils';
 
 const utils = isElectron() ? window.electron.utils : null;
 
@@ -640,9 +640,7 @@ export const useSettingsStore = create<SettingsSlice>()(
             { name: 'store_settings' },
         ),
         {
-            merge: (persistedState, currentState) => {
-                return merge(currentState, persistedState);
-            },
+            merge: mergeOverridingColumns,
             name: 'store_settings',
             version: 8,
         },

src/renderer/store/utils.ts

@@ -0,0 +1,19 @@
+import mergeWith from 'lodash/mergeWith';
+
+/**
+ * A custom deep merger that will replace all 'columns' items with the persistent
+ * state, instead of the default merge behavior. This is important to preserve the user's
+ * order, and not lead to an inconsistent state (e.g. multiple 'Favorite' keys)
+ * @param persistedState the persistent state
+ * @param currentState the current state
+ * @returns the a custom deep merge
+ */
+export const mergeOverridingColumns = <T>(persistedState: unknown, currentState: T) => {
+    return mergeWith(currentState, persistedState, (_original, persistent, key) => {
+        if (key === 'columns') {
+            return persistent;
+        }
+
+        return undefined;
+    });
+};