[Update] Main Page: Add UI, multi language.

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -4,6 +4,7 @@ import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
 import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
 import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
+import { AddRemoveTargetLanguageButtons } from "./add_remove_target_language_buttons/AddRemoveTargetLanguageButtons";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
@@ -22,69 +23,32 @@ export const LanguageSettings = () => {
 
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
-import { useStore_IsOpenedLanguageSelector } from "@store";
-import {
-    useMainFunction,
-    useLanguageSettings,
-} from "@logics_main";
-
-// 言語セレクターをトグルする処理を関数化
-const toggleSelector = (selector, currentStatus, updateSelector) => {
-    if (currentStatus) {
-        updateSelector({ your_language: false, target_language: false });
-    } else {
-        updateSelector({
-            your_language: selector === "your_language",
-            target_language: selector === "target_language",
-        });
-    }
-};
-
-// 選択された言語データの取得を関数化
-const getSelectedLanguageData = (presetTabData, languageData) => {
-    return (presetTabData !== undefined && languageData !== undefined)
-        ? languageData[Number(presetTabData)]
-        : undefined;
-};
+import { useMainFunction } from "@logics_main";
 
 const PresetContainer = () => {
     const { t } = useTranslation();
-    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
-
     const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
-    const {
-        currentSelectedPresetTabNumber,
-        currentSelectedYourLanguages,
-        currentSelectedTargetLanguages,
-    } = useLanguageSettings();
-
-    const your_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data);
-    const target_language_data = getSelectedLanguageData(currentSelectedPresetTabNumber.data, currentSelectedTargetLanguages.data);
-
 
     const yourLanguageSettings = {
-        title: t("main_page.your_language"),
-        is_opened: currentIsOpenedLanguageSelector.data.your_language,
-        onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: MicSvg,
         is_turned_on: currentTranscriptionSendStatus.data,
-        variable: your_language_data?.primary,
     };
 
     const targetLanguageSettings = {
-        title: t("main_page.target_language"),
-        is_opened: currentIsOpenedLanguageSelector.data.target_language,
-        onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
         TurnedOnSvgComponent: HeadphonesSvg,
         is_turned_on: currentTranscriptionReceiveStatus.data,
-        variable: target_language_data?.primary,
     };
 
     return (
         <div className={styles.preset_container}>
-            <LanguageSelectorOpenButton {...yourLanguageSettings} />
+            <LanguageSelectorOpenButton {...yourLanguageSettings} selector_key="your_language" target_key="1"/>
             <LanguageSwapButton />
-            <LanguageSelectorOpenButton {...targetLanguageSettings} />
+            <div className={styles.target_language_containers}>
+                <LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="1" />
+                <LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="2" />
+                <LanguageSelectorOpenButton {...targetLanguageSettings} selector_key="target_language" target_key="3" />
+            </div>
+            <AddRemoveTargetLanguageButtons />
             <TranslatorSelectorOpenButton />
         </div>
     );

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.module.scss

@@ -18,4 +18,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
+.target_language_containers {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2rem;
 }

src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.jsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import styles from "./AddRemoveTargetLanguageButtons.module.scss";
+import RemoveSvg from "@images/remove.svg?react";
+import AddSvg from "@images/add.svg?react";
+
+import { useLanguageSettings } from "@logics_main";
+
+export const AddRemoveTargetLanguageButtons = () => {
+    const {
+        currentSelectedPresetTabNumber,
+        // currentSelectedYourLanguages,
+        currentSelectedTargetLanguages,
+        removeTargetLanguage,
+        addTargetLanguage,
+    } = useLanguageSettings();
+
+    const remove_button_class = clsx(styles.remove_target_language_button, {
+        [styles.is_disabled]: !currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable,
+    });
+    const add_button_class = clsx(styles.add_target_language_button, {
+        [styles.is_disabled]: currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["3"].enable,
+    });
+
+    return (
+        <div className={styles.add_remove_target_language_container}>
+            <div className={remove_button_class} onClick={removeTargetLanguage}>
+                <RemoveSvg className={styles.remove_svg} />
+            </div>
+            <div className={add_button_class} onClick={addTargetLanguage}>
+                <AddSvg className={styles.add_svg} />
+            </div>
+        </div>
+    );
+};

src-ui/app/main_page/sidebar_section/language_settings/add_remove_target_language_buttons/AddRemoveTargetLanguageButtons.module.scss

@@ -0,0 +1,32 @@
+.add_remove_target_language_container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.add_target_language_button, .remove_target_language_button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.6rem 0;
+    cursor: pointer;
+    background-color: var(--dark_825_color);
+    &:hover {
+        background-color: var(--dark_875_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+    &.is_disabled {
+        pointer-events: none;
+        .remove_svg, .add_svg {
+            color: var(--dark_700_color);
+        }
+    }
+}
+
+.remove_svg, .add_svg {
+    width: 0.8rem;
+    color: var(--dark_200_color);
+}

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx

@@ -1,18 +1,61 @@
+import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import styles from "./LanguageSelectorOpenButton.module.scss";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import {
+    useLanguageSettings,
+} from "@logics_main";
+
+export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, selector_key, target_key }) => {
+    const { t } = useTranslation();
+    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+
+    const {
+        currentSelectedPresetTabNumber,
+        currentSelectedYourLanguages,
+        currentSelectedTargetLanguages,
+    } = useLanguageSettings();
+
+    const toggleSelector = () => {
+        if (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key) { // Close Language Selector
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: "1" });
+        } else { // Open Language Selector
+            updateIsOpenedLanguageSelector({
+                your_language: selector_key === "your_language",
+                target_language: selector_key === "target_language",
+                target_key: target_key,
+            });
+        }
+    };
 
