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,44 +230,48 @@ export const Sidebar = () => {
             mx="1rem"
             my="0.5rem"
           />
-          <Group
+          {sidebarPlaylistList && (
-            position="apart"
+            <>
-            pt="1rem"
+              <Group
-            px="1.5rem"
+                position="apart"
-          >
+                pt="1rem"
-            <Group>
+                px="1.5rem"
-              <Box
-                fw="600"
-                sx={{ fontSize: '1.2rem' }}
               >
-                Playlists
+                <Group>
-              </Box>
+                  <Box
-              {playlistsQuery.isLoading && <Spinner />}
+                    fw="600"
-            </Group>
+                    sx={{ fontSize: '1.2rem' }}
-            <Group spacing="sm">
+                  >
-              <Button
+                    Playlists
-                compact
+                  </Box>
-                size="md"
+                  {playlistsQuery.isLoading && <Spinner />}
-                tooltip={{ label: 'Create playlist', openDelay: 500 }}
+                </Group>
-                variant="default"
+                <Group spacing="sm">
-                onClick={handleCreatePlaylistModal}
+                  <Button
-              >
+                    compact
-                <RiAddFill size="1em" />
+                    size="md"
-              </Button>
+                    tooltip={{ label: 'Create playlist', openDelay: 500 }}
-              <Button
+                    variant="default"
-                compact
+                    onClick={handleCreatePlaylistModal}
-                component={Link}
+                  >
-                size="md"
+                    <RiAddFill size="1em" />
-                to={AppRoute.PLAYLISTS}
+                  </Button>
-                tooltip={{ label: 'Playlist list', openDelay: 500 }}
+                  <Button
-                variant="default"
+                    compact
-                onClick={(e) => e.stopPropagation()}
+                    component={Link}
-              >
+                    size="md"
-                <RiListUnordered size="1em" />
+                    to={AppRoute.PLAYLISTS}
-              </Button>
+                    tooltip={{ label: 'Playlist list', openDelay: 500 }}
-            </Group>
+                    variant="default"
-          </Group>
+                    onClick={(e) => e.stopPropagation()}
-          <SidebarPlaylistList data={playlistsQuery.data} />
+                  >
+                    <RiListUnordered size="1em" />
+                  </Button>
+                </Group>
+              </Group>
+              <SidebarPlaylistList data={playlistsQuery.data} />
+            </>
+          )}
         </MotionStack>
         <AnimatePresence
           initial={false}