From 1c659cc6930f2024552e23a7f38c6732cd111d09 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 11 Jul 2026 13:50:08 -0700
Subject: [PATCH] format playlist header title without folder names

---
 .../playlist-detail-song-list-header.tsx      | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
index 6def3ffaa..b7829770f 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
 
@@ -18,8 +18,13 @@ import {
 } from '/@/renderer/features/shared/components/library-header';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
+import { getPlaylistLeafName } from '/@/renderer/features/sidebar/components/playlist-folder-tree';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer } from '/@/renderer/store';
+import {
+    useCurrentServer,
+    useSidebarPlaylistFolders,
+    useSidebarPlaylistFolderSeparator,
+} from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 import { hasFeature } from '/@/shared/api/utils';
@@ -112,6 +117,14 @@ export const PlaylistDetailSongListHeader = ({
 
     const playlistDuration = detailQuery?.data?.duration;
     const playlistDescription = detailQuery?.data?.description?.trim();
+    const foldersEnabled = useSidebarPlaylistFolders();
+    const folderSeparator = useSidebarPlaylistFolderSeparator();
+    const playlistDisplayName = useMemo(() => {
+        const name = detailQuery?.data?.name;
+        if (!name) return '';
+        if (!foldersEnabled) return name;
+        return getPlaylistLeafName(name, folderSeparator);
+    }, [detailQuery?.data?.name, folderSeparator, foldersEnabled]);
 
     const [collapsed] = useLocalStorage<boolean>({
         defaultValue: false,
@@ -161,7 +174,7 @@ export const PlaylistDetailSongListHeader = ({
                             itemType={LibraryItem.PLAYLIST}
                             songs={listData as Song[]}
                         />
-                        <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
+                        <LibraryHeaderBar.Title>{playlistDisplayName}</LibraryHeaderBar.Title>
                         {isSmartPlaylist && (
                             <LibraryHeaderBar.Badge>
                                 {t('entity.smartPlaylist')}
@@ -197,7 +210,7 @@ export const PlaylistDetailSongListHeader = ({
                         type: LibraryItem.PLAYLIST,
                     }}
                     onImageFileDrop={canUploadPlaylistImage ? handlePlaylistImageUpload : undefined}
-                    title={detailQuery?.data?.name || ''}
+                    title={playlistDisplayName}
                     topRight={<ListSearchInput />}
                 >
                     <Stack gap="md" w="100%">