Add selected column picker tab to state

src/components/settings/Config.tsx

@@ -79,7 +79,10 @@ const Config = () => {
           title="Config"
           subtitle={
             <>
-              <Nav activeKey={config.active.tab} onSelect={(e) => dispatch(setActive({ tab: e }))}>
+              <Nav
+                activeKey={config.active.tab}
+                onSelect={(e) => dispatch(setActive({ ...config.active, tab: e }))}
+              >
                 <StyledNavItem eventKey="playback">Playback</StyledNavItem>
                 <StyledNavItem eventKey="lookandfeel">Look & Feel</StyledNavItem>
                 <StyledNavItem eventKey="other">Other</StyledNavItem>

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -11,30 +11,25 @@ import {
 } from '../../shared/styled';
 import ListViewConfig from './ListViewConfig';
 import { Fonts } from '../Fonts';
-import { useAppDispatch } from '../../../redux/hooks';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setTheme, setFont, setDynamicBackground, setMiscSetting } from '../../../redux/miscSlice';
 import {
   songColumnPicker,
-  songColumnList,
   songColumnListAuto,
   albumColumnPicker,
-  albumColumnList,
   albumColumnListAuto,
   playlistColumnPicker,
-  playlistColumnList,
   playlistColumnListAuto,
   artistColumnPicker,
-  artistColumnList,
   artistColumnListAuto,
   genreColumnPicker,
-  genreColumnList,
   genreColumnListAuto,
 } from '../ListViewColumns';
+import { setActive } from '../../../redux/configSlice';
 
 const LookAndFeelConfig = () => {
   const dispatch = useAppDispatch();
-  const [currentLAFTab, setCurrentLAFTab] = useState('songList');
+  const config = useAppSelector((state) => state.config);
-  const [resizableColumn, setResizableColumn] = useState(false);
   const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
     Boolean(settings.getSync('dynamicBackground'))
   );
@@ -123,20 +118,23 @@ const LookAndFeelConfig = () => {
         </StyledCheckbox>
       </ConfigPanel>
       <ConfigPanel header="List-View" bordered>
-        <Nav activeKey={currentLAFTab} onSelect={(e) => setCurrentLAFTab(e)}>
+        <Nav
-          <StyledNavItem eventKey="songList">Songs</StyledNavItem>
+          activeKey={config.active.columnSelectorTab}
-          <StyledNavItem eventKey="albumList">Albums</StyledNavItem>
+          onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
-          <StyledNavItem eventKey="playlistList">Playlists</StyledNavItem>
+        >
-          <StyledNavItem eventKey="artistList">Artists</StyledNavItem>
+          <StyledNavItem eventKey="music">Songs</StyledNavItem>
-          <StyledNavItem eventKey="genreList">Genres</StyledNavItem>
+          <StyledNavItem eventKey="album">Albums</StyledNavItem>
-          <StyledNavItem eventKey="miniList">Miniplayer</StyledNavItem>
+          <StyledNavItem eventKey="playlist">Playlists</StyledNavItem>
+          <StyledNavItem eventKey="artist">Artists</StyledNavItem>
+          <StyledNavItem eventKey="genre">Genres</StyledNavItem>
+          <StyledNavItem eventKey="mini">Miniplayer</StyledNavItem>
         </Nav>
-        {currentLAFTab === 'songList' && (
+        {config.active.columnSelectorTab === 'music' && (
           <ListViewConfig
             title="Song List"
             defaultColumns={currentSongColumns}
             columnPicker={songColumnPicker}
-            columnList={resizableColumn ? songColumnList : songColumnListAuto}
+            columnList={songColumnListAuto}
             settingsConfig={{
               columnList: 'musicListColumns',
               rowHeight: 'musicListRowHeight',
@@ -145,12 +143,12 @@ const LookAndFeelConfig = () => {
           />
         )}
 
-        {currentLAFTab === 'albumList' && (
+        {config.active.columnSelectorTab === 'album' && (
           <ListViewConfig
             title="Album List"
             defaultColumns={currentAlbumColumns}
             columnPicker={albumColumnPicker}
-            columnList={resizableColumn ? albumColumnList : albumColumnListAuto}
+            columnList={albumColumnListAuto}
             settingsConfig={{
               columnList: 'albumListColumns',
               rowHeight: 'albumListRowHeight',
@@ -159,12 +157,12 @@ const LookAndFeelConfig = () => {
           />
         )}
 
-        {currentLAFTab === 'playlistList' && (
+        {config.active.columnSelectorTab === 'playlist' && (
           <ListViewConfig
             title="Playlist List"
             defaultColumns={currentPlaylistColumns}
             columnPicker={playlistColumnPicker}
-            columnList={resizableColumn ? playlistColumnList : playlistColumnListAuto}
+            columnList={playlistColumnListAuto}
             settingsConfig={{
               columnList: 'playlistListColumns',
               rowHeight: 'playlistListRowHeight',
@@ -173,12 +171,12 @@ const LookAndFeelConfig = () => {
           />
         )}
 
-        {currentLAFTab === 'artistList' && (
+        {config.active.columnSelectorTab === 'artist' && (
           <ListViewConfig
             title="Artist List"
             defaultColumns={currentArtistColumns}
             columnPicker={artistColumnPicker}
-            columnList={resizableColumn ? artistColumnList : artistColumnListAuto}
+            columnList={artistColumnListAuto}
             settingsConfig={{
               columnList: 'artistListColumns',
               rowHeight: 'artistListRowHeight',
@@ -187,12 +185,12 @@ const LookAndFeelConfig = () => {
           />
         )}
 
-        {currentLAFTab === 'genreList' && (
+        {config.active.columnSelectorTab === 'genre' && (
           <ListViewConfig
             title="Genre List"
             defaultColumns={currentGenreColumns}
             columnPicker={genreColumnPicker}
-            columnList={resizableColumn ? genreColumnList : genreColumnListAuto}
+            columnList={genreColumnListAuto}
             settingsConfig={{
               columnList: 'genreListColumns',
               rowHeight: 'genreListRowHeight',
@@ -201,12 +199,12 @@ const LookAndFeelConfig = () => {
           />
         )}
 
-        {currentLAFTab === 'miniList' && (
+        {config.active.columnSelectorTab === 'mini' && (
           <ListViewConfig
             title="Miniplayer List"
             defaultColumns={currentMiniColumns}
             columnPicker={songColumnPicker}
-            columnList={resizableColumn ? songColumnList : songColumnListAuto}
+            columnList={songColumnListAuto}
             settingsConfig={{
               columnList: 'miniListColumns',
               rowHeight: 'miniListRowHeight',

src/redux/configSlice.ts

@@ -1,5 +1,4 @@
 import { nanoid } from 'nanoid/non-secure';
-import _ from 'lodash';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import settings from 'electron-settings';
 import { mockSettings } from '../shared/mockSettings';
@@ -10,6 +9,7 @@ const parsedSettings: any = process.env.NODE_ENV === 'test' ? mockSettings : set
 export interface ConfigPage {
   active: {
     tab: string;
+    columnSelectorTab: string;
   };
   lookAndFeel: {
     listView: {
@@ -28,6 +28,7 @@ export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | '
 const initialState: ConfigPage = {
   active: {
     tab: 'playback',
+    columnSelectorTab: 'music',
   },
   lookAndFeel: {
     listView: {
@@ -81,8 +82,8 @@ const configSlice = createSlice({
   name: 'config',
   initialState,
   reducers: {
-    setActive: (state, action: PayloadAction<{ tab: string }>) => {
+    setActive: (state, action: PayloadAction<any>) => {
-      state.active.tab = action.payload.tab;
+      state.active = action.payload;
     },
 
     setColumnList: (state, action: PayloadAction<{ listType: ColumnList; entries: any }>) => {