Artist page improvements (#1391)

* Seperate mobile desktop components

* Fix err

* Rename classes and fix some styles

* Add lastFM button and remove console log

* Add Mbiz Icon

* render bio as dangerouslySetInnerHTML and remove unused css classes

* Add Fav and Stars

* Remove unstandardised class selector

* Remove ext link from m view

* Fix naming and simplify rounded styling

* Refactor ArtistShow:

- Extracted DesktopArtistDetails to its own file
- Removed album count as it was incorrect, it is not considering compilations
- Show bio and image from Native API, if it is available, before calling `getArtistInfo`

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

ui/src/artist/ArtistExternalLink.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { useTranslate } from 'react-admin'
+import { IconButton, Tooltip, Link, useMediaQuery } from '@material-ui/core'
+
+import { ImLastfm2 } from 'react-icons/im'
+import MusicBrainz from '../icons/MusicBrainz'
+import { intersperse } from '../utils'
+
+const ArtistExternalLinks = ({ artistInfo, record }) => {
+  const translate = useTranslate()
+  let links = []
+  let linkButtons = []
+  const lastFMlink = artistInfo?.biography?.match(
+    /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/
+  )
+
+  if (lastFMlink) {
+    links.push(lastFMlink[2])
+  }
+  if (artistInfo && artistInfo.musicBrainzId) {
+    links.push(`https://musicbrainz.org/artist/${artistInfo.musicBrainzId}`)
+  }
+
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+
+  const addLink = (url, title, icon) => {
+    const translatedTitle = translate(title)
+    const link = (
+      <Link href={url} target="_blank" rel="noopener noreferrer">
+        <Tooltip title={translatedTitle}>
+          <IconButton size={'small'} aria-label={translatedTitle}>
+            {icon}
+          </IconButton>
+        </Tooltip>
+      </Link>
+    )
+    const id = linkButtons.length
+    linkButtons.push(<span key={`link-${record.id}-${id}`}>{link}</span>)
+  }
+
+  isDesktop && addLink(links[0], 'message.openIn.lastfm', <ImLastfm2 />)
+
+  isDesktop &&
+    artistInfo?.musicBrainzId &&
+    addLink(links[1], 'message.openIn.musicbrainz', <MusicBrainz />)
+
+  return isDesktop && <div>{intersperse(linkButtons, ' ')}</div>
+}
+
+export default ArtistExternalLinks