diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx index fd32c345..35daa9c3 100644 --- a/src/__tests__/App.test.tsx +++ b/src/__tests__/App.test.tsx @@ -73,11 +73,6 @@ const miscState: General = { contextMenu: { show: false, }, - sidebar: { - expand: false, - coverArt: true, - width: '225px', - }, modal: { currentPageIndex: undefined, show: false, @@ -391,6 +386,12 @@ const configState: ConfigPage = { gapSize: 20, alignment: 'flex-start', }, + sidebar: { + expand: false, + coverArt: true, + width: '225px', + selected: ['dashboard', 'nowplaying'], + }, }, external: { discord: { diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 5c9ea078..4ea206de 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -153,6 +153,7 @@ const Sidebar = ({ history.push('/'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('dashboard')} > {t('Dashboard')} @@ -167,6 +168,7 @@ const Sidebar = ({ history.push('/nowplaying'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('nowplaying')} > {t('Now Playing')} @@ -182,6 +184,7 @@ const Sidebar = ({ history.push('/starred'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('favorites')} > {t('Favorites')} @@ -197,6 +200,7 @@ const Sidebar = ({ history.push('/library/music'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('songs')} > Songs @@ -212,6 +216,7 @@ const Sidebar = ({ history.push('/library/album'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('albums')} > {t('Albums')} @@ -226,6 +231,7 @@ const Sidebar = ({ history.push('/library/artist'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('artists')} > {t('Artists')} @@ -240,6 +246,7 @@ const Sidebar = ({ history.push('/library/genre'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('genres')} > {t('Genres')} @@ -256,6 +263,7 @@ const Sidebar = ({ history.push('/library/folder'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('folders')} > {t('Folders')} @@ -272,6 +280,7 @@ const Sidebar = ({ history.push('/config'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('config')} > {t('Config')} @@ -285,6 +294,7 @@ const Sidebar = ({ handleToggle(); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('collapse')} > {expand ? t('Collapse') : t('Expand')} @@ -300,32 +310,35 @@ const Sidebar = ({ history.push('/playlist'); } }} + hide={!config.lookAndFeel.sidebar.selected.includes('playlists')} > {t('Playlists')} )} - {expand && !disableSidebar && ( -
- <> - history.push('/playlist')}> - {t('Playlists')} - - - -
- )} + {expand && + !disableSidebar && + config.lookAndFeel.sidebar.selected.includes('playlists') && ( +
+ <> + history.push('/playlist')}> + {t('Playlists')} + + + +
+ )} diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx index 9bc2e9ca..319d8a3f 100644 --- a/src/components/layout/styled.tsx +++ b/src/components/layout/styled.tsx @@ -191,9 +191,10 @@ export const FixedSidebar = styled(Sidebar)<{ font: string; $titleBar: string }> } `; -export const SidebarNavItem = styled(Nav.Item)` +export const SidebarNavItem = styled(Nav.Item)<{ hide?: boolean }>` padding-right: 5px; user-select: none; + display: ${(props) => (props.hide ? 'none' : 'block')}; a { color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important; diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx index 3b7c9f0e..90e44254 100644 --- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx +++ b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx @@ -19,6 +19,7 @@ import { StyledButton, StyledPopover, StyledCheckbox, + StyledCheckPicker, } from '../../shared/styled'; import ListViewConfig from './ListViewConfig'; import { Fonts } from '../Fonts'; @@ -42,6 +43,7 @@ import { setGridAlignment, setGridCardSize, setGridGapSize, + setSidebar, } from '../../../redux/configSlice'; import { Item, Server } from '../../../types'; import ConfigOption from '../ConfigOption'; @@ -294,6 +296,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => { const startPagePickerContainerRef = useRef(null); const albumSortDefaultPickerContainerRef = useRef(null); const musicSortDefaultPickerContainerRef = useRef(null); + const sidebarPickerContainerRef = useRef(null); const titleBarRestartWhisper = React.createRef(); const [themeList, setThemeList] = useState( _.concat(settings.getSync('themes'), settings.getSync('themesDefault')) @@ -580,6 +583,71 @@ export const ThemeConfigPanel = ({ bordered }: any) => { /> } /> + + sidebarPickerContainerRef.current} + data={[ + { + label: i18n.t('Dashboard'), + value: 'dashboard', + }, + { + label: i18n.t('Now Playing'), + value: 'nowplaying', + }, + { + label: i18n.t('Favorites'), + value: 'favorites', + }, + { + label: i18n.t('Songs'), + value: 'songs', + }, + { + label: i18n.t('Albums'), + value: 'albums', + }, + { + label: i18n.t('Artists'), + value: 'artists', + }, + { + label: i18n.t('Genres'), + value: 'genres', + }, + { + label: i18n.t('Folders'), + value: 'folders', + }, + { + label: i18n.t('Config'), + value: 'config', + }, + { + label: i18n.t('Collapse'), + value: 'collapse', + }, + { + label: i18n.t('Playlists'), + value: 'playlists', + }, + ]} + searchable={false} + cleanable={false} + defaultValue={config.lookAndFeel.sidebar.selected} + width={250} + disabledItemValues={config.serverType === Server.Subsonic ? ['songs'] : []} + onChange={(e: string) => { + settings.setSync('sidebar.selected', e); + dispatch(setSidebar({ selected: e })); + }} + /> + + } + /> ); }; diff --git a/src/components/shared/setDefaultSettings.ts b/src/components/shared/setDefaultSettings.ts index d908324e..6f85e84a 100644 --- a/src/components/shared/setDefaultSettings.ts +++ b/src/components/shared/setDefaultSettings.ts @@ -151,6 +151,22 @@ const setDefaultSettings = (force: boolean) => { settings.setSync('sidebar.coverArt', true); } + if (force || !settings.hasSync('sidebar.selected')) { + settings.setSync('sidebar.selected', [ + 'dashboard', + 'nowplaying', + 'favorites', + 'songs', + 'albums', + 'artists', + 'genres', + 'folders', + 'config', + 'collapse', + 'playlists', + ]); + } + if (force || !settings.hasSync('pagination.music.recordsPerPage')) { settings.setSync('pagination.music.recordsPerPage', 50); } diff --git a/src/redux/configSlice.ts b/src/redux/configSlice.ts index afc9b093..1c492b24 100644 --- a/src/redux/configSlice.ts +++ b/src/redux/configSlice.ts @@ -74,8 +74,22 @@ export interface Sidebar { expand: boolean; width: string; coverArt: boolean; + selected: SidebarList[]; } +export type SidebarList = + | 'dashboard' + | 'nowplaying' + | 'favorites' + | 'songs' + | 'albums' + | 'artists' + | 'genres' + | 'folders' + | 'config' + | 'collapse' + | 'playlists'; + export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | 'mini'; const initialState: ConfigPage = { @@ -153,6 +167,19 @@ const initialState: ConfigPage = { expand: Boolean(parsedSettings.sidebar?.expand) || true, width: String(parsedSettings.sidebar?.width) || '225px', coverArt: Boolean(parsedSettings.sidebar?.coverArt) || true, + selected: parsedSettings.sidebar?.selected || [ + 'dashboard', + 'nowplaying', + 'favorites', + 'songs', + 'albums', + 'artists', + 'genres', + 'folders', + 'config', + 'collapse', + 'playlists', + ], }, }, external: {