fix(ui): show last.fm api-key missing in a FormHelperText

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

ui/src/personal/LastfmScrobbleToggle.jsx

@@ -3,6 +3,7 @@ import { useNotify, useTranslate } from 'react-admin'
 import {
   FormControl,
   FormControlLabel,
+  FormHelperText,
   LinearProgress,
   Switch,
   Tooltip,
@@ -102,14 +103,13 @@ export const LastfmScrobbleToggle = (props) => {
 
   return (
     <FormControl>
-      {apiKey ? (
       <FormControlLabel
         control={
           <Switch
             id={'lastfm'}
             color="primary"
             checked={linked || checkingLink}
-              disabled={linked === null || checkingLink}
+            disabled={!apiKey || linked === null || checkingLink}
             onChange={toggleScrobble}
           />
         }
@@ -117,17 +117,6 @@ export const LastfmScrobbleToggle = (props) => {
           <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
         }
       />
-      ) : (
-        <Tooltip title={translate('menu.personal.options.lastfmNotConfigured')}>
-          <FormControlLabel
-            disabled={true}
-            control={<Switch id={'lastfm'} color="primary" />}
-            label={
-              <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
-            }
-          />
-        </Tooltip>
-      )}
       {checkingLink && (
         <Progress
           setLinked={setLinked}
@@ -135,6 +124,11 @@ export const LastfmScrobbleToggle = (props) => {
           apiKey={apiKey}
         />
       )}
+      {!apiKey && (
+        <FormHelperText id="scrobble-lastfm-disabled-helper-text">
+          {translate('menu.personal.options.lastfmNotConfigured')}
+        </FormHelperText>
+      )}
     </FormControl>
   )
 }