From 290e8c4bf0b8cbd155baf617f5edd1bd5158349f Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Sat, 23 May 2020 13:23:00 -0400
Subject: [PATCH] Make Starred into a "QuickFilter"

---
 ui/src/common/QuickFilter.js | 18 ++++++++++++++++++
 ui/src/common/index.js       |  2 ++
 ui/src/song/SongList.js      | 10 +++++-----
 3 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/common/QuickFilter.js

diff --git a/ui/src/common/QuickFilter.js b/ui/src/common/QuickFilter.js
new file mode 100644
index 000000000..9ce40e9e8
--- /dev/null
+++ b/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
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 3a7f2618c..4c1eeca5d 100644
--- a/ui/src/common/index.js
+++ b/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,
 }
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index 3a9c76210..bbe7ac2ef 100644
--- a/ui/src/song/SongList.js
+++ b/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>
 )