Fix translation API (#189)

* Fix translation API

* Add missing translations

apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import Popup from '@/components/Popup';
 import { Position } from '@/utils/sel';
+import { getAPIBaseUrl } from '@/services/environment';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { isWebAppPlatform } from '@/services/environment';
+import { useAuth } from '@/context/AuthContext';
 
 const LANGUAGES = {
   AUTO: 'Auto Detect',
@@ -23,6 +24,8 @@ const LANGUAGES = {
   'ZH-HANT': 'Chinese (Traditional)',
 };
 
+const DEEPL_API_ENDPOINT = getAPIBaseUrl() + '/deepl/translate';
+
 interface DeepLPopupProps {
   text: string;
   position: Position;
@@ -39,6 +42,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
   popupHeight,
 }) => {
   const _ = useTranslation();
+  const { token } = useAuth();
   const { settings, setSettings } = useSettingsStore();
   const [sourceLang, setSourceLang] = useState('AUTO');
   const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
@@ -63,23 +67,12 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
       setError(null);
       setTranslation(null);
 
-      if (!process.env['NEXT_PUBLIC_DEEPL_API_KEY']) {
-        console.error('DeepL API key not found. Set NEXT_PUBLIC_DEEPL_API_KEY in .env.local');
-      }
-
-      const { fetch, url } = isWebAppPlatform()
-        ? { fetch: window.fetch, url: '/api/deepl/translate' }
-        : {
-            fetch: (await import('@tauri-apps/plugin-http')).fetch,
-            url: 'https://api-free.deepl.com/v2/translate',
-          };
-
       try {
-        const response = await fetch(url, {
+        const response = await fetch(DEEPL_API_ENDPOINT, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            Authorization: `DeepL-Auth-Key ${process.env['NEXT_PUBLIC_DEEPL_API_KEY']}`,
+            Authorization: `Bearer ${token ?? ''}`,
           },
           body: JSON.stringify({
             text: [text],
@@ -106,14 +99,15 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
         setTranslation(translatedText);
       } catch (err) {
         console.error(err);
-        setError('Unable to fetch the translation. Try again later.');
+        setError(_('Unable to fetch the translation. Try again later.'));
       } finally {
         setLoading(false);
       }
     };
 
     fetchTranslation();
-  }, [text, sourceLang, targetLang]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, token, sourceLang, targetLang]);
 
   return (
     <div>