Refactored the current ⭐️/Star feature to ❤️/Love/Favourite feature. (#908)

* Added setRating feature to AlbumListView

* Refactored the iconography from ⭐ to ❤️

* Refactored the current component from StarButton to LoveButton

* Refactored all translations from Starred to Loved, and all props from showStar to showLove

* Refactored useToggleStar hook to useToggleLove

* rebased repository from master and removed stray commmits

* Refactored handler name from TOGGLE_STAR to TOGGLE_LOVE in PlayerToolbar.js

* Change "starred" translation to "Favorite"

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/album/AlbumDetails.js

@@ -18,7 +18,7 @@ import {
   DurationField,
   formatRange,
   SizeField,
-  StarButton,
+  LoveButton,
 } from '../common'
 
 const useStyles = makeStyles((theme) => ({
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     height: '100%',
   },
-  starButton: {
+  loveButton: {
     top: theme.spacing(-0.2),
     left: theme.spacing(0.5),
   },
@@ -160,12 +160,12 @@ const AlbumDetails = ({ record }) => {
           <CardContent className={classes.content}>
             <Typography variant="h5">
               {record.name}
-              <StarButton
-                className={classes.starButton}
+              <LoveButton
+                className={classes.loveButton}
                 record={record}
                 resource={'album'}
                 size={isDesktop ? 'default' : 'small'}
-                aria-label="star"
+                aria-label="love"
                 color="primary"
               />
             </Typography>

ui/src/album/AlbumList.js

@@ -11,7 +11,7 @@ import {
   Pagination,
   useTranslate,
 } from 'react-admin'
-import StarIcon from '@material-ui/icons/Star'
+import FavoriteIcon from '@material-ui/icons/Favorite'
 import { withWidth } from '@material-ui/core'
 import { List, QuickFilter, Title, useAlbumsPerPage } from '../common'
 import AlbumListActions from './AlbumListActions'
@@ -38,7 +38,7 @@ const AlbumFilter = (props) => {
       <NumberInput source="year" />
       <QuickFilter
         source="starred"
-        label={<StarIcon fontSize={'small'} />}
+        label={<FavoriteIcon fontSize={'small'} />}
         defaultValue={true}
       />
     </Filter>

ui/src/album/AlbumListView.js

@@ -9,7 +9,7 @@ import {
   TextField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import StarBorderIcon from '@material-ui/icons/StarBorder'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
 import {
   ArtistLinkField,
@@ -93,7 +93,10 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
         sortByOrder={'DESC'}
         className={classes.contextMenu}
         label={
-          <StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
+          <FavoriteBorderIcon
+            fontSize={'small'}
+            className={classes.columnIcon}
+          />
         }
       />
     </Datagrid>

ui/src/album/AlbumSongs.js

@@ -10,7 +10,7 @@ import clsx from 'clsx'
 import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import StarBorderIcon from '@material-ui/icons/StarBorder'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { playTracks } from '../actions'
 import {
   DurationField,
@@ -123,7 +123,7 @@ const AlbumSongs = (props) => {
               sortable={false}
               className={classes.contextMenu}
               label={
-                <StarBorderIcon
+                <FavoriteBorderIcon
                   fontSize={'small'}
                   className={classes.columnIcon}
                 />

ui/src/album/albumLists.js

@@ -3,7 +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'
+import FavoriteIcon from '@material-ui/icons/Favorite'
 
 export default {
   all: {
@@ -12,7 +12,7 @@ export default {
   },
   random: { icon: ShuffleIcon, params: 'sort=random' },
   starred: {
-    icon: StarIcon,
+    icon: FavoriteIcon,
     params: 'sort=starred_at&order=DESC&filter={"starred":true}',
   },
   recentlyAdded: {