Option to toggle fields in songs, albums & artists (#923)

* Add toggleColumns

- Add logic for toggling columns
- Add MenuComponent + useSelectedFields hook

* Refactoring

* eslint-fixes

* Typo

* skip menu in albumGridView

* add omittedFields

* Add toggling for playlists and albumSong

* Refactoring

* defaultProps - fix

* Add toggling for PlaylistSongs

* remove accidental console log

* Refactoring for future compatibility

* Hide ToggleMenu in albumGridView

* Add TopBarComponent in ToggleFieldsMenu

* Add defaultOff for useSelectedFields

* Fix edge case

* eslint fix

* Refactoring

* Add propType for forwardRef

* Fix issues

* add translation for grid and table

* add translation for grid and table

* Ignore menuBtn for spotify-ish and Ligera themes

* hide bpm by default in playlistSongs

* Add memoization

* Default album view must be Grid

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

ui/src/album/AlbumActions.js

@@ -14,8 +14,13 @@ import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
 import { playNext, addTracks, playTracks, shuffleTracks } from '../actions'
 import subsonic from '../subsonic'
 import { formatBytes } from '../utils'
-import { useMediaQuery } from '@material-ui/core'
+import { useMediaQuery, makeStyles } from '@material-ui/core'
 import config from '../config'
+import ToggleFieldsMenu from '../common/ToggleFieldsMenu'
+
+const useStyles = makeStyles({
+  toolbar: { display: 'flex', justifyContent: 'space-between', width: '100%' },
+})
 
 const AlbumActions = ({
   className,
@@ -27,7 +32,9 @@ const AlbumActions = ({
 }) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
+  const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
 
   const handlePlay = React.useCallback(() => {
     dispatch(playTracks(data, ids))
@@ -51,41 +58,46 @@ const AlbumActions = ({
 
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
-      <Button
-        onClick={handlePlay}
-        label={translate('resources.album.actions.playAll')}
-      >
-        <PlayArrowIcon />
-      </Button>
-      <Button
-        onClick={handleShuffle}
-        label={translate('resources.album.actions.shuffle')}
-      >
-        <ShuffleIcon />
-      </Button>
-      <Button
-        onClick={handlePlayNext}
-        label={translate('resources.album.actions.playNext')}
-      >
-        <RiPlayList2Fill />
-      </Button>
-      <Button
-        onClick={handlePlayLater}
-        label={translate('resources.album.actions.addToQueue')}
-      >
-        <RiPlayListAddFill />
-      </Button>
-      {config.enableDownloads && (
-        <Button
-          onClick={handleDownload}
-          label={
-            translate('resources.album.actions.download') +
-            (isDesktop ? ` (${formatBytes(record.size)})` : '')
-          }
-        >
-          <CloudDownloadOutlinedIcon />
-        </Button>
-      )}
+      <div className={classes.toolbar}>
+        <div>
+          <Button
+            onClick={handlePlay}
+            label={translate('resources.album.actions.playAll')}
+          >
+            <PlayArrowIcon />
+          </Button>
+          <Button
+            onClick={handleShuffle}
+            label={translate('resources.album.actions.shuffle')}
+          >
+            <ShuffleIcon />
+          </Button>
+          <Button
+            onClick={handlePlayNext}
+            label={translate('resources.album.actions.playNext')}
+          >
+            <RiPlayList2Fill />
+          </Button>
+          <Button
+            onClick={handlePlayLater}
+            label={translate('resources.album.actions.addToQueue')}
+          >
+            <RiPlayListAddFill />
+          </Button>
+          {config.enableDownloads && (
+            <Button
+              onClick={handleDownload}
+              label={
+                translate('resources.album.actions.download') +
+                (isDesktop ? ` (${formatBytes(record.size)})` : '')
+              }
+            >
+              <CloudDownloadOutlinedIcon />
+            </Button>
+          )}
+        </div>
+        <div>{isNotSmall && <ToggleFieldsMenu resource="albumSong" />}</div>
+      </div>
     </TopToolbar>
   )
 }