From 147d26fb758279665ac9e8babb17a0c1fec7763a Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Fri, 14 Aug 2020 15:35:15 -0400
Subject: [PATCH] Enable sort by "starred" in Album and Artist lists

---
 ui/src/album/AlbumListView.js |  3 +++
 ui/src/artist/ArtistList.js   | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/ui/src/album/AlbumListView.js b/ui/src/album/AlbumListView.js
index b3d1e720f..72706c235 100644
--- a/ui/src/album/AlbumListView.js
+++ b/ui/src/album/AlbumListView.js
@@ -100,6 +100,9 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
       <RangeField source={'year'} sortBy={'maxYear'} sortByOrder={'DESC'} />
       {isDesktop && <DurationField source="duration" />}
       <AlbumContextMenu
+        source={'starred'}
+        sortBy={'starred ASC, starredAt ASC'}
+        sortByOrder={'DESC'}
         label={
           <StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
         }
diff --git a/ui/src/artist/ArtistList.js b/ui/src/artist/ArtistList.js
index 085fa5278..1b753005a 100644
--- a/ui/src/artist/ArtistList.js
+++ b/ui/src/artist/ArtistList.js
@@ -10,6 +10,7 @@ import {
 } from 'react-admin'
 import { useMediaQuery, withWidth } from '@material-ui/core'
 import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 import {
   ArtistContextMenu,
@@ -18,6 +19,15 @@ import {
   SimpleList,
   useGetHandleArtistClick,
 } from '../common'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  columnIcon: {
+    marginLeft: '3px',
+    marginTop: '-2px',
+    verticalAlign: 'text-top',
+  },
+})
 
 const ArtistFilter = (props) => (
   <Filter {...props}>
@@ -62,6 +72,7 @@ const ArtistDatagrid = (props) => (
 )
 
 const ArtistList = ({ width, ...rest }) => {
+  const classes = useStyles()
   const handleArtistLink = useGetHandleArtistClick(width)
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
@@ -86,7 +97,17 @@ const ArtistList = ({ width, ...rest }) => {
             <NumberField source="albumCount" sortByOrder={'DESC'} />
             <NumberField source="songCount" sortByOrder={'DESC'} />
             <NumberField source="playCount" sortByOrder={'DESC'} />
-            <ArtistContextMenu />
+            <ArtistContextMenu
+              source={'starred'}
+              sortBy={'starred ASC, starredAt ASC'}
+              sortByOrder={'DESC'}
+              label={
+                <StarBorderIcon
+                  fontSize={'small'}
+                  className={classes.columnIcon}
+                />
+              }
+            />
           </ArtistDatagrid>
         )}
       </List>