-export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
     const arrow_class_names = clsx(styles.arrow_left_svg, {
-        [styles.reverse]: is_opened,
+        [styles.reverse]: (currentIsOpenedLanguageSelector.data[selector_key] === true && currentIsOpenedLanguageSelector.data.target_key === target_key),
     });
 
     const category_class_names = clsx(styles.category_svg, {
         [styles.is_turned_on]: is_turned_on,
     });
 
-    const languageText = variable?.language ?? "Loading...";
-    const countryText = variable?.country ?? "Loading...";
+    const getVariable = (target_selector_key) => {
+        if (target_selector_key === "your_language") return currentSelectedYourLanguages.data[currentSelectedPresetTabNumber.data];
+        if (target_selector_key === "target_language") return currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data];
+    };
+
+    const getTitle = (target_selector_key) => {
+        if (target_selector_key === "your_language") return t("main_page.your_language");
+        if (target_selector_key === "target_language") {
+            if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.target_language");
+            return `${t("main_page.target_language")} ${target_key}`;
+        }
+    };
+
+    const title = getTitle(selector_key);
+
+    if (getVariable(selector_key)[target_key].enable === false) return null;
+
+    const language_text = getVariable(selector_key)[target_key].language ?? "Loading...";
+    const country_text = getVariable(selector_key)[target_key].country ?? "Loading...";
 
     return (
         <div className={styles.container}>
@@ -20,9 +63,9 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened,
                 <TurnedOnSvgComponent className={category_class_names} />
                 <p className={styles.title}>{title}</p>
             </div>
-            <div className={styles.dropdown_menu_container} onClick={onClickFunction}>
-                <p className={styles.selected_language}>{languageText}</p>
-                <p className={styles.selected_language}>({countryText})</p>
+            <div className={styles.dropdown_menu_container} onClick={toggleSelector}>
+                <p className={styles.selected_language}>{language_text}</p>
+                <p className={styles.selected_language}>({country_text})</p>
                 <ArrowLeftSvg className={arrow_class_names} />
             </div>
         </div>