add playlist description to expanded header

src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx

@@ -20,11 +20,14 @@ import { ListSearchInput } from '/@/renderer/features/shared/components/list-sea
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 import { hasFeature } from '/@/shared/api/utils';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { FileButton } from '/@/shared/components/file-button/file-button';
 import { Group } from '/@/shared/components/group/group';
+import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
+import { Text } from '/@/shared/components/text/text';
 import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
 import { LibraryItem, Playlist, Song } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
@@ -110,6 +113,7 @@ export const PlaylistDetailSongListHeader = ({
     });
 
     const playlistDuration = detailQuery?.data?.duration;
+    const playlistDescription = detailQuery?.data?.description?.trim();
 
     const [collapsed] = useLocalStorage<boolean>({
         defaultValue: false,
@@ -170,10 +174,32 @@ export const PlaylistDetailSongListHeader = ({
                     title={detailQuery?.data?.name || ''}
                     topRight={<ListSearchInput />}
                 >
-                    <LibraryHeaderMenu
-                        onPlay={(type) => handlePlay(type)}
-                        onShuffle={() => handlePlay(Play.SHUFFLE)}
-                    />
+                    <Stack gap="md" w="100%">
+                        {playlistDescription ? (
+                            <Spoiler
+                                hideLabel={<></>}
+                                maxHeight={16}
+                                showLabel={<></>}
+                                style={{ marginBottom: 0 }}
+                            >
+                                <Text
+                                    isMuted
+                                    size="sm"
+                                    style={{
+                                        maxWidth: '100%',
+                                        whiteSpace: 'pre-wrap',
+                                        wordBreak: 'break-word',
+                                    }}
+                                >
+                                    {replaceURLWithHTMLLinks(playlistDescription)}
+                                </Text>
+                            </Spoiler>
+                        ) : null}
+                        <LibraryHeaderMenu
+                            onPlay={(type) => handlePlay(type)}
+                            onShuffle={() => handlePlay(Play.SHUFFLE)}
+                        />
+                    </Stack>
                 </LibraryHeader>
             )}
             <FilterBar>