feat(ui): Add Artist Radio and Shuffle options (#4186)

* Add Play Similar option

* Add pt-br translation for Play Similar

* Refactor playSimilar and add helper

* Improve Play Similar feedback

* Add artist actions bar with shuffle and radio

* Add Play Similar menu and align artist actions

* Refine artist actions and revert menu option

* fix(ui): enhance layout of ArtistActions and ArtistShow components

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(i18n): revert unused changes

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(ui): improve layout for mobile

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(ui): improve error handling for fetching similar songs

Signed-off-by: Deluan <deluan@navidrome.org>

* fix(ui): enhance error logging for fetching songs in shuffle

Signed-off-by: Deluan <deluan@navidrome.org>

* refactor(ui): shuffle handling to use async/await for better readability

Signed-off-by: Deluan <deluan@navidrome.org>

* refactor(ui): simplify button label handling in ArtistActions component

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/artist/ArtistShow.jsx

@@ -14,6 +14,34 @@ import AlbumGridView from '../album/AlbumGridView'
 import MobileArtistDetails from './MobileArtistDetails'
 import DesktopArtistDetails from './DesktopArtistDetails'
 import { useAlbumsPerPage, useResourceRefresh, Title } from '../common/index.js'
+import ArtistActions from './ArtistActions'
+import { makeStyles } from '@material-ui/core'
+
+const useStyles = makeStyles((theme) => ({
+  actions: {
+    width: '100%',
+    justifyContent: 'flex-start',
+    display: 'flex',
+    paddingTop: '0.25em',
+    paddingBottom: '0.25em',
+    paddingLeft: '1em',
+    paddingRight: '1em',
+    flexWrap: 'wrap',
+    overflowX: 'auto',
+    [theme.breakpoints.down('xs')]: {
+      paddingLeft: '0.5em',
+      paddingRight: '0.5em',
+      gap: '0.5em',
+      justifyContent: 'space-around',
+    },
+  },
+  actionsContainer: {
+    paddingLeft: '.75rem',
+    [theme.breakpoints.down('xs')]: {
+      padding: '.5rem',
+    },
+  },
+}))
 
 const ArtistDetails = (props) => {
   const record = useRecordContext(props)
@@ -56,6 +84,7 @@ const ArtistShowLayout = (props) => {
   const record = useRecordContext()
   const { width } = props
   const [, perPageOptions] = useAlbumsPerPage(width)
+  const classes = useStyles()
   useResourceRefresh('artist', 'album')
 
   const maxPerPage = 90
@@ -79,6 +108,11 @@ const ArtistShowLayout = (props) => {
     <>
       {record && <RaTitle title={<Title subTitle={record.name} />} />}
       {record && <ArtistDetails />}
+      {record && (
+        <div className={classes.actionsContainer}>
+          <ArtistActions record={record} className={classes.actions} />
+        </div>
+      )}
       {record && (
         <ReferenceManyField
           {...showContext}