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/AlbumList.js

@@ -6,9 +6,9 @@ import {
   Filter,
   NullableBooleanInput,
   NumberInput,
+  Pagination,
   ReferenceInput,
   SearchInput,
-  Pagination,
   useTranslate,
 } from 'react-admin'
 import FavoriteIcon from '@material-ui/icons/Favorite'
@@ -20,6 +20,7 @@ import AlbumGridView from './AlbumGridView'
 import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
+import useSelectedFields from '../common/useSelectedFields'
 
 const AlbumFilter = (props) => {
   const translate = useTranslate()
@@ -70,6 +71,21 @@ const AlbumList = (props) => {
     .replace(/^\/album/, '')
     .replace(/^\//, '')
 
+  // Workaround to force album columns to appear the first time.
+  // See https://github.com/navidrome/navidrome/pull/923#issuecomment-833004842
+  // TODO: Find a better solution
+  useSelectedFields({
+    resource: 'album',
+    columns: {
+      artist: 'artist',
+      songCount: 'songCount',
+      playCount: 'playCount',
+      year: 'year',
+      duration: 'duration',
+      rating: 'rating',
+    },
+  })
+
   // If it does not have filter/sort params (usually coming from Menu),
   // reload with correct filter/sort params
   if (!location.search) {