Adjust sidebar playlist styling

src/components/layout/Sidebar.tsx

@@ -174,7 +174,21 @@ const Sidebar = ({
                   >
                     {t('Now Playing')}
                   </SidebarNavItem>
-
+                  <SidebarNavItem
+                    tabIndex={0}
+                    eventKey="playlists"
+                    icon={<Icon icon="list-ul" />}
+                    onSelect={handleSidebarSelect}
+                    disabled={disableSidebar}
+                    onKeyDown={(e: any) => {
+                      if (e.key === ' ' || e.key === 'Enter') {
+                        history.push('/playlist');
+                      }
+                    }}
+                    $show={config.lookAndFeel.sidebar.selected.includes('playlists')}
+                  >
+                    {t('Playlists')}
+                  </SidebarNavItem>
                   <SidebarNavItem
                     tabIndex={0}
                     eventKey="starred"
@@ -300,33 +314,16 @@ const Sidebar = ({
                   >
                     {expand ? t('Collapse') : t('Expand')}
                   </SidebarNavItem>
-                  {!expand && (
-                    <SidebarNavItem
-                      tabIndex={0}
-                      eventKey="playlists"
-                      icon={<Icon icon="list-ul" />}
-                      onSelect={handleSidebarSelect}
-                      disabled={disableSidebar}
-                      onKeyDown={(e: any) => {
-                        if (e.key === ' ' || e.key === 'Enter') {
-                          history.push('/playlist');
-                        }
-                      }}
-                      $show={config.lookAndFeel.sidebar.selected.includes('playlists')}
-                    >
-                      {t('Playlists')}
-                    </SidebarNavItem>
-                  )}
                 </div>
               </Nav>
               {expand &&
                 !disableSidebar &&
-                config.lookAndFeel.sidebar.selected.includes('playlists') && (
+                config.lookAndFeel.sidebar.selected.includes('playlistList') && (
                   <div
                     style={{
                       height: `${
-                        sidebarBodyHeight - mainNavHeight < 170
-                          ? 170
+                        sidebarBodyHeight - mainNavHeight < 100
+                          ? 100
                           : sidebarBodyHeight - mainNavHeight
                       }px`,
                       overflow: 'hidden',
@@ -334,9 +331,7 @@ const Sidebar = ({
                     }}
                   >
                     <>
-                      <PlaylistDivider onClick={() => history.push('/playlist')}>
-                        {t('Playlists')}
-                      </PlaylistDivider>
+                      <PlaylistDivider />
                       <SidebarPlaylists width={width} />
                     </>
                   </div>

src/components/layout/SidebarPlaylists.tsx

@@ -11,6 +11,11 @@ import { StyledButton } from '../shared/styled';
 
 const ListItemContainer = styled.div`
   .rs-btn {
+    padding-left: 20px;
+    padding-right: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
     text-align: left;
     color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;
 
@@ -34,7 +39,7 @@ const PlaylistRow = ({ data, index, style }: any) => {
         appearance="subtle"
         onClick={() => history.push(`/playlist/${data[index].id}`)}
       >
-        {data[index].title} {`(${data[index].songCount})`}
+        {data[index].title}
       </StyledButton>
     </ListItemContainer>
   );

src/components/layout/styled.tsx

@@ -389,13 +389,13 @@ export const SidebarCoverArtContainer = styled.div<{ height: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
   background: rgba(50, 50, 50, 0.2);
 
   img {
     max-height: ${(props) => props.height};
     max-width: 100%;
     height: auto;
+    cursor: pointer;
   }
 
   .rs-btn {
@@ -416,5 +416,4 @@ export const SidebarCoverArtContainer = styled.div<{ height: string }>`
 
 export const PlaylistDivider = styled(Divider)`
   margin: 10px 0 !important;
-  cursor: pointer;
 `;

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -618,6 +618,10 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
                   label: i18n.t('Now Playing'),
                   value: 'nowplaying',
                 },
+                {
+                  label: i18n.t('Playlists'),
+                  value: 'playlists',
+                },
                 {
                   label: i18n.t('Favorites'),
                   value: 'favorites',
@@ -651,8 +655,8 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
                   value: 'collapse',
                 },
                 {
-                  label: i18n.t('Playlists'),
-                  value: 'playlists',
+                  label: i18n.t('Playlist List'),
+                  value: 'playlistList',
                 },
               ]}
               searchable={false}

src/components/shared/setDefaultSettings.ts

@@ -164,6 +164,7 @@ const setDefaultSettings = (force: boolean) => {
       'config',
       'collapse',
       'playlists',
+      'playlistList',
     ]);
   }