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', ]); }