wrapping playlist comment in a <Collapse> element

ui/src/playlist/PlaylistDetails.js

@@ -1,9 +1,11 @@
-import React from 'react'
-import { Card, CardContent, Typography } from '@material-ui/core'
+import React, { useMemo, useCallback } from 'react'
+import { Card, CardContent, Typography, Collapse } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { useTranslate } from 'react-admin'
 import { DurationField, SizeField } from '../common'
-import Linkify from '../common/Linkify'
+
+import AnchorMe from '../common/Linkify'
+import clsx from 'clsx'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -41,6 +43,41 @@ const useStyles = makeStyles(
   },
 )
 
+const PlaylistComment = ({ record }) => {
+  const classes = useStyles()
+  const [expanded, setExpanded] = React.useState(false)
+
+  const lines = record.comment.split('\n')
+  const formatted = useMemo(() => {
+    return lines.map((line, idx) => (
+      <span key={record.id + '-comment-' + idx}>
+        <AnchorMe text={line} />
+        <br />
+      </span>
+    ))
+  }, [lines, record.id])
+
+  const handleExpandClick = useCallback(() => {
+    setExpanded(!expanded)
+  }, [expanded, setExpanded])
+
+  return (
+    <Collapse
+      collapsedHeight={'2em'}
+      in={expanded}
+      timeout={'auto'}
+      className={clsx(
+        classes.commentBlock,
+        lines.length > 1 && classes.pointerCursor,
+      )}
+    >
+      <Typography variant={'h6'} onClick={handleExpandClick}>
+        {formatted}
+      </Typography>
+    </Collapse>
+  )
+}
+
 const PlaylistDetails = (props) => {
   const { record = {} } = props
   const translate = useTranslate()
@@ -52,9 +89,7 @@ const PlaylistDetails = (props) => {
         <Typography variant="h5" className={classes.title}>
           {record.name || translate('ra.page.loading')}
         </Typography>
-        <Typography component="h6">
-          <Linkify text={record.comment} />
-        </Typography>
+        <PlaylistComment record={record} />
         <Typography component="p">
           {record.songCount ? (
             <span>