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,
 }