Add stars to Albums

ui/src/album/AlbumList.js

@@ -12,8 +12,9 @@ import {
   useTranslate,
   useListParams,
 } from 'react-admin'
-import { List, Title, useAlbumsPerPage } from '../common'
+import StarIcon from '@material-ui/icons/Star'
 import { withWidth } from '@material-ui/core'
+import { List, QuickFilter, Title, useAlbumsPerPage } from '../common'
 import AlbumListActions from './AlbumListActions'
 import AlbumListView from './AlbumListView'
 import AlbumGridView from './AlbumGridView'
@@ -37,6 +38,11 @@ const AlbumFilter = (props) => {
       </ReferenceInput>
       <NullableBooleanInput source="compilation" />
       <NumberInput source="year" />
+      <QuickFilter
+        source="starred"
+        label={<StarIcon fontSize={'small'} />}
+        defaultValue={true}
+      />
     </Filter>
   )
 }

ui/src/album/AlbumListView.js

@@ -10,14 +10,24 @@ import {
   SimpleShowLayout,
   TextField,
 } from 'react-admin'
+import { useMediaQuery } from '@material-ui/core'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
 import {
   ArtistLinkField,
   DurationField,
   RangeField,
   SimpleList,
 } from '../common'
-import { useMediaQuery } from '@material-ui/core'
 import { AlbumContextMenu } from '../common'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  columnIcon: {
+    marginLeft: '3px',
+    marginTop: '-2px',
+    verticalAlign: 'text-top',
+  },
+})
 
 const AlbumDetails = (props) => {
   return (
@@ -64,6 +74,7 @@ const AlbumDatagrid = (props) => (
 )
 
 const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
+  const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return isXsmall ? (
@@ -88,7 +99,11 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
       {isDesktop && <NumberField source="playCount" sortByOrder={'DESC'} />}
       <RangeField source={'year'} sortBy={'maxYear'} sortByOrder={'DESC'} />
       {isDesktop && <DurationField source="duration" />}
-      <AlbumContextMenu />
+      <AlbumContextMenu
+        label={
+          <StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
+        }
+      />
     </AlbumDatagrid>
   )
 }

ui/src/album/albumLists.js

@@ -3,6 +3,7 @@ import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
 import RepeatIcon from '@material-ui/icons/Repeat'
 import AlbumIcon from '@material-ui/icons/Album'
+import StarIcon from '@material-ui/icons/Star'
 
 export default {
   all: {
@@ -10,6 +11,10 @@ export default {
     params: 'sort=name&order=ASC',
   },
   random: { icon: ShuffleIcon, params: 'sort=random' },
+  starred: {
+    icon: StarIcon,
+    params: 'sort=starred_at&order=DESC&filter={"starred":true}',
+  },
   recentlyAdded: {
     icon: LibraryAddIcon,
     params: 'sort=created_at&order=DESC',