only show translation when api key and provider are picked, and fix eslint vscode

.vscode/settings.json

@@ -13,10 +13,9 @@
         ".prettierrc": "jsonc",
         ".eslintignore": "ignore"
     },
-    "eslint.validate": ["typescript"],
+    "eslint.validate": ["typescript", "typescriptreact"],
     "eslint.workingDirectories": [
         { "directory": "./", "changeProcessCWD": true },
-        { "directory": "./server", "changeProcessCWD": true }
     ],
     "typescript.tsserver.experimental.enableProjectDiagnostics": false,
     "editor.codeActionsOnSave": {

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -24,7 +24,7 @@ interface LyricsActionsProps {
     onRemoveLyric: () => void;
     onResetLyric: () => void;
     onSearchOverride: (params: LyricsOverride) => void;
-    onTranslateLyric: () => void;
+    onTranslateLyric?: () => void;
     setIndex: (idx: number) => void;
 }
 
@@ -135,7 +135,7 @@ export const LyricsActions = ({
             </div>
 
             <div style={{ position: 'absolute', right: 0, top: -50 }}>
-                {isDesktop && sources.length ? (
+                {isDesktop && sources.length && onTranslateLyric ? (
                     <Button
                         disabled={isActionsDisabled}
                         onClick={onTranslateLyric}

src/renderer/features/lyrics/lyrics.tsx

@@ -32,7 +32,8 @@ import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/shared/types
 
 export const Lyrics = () => {
     const currentSong = useCurrentSong();
-    const lyricsSettings = useLyricsSettings();
+    const { translationApiKey, translationApiProvider, translationTargetLanguage } =
+        useLyricsSettings();
     const { t } = useTranslation();
     const [index, setIndex] = useState(0);
     const [translatedLyrics, setTranslatedLyrics] = useState<null | string>(null);
@@ -97,8 +98,6 @@ export const Lyrics = () => {
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
-        const { translationApiKey, translationApiProvider, translationTargetLanguage } =
-            lyricsSettings;
         const TranslatedText: null | string = await translateLyrics(
             originalLyrics,
             translationApiKey,
@@ -107,7 +106,14 @@ export const Lyrics = () => {
         );
         setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
-    }, [lyrics, lyricsSettings, translatedLyrics, showTranslation]);
+    }, [
+        translatedLyrics,
+        lyrics,
+        translationApiKey,
+        translationApiProvider,
+        translationTargetLanguage,
+        showTranslation,
+    ]);
 
     const { isInitialLoading: isOverrideLoading } = useSongLyricsByRemoteId({
         options: {
@@ -194,7 +200,11 @@ export const Lyrics = () => {
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
                         onSearchOverride={handleOnSearchOverride}
-                        onTranslateLyric={handleOnTranslateLyric}
+                        onTranslateLyric={
+                            translationApiProvider && translationApiKey
+                                ? handleOnTranslateLyric
+                                : undefined
+                        }
                         setIndex={setIndex}
                     />
                 </div>

src/renderer/features/settings/components/playback/lyric-settings.tsx

@@ -181,6 +181,7 @@ export const LyricSettings = () => {
         {
             control: (
                 <Select
+                    clearable
                     data={['Microsoft Azure', 'Google Cloud']}
                     onChange={(value) => {
                         setSettings({ lyrics: { ...settings, translationApiProvider: value } });