From 76fa76efd50758f8ba0c08183e6086219408d62e Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Thu, 21 Nov 2024 16:37:22 +0100
Subject: [PATCH] Save target language for translation in settings

---
 .../src/app/reader/components/annotator/DeepLPopup.tsx | 10 +++++++---
 apps/readest-app/src/services/constants.ts             |  1 +
 apps/readest-app/src/types/settings.ts                 |  1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx b/apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx
index 3bb3ab10..028d6f10 100644
--- a/apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Popup from '@/components/Popup';
 import { Position } from '@/utils/sel';
 import { fetch } from '@tauri-apps/plugin-http';
+import { useReaderStore } from '@/store/readerStore';
 
 const LANGUAGES = {
   AUTO: 'Auto Detect',
@@ -36,8 +37,9 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
   popupWidth,
   popupHeight,
 }) => {
+  const { settings, setSettings } = useReaderStore();
   const [sourceLang, setSourceLang] = useState('AUTO');
-  const [targetLang, setTargetLang] = useState('EN');
+  const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
   const [translation, setTranslation] = useState<string | null>(null);
   const [detectedSourceLang, setDetectedSourceLang] = useState<keyof typeof LANGUAGES | null>(null);
   const [loading, setLoading] = useState(false);
@@ -48,6 +50,8 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
   };
 
   const handleTargetLangChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    settings.globalReadSettings.translateTargetLang = event.target.value;
+    setSettings(settings);
     setTargetLang(event.target.value);
   };
 
@@ -115,7 +119,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
             <select
               value={sourceLang}
               onChange={handleSourceLangChange}
-              className='select h-8 min-h-8 rounded-md border-none bg-gray-400 text-sm focus:outline-none focus:ring-0'
+              className='select text-neutral-content h-8 min-h-8 rounded-md border-none bg-neutral-200/50 text-sm focus:outline-none focus:ring-0'
             >
               {Object.entries(LANGUAGES).map(([code, name]) => {
                 return (
@@ -137,7 +141,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
             <select
               value={targetLang}
               onChange={handleTargetLangChange}
-              className='select h-8 min-h-8 rounded-md border-none bg-gray-400 text-sm focus:outline-none focus:ring-0'
+              className='select text-neutral-content h-8 min-h-8 rounded-md border-none bg-neutral-200/50 text-sm focus:outline-none focus:ring-0'
             >
               {Object.entries(LANGUAGES)
                 .filter(([code]) => code !== 'AUTO')
diff --git a/apps/readest-app/src/services/constants.ts b/apps/readest-app/src/services/constants.ts
index 1b9d11a2..209691e3 100644
--- a/apps/readest-app/src/services/constants.ts
+++ b/apps/readest-app/src/services/constants.ts
@@ -11,6 +11,7 @@ export const DEFAULT_READSETTINGS: ReadSettings = {
   notebookWidth: '25%',
   isNotebookPinned: false,
   autohideCursor: true,
+  translateTargetLang: 'EN',
 
   highlightStyle: 'highlight',
   highlightStyles: {
diff --git a/apps/readest-app/src/types/settings.ts b/apps/readest-app/src/types/settings.ts
index b638ad32..b62b9c95 100644
--- a/apps/readest-app/src/types/settings.ts
+++ b/apps/readest-app/src/types/settings.ts
@@ -9,6 +9,7 @@ export interface ReadSettings {
   notebookWidth: string;
   isNotebookPinned: boolean;
   autohideCursor: boolean;
+  translateTargetLang: string;
 
   highlightStyle: HighlightStyle;
   highlightStyles: Record<HighlightStyle, HighlightColor>;