[Update] Config Page: Add Translation Tab. DeeplAuthKey section.

Allow null value to Entry component's input element.

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -3,6 +3,7 @@ import { useStore_SelectedConfigTabId } from "@store";
 import {
     Device,
     Appearance,
+    Translation,
     Transcription,
     Others,
     AdvancedSettings,
@@ -17,6 +18,8 @@ export const SettingBox = () => {
             return <Device />;
         case "appearance":
             return <Appearance />;
+        case "translation":
+            return <Translation />;
         case "transcription":
             return <Transcription />;
         case "others":

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx

@@ -19,7 +19,7 @@ const _Entry = forwardRef((props, ref) => {
                 <input
                     ref={inputRef}
                     className={styles.entry_input_area}
-                    value={props.ui_variable}
+                    value={props.ui_variable === null ? "" : props.ui_variable}
                     onChange={(e) => props.onChange(e)}
                 />
             </div>

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -5,10 +5,9 @@ import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState, useRef } from "react";
 
-export const DeeplAuthKey = () => {
+export const DeeplAuthKey = (props) => {
     const { t } = useTranslation();
     const [is_editable, seIsEditable] = useState(false);
-    const [input_value, seInputValue] = useState("");
     const entryRef = useRef(null);
 
     const revealEditAuthKey = () => {
@@ -17,16 +16,16 @@ export const DeeplAuthKey = () => {
     };
 
     const onchangeEntryAuthKey = (e) => {
-        seInputValue(e.target.value);
+        props.onChangeFunction(e.target.value);
     };
     const saveAuthKey = () => {
-        console.log(input_value);
+        props.saveFunction();
     };
 
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
-                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey}/>
+                <_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable}/>
                 <button className={styles.save_button} onClick={saveAuthKey}>Save</button>
                 {is_editable
                 ? null

src-ui/app/config_page/setting_section/setting_box/index.js

@@ -1,5 +1,6 @@
 export { Device } from "./device/Device";
 export { Appearance } from "./appearance/Appearance";
+export { Translation } from "./translation/Translation";
 export { Transcription } from "./transcription/Transcription";
 export { Others, VrcMicMuteSyncContainer } from "./others/Others";
 export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./Translation.module.scss";
+
+import {
+    useDeepLAuthKey,
+} from "@logics_configs";
+
+import {
+    DeeplAuthKeyContainer,
+} from "../_templates/Templates";
+
+export const Translation = () => {
+    const [input_value, seInputValue] = useState("");
+    const { t } = useTranslation();
+    const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useDeepLAuthKey();
+
+    const onChangeFunction = (value) => {
+        seInputValue(value);
+    };
+
+    const saveFunction = () => {
+        if (input_value === "") return deleteDeepLAuthKey();
+        setDeepLAuthKey(input_value);
+    };
+
+    useEffect(() => {
+        seInputValue(currentDeepLAuthKey.data);
+    }, [currentDeepLAuthKey]);
+
+    return (
+        <>
+            <DeeplAuthKeyContainer
+                label={t("config_page.deepl_auth_key.label")}
+                desc={t(
+                    "config_page.deepl_auth_key.desc",
+                    {translator: t("main_page.translator")}
+                )}
+                variable={input_value}
+                onChangeFunction={onChangeFunction}
+                saveFunction={saveFunction}
+            />
+        </>
+    );
+};