From d7cf2425a13d0e677a1e27e1208e779128efb5c2 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 13 Oct 2024 07:11:47 +0900
Subject: [PATCH 1/2] [Refactor] Remove the codes that is no longer in use and
 organize a bit.

---
 .../setting_box/appearance/Appearance.jsx     | 76 +++----------------
 .../setting_box/device/Device.jsx             | 34 ++++-----
 .../setting_box/others/Others.jsx             |  4 -
 src-ui/logics/useReceiveRoutes.js             |  7 --
 src-ui/store.js                               |  1 -
 5 files changed, 24 insertions(+), 98 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index e5993713..54bb5abe 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -1,32 +1,22 @@
 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 { LabelComponent } from "../components/label_component/LabelComponent";
+import {
+    SliderContainer,
+    DropdownMenuContainer,
+} 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();
-
     return (
         <>
             <UiLanguageContainer />
@@ -34,38 +24,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 +38,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 +70,6 @@ const UiLanguageContainer = () => {
     );
 };
 
-
-import { SliderContainer } from "../components/useSettingBox";
-
-import { useEffect, useState } from "react";
 const UiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentUiScaling, setUiScaling } = useUiScaling();
@@ -192,8 +152,7 @@ const MessageLogUiScalingContainer = () => {
         />
     );
 };
-import { useStore_SelectableFontFamilyList } from "@store";
-import { DropdownMenuContainer } from "../components/useSettingBox";
+
 const FontFamilyContainer = () => {
     const { t } = useTranslation();
     const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
@@ -216,7 +175,6 @@ const FontFamilyContainer = () => {
     );
 };
 
-
 const TransparencyContainer = () => {
     const { t } = useTranslation();
     const { currentTransparency, setTransparency } = useTransparency();
@@ -255,20 +213,4 @@ const TransparencyContainer = () => {
             track={false}
         />
     );
-};
-
-// 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}
-//         />
-//     );
-// };
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index f26a34c8..48d7a62e 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,18 +1,6 @@
 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,
@@ -25,17 +13,28 @@ import {
     useSelectedSpeakerDevice,
     useSpeakerThreshold,
 } from "@logics_configs";
-
+import {
+    useOnMouseLeaveDropdownMenu,
+} from "../components/useSettingBox";
 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";
 
