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
+}
+
+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) => (
-
+
)