diff --git a/docs/ENV_SETTINGS.md b/docs/ENV_SETTINGS.md index 053ab91a3..9dafea15c 100644 --- a/docs/ENV_SETTINGS.md +++ b/docs/ENV_SETTINGS.md @@ -43,7 +43,13 @@ These variables override app settings **on first run** when no persisted setting | `general.showVisualizerInSidebar` | `true` | `FS_GENERAL_SHOW_VISUALIZER_IN_SIDEBAR` | `true` / `false` — Show visualizer in sidebar. | | `general.sidebarCollapsedNavigation` | `true` | `FS_GENERAL_SIDEBAR_COLLAPSED_NAVIGATION` | `true` / `false` — Start with collapsed sidebar nav. | | `general.sidebarCollapseShared` | `false` | `FS_GENERAL_SIDEBAR_COLLAPSE_SHARED` | `true` / `false` — Share sidebar collapse state. | +| `general.sidebarPlaylistFolders` | `true` | `FS_GENERAL_SIDEBAR_PLAYLIST_FOLDERS` | `true` / `false` — Group playlists into folders by name separator. | +| `general.sidebarPlaylistFolderSeparator` | `/` | `FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_SEPARATOR` | Character or string that separates folder levels in a playlist name. Empty = use default. | +| `general.sidebarPlaylistFolderTreeIndent` | `16` | `FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_INDENT` | Pixels each tree level is indented (0–64). | +| `general.sidebarPlaylistFolderTreeLineColor` | *(empty)* | `FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_LINE_COLOR` | CSS color for tree connecting lines. Empty = theme default. | +| `general.sidebarPlaylistFolderView` | `tree` | `FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_VIEW` | `single` / `tree` / `navigation` — How folders are displayed in the sidebar. | | `general.sidebarPlaylistList` | `true` | `FS_GENERAL_SIDEBAR_PLAYLIST_LIST` | `true` / `false` — Show playlist list in sidebar. | +| `general.sidebarPlaylistMode` | `expanded` | `FS_GENERAL_SIDEBAR_PLAYLIST_MODE` | `compact` / `expanded` — Sidebar playlist row layout. | | `general.sidebarPlaylistSorting` | `false` | `FS_GENERAL_SIDEBAR_PLAYLIST_SORTING` | `true` / `false` — Enable playlist sorting in sidebar. | | `general.sideQueueType` | `sideQueue` | `FS_GENERAL_SIDE_QUEUE_TYPE` | `sideDrawerQueue` / `sideQueue` — Side play queue style. | | `general.sideQueueLayout` | `horizontal` | `FS_GENERAL_SIDE_QUEUE_LAYOUT` | `horizontal` / `vertical` — Attached side queue layout orientation. | diff --git a/settings.js.template b/settings.js.template index b7df16fe1..675924e56 100644 --- a/settings.js.template +++ b/settings.js.template @@ -38,7 +38,13 @@ window.FS_GENERAL_SHOW_RATINGS = "${FS_GENERAL_SHOW_RATINGS}"; window.FS_GENERAL_SHOW_VISUALIZER_IN_SIDEBAR = "${FS_GENERAL_SHOW_VISUALIZER_IN_SIDEBAR}"; window.FS_GENERAL_SIDEBAR_COLLAPSED_NAVIGATION = "${FS_GENERAL_SIDEBAR_COLLAPSED_NAVIGATION}"; window.FS_GENERAL_SIDEBAR_COLLAPSE_SHARED = "${FS_GENERAL_SIDEBAR_COLLAPSE_SHARED}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_FOLDERS = "${FS_GENERAL_SIDEBAR_PLAYLIST_FOLDERS}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_SEPARATOR = "${FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_SEPARATOR}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_INDENT = "${FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_INDENT}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_LINE_COLOR = "${FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_TREE_LINE_COLOR}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_VIEW = "${FS_GENERAL_SIDEBAR_PLAYLIST_FOLDER_VIEW}"; window.FS_GENERAL_SIDEBAR_PLAYLIST_LIST = "${FS_GENERAL_SIDEBAR_PLAYLIST_LIST}"; +window.FS_GENERAL_SIDEBAR_PLAYLIST_MODE = "${FS_GENERAL_SIDEBAR_PLAYLIST_MODE}"; window.FS_GENERAL_SIDEBAR_PLAYLIST_SORTING = "${FS_GENERAL_SIDEBAR_PLAYLIST_SORTING}"; window.FS_GENERAL_SIDE_QUEUE_TYPE = "${FS_GENERAL_SIDE_QUEUE_TYPE}"; window.FS_GENERAL_SIDE_QUEUE_LAYOUT = "${FS_GENERAL_SIDE_QUEUE_LAYOUT}"; diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index e84ce3942..b3427c95d 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -1063,6 +1063,10 @@ "sidebarPlaylistFolderTreeLineColor": "Tree line color", "sidebarPlaylistList_description": "Show or hide the playlist list in the sidebar", "sidebarPlaylistList": "Sidebar playlist list", + "sidebarPlaylistMode_description": "How each playlist is displayed in the sidebar list", + "sidebarPlaylistMode": "Sidebar playlist mode", + "sidebarPlaylistMode_optionCompact": "Compact", + "sidebarPlaylistMode_optionExpanded": "Expanded", "sidebarPlaylistSorting_description": "Allows manual playlist sorting in the sidebar using drag and drop instead of the default server order", "sidebarPlaylistSorting": "Sidebar playlist sorting", "sidebarPlaylistListFilterRegex_description": "Hide playlists in the sidebar that match this regular expression", diff --git a/src/renderer/features/settings/components/general/sidebar-settings.tsx b/src/renderer/features/settings/components/general/sidebar-settings.tsx index b551119ef..26bdc70c6 100644 --- a/src/renderer/features/settings/components/general/sidebar-settings.tsx +++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx @@ -15,6 +15,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input'; import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback'; type FolderView = 'navigation' | 'single' | 'tree'; +type PlaylistMode = 'compact' | 'expanded'; export const SidebarSettings = memo(() => { const { t } = useTranslation(); @@ -84,9 +85,6 @@ export const SidebarSettings = memo(() => { }); }, 500); - const foldersEnabled = settings.sidebarPlaylistFolders; - const isTreeView = settings.sidebarPlaylistFolderView === 'tree'; - const folderViewOptions: Array<{ label: string; value: FolderView }> = [ { label: t('setting.sidebarPlaylistFolderView_optionSingle', { @@ -108,6 +106,24 @@ export const SidebarSettings = memo(() => { }, ]; + const playlistModeOptions: Array<{ label: string; value: PlaylistMode }> = [ + { + label: t('setting.sidebarPlaylistMode_optionCompact', { + postProcess: 'sentenceCase', + }), + value: 'compact', + }, + { + label: t('setting.sidebarPlaylistMode_optionExpanded', { + postProcess: 'sentenceCase', + }), + value: 'expanded', + }, + ]; + + const foldersEnabled = settings.sidebarPlaylistFolders; + const isTreeView = settings.sidebarPlaylistFolderView === 'tree'; + const options: SettingOption[] = [ { control: ( @@ -150,6 +166,28 @@ export const SidebarSettings = memo(() => { }), title: t('setting.sidebarPlaylistSorting'), }, + { + control: ( +