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/playlist/PlaylistList.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Datagrid,
   DateField,
@@ -11,8 +11,10 @@ import {
   useNotify,
 } from 'react-admin'
 import Switch from '@material-ui/core/Switch'
-import { DurationField, List, Writable, isWritable } from '../common'
 import { useMediaQuery } from '@material-ui/core'
+import { DurationField, List, Writable, isWritable } from '../common'
+import useSelectedFields from '../common/useSelectedFields'
+import PlaylistListActions from './PlaylistListActions'
 
 const PlaylistFilter = (props) => (
   <Filter {...props} variant={'outlined'}>
@@ -60,24 +62,42 @@ const PlaylistList = ({ permissions, ...props }) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
 
+  const toggleableFields = useMemo(() => {
+    return {
+      owner: <TextField source="owner" />,
+      songCount: isDesktop && <NumberField source="songCount" />,
+      duration: isDesktop && <DurationField source="duration" />,
+      updatedAt: isDesktop && (
+        <DateField source="updatedAt" sortByOrder={'DESC'} />
+      ),
+      public: !isXsmall && (
+        <TogglePublicInput
+          source="public"
+          permissions={permissions}
+          sortByOrder={'DESC'}
+        />
+      ),
+    }
+  }, [isDesktop, isXsmall, permissions])
+
+  const columns = useSelectedFields({
+    resource: 'playlist',
+    columns: toggleableFields,
+  })
+
   return (
-    <List {...props} exporter={false} filters={<PlaylistFilter />}>
+    <List
+      {...props}
+      exporter={false}
+      filters={<PlaylistFilter />}
+      actions={<PlaylistListActions />}
+    >
       <Datagrid
         rowClick="show"
         isRowSelectable={(r) => isWritable(r && r.owner)}
       >
         <TextField source="name" />
-        <TextField source="owner" />
-        {isDesktop && <NumberField source="songCount" />}
-        {isDesktop && <DurationField source="duration" />}
-        {isDesktop && <DateField source="updatedAt" sortByOrder={'DESC'} />}
-        {!isXsmall && (
-          <TogglePublicInput
-            source="public"
-            permissions={permissions}
-            sortByOrder={'DESC'}
-          />
-        )}
+        {columns}
         <Writable>
           <EditButton />
         </Writable>