+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 +46,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);
@@ -89,7 +88,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 +101,6 @@ const Mic_Container = () => {
                                 selected_id={currentSelectedMicDevice.data}
                                 list={currentMicDeviceList.data}
                                 selectFunction={selectFunction_device}
-                                // openListFunction={getMicDeviceList}
                                 state={currentSelectedMicDevice.state}
                                 is_disabled={is_disabled_selector}
                             />
@@ -135,7 +132,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();
 
@@ -182,7 +179,6 @@ const Speaker_Container = () => {
                             selected_id={currentSelectedSpeakerDevice.data}
                             list={currentSpeakerDeviceList.data}
                             selectFunction={selectFunction}
-                            // openListFunction={getSpeakerDeviceList}
                             state={currentSelectedSpeakerDevice.state}
                             is_disabled={is_disabled_selector}
                         />
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 09864c98..a85c1837 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/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 { useConfig } from "@logics/useConfig";
 
 export const Others = () => {
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index a76e1447..c879706c 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/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,
diff --git a/src-ui/store.js b/src-ui/store.js
index 870cb963..e104d8af 100644
--- a/src-ui/store.js
+++ b/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,

From 56291927601b69a9f17bd302b24774ba930b5680 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 13 Oct 2024 08:16:24 +0900
Subject: [PATCH 2/2] [Refactor] Organize file structures.

---
 .../_atoms/_entry/_Entry.jsx                  |   0
 .../_atoms/_entry/_Entry.module.scss          |   0
 .../action_button/ActionButton.jsx            |   0
 .../action_button/ActionButton.module.scss    |   0
 .../checkbox/Checkbox.jsx                     |   0
 .../checkbox/Checkbox.module.scss             |   0
 .../deepl_auth_key/DeeplAuthKey.jsx           |   0
 .../deepl_auth_key/DeeplAuthKey.module.scss   |   0
 .../dropdown_menu/DropdownMenu.jsx            |   0
 .../dropdown_menu/DropdownMenu.module.scss    |   0
 .../entry/Entry.jsx                           |   0
 .../entry/Entry.module.scss                   |   0
 .../setting_box/_components/index.js          |  11 ++
 .../label_component/LabelComponent.jsx        |   0
 .../LabelComponent.module.scss                |   0
 .../radio_button/RadioButton.jsx              |   0
 .../radio_button/RadioButton.module.scss      |   0
 .../slider/Slider.jsx                         |   0
 .../slider/Slider.module.scss                 |   0
 .../switch_box/SwitchBox.jsx}                 |   4 +-
 .../switch_box/SwitchBox.module.scss}         |   0
 .../ThresholdComponent.jsx                    |   0
 .../ThresholdComponent.module.scss            |   0
 .../slider_and_meter/SliderAndMeter.jsx       |   0
 .../SliderAndMeter.module.scss                |   0
 .../threshold_entry/ThresholdEntry.jsx        |   0
 .../ThresholdEntry.module.scss                |   0
 .../volume_check_button/VolumeCheckButton.jsx |   0
 .../VolumeCheckButton.module.scss             |   0
 .../word_filter/WordFilter.jsx                |   0
 .../word_filter/WordFilter.module.scss        |   0
 .../setting_box/_templates/Templates.jsx      | 121 ++++++++++++++++
 .../Templates.module.scss}                    |  20 ---
 .../setting_box/appearance/Appearance.jsx     |  14 +-
 .../setting_box/components/useSettingBox.jsx  | 132 ------------------
 .../setting_box/device/Device.jsx             |  23 +--
 .../setting_box/others/Others.jsx             |   2 +-
 37 files changed, 157 insertions(+), 170 deletions(-)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/_atoms/_entry/_Entry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/_atoms/_entry/_Entry.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/action_button/ActionButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/action_button/ActionButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/checkbox/Checkbox.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/checkbox/Checkbox.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/deepl_auth_key/DeeplAuthKey.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/deepl_auth_key/DeeplAuthKey.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/dropdown_menu/DropdownMenu.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/dropdown_menu/DropdownMenu.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/entry/Entry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/entry/Entry.module.scss (100%)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/_components/index.js
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/label_component/LabelComponent.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/label_component/LabelComponent.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/radio_button/RadioButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/radio_button/RadioButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/slider/Slider.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/slider/Slider.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components/switchbox/Switchbox.jsx => _components/switch_box/SwitchBox.jsx} (91%)
 rename src-ui/app/config_page/setting_section/setting_box/{components/switchbox/Switchbox.module.scss => _components/switch_box/SwitchBox.module.scss} (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/ThresholdComponent.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/ThresholdComponent.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/slider_and_meter/SliderAndMeter.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/slider_and_meter/SliderAndMeter.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/threshold_entry/ThresholdEntry.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/threshold_entry/ThresholdEntry.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/volume_check_button/VolumeCheckButton.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/threshold_component/volume_check_button/VolumeCheckButton.module.scss (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/word_filter/WordFilter.jsx (100%)
 rename src-ui/app/config_page/setting_section/setting_box/{components => _components}/word_filter/WordFilter.module.scss (100%)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
 rename src-ui/app/config_page/setting_section/setting_box/{components/useSettingBox.module.scss => _templates/Templates.module.scss} (67%)
 delete mode 100644 src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

diff --git a/src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/_atoms/_entry/_Entry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/action_button/ActionButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/checkbox/Checkbox.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/entry/Entry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/entry/Entry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
new file mode 100644
index 00000000..41c044b4
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
similarity index 91%
rename from src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
index ba19dfd9..2d77a673 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
+++ b/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);
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/ThresholdComponent.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/slider_and_meter/SliderAndMeter.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx
rename to src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
similarity index 100%
rename from src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
new file mode 100644
index 00000000..7cbbae33
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
similarity index 67%
rename from src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
rename to src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index 8eb56996..622f5224 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
+++ b/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;
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 54bb5abe..0bcab768 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -2,11 +2,6 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Appearance.module.scss";
-import { LabelComponent } from "../components/label_component/LabelComponent";
-import {
-    SliderContainer,
-    DropdownMenuContainer,
-} from "../components/useSettingBox";
 import { useStore_SelectableFontFamilyList } from "@store";
 import {
     useUiLanguage,
@@ -16,6 +11,15 @@ import {
     useTransparency,
 } from "@logics_configs";
 
+import {
+    LabelComponent
+} from "../_components/";
+
+import {
+    SliderContainer,
+    DropdownMenuContainer,
+} from "../_templates/Templates";
+
 export const Appearance = () => {
     return (
         <>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
deleted file mode 100644
index 58a874fe..00000000
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
+++ /dev/null
@@ -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,
-    };
-};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 48d7a62e..877dc019 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
 import {
@@ -13,13 +12,17 @@ import {
     useSelectedSpeakerDevice,
     useSpeakerThreshold,
 } from "@logics_configs";
+
 import {
     useOnMouseLeaveDropdownMenu,
-} from "../components/useSettingBox";
-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";
+} from "../_templates/Templates";
+
+import {
+    LabelComponent,
+    DropdownMenu,
+    ThresholdComponent,
+    SwitchBox,
+} from "../_components/";
 
 export const Device = () => {
     return (
@@ -74,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}
                         />
@@ -111,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}
                     />
@@ -165,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}
                         />
@@ -188,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}
                     />
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index a85c1837..3f4c3d0f 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
+import { useSettingBox } from "../_components/useSettingBox";
 import { useConfig } from "@logics/useConfig";
 
 export const Others = () => {