From afdb9d69144f2ba389438460dd6a458ce0746b8e Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 28 Dec 2024 05:24:52 +0900
Subject: [PATCH] [Update] Main Page: Translator: Add warning ui to translate
 selector when the same languages are selected.

---
 locales/en.yml                                |  4 ++
 locales/ja.yml                                |  4 ++
 .../TranslatorSelectorOpenButton.jsx          | 37 +++++++++++++++
 .../TranslatorSelectorOpenButton.module.scss  |  8 ++++
 .../TranslatorSelector.jsx                    | 45 ++++++++++++-------
 .../TranslatorSelector.module.scss            | 30 ++++++++++++-
 src-ui/assets/warning.svg                     |  1 +
 7 files changed, 113 insertions(+), 16 deletions(-)
 create mode 100644 src-ui/assets/warning.svg

diff --git a/locales/en.yml b/locales/en.yml
index 8726c0b3..85d51180 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -19,6 +19,10 @@ main_page:
     translator: Translator
     translator_ctranslate2: Internal (Default)
 
+    translator_selector:
+        is_selected_same_language: |-
+            Since the same language is selected for both '{{your_language}}' and '{{target_language}}', only '{{translator_ctranslate2}}' is available.
+
     message_log:
         all: All
         sent: Sent
diff --git a/locales/ja.yml b/locales/ja.yml
index 9e9da6ef..c8fe0069 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -19,6 +19,10 @@ main_page:
     translator: 翻訳エンジン
     translator_ctranslate2: オフライン翻訳 (Default)
 
+    translator_selector:
+        is_selected_same_language: |-
+            「{{your_language}}」と「{{target_language}}」に同じ言語が選択がされているため、「{{translator_ctranslate2}}」のみが使用できます。
+
     message_log:
         all: 全て
         sent: 送信
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
index 3c830f13..e6b68cd4 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
@@ -4,10 +4,13 @@ import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
+import WarningSvg from "@images/warning.svg?react";
 
 export const TranslatorSelectorOpenButton = () => {
     const { t } = useTranslation();
     const {
+        currentSelectedYourLanguages,
+        currentSelectedTargetLanguages,
         currentSelectedPresetTabNumber,
         currentTranslationEngines,
         currentSelectedTranslationEngines,
@@ -21,6 +24,35 @@ export const TranslatorSelectorOpenButton = () => {
 
     const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
 
+    const checkIsSelectedSameLanguage = () => {
+        const your_language_data = currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data];
+        const target_language_data = currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data];
+
+        const yourLanguage = your_language_data["1"];
+        const yourLanguageName = yourLanguage.language;
+        const yourCountry = yourLanguage.country;
+
+        let is_selected_same_language = false;
+
+        for (const key in target_language_data) {
+            const targetLanguage = target_language_data[key];
+
+            if (targetLanguage.enable) {
+                const targetLanguageName = targetLanguage.language;
+                const targetCountry = targetLanguage.country;
+
+                if (yourLanguageName === targetLanguageName && yourCountry === targetCountry) {
+                    is_selected_same_language = true;
+                    break;
+                }
+            }
+        }
+
+        return is_selected_same_language;
+    };
+
+    const is_selected_same_language = checkIsSelectedSameLanguage();
+
     const getSelectedLabel = () => {
 
         const selected_engine = translation_engines.find(
@@ -44,11 +76,16 @@ export const TranslatorSelectorOpenButton = () => {
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
                 <p className={styles.label}>{t("main_page.translator")}: </p>
                 <p className={styles.label}>{selected_label}</p>
+                {is_selected_same_language
+                    ? <WarningSvg className={styles.warning_svg}/>
+                    : null
+                }
             </div>
             {currentIsOpenedTranslatorSelector.data &&
                 <TranslatorSelector
                     selected_id={selected_engine_id}
                     translation_engines={translation_engines}
+                    is_selected_same_language={is_selected_same_language}
                 />
             }
         </div>
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
index fcc32d96..463a9c29 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
@@ -4,6 +4,7 @@
 }
 
 .translator_selector_button {
+    position: relative;
     width: auto;
     display: flex;
     justify-content: center;
@@ -25,4 +26,11 @@
     font-size: 1.2rem;
     color: var(--dark_basic_text_color);
     white-space: nowrap;
+}
+
+.warning_svg {
+    margin-left: 0.2rem;
+    padding-bottom: 0.2rem;
+    width: 1.8rem;
+    color: #cb944f;
 }
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
index fe39877e..45a45fad 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
@@ -1,29 +1,44 @@
 import clsx from "clsx";
 import styles from "./TranslatorSelector.module.scss";
-import { chunkArray } from "@utils";
+import { useTranslation } from "react-i18next";
 
+import { chunkArray } from "@utils";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 
-export const TranslatorSelector = ({selected_id, translation_engines}) => {
+export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => {    const { t } = useTranslation();
     const columns = chunkArray(translation_engines, 2);
 
     return (
         <div className={styles.container}>
-            <div className={styles.wrapper}>
-                {columns.map((column, column_index) => (
-                    <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                        {column.map(({ id, label, is_available }) => (
-                            <TranslatorBox
-                                key={id}
-                                id={id}
-                                label={label}
-                                is_available={is_available}
-                                is_selected={(id === selected_id)}
-                            />
-                        ))}
+            <div className={styles.relative_container}>
+                <div className={styles.wrapper}>
+                    {columns.map((column, column_index) => (
+                        <div className={styles.column_wrapper} key={`column_${column_index}`}>
+                            {column.map(({ id, label, is_available }) => (
+                                <TranslatorBox
+                                    key={id}
+                                    id={id}
+                                    label={label}
+                                    is_available={is_available}
+                                    is_selected={(id === selected_id)}
+                                />
+                            ))}
+                        </div>
+                    ))}
+                </div>
+                {is_selected_same_language ?
+                    <div className={styles.is_selected_same_language_wrapper}>
+                        <p className={styles.is_selected_same_language_text}>
+                            {t("main_page.translator_selector.is_selected_same_language", {
+                                your_language: t("main_page.your_language"),
+                                target_language: t("main_page.target_language"),
+                                translator_ctranslate2: t("main_page.translator_ctranslate2"),
+                            })}
+                        </p>
                     </div>
-                ))}
+                : null
+                }
             </div>
         </div>
     );
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
index 09262137..84aea69e 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
@@ -3,7 +3,6 @@
     bottom: 100%;
     width: 100%;
     height: 26rem;
-    padding: 1rem;
     background-color:  (#000000dd);
     // background-color:  (var(--dark_875_color) + 80);
     backdrop-filter: blur(0.1rem);
@@ -12,7 +11,16 @@
     align-items: center;
 }
 
+.relative_container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .wrapper {
+    // padding: 1rem;
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -60,4 +68,24 @@ $box_size: 6.8rem;
 
 .translator_name {
     font-size: 1.4rem;
+}
+
+.is_selected_same_language_wrapper {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color:  (#22222233);
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    pointer-events: none;
+    padding: 4rem 1rem;
+}
+
+.is_selected_same_language_text {
+    font-size: 1.4rem;
+    text-align: center;
+    text-wrap: balance;
+    color: var(--dark_basic_text_color);
 }
\ No newline at end of file
diff --git a/src-ui/assets/warning.svg b/src-ui/assets/warning.svg
new file mode 100644
index 00000000..72221ecf
--- /dev/null
+++ b/src-ui/assets/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z"/></svg>
\ No newline at end of file