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/song/SongList.js

@@ -28,6 +28,7 @@ import { AddToPlaylistDialog } from '../dialogs'
 import { makeStyles } from '@material-ui/core/styles'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import config from '../config'
+import useSelectedFields from '../common/useSelectedFields'
 import { QualityInfo } from '../common/QualityInfo'
 
 const useStyles = makeStyles({
@@ -77,6 +78,49 @@ const SongList = (props) => {
     dispatch(setTrack(record))
   }
 
+  const toggleableFields = React.useMemo(() => {
+    return {
+      album: isDesktop && (
+        <AlbumLinkField
+          source="album"
+          sortBy={
+            'album, order_album_artist_name, disc_number, track_number, title'
+          }
+          sortByOrder={'ASC'}
+        />
+      ),
+      artist: <TextField source="artist" />,
+      trackNumber: isDesktop && <NumberField source="trackNumber" />,
+      playCount: isDesktop && (
+        <NumberField source="playCount" sortByOrder={'DESC'} />
+      ),
+      year: isDesktop && (
+        <FunctionField
+          source="year"
+          render={(r) => r.year || ''}
+          sortByOrder={'DESC'}
+        />
+      ),
+      quality: isDesktop && <QualityInfo source="quality" sortable={false} />,
+      duration: <DurationField source="duration" />,
+      rating: config.enableStarRating && (
+        <RatingField
+          source="rating"
+          sortByOrder={'DESC'}
+          resource={'song'}
+          className={classes.ratingField}
+        />
+      ),
+      bpm: isDesktop && <NumberField source="bpm" />,
+    }
+  }, [isDesktop, classes.ratingField])
+
+  const columns = useSelectedFields({
+    resource: 'song',
+    columns: toggleableFields,
+    defaultOff: ['bpm'],
+  })
+
   return (
     <>
       <List
@@ -98,38 +142,7 @@ const SongList = (props) => {
             classes={{ row: classes.row }}
           >
             <SongTitleField source="title" showTrackNumbers={false} />
-            {isDesktop && (
-              <AlbumLinkField
-                source="album"
-                sortBy={
-                  'album, order_album_artist_name, disc_number, track_number, title'
-                }
-                sortByOrder={'ASC'}
-              />
-            )}
-            <TextField source="artist" />
-            {isDesktop && <NumberField source="trackNumber" />}
-            {isDesktop && (
-              <NumberField source="playCount" sortByOrder={'DESC'} />
-            )}
-            {isDesktop && (
-              <FunctionField
-                source="year"
-                render={(r) => r.year || ''}
-                sortByOrder={'DESC'}
-              />
-            )}
-            {isDesktop && <QualityInfo source="quality" sortable={false} />}
-            <DurationField source="duration" />
-            {isDesktop && <NumberField source="bpm" />}
-            {config.enableStarRating && (
-              <RatingField
-                source="rating"
-                sortByOrder={'DESC'}
-                resource={'song'}
-                className={classes.ratingField}
-              />
-            )}
+            {columns}
             <SongContextMenu
               source={'starred'}
               sortBy={'starred ASC, starredAt ASC'}

ui/src/song/SongListActions.js

@@ -1,6 +1,8 @@
 import React, { cloneElement } from 'react'
 import { sanitizeListRestProps, TopToolbar } from 'react-admin'
+import { useMediaQuery } from '@material-ui/core'
 import { ShuffleAllButton } from '../common'
+import ToggleFieldsMenu from '../common/ToggleFieldsMenu'
 
 export const SongListActions = ({
   currentSort,
@@ -20,6 +22,7 @@ export const SongListActions = ({
   ids,
   ...rest
 }) => {
+  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       {filters &&
@@ -31,6 +34,7 @@ export const SongListActions = ({
           context: 'button',
         })}
       <ShuffleAllButton filters={filterValues} />
+      {isNotSmall && <ToggleFieldsMenu resource="song" />}
     </TopToolbar>
   )
 }