diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index f47fbe2..fbabdad 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -174,7 +174,21 @@ const Sidebar = ({
>
{t('Now Playing')}
-
+ }
+ 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')}
+
{expand ? t('Collapse') : t('Expand')}
- {!expand && (
- }
- 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')}
-
- )}
{expand &&
!disableSidebar &&
- config.lookAndFeel.sidebar.selected.includes('playlists') && (
+ config.lookAndFeel.sidebar.selected.includes('playlistList') && (
<>
-
history.push('/playlist')}>
- {t('Playlists')}
-
+
>
diff --git a/src/components/layout/SidebarPlaylists.tsx b/src/components/layout/SidebarPlaylists.tsx
index bd78bfe..31cf403 100644
--- a/src/components/layout/SidebarPlaylists.tsx
+++ b/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}
);
diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index 413ed00..1525761 100644
--- a/src/components/layout/styled.tsx
+++ b/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;
`;
diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
index 46a622c..d821ecf 100644
--- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
+++ b/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}
diff --git a/src/components/shared/setDefaultSettings.ts b/src/components/shared/setDefaultSettings.ts
index 6f85e84..8c23823 100644
--- a/src/components/shared/setDefaultSettings.ts
+++ b/src/components/shared/setDefaultSettings.ts
@@ -164,6 +164,7 @@ const setDefaultSettings = (force: boolean) => {
'config',
'collapse',
'playlists',
+ 'playlistList',
]);
}