Merge branch 'ui' into for_webui

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

@@ -0,0 +1,11 @@
+export { ActionButton } from "./action_button/ActionButton";
+export { Checkbox } from "./checkbox/Checkbox";
+export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
+export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
+export { Entry } from "./entry/Entry";
+export { LabelComponent } from "./label_component/LabelComponent";
+export { RadioButton } from "./radio_button/RadioButton";
+export { Slider } from "./slider/Slider";
+export { SwitchBox } from "./switch_box/SwitchBox";
+export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
+export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";

src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { useState } from "react";
-import styles from "./Switchbox.module.scss";
+import styles from "./SwitchBox.module.scss";
 
-export const Switchbox = (props) => {
+export const SwitchBox = (props) => {
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -0,0 +1,121 @@
+import styles from "./Templates.module.scss";
+import { useStore_IsOpenedDropdownMenu } from "@store";
+
+import {
+    LabelComponent,
+    DropdownMenu,
+    Slider,
+    Checkbox,
+    SwitchBox,
+    Entry,
+    RadioButton,
+    OpenWebpage_DeeplAuthKey,
+    DeeplAuthKey,
+    ActionButton,
+    WordFilter,
+    WordFilterListToggleComponent,
+} from "../_components/";
+
+export const useOnMouseLeaveDropdownMenu = () => {
+    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
+
+    const onMouseLeaveFunction = () => {
+        updateIsOpenedDropdownMenu("");
+    };
+
+    return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
+    return (
+        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DropdownMenu {...props} />
+        </div>
+    );
+};
+
+
+export const SliderContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Slider {...props}/>
+        </div>
+    );
+};
+
+export const CheckboxContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Checkbox {...props}/>
+        </div>
+    );
+};
+
+export const SwitchBoxContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <SwitchBox {...props}/>
+        </div>
+    );
+};
+
+export const EntryContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Entry {...props}/>
+        </div>
+    );
+};
+
+export const RadioButtonContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <RadioButton {...props}/>
+        </div>
+    );
+};
+
+export const DeeplAuthKeyContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.deepl_auth_key_label_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <OpenWebpage_DeeplAuthKey />
+            </div>
+            <DeeplAuthKey {...props}/>
+        </div>
+    );
+};
+
+export const ActionButtonContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <ActionButton {...props}/>
+        </div>
+    );
+};
+
+export const WordFilterContainer = (props) => {
+    return (
+        <div className={styles.word_filter_container}>
+            <div className={styles.word_filter_switch_section}>
+                <div className={styles.word_filter_label_wrapper}>
+                    <LabelComponent label={props.label} desc={props.desc}/>
+                </div>
+                <WordFilterListToggleComponent/>
+            </div>
+            <div className={styles.word_filter_section}>
+                <WordFilter {...props}/>
+            </div>
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -17,26 +17,6 @@
     width: 100%;
 }
 
-// .threshold_container {
-//     display: flex;
-//     width: 100%;
-//     flex-direction: column;
-//     justify-content: space-between;
-//     align-items: center;
-//     gap: 2rem;
-// }
-
-// .threshold_switch_section {
-//     display: flex;
-//     width: 100%;
-//     justify-content: space-between;
-//     align-items: center;
-// }
-
-// .threshold_section {
-//     width: 100%;
-// }
-
 .deepl_auth_key_label_section {
     max-width: 34rem;
     display: flex;

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -1,32 +1,26 @@
 import clsx from "clsx";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
-import { useSettingBox } from "../components/useSettingBox";
-
+import { useStore_SelectableFontFamilyList } from "@store";
 import {
     useUiLanguage,
     useUiScaling,
     useMessageLogUiScaling,
     useSelectedFontFamily,
     useTransparency,
-    // useRestoreWindowGeometry,
 } from "@logics_configs";
 
-export const Appearance = () => {
-    const { t } = useTranslation();
-    const {
-        // DropdownMenuContainer,
-        // SliderContainer,
-        // CheckboxContainer,
-        // SwitchboxContainer,
-        // EntryContainer,
-        // ThresholdContainer,
-        // RadioButtonContainer,
-        // DeeplAuthKeyContainer,
-        // WordFilterContainer,
-        // ActionButtonContainer,
-    } = useSettingBox();
+import {
+    LabelComponent
+} from "../_components/";
 
+import {
+    SliderContainer,
+    DropdownMenuContainer,
+} from "../_templates/Templates";
+
+export const Appearance = () => {
     return (
         <>
             <UiLanguageContainer />
@@ -34,38 +28,13 @@ export const Appearance = () => {
             <MessageLogUiScalingContainer />
             <FontFamilyContainer />
             <TransparencyContainer />
-            {/* <RestoreWindowGeometryContainer /> */}
-
-
-
-            {/* <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
-
-            <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
-            <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>
-            <SwitchboxContainer label="Transparent" desc="description" switchbox_id="switchbox_id_1"/>
-
-            <RadioButtonContainer label="Transparent" desc="description" switchbox_id="radiobutton_id_1"/>
-
-            <EntryContainer width="20rem" label="Transparent" desc="description" switchbox_id="entry_id_1"/>
-
-            <ThresholdContainer label="Transparent" desc="description" id="mic_threshold"  min="0" max="3000"/>
-
-            <DeeplAuthKeyContainer label={t(`config_page.deepl_auth_key.label`)} desc={t(`config_page.deepl_auth_key.desc`)}/>
-
-            <WordFilterContainer label={t(`config_page.mic_word_filter.label`)} desc={t(`config_page.mic_word_filter.desc`)}/>
-
-            <ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/> */}
-
         </>
     );
 };
 
-import { LabelComponent } from "../components/label_component/LabelComponent";
-
 const UiLanguageContainer = () => {
     const { t } = useTranslation();
     const { currentUiLanguage, setUiLanguage } = useUiLanguage();
-
     const SELECTABLE_UI_LANGUAGES_DICT = {
         en: "English",
         ja: "日本語",
@@ -73,7 +42,6 @@ const UiLanguageContainer = () => {
         "zh-Hant": "繁體中文",
     };
 
-
     const is_not_en_lang = currentUiLanguage.data !== "en" && currentUiLanguage.data !== undefined;
     return (
         <div className={styles.ui_language_container}>
@@ -106,10 +74,6 @@ const UiLanguageContainer = () => {
     );
 };
 
-
-import { SliderContainer } from "../components/useSettingBox";
-
-import { useEffect, useState } from "react";
 const UiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentUiScaling, setUiScaling } = useUiScaling();
@@ -192,8 +156,7 @@ const MessageLogUiScalingContainer = () => {
         />
     );
 };
-import { useStore_SelectableFontFamilyList } from "@store";
-import { DropdownMenuContainer } from "../components/useSettingBox";
+
 const FontFamilyContainer = () => {
     const { t } = useTranslation();
     const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
@@ -216,7 +179,6 @@ const FontFamilyContainer = () => {
     );
 };
 
-
 const TransparencyContainer = () => {
     const { t } = useTranslation();
     const { currentTransparency, setTransparency } = useTransparency();
@@ -256,19 +218,3 @@ const TransparencyContainer = () => {
         />
     );
 };
-
-// import { CheckboxContainer } from "../components/useSettingBox";
-
-// const RestoreWindowGeometryContainer = () => {
-//     const { t } = useTranslation();
-//     const { currentRestoreWindowGeometry, toggleRestoreWindowGeometry } = useRestoreWindowGeometry();
-
-//     return (
-//         <CheckboxContainer
-//             label={t("config_page.to_restore_main_page_geometry.label")}
-//             desc={t("config_page.to_restore_main_page_geometry.desc")}
-//             variable={currentRestoreWindowGeometry}
-//             toggleFunction={toggleRestoreWindowGeometry}
-//         />
-//     );
-// };

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -1,132 +0,0 @@
-import styles from "./useSettingBox.module.scss";
-import { useStore_IsOpenedDropdownMenu } from "@store";
-import clsx from "clsx";
-
-import { LabelComponent } from "./label_component/LabelComponent";
-import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
-import { Slider } from "./slider/Slider";
-import { Checkbox } from "./checkbox/Checkbox";
-import { Switchbox } from "./switchbox/Switchbox";
-import { Entry } from "./entry/Entry";
-import { RadioButton } from "./radio_button/RadioButton";
-import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-import { ActionButton } from "./action_button/ActionButton";
-import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
-
-
-export const useOnMouseLeaveDropdownMenu = () => {
-    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
-
-    const onMouseLeaveFunction = () => {
-        updateIsOpenedDropdownMenu("");
-    };
-
-    return { onMouseLeaveFunction };
-};
-
-export const DropdownMenuContainer = (props) => {
-    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-
-    return (
-        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <DropdownMenu {...props} />
-        </div>
-    );
-};
-
-
-export const SliderContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Slider {...props}/>
-        </div>
-    );
-};
-
-export const CheckboxContainer = (props) => {
-    return (
-        <div className={styles.container}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <Checkbox {...props}/>
-        </div>
-    );
-};
-
-export const useSettingBox = () => {
-    const SwitchboxContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <Switchbox {...props}/>
-            </div>
-        );
-    };
-
-    const EntryContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <Entry {...props}/>
-            </div>
-        );
-    };
-
-    const RadioButtonContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <RadioButton {...props}/>
-            </div>
-        );
-    };
-
-    const DeeplAuthKeyContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <div className={styles.deepl_auth_key_label_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <OpenWebpage_DeeplAuthKey />
-                </div>
-                <DeeplAuthKey {...props}/>
-            </div>
-        );
-    };
-
-    const ActionButtonContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <ActionButton {...props}/>
-            </div>
-        );
-    };
-
-
-    const WordFilterContainer = (props) => {
-        return (
-            <div className={styles.word_filter_container}>
-                <div className={styles.word_filter_switch_section}>
-                    <div className={styles.word_filter_label_wrapper}>
-                        <LabelComponent label={props.label} desc={props.desc}/>
-                    </div>
-                    <WordFilterListToggleComponent/>
-                </div>
-                <div className={styles.word_filter_section}>
-                    <WordFilter {...props}/>
-                </div>
-            </div>
-        );
-    };
-
-    return {
-        CheckboxContainer,
-        SwitchboxContainer,
-        EntryContainer,
-        RadioButtonContainer,
-        DeeplAuthKeyContainer,
-        WordFilterContainer,
-        ActionButtonContainer,
-    };
-};

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -1,18 +1,5 @@
-import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
-import {
-    useOnMouseLeaveDropdownMenu,
-} from "../components/useSettingBox";
-export const Device = () => {
-    return (
-        <>
-            <Mic_Container />
-            <Speaker_Container />
-        </>
-    );
-};
-
 import {
     useEnableAutoMicSelect,
     useMicHostList,
@@ -26,16 +13,31 @@ import {
     useSpeakerThreshold,
 } from "@logics_configs";
 
-import { LabelComponent } from "../components/label_component/LabelComponent";
-import { DropdownMenu } from "../components/dropdown_menu/DropdownMenu";
-import { ThresholdComponent } from "../components/threshold_component/ThresholdComponent";
-import { Switchbox } from "../components/switchbox/Switchbox";
+import {
+    useOnMouseLeaveDropdownMenu,
+} from "../_templates/Templates";
+
+import {
+    LabelComponent,
+    DropdownMenu,
+    ThresholdComponent,
+    SwitchBox,
+} from "../_components/";
+
+export const Device = () => {
+    return (
+        <>
+            <Mic_Container />
+            <Speaker_Container />
+        </>
+    );
+};
 
 const Mic_Container = () => {
     const { t } = useTranslation();
     const { currentEnableAutoMicSelect, toggleEnableAutoMicSelect } = useEnableAutoMicSelect();
     const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
-    const { currentMicHostList, getMicHostList } = useMicHostList();
+    const { currentMicHostList } = useMicHostList();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
     const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
 
@@ -47,7 +49,7 @@ const Mic_Container = () => {
     const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
 
     const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
-    const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+    const { currentMicDeviceList } = useMicDeviceList();
 
     const selectFunction_device = (selected_data) => {
         setSelectedMicDevice(selected_data.selected_id);
@@ -75,7 +77,7 @@ const Mic_Container = () => {
 
                     <div className={styles.device_auto_select_wrapper}>
                         <p className={styles.device_secondary_label}>{t("config_page.mic_host_device.label_auto_select")}</p>
-                        <Switchbox
+                        <SwitchBox
                             variable={currentEnableAutoMicSelect}
                             toggleFunction={toggleEnableAutoMicSelect}
                         />
@@ -89,7 +91,6 @@ const Mic_Container = () => {
                                 selected_id={currentSelectedMicHost.data}
                                 list={currentMicHostList.data}
                                 selectFunction={selectFunction_host}
-                                // openListFunction={getMicHostList}
                                 state={currentSelectedMicHost.state}
                                 style={{ maxWidth: "20rem", minWidth: "10rem" }}
                                 is_disabled={is_disabled_selector}
@@ -103,7 +104,6 @@ const Mic_Container = () => {
                                 selected_id={currentSelectedMicDevice.data}
                                 list={currentMicDeviceList.data}
                                 selectFunction={selectFunction_device}
-                                // openListFunction={getMicDeviceList}
                                 state={currentSelectedMicDevice.state}
                                 is_disabled={is_disabled_selector}
                             />
@@ -114,7 +114,7 @@ const Mic_Container = () => {
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()} />
-                    <Switchbox
+                    <SwitchBox
                         variable={currentEnableAutomaticMicThreshold}
                         toggleFunction={toggleEnableAutomaticMicThreshold}
                     />
@@ -135,7 +135,7 @@ const Speaker_Container = () => {
     const { t } = useTranslation();
     const { currentEnableAutoSpeakerSelect, toggleEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
     const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
     const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
 
@@ -168,7 +168,7 @@ const Speaker_Container = () => {
 
                     <div className={styles.device_auto_select_wrapper}>
                         <p className={styles.device_secondary_label}>{t("config_page.speaker_device.label_auto_select")}</p>
-                        <Switchbox
+                        <SwitchBox
                             variable={currentEnableAutoSpeakerSelect}
                             toggleFunction={toggleEnableAutoSpeakerSelect}
                         />
@@ -182,7 +182,6 @@ const Speaker_Container = () => {
                             selected_id={currentSelectedSpeakerDevice.data}
                             list={currentSpeakerDeviceList.data}
                             selectFunction={selectFunction}
-                            // openListFunction={getSpeakerDeviceList}
                             state={currentSelectedSpeakerDevice.state}
                             is_disabled={is_disabled_selector}
                         />
@@ -192,7 +191,7 @@ const Speaker_Container = () => {
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()}/>
-                    <Switchbox
+                    <SwitchBox
                         variable={currentEnableAutomaticSpeakerThreshold}
                         toggleFunction={toggleEnableAutomaticSpeakerThreshold}
                     />

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,9 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
-// import {
-//     useStore_EnableAutoClearMessageBox,
-// } from "@store";
-
+import { useSettingBox } from "../_components/useSettingBox";
 import { useConfig } from "@logics/useConfig";
 
 export const Others = () => {

src-ui/logics/useReceiveRoutes.js

@@ -34,7 +34,6 @@ import {
     useUiScaling,
     useMessageLogUiScaling,
     useTransparency,
-    // useRestoreWindowGeometry,
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
@@ -85,8 +84,6 @@ export const useReceiveRoutes = () => {
     const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
     const { updateSelectedFontFamily } = useSelectedFontFamily();
     const { updateTransparency } = useTransparency();
-    // const { updateRestoreWindowGeometry } = useRestoreWindowGeometry();
-
 
     const routes = {
         // Common
@@ -230,10 +227,6 @@ export const useReceiveRoutes = () => {
         "/get/data/transparency": updateTransparency,
         "/set/data/transparency": updateTransparency,
 
-        // "/get/data/restore_main_window_geometry": updateRestoreWindowGeometry,
-        // "/set/enable/restore_main_window_geometry": updateRestoreWindowGeometry,
-        // "/set/disable/restore_main_window_geometry": updateRestoreWindowGeometry,
-
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,

src-ui/store.js

@@ -99,7 +99,6 @@ const createAtomWithHook = (initialValue, base_name, options) => {
 
 
 // Common
-// export const { atomInstance: Atom_RestoreWindowGeometry, useHook: useStore_RestoreWindowGeometry } = createAtomWithHook(true, "RestoreWindowGeometry");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_MainFunctionsStateMemory } = createAtomWithHook({
     transcription_send: false,