Make Starred into a "QuickFilter"

ui/src/common/QuickFilter.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Chip, makeStyles } from '@material-ui/core'
+import { useTranslate } from 'react-admin'
+
+const useQuickFilterStyles = makeStyles((theme) => ({
+  chip: {
+    marginBottom: theme.spacing(1),
+  },
+}))
+
+const QuickFilter = ({ source, label }) => {
+  const translate = useTranslate()
+  const classes = useQuickFilterStyles()
+  const lbl = label || `resources.song.fields.${source}`
+  return <Chip className={classes.chip} label={translate(lbl)} />
+}
+
+export default QuickFilter

ui/src/common/index.js

@@ -13,6 +13,7 @@ import List from './List'
 import { SongDatagrid, SongDatagridRow } from './SongDatagrid'
 import AddToPlaylistMenu from './AddToPlaylistMenu'
 import SongContextMenu from './SongContextMenu'
+import QuickFilter from './QuickFilter'
 
 export {
   Title,
@@ -33,4 +34,5 @@ export {
   artistLink,
   AddToPlaylistMenu,
   SongContextMenu,
+  QuickFilter,
 }

ui/src/song/SongList.js

@@ -2,7 +2,6 @@ import React from 'react'
 import {
   Filter,
   FunctionField,
-  NullableBooleanInput,
   NumberField,
   SearchInput,
   TextField,
@@ -11,11 +10,12 @@ import {
 import { useMediaQuery } from '@material-ui/core'
 import {
   DurationField,
-  SimpleList,
   List,
-  SongDetails,
-  SongDatagrid,
+  SimpleList,
   SongContextMenu,
+  SongDatagrid,
+  SongDetails,
+  QuickFilter,
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
@@ -25,7 +25,7 @@ import { AlbumLinkField } from './AlbumLinkField'
 const SongFilter = (props) => (
   <Filter {...props}>
     <SearchInput source="title" alwaysOn />
-    <NullableBooleanInput source="starred" />
+    <QuickFilter source="starred" defaultValue={true} />
   </Filter>
 )