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>

src/shared/components/spoiler/spoiler.tsx

@@ -7,9 +7,17 @@ import { Icon } from '/@/shared/components/icon/icon';
 
 interface SpoilerProps extends Omit<MantineSpoilerProps, 'hideLabel' | 'showLabel'> {
     children?: ReactNode;
+    hideLabel?: ReactNode;
+    showLabel?: ReactNode;
 }
 
-export const Spoiler = ({ children, maxHeight = 56, ...props }: SpoilerProps) => {
+export const Spoiler = ({
+    children,
+    hideLabel,
+    maxHeight = 56,
+    showLabel,
+    ...props
+}: SpoilerProps) => {
     const [expanded, setExpanded] = useState(false);
 
     return (
@@ -18,9 +26,9 @@ export const Spoiler = ({ children, maxHeight = 56, ...props }: SpoilerProps) =>
             expanded={expanded}
             maxHeight={maxHeight}
             {...props}
-            hideLabel={<Icon icon="arrowUpS" size="lg" />}
+            hideLabel={hideLabel ?? <Icon icon="arrowUpS" size="lg" />}
             onClick={() => setExpanded(!expanded)}
-            showLabel={<Icon icon="arrowDownS" size="lg" />}
+            showLabel={showLabel ?? <Icon icon="arrowDownS" size="lg" />}
         >
             {children}
         </MantineSpoiler>