Add missing sidebar configuration

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 settings = useGeneralSettings();
-  const { setSidebarItems } = useSettingsStoreActions();
+  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"
       />

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 {

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,6 +230,8 @@ export const Sidebar = () => {
             mx="1rem"
             my="0.5rem"
           />
+          {sidebarPlaylistList && (
+            <>
               <Group
                 position="apart"
                 pt="1rem"
@@ -267,6 +270,8 @@ export const Sidebar = () => {
                 </Group>
               </Group>
               <SidebarPlaylistList data={playlistsQuery.data} />
+            </>
+          )}
         </MotionStack>
         <AnimatePresence
           initial={false}