From 563453b2328a5b8971c18bfbc8fc8beb0ab6cc2e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 7 Feb 2022 12:23:18 -0800
Subject: [PATCH] Move sidebar state to config

---
 src/components/layout/Layout.tsx      | 18 ++++++++++--------
 src/components/layout/Sidebar.tsx     | 13 +++++++------
 src/components/library/AlbumView.tsx  |  6 +++---
 src/components/library/ArtistView.tsx |  4 ++--
 src/components/player/PlayerBar.tsx   | 12 +++++-------
 src/redux/configSlice.ts              | 20 ++++++++++++++++++++
 src/redux/miscSlice.ts                | 19 -------------------
 7 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 2f2e4e72..7da54c01 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import Sidebar from './Sidebar';
 import Titlebar from './Titlebar';
 import { RootContainer, RootFooter, MainContainer } from './styled';
-import { setContextMenu, setSearchQuery, setSidebar } from '../../redux/miscSlice';
+import { setContextMenu, setSearchQuery } from '../../redux/miscSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { clearSelected } from '../../redux/multiSelectSlice';
 import {
@@ -31,12 +31,14 @@ import ServerConfig from '../settings/ConfigPanels/ServerConfig';
 import CacheConfig from '../settings/ConfigPanels/CacheConfig';
 import WindowConfig from '../settings/ConfigPanels/WindowConfig';
 import AdvancedConfig from '../settings/ConfigPanels/AdvancedConfig';
+import { setSidebar } from '../../redux/configSlice';
 
 const Layout = ({ footer, children, disableSidebar, font }: any) => {
   const { t } = useTranslation();
   const history = useHistory();
   const dispatch = useAppDispatch();
   const misc = useAppSelector((state) => state.misc);
+  const config = useAppSelector((state) => state.config);
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const [openSearch, setOpenSearch] = useState(false);
   const [localSearchQuery, setLocalSearchQuery] = useState('');
@@ -59,8 +61,8 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
   });
 
   const handleToggle = () => {
-    settings.setSync('sidebar.expand', !misc.sidebar.expand);
-    dispatch(setSidebar({ expand: !misc.sidebar.expand }));
+    settings.setSync('sidebar.expand', !config.lookAndFeel.sidebar.expand);
+    dispatch(setSidebar({ expand: !config.lookAndFeel.sidebar.expand }));
   };
 
   const handleSidebarSelect = (e: string) => {
@@ -113,7 +115,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
     <>
       <Titlebar font={font} />
       <Sidebar
-        expand={misc.sidebar.expand}
+        expand={config.lookAndFeel.sidebar.expand}
         handleToggle={handleToggle}
         handleSidebarSelect={handleSidebarSelect}
         disableSidebar={disableSidebar}
@@ -147,8 +149,8 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
       >
         <MainContainer
           id="container-main"
-          expanded={misc.sidebar.expand}
-          sidebarwidth={misc.sidebar.width}
+          expanded={config.lookAndFeel.sidebar.expand}
+          sidebarwidth={config.lookAndFeel.sidebar.width}
           $titleBar={misc.titleBar} // transient prop to determine margin
         >
           <FlexboxGrid
@@ -164,13 +166,13 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
                 <StyledIconButton
                   appearance="subtle"
                   size="sm"
-                  icon={<Icon icon="arrow-circle-left" />}
+                  icon={<Icon icon="arrow-left-line" />}
                   onClick={() => history.goBack()}
                 />
                 <StyledIconButton
                   appearance="subtle"
                   size="sm"
-                  icon={<Icon icon="arrow-circle-right" />}
+                  icon={<Icon icon="arrow-right-line" />}
                   onClick={() => history.goForward()}
                 />
               </ButtonToolbar>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 5ac54a77..5c9ea078 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -15,11 +15,11 @@ import {
   SidebarDragContainer,
   SidebarNavItem,
 } from './styled';
-import { setSidebar } from '../../redux/miscSlice';
 import { StyledButton } from '../shared/styled';
 import { InfoModal } from '../modal/PageModal';
 import placeholderImg from '../../img/placeholder.png';
 import SidebarPlaylists from './SidebarPlaylists';
+import { setSidebar } from '../../redux/configSlice';
 
 const Sidebar = ({
   expand,
@@ -35,12 +35,11 @@ const Sidebar = ({
   const history = useHistory();
   const playQueue = useAppSelector((state) => state.playQueue);
   const config = useAppSelector((state) => state.config);
-  const misc = useAppSelector((state) => state.misc);
-  const [width, setWidth] = useState(Number(misc.sidebar.width.replace('px', '')));
+  const [width, setWidth] = useState(Number(config.lookAndFeel.sidebar.width.replace('px', '')));
   const [isResizing, setIsResizing] = useState(false);
   const [showCoverArtModal, setShowCoverArtModal] = useState(false);
   const [throttledWidth, setThrottledWidth] = useState(
-    Number(misc.sidebar.width.replace('px', ''))
+    Number(config.lookAndFeel.sidebar.width.replace('px', ''))
   );
   const [mainNavRef, { height: mainNavHeight }] = useMeasure<HTMLDivElement>();
   const [sidebarBodyRef, { height: sidebarBodyHeight }] = useMeasure<HTMLDivElement>();
@@ -99,7 +98,7 @@ const Sidebar = ({
         onClick={rest.onClick}
       >
         <Sidenav style={{ height: '100%' }} expanded={expand} appearance="default">
-          {expand && misc.sidebar.coverArt && (
+          {expand && config.lookAndFeel.sidebar.coverArt && (
             <SidebarCoverArtContainer height={`${width}px`}>
               <LazyLoadImage
                 onClick={() => setShowCoverArtModal(true)}
@@ -124,7 +123,9 @@ const Sidebar = ({
 
           <Sidenav.Body
             style={{
-              height: expand ? `calc(100% - ${misc.sidebar.coverArt ? width : 0}px)` : '100%',
+              height: expand
+                ? `calc(100% - ${config.lookAndFeel.sidebar.coverArt ? width : 0}px)`
+                : '100%',
               overflowY: 'auto',
             }}
           >
diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx
index 2ebb211b..ed907623 100644
--- a/src/components/library/AlbumView.tsx
+++ b/src/components/library/AlbumView.tsx
@@ -267,14 +267,14 @@ const AlbumView = ({ ...rest }: any) => {
       {!rest.isModal && (
         <BlurredBackgroundWrapper
           hasImage={!data?.image.match('placeholder')}
-          expanded={misc.sidebar.expand}
+          expanded={config.lookAndFeel.sidebar.expand}
           $titleBar={misc.titleBar} // transient prop to determine margin
-          sidebarwidth={misc.sidebar.width}
+          sidebarwidth={config.lookAndFeel.sidebar.width}
         >
           <BlurredBackground
             // We have to use an inline style here due to the context menu forcing a component rerender
             // which causes the background-image to flicker
-            expanded={misc.sidebar.expand}
+            expanded={config.lookAndFeel.sidebar.expand}
             style={{
               backgroundImage: `url(${
                 !data?.image.match('placeholder')
diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx
index a7977bf2..72466f6f 100644
--- a/src/components/library/ArtistView.tsx
+++ b/src/components/library/ArtistView.tsx
@@ -521,10 +521,10 @@ const ArtistView = ({ ...rest }: any) => {
     <>
       {!rest.isModal && (
         <GradientBackground
-          $expanded={misc.sidebar.expand}
+          $expanded={config.lookAndFeel.sidebar.expand}
           $color={imageAverageColor.color}
           $titleBar={misc.titleBar}
-          sidebarwidth={misc.sidebar.width}
+          sidebarwidth={config.lookAndFeel.sidebar.width}
         />
       )}
       <GenericPage
diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
index aeab8845..0153da92 100644
--- a/src/components/player/PlayerBar.tsx
+++ b/src/components/player/PlayerBar.tsx
@@ -39,7 +39,7 @@ import { InfoModal } from '../modal/PageModal';
 import { setPlaylistRate } from '../../redux/playlistSlice';
 import useGetLyrics from '../../hooks/useGetLyrics';
 import usePlayerControls from '../../hooks/usePlayerControls';
-import { setSidebar } from '../../redux/miscSlice';
+import { setSidebar } from '../../redux/configSlice';
 
 const DiscordRPC = require('discord-rpc');
 
@@ -49,7 +49,6 @@ const PlayerBar = () => {
   const playQueue = useAppSelector((state) => state.playQueue);
   const player = useAppSelector((state) => state.player);
   const config = useAppSelector((state) => state.config);
-  const misc = useAppSelector((state) => state.misc);
   const dispatch = useAppDispatch();
   const [seek, setSeek] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
@@ -365,9 +364,9 @@ const PlayerBar = () => {
                     alignItems: 'flex-start',
                   }}
                 >
-                  {(!misc.sidebar.coverArt || !misc.sidebar.expand) && (
+                  {(!config.lookAndFeel.sidebar.coverArt || !config.lookAndFeel.sidebar.expand) && (
                     <Col xs={2} style={{ height: '100%', width: '80px', paddingRight: '10px' }}>
-                      <CoverArtContainer expand={misc.sidebar.expand}>
+                      <CoverArtContainer expand={config.lookAndFeel.sidebar.expand}>
                         <LazyLoadImage
                           src={
                             playQueue[currentEntryList][playQueue.currentIndex]?.image ||
@@ -576,9 +575,8 @@ const PlayerBar = () => {
               <CustomTooltip text={t('Play/Pause')} delay={1000}>
                 <PlayerControlIcon
                   tabIndex={0}
-                  icon={player.status === 'PLAYING' ? 'pause' : 'play'}
-                  size="2x"
-                  fixedWidth
+                  icon={player.status === 'PLAYING' ? 'pause-circle' : 'play-circle'}
+                  size="3x"
                   onClick={handlePlayPause}
                   onKeyDown={(e: any) => {
                     if (e.key === ' ' || e.key === 'Enter') {
diff --git a/src/redux/configSlice.ts b/src/redux/configSlice.ts
index 6d84a057..afc9b093 100644
--- a/src/redux/configSlice.ts
+++ b/src/redux/configSlice.ts
@@ -42,6 +42,7 @@ export interface ConfigPage {
       gapSize: number;
       alignment: string | 'flex-start' | 'center';
     };
+    sidebar: Sidebar;
   };
   external: {
     discord: {
@@ -69,6 +70,12 @@ interface PlaybackFilter {
   enabled: boolean;
 }
 
+export interface Sidebar {
+  expand: boolean;
+  width: string;
+  coverArt: boolean;
+}
+
 export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | 'mini';
 
 const initialState: ConfigPage = {
@@ -142,6 +149,11 @@ const initialState: ConfigPage = {
       gapSize: Number(parsedSettings.gridGapSize),
       alignment: String(parsedSettings.gridAlignment),
     },
+    sidebar: {
+      expand: Boolean(parsedSettings.sidebar?.expand) || true,
+      width: String(parsedSettings.sidebar?.width) || '225px',
+      coverArt: Boolean(parsedSettings.sidebar?.coverArt) || true,
+    },
   },
   external: {
     discord: {
@@ -167,6 +179,13 @@ const configSlice = createSlice({
       state.active = action.payload;
     },
 
+    setSidebar: (state, action: PayloadAction<any>) => {
+      state.lookAndFeel.sidebar = {
+        ...state.lookAndFeel.sidebar,
+        ...action.payload,
+      };
+    },
+
     setPageSort: (
       state,
       action: PayloadAction<{
@@ -287,5 +306,6 @@ export const {
   moveToIndex,
   setDiscord,
   setOBS,
+  setSidebar,
 } = configSlice.actions;
 export default configSlice.reducer;
diff --git a/src/redux/miscSlice.ts b/src/redux/miscSlice.ts
index 0d4dba22..c3637cef 100644
--- a/src/redux/miscSlice.ts
+++ b/src/redux/miscSlice.ts
@@ -45,18 +45,12 @@ export interface ContextMenu {
   disabledOptions?: ContextMenuOptions[];
 }
 
-export interface Sidebar {
-  expand: boolean;
-  width: string;
-  coverArt: boolean;
-}
 export interface General {
   theme: string;
   font: string;
   modal: Modal;
   modalPages: ModalPage[];
   imgModal: ImgModal;
-  sidebar: Sidebar;
   isProcessingPlaylist: string[];
   contextMenu: ContextMenu;
   dynamicBackground: boolean;
@@ -79,11 +73,6 @@ const initialState: General = {
     show: false,
     src: undefined,
   },
-  sidebar: {
-    expand: Boolean(parsedSettings.sidebar.expand) || true,
-    width: String(parsedSettings.sidebar.width) || '225px',
-    coverArt: Boolean(parsedSettings.sidebar.coverArt) || true,
-  },
   isProcessingPlaylist: [],
   contextMenu: {
     show: false,
@@ -104,13 +93,6 @@ const miscSlice = createSlice({
       state.dynamicBackground = action.payload;
     },
 
-    setSidebar: (state, action: PayloadAction<any>) => {
-      state.sidebar = {
-        ...state.sidebar,
-        ...action.payload,
-      };
-    },
-
     setMiscSetting: (state, action: PayloadAction<{ setting: string; value: any }>) => {
       switch (action.payload.setting) {
         case 'imageCachePath':
@@ -221,7 +203,6 @@ export const {
   addProcessingPlaylist,
   removeProcessingPlaylist,
   setContextMenu,
-  setSidebar,
   setDynamicBackground,
   setMiscSetting,
   setImgModal,