From ba8e23e8d488903017e5160882d394d04e169d40 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 14 Jun 2023 00:45:10 -0700
Subject: [PATCH] Add missing sidebar configuration

---
 .../components/general/sidebar-settings.tsx   | 26 ++++--
 .../sidebar/components/sidebar-item.tsx       |  3 +-
 .../features/sidebar/components/sidebar.tsx   | 79 ++++++++++---------
 3 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/renderer/features/settings/components/general/sidebar-settings.tsx b/src/renderer/features/settings/components/general/sidebar-settings.tsx
index e7b965e8..6951a8a6 100644
--- a/src/renderer/features/settings/components/general/sidebar-settings.tsx
+++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { Group } from '@mantine/core';
 import { Reorder, useDragControls } from 'framer-motion';
 import isEqual from 'lodash/isEqual';
@@ -54,10 +54,10 @@ const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarIt
 };
 
 export const SidebarSettings = () => {
-  const { sidebarItems } = useGeneralSettings();
-  const { setSidebarItems } = useSettingsStoreActions();
+  const settings = useGeneralSettings();
+  const { setSidebarItems, setSettings } = useSettingsStoreActions();
 
-  const [localSidebarItems, setLocalSidebarItems] = useState(sidebarItems);
+  const [localSidebarItems, setLocalSidebarItems] = useState(settings.sidebarItems);
 
   const handleSave = () => {
     setSidebarItems(localSidebarItems);
@@ -78,12 +78,26 @@ export const SidebarSettings = () => {
     );
   }, []);
 
-  const isSaveButtonDisabled = isEqual(sidebarItems, localSidebarItems);
+  const handleSetSidebarPlaylistList = (e: ChangeEvent<HTMLInputElement>) => {
+    setSettings({
+      general: {
+        ...settings,
+        sidebarPlaylistList: e.target.checked,
+      },
+    });
+  };
+
+  const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
 
   return (
     <>
       <SettingsOptions
-        control={<Switch />}
+        control={
+          <Switch
+            checked={settings.sidebarPlaylistList}
+            onChange={handleSetSidebarPlaylistList}
+          />
+        }
         description="Show playlist list in sidebar"
         title="Sidebar playlist list"
       />
diff --git a/src/renderer/features/sidebar/components/sidebar-item.tsx b/src/renderer/features/sidebar/components/sidebar-item.tsx
index bfbccad6..c1686434 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-item.tsx
@@ -12,7 +12,8 @@ interface ListItemProps extends FlexProps {
 
 const StyledItem = styled(Flex)`
   width: 100%;
-  font-weight: 700;
+  font-weight: 600;
+  font-size: 1.1rem;
   font-family: var(--content-font-family);
 
   &:focus-visible {
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 5310dd37..c4cf1962 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -136,6 +136,7 @@ export const Sidebar = () => {
   const sidebar = useSidebarStore();
   const { setSideBar } = useAppStoreActions();
   const { windowBarStyle } = useWindowSettings();
+  const { sidebarPlaylistList } = useGeneralSettings();
   const imageUrl = useCurrentSong()?.imageUrl;
   const server = useCurrentServer();
 
@@ -229,44 +230,48 @@ export const Sidebar = () => {
             mx="1rem"
             my="0.5rem"
           />
-          <Group
-            position="apart"
-            pt="1rem"
-            px="1.5rem"
-          >
-            <Group>
-              <Box
-                fw="600"
-                sx={{ fontSize: '1.2rem' }}
+          {sidebarPlaylistList && (
+            <>
+              <Group
+                position="apart"
+                pt="1rem"
+                px="1.5rem"
               >
-                Playlists
-              </Box>
-              {playlistsQuery.isLoading && <Spinner />}
-            </Group>
-            <Group spacing="sm">
-              <Button
-                compact
-                size="md"
-                tooltip={{ label: 'Create playlist', openDelay: 500 }}
-                variant="default"
-                onClick={handleCreatePlaylistModal}
-              >
-                <RiAddFill size="1em" />
-              </Button>
-              <Button
-                compact
-                component={Link}
-                size="md"
-                to={AppRoute.PLAYLISTS}
-                tooltip={{ label: 'Playlist list', openDelay: 500 }}
-                variant="default"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <RiListUnordered size="1em" />
-              </Button>
-            </Group>
-          </Group>
-          <SidebarPlaylistList data={playlistsQuery.data} />
+                <Group>
+                  <Box
+                    fw="600"
+                    sx={{ fontSize: '1.2rem' }}
+                  >
+                    Playlists
+                  </Box>
+                  {playlistsQuery.isLoading && <Spinner />}
+                </Group>
+                <Group spacing="sm">
+                  <Button
+                    compact
+                    size="md"
+                    tooltip={{ label: 'Create playlist', openDelay: 500 }}
+                    variant="default"
+                    onClick={handleCreatePlaylistModal}
+                  >
+                    <RiAddFill size="1em" />
+                  </Button>
+                  <Button
+                    compact
+                    component={Link}
+                    size="md"
+                    to={AppRoute.PLAYLISTS}
+                    tooltip={{ label: 'Playlist list', openDelay: 500 }}
+                    variant="default"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <RiListUnordered size="1em" />
+                  </Button>
+                </Group>
+              </Group>
+              <SidebarPlaylistList data={playlistsQuery.data} />
+            </>
+          )}
         </MotionStack>
         <AnimatePresence
           initial={false}