Handling long playlist comments (#2973)

Closes #1737

* wrapping playlist comment in a <Collapse> element

* Extract common collapsible logic into a component

---------

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/common/CollapsibleComment.js

@@ -0,0 +1,57 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Typography, Collapse } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import AnchorMe from './Linkify'
+import clsx from 'clsx'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    commentBlock: {
+      display: 'inline-block',
+      marginTop: '1em',
+      float: 'left',
+      wordBreak: 'break-word',
+    },
+    pointerCursor: {
+      cursor: 'pointer',
+    },
+  }),
+  {
+    name: 'NDCollapsibleComment',
+  },
+)
+
+export const CollapsibleComment = ({ record }) => {
+  const classes = useStyles()
+  const [expanded, setExpanded] = 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>
+  )
+}

ui/src/common/index.js

@@ -2,6 +2,7 @@ export * from './AddToPlaylistButton'
 export * from './ArtistLinkField'
 export * from './BatchPlayButton'
 export * from './BitrateField'
+export * from './CollapsibleComment'
 export * from './ContextMenus'
 export * from './DateField'
 export * from './DocLink'