Initial sidebar improvements

- Add playlist list to sidebar
- Add cover art toggle to sidebar
- Drag resizable

package.json

@@ -290,6 +290,7 @@
     "react-query": "^3.19.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
+    "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-visibility-sensor": "^5.1.1",
     "react-window": "^1.8.6",

src/__tests__/App.test.tsx

@@ -73,7 +73,11 @@ const miscState: General = {
   contextMenu: {
     show: false,
   },
-  expandSidebar: false,
+  sidebar: {
+    expand: false,
+    coverArt: true,
+    width: '225px',
+  },
   modal: {
     currentPageIndex: undefined,
     show: false,

src/components/layout/Layout.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import settings from 'electron-settings';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useHistory } from 'react-router-dom';
 import { ButtonToolbar, Content, FlexboxGrid, Icon, Nav, Whisper } from 'rsuite';
 import { useTranslation } from 'react-i18next';
 import Sidebar from './Sidebar';
 import Titlebar from './Titlebar';
 import { RootContainer, RootFooter, MainContainer } from './styled';
-import { setContextMenu, setExpandSidebar, setSearchQuery } from '../../redux/miscSlice';
+import { setContextMenu, setSearchQuery, setSidebar } from '../../redux/miscSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { clearSelected } from '../../redux/multiSelectSlice';
 import {
@@ -58,7 +59,8 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
   });
 
   const handleToggle = () => {
-    dispatch(setExpandSidebar(!misc.expandSidebar));
+    settings.setSync('sidebar.expand', !misc.sidebar.expand);
+    dispatch(setSidebar({ expand: !misc.sidebar.expand }));
   };
 
   const handleSidebarSelect = (e: string) => {
@@ -111,7 +113,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
     <>
       <Titlebar font={font} />
       <Sidebar
-        expand={misc.expandSidebar}
+        expand={misc.sidebar.expand}
         handleToggle={handleToggle}
         handleSidebarSelect={handleSidebarSelect}
         disableSidebar={disableSidebar}
@@ -145,7 +147,8 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
       >
         <MainContainer
           id="container-main"
-          expanded={misc.expandSidebar}
+          expanded={misc.sidebar.expand}
+          sidebarwidth={misc.sidebar.width}
           $titleBar={misc.titleBar} // transient prop to determine margin
         >
           <FlexboxGrid