From 5d15b47b3e85125c683004a539a60834f3e5dd4b Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 10 Nov 2025 22:29:28 +0900
Subject: [PATCH 1/9] [Refactor] WordFilter: Improve reusability of setting
 container templates.

---
 .../_components/word_filter/WordFilter.jsx    | 16 ++--
 .../word_filter/WordFilter.module.scss        |  2 +
 .../setting_box/_templates/Templates.jsx      | 75 ++++++++++++-------
 .../_templates/Templates.module.scss          | 26 +------
 4 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
index 9369488b..17e08a53 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx
@@ -50,14 +50,14 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
-            { currentIsOpenedMicWordFilterList.data &&
-            <div className={styles.list_section_wrapper}>
-                {
-                    currentMicWordFilterList.data.map((item, index) => {
-                        return <WordFilterItem value={item} key={index} deleteAction={deleteAction}/>;
-                    })
-                }
-            </div>
+            { currentIsOpenedMicWordFilterList.data && currentMicWordFilterList.data.length > 0 &&
+                <div className={styles.list_section_wrapper}>
+                    {
+                        currentMicWordFilterList.data.map((item, index) => {
+                            return <WordFilterItem value={item} key={index} deleteAction={deleteAction}/>;
+                        })
+                    }
+                </div>
             }
             <div className={styles.entry_section_wrapper}>
                 <_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/>
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
index 2fe9600d..842fee46 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
@@ -4,11 +4,13 @@
     align-items: center;
     flex-direction: column;
     gap: 2rem;
+    width: 100%;
 }
 
 
 .list_section_wrapper {
     display: flex;
+    justify-content: center;
     flex-wrap: wrap;
     width: 100%;
     gap: 0.6rem;
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index 6faf882c..b9050ab9 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -22,13 +22,6 @@ import {
 } from "../_components";
 import { Checkbox } from "@common_components";
 
-const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
-    <div className={clsx(styles.container, custom_class_name)}>
-        <LabelComponent label={label} desc={desc} />
-        {children}
-    </div>
-);
-
 export const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
@@ -49,19 +42,44 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
-const CommonContainer = ({ Component, ...props }) => {
+const CommonContainer = ({
+    label_type = "label_component",
+    add_break_point = true,
+    flex_column = false,
+    remove_border_bottom = false,
+    Component,
+    ...props
+}) => {
     const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const container_class = clsx(styles.container, {
-        [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data,
+        [styles.is_break_point]: add_break_point && currentIsBreakPoint.data,
+        [styles.flex_column]: flex_column,
+        [styles.remove_border_bottom]: remove_border_bottom,
     });
 
-    return (
-        <LabeledContainer label={props.label} desc={props.desc} custom_class_name={container_class}>
-            <Component {...props} is_break_point={currentIsBreakPoint.data} />
-        </LabeledContainer>
-    );
+    if (label_type === "label_component") {
+        return (
+            <div className={container_class}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Component {...props} is_break_point={currentIsBreakPoint.data} />
+            </div>
+        );
+    } else if (label_type === "no_label") {
+        return (
+            <div className={container_class}>
+                <Component {...props} is_break_point={currentIsBreakPoint.data} />
+            </div>
+        );
+    } else if (label_type === "label_only") {
+        return (
+            <div className={container_class}>
+                <LabelComponent label={props.label} desc={props.desc} />
+            </div>
+        );
+    }
 };
+
 export const SliderContainer = (props) => (
     <CommonContainer Component={Slider} {...props} />
 );
@@ -114,19 +132,22 @@ export const ComputeDeviceContainer = (props) => (
     <CommonContainer Component={ComputeDevice} {...props} />
 );
 
-export const WordFilterContainer = (props) => (
-    <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>
-);
+export const WordFilterContainer = (props) => {
+    return (
+        <>
+            <CommonContainer
+                Component={WordFilterListToggleComponent}
+                remove_border_bottom={true}
+                {...props}
+            />
+            <CommonContainer
+                Component={WordFilter}
+                label_type="no_label"
+                {...props}
+            />
+        </>
+    );
+};
 
 export const DownloadModelsContainer = (props) => (
     <CommonContainer Component={DownloadModels} {...props} />
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index cab3118a..41360598 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
@@ -8,7 +8,9 @@
     &.flex_column {
         flex-direction: column;
     }
-    border-bottom: solid 0.1rem var(--dark_800_color);
+    &:not(.remove_border_bottom) {
+        border-bottom: solid 0.1rem var(--dark_800_color);
+    }
 
     &.is_break_point {
         flex-direction: column;
@@ -32,26 +34,4 @@
 
 .message_format_section {
     width: 100%;
-}
-
-
-.word_filter_container {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    gap: 2rem;
-    padding: 2rem;
-}
-
-.word_filter_switch_section {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.word_filter_label_wrapper {
-    max-width: 34rem;
 }
\ No newline at end of file

From 3612f2cb80444650b2e998eb2d6799b09872d96a Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 10 Nov 2025 23:07:17 +0900
Subject: [PATCH 2/9] [Refactor] MessageFormats: Improve reusability of setting
 container templates.

---
 .../setting_box/_templates/Templates.jsx      | 20 +++++++++++--------
 .../_templates/Templates.module.scss          |  8 --------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index b9050ab9..b74b9f2f 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -155,13 +155,17 @@ export const DownloadModelsContainer = (props) => (
 
 export const MessageFormatContainer = (props) => {
     return (
-        <div className={clsx(styles.container, styles.flex_column)}>
-            <div className={styles.label_only_section}>
-                <LabelComponent label={props.label} desc={props.desc} />
-            </div>
-            <div className={styles.message_format_section}>
-                <MessageFormat {...props}/>
-            </div>
-        </div>
+        <>
+            <CommonContainer
+                remove_border_bottom={true}
+                label_type="label_only"
+                {...props}
+            />
+            <CommonContainer
+                Component={MessageFormat}
+                label_type="no_label"
+                {...props}
+            />
+        </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index 41360598..6767471d 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
@@ -19,10 +19,6 @@
     }
 }
 
-.label_only_section {
-    width: 100%;
-}
-
 .deepl_auth_key_label_section {
     max-width: 34rem;
     display: flex;
@@ -30,8 +26,4 @@
     justify-content: space-between;
     align-items: center;
     gap: 1.4rem;
-}
-
-.message_format_section {
-    width: 100%;
 }
\ No newline at end of file

From b21a46e96eda0782673d03ff17866f887a6fa72a Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 11 Nov 2025 03:02:21 +0900
Subject: [PATCH 3/9] [Refactor] Extract container logic into
 TemplatesContainerWrapper.

---
 .../setting_box/_templates/Templates.jsx      | 53 ++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index b74b9f2f..a8ef6b6c 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -42,6 +42,27 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
+const TemplatesContainerWrapper = ({
+    children,
+    add_break_point = true,
+    flex_column = false,
+    remove_border_bottom = false,
+}) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: add_break_point && currentIsBreakPoint.data,
+        [styles.flex_column]: flex_column,
+        [styles.remove_border_bottom]: remove_border_bottom,
+    });
+
+    return (
+        <div className={container_class} >
+            {children}
+        </div>
+    );
+};
+
 const CommonContainer = ({
     label_type = "label_component",
     add_break_point = true,
@@ -52,34 +73,35 @@ const CommonContainer = ({
 }) => {
     const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
-    const container_class = clsx(styles.container, {
-        [styles.is_break_point]: add_break_point && currentIsBreakPoint.data,
-        [styles.flex_column]: flex_column,
-        [styles.remove_border_bottom]: remove_border_bottom,
-    });
+    const container_wrapper_props = {
+        add_break_point: add_break_point,
+        flex_column: flex_column,
+        remove_border_bottom: remove_border_bottom,
+    };
 
     if (label_type === "label_component") {
         return (
-            <div className={container_class}>
+            <TemplatesContainerWrapper {...container_wrapper_props}>
                 <LabelComponent label={props.label} desc={props.desc} />
                 <Component {...props} is_break_point={currentIsBreakPoint.data} />
-            </div>
+            </TemplatesContainerWrapper>
         );
     } else if (label_type === "no_label") {
         return (
-            <div className={container_class}>
+            <TemplatesContainerWrapper {...container_wrapper_props}>
                 <Component {...props} is_break_point={currentIsBreakPoint.data} />
-            </div>
+            </TemplatesContainerWrapper>
         );
     } else if (label_type === "label_only") {
         return (
-            <div className={container_class}>
+            <TemplatesContainerWrapper {...container_wrapper_props}>
                 <LabelComponent label={props.label} desc={props.desc} />
-            </div>
+            </TemplatesContainerWrapper>
         );
     }
 };
 
+
 export const SliderContainer = (props) => (
     <CommonContainer Component={Slider} {...props} />
 );
@@ -108,19 +130,14 @@ export const RadioButtonContainer = (props) => (
 );
 
 export const DeeplAuthKeyContainer = (props) => {
-    const { currentIsBreakPoint } = useStore_IsBreakPoint();
-    const container_class = clsx(styles.container, {
-        [styles.is_break_point]: currentIsBreakPoint.data,
-    });
-
     return (
-        <div className={container_class}>
+        <TemplatesContainerWrapper>
             <div className={styles.deepl_auth_key_label_section}>
                 <LabelComponent label={props.label} desc={props.desc} />
                 <OpenWebpage_DeeplAuthKey />
             </div>
             <DeeplAuthKey {...props} />
-        </div>
+        </TemplatesContainerWrapper>
     );
 };
 

From dc3c236791bf7a3e63ae9f52218d5739ca1f3cf0 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 10:01:55 +0900
Subject: [PATCH 4/9] [Refactor] Move DropdownMenu to _atoms directory.

---
 .../_dropdown_menu/_DropdownMenu.jsx}                           | 2 +-
 .../_dropdown_menu/_DropdownMenu.module.scss}                   | 0
 .../setting_box/_components/compute_device/ComputeDevice.jsx    | 2 +-
 .../setting_section/setting_box/_components/index.js            | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src-ui/views/app/config_page/setting_section/setting_box/_components/{dropdown_menu/DropdownMenu.jsx => _atoms/_dropdown_menu/_DropdownMenu.jsx} (96%)
 rename src-ui/views/app/config_page/setting_section/setting_box/_components/{dropdown_menu/DropdownMenu.module.scss => _atoms/_dropdown_menu/_DropdownMenu.module.scss} (100%)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
similarity index 96%
rename from src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
rename to src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
index 423de2ef..a5c1c136 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
@@ -1,4 +1,4 @@
-import styles from "./DropdownMenu.module.scss";
+import styles from "./_DropdownMenu.module.scss";
 import clsx from "clsx";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import { useStore_IsOpenedDropdownMenu } from "@store";
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.module.scss
similarity index 100%
rename from src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
rename to src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.module.scss
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
index d077eba5..54c64d04 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
@@ -1,5 +1,5 @@
 import styles from "./ComputeDevice.module.scss";
-import { DropdownMenu } from "../dropdown_menu/DropdownMenu";
+import { DropdownMenu } from "../_atoms/_dropdown_menu/_DropdownMenu";
 import { ActionButton } from "../action_button/ActionButton";
 import HelpSvg from "@images/help.svg?react";
 import { useStore_OpenedQuickSetting } from "@store"
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
index e1a7ab32..9d1c4150 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
@@ -1,7 +1,7 @@
 export { ActionButton } from "./action_button/ActionButton";
 export { ComputeDevice } from "./compute_device/ComputeDevice";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
+export { DropdownMenu } from "./_atoms/_dropdown_menu/_DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
 export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";

From 01327fa852947bf5d7b0b1c4bf3f456dddb0c65f Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 10:18:26 +0900
Subject: [PATCH 5/9] [Refactor] Introduce wrapper component for DropdownMenu
 to enhance versatility.

---
 .../_atoms/_dropdown_menu/_DropdownMenu.jsx            |  2 +-
 .../_components/compute_device/ComputeDevice.jsx       |  2 +-
 .../_components/dropdown_menu/DropdownMenu.jsx         | 10 ++++++++++
 .../_components/dropdown_menu/DropdownMenu.module.scss |  5 +++++
 .../setting_section/setting_box/_components/index.js   |  2 +-
 5 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
 create mode 100644 src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
index a5c1c136..6b429209 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_dropdown_menu/_DropdownMenu.jsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import { useStore_IsOpenedDropdownMenu } from "@store";
 
-export const DropdownMenu = (props) => {
+export const _DropdownMenu = (props) => {
     const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const toggleDropdownMenu = () => {
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
index 54c64d04..d077eba5 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/compute_device/ComputeDevice.jsx
@@ -1,5 +1,5 @@
 import styles from "./ComputeDevice.module.scss";
-import { DropdownMenu } from "../_atoms/_dropdown_menu/_DropdownMenu";
+import { DropdownMenu } from "../dropdown_menu/DropdownMenu";
 import { ActionButton } from "../action_button/ActionButton";
 import HelpSvg from "@images/help.svg?react";
 import { useStore_OpenedQuickSetting } from "@store"
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
new file mode 100644
index 00000000..53c82036
--- /dev/null
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
@@ -0,0 +1,10 @@
+import styles from "./DropdownMenu.module.scss";
+import { _DropdownMenu } from "../_atoms/_dropdown_menu/_DropdownMenu";
+
+export const DropdownMenu = (props) => {
+    return (
+        <div className={styles.container}>
+            <_DropdownMenu {...props} />
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
new file mode 100644
index 00000000..d92585fa
--- /dev/null
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
@@ -0,0 +1,5 @@
+@import "@scss_mixins";
+
+// .container {
+//     position: relative;
+// }
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
index 9d1c4150..e1a7ab32 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
@@ -1,7 +1,7 @@
 export { ActionButton } from "./action_button/ActionButton";
 export { ComputeDevice } from "./compute_device/ComputeDevice";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-export { DropdownMenu } from "./_atoms/_dropdown_menu/_DropdownMenu";
+export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
 export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";

From 4a852374ab7815011e9f31aa728d70e199a9cbde Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 12:32:18 +0900
Subject: [PATCH 6/9] [Refactor]: Introduce MultiDropdownMenu component for
 layout consistency.

---
 .../dropdown_menu/DropdownMenu.jsx            | 13 +++-
 .../dropdown_menu/DropdownMenu.module.scss    | 27 ++++++-
 .../setting_box/_components/index.js          |  2 +-
 .../setting_box/device/Device.jsx             | 74 +++++++++----------
 .../setting_box/device/Device.module.scss     | 25 -------
 .../transcription/Transcription.jsx           | 51 ++++++-------
 .../setting_box/translation/Translation.jsx   | 51 ++++++-------
 7 files changed, 119 insertions(+), 124 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
index 53c82036..fb4e0d7e 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
@@ -3,8 +3,19 @@ import { _DropdownMenu } from "../_atoms/_dropdown_menu/_DropdownMenu";
 
 export const DropdownMenu = (props) => {
     return (
-        <div className={styles.container}>
+        <div className={styles.each_dropdown_menu_wrapper}>
+            {props.secondary_label && <p className={styles.secondary_label}>{props.secondary_label}</p>}
             <_DropdownMenu {...props} />
         </div>
     );
+};
+
+export const MultiDropdownMenu = (props) => {
+    return (
+        <div className={styles.container}>
+            {props.settings.map((dropdown_props, index) => (
+                <DropdownMenu {...dropdown_props} />
+            ))}
+        </div>
+    );
 };
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
index d92585fa..cbb1723f 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.module.scss
@@ -1,5 +1,26 @@
 @import "@scss_mixins";
 
-// .container {
-//     position: relative;
-// }
+.container {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.each_dropdown_menu_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    white-space: nowrap;
+    max-width: 24rem;
+    &.is_disabled {
+        pointer-events: none;
+    }
+}
+
+.secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
index e1a7ab32..db5ad1cb 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/index.js
@@ -1,7 +1,7 @@
 export { ActionButton } from "./action_button/ActionButton";
 export { ComputeDevice } from "./compute_device/ComputeDevice";
 export { DeeplAuthKey, OpenWebpage_DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey";
-export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
+export { DropdownMenu, MultiDropdownMenu } from "./dropdown_menu/DropdownMenu";
 export { Entry } from "./entry/Entry";
 export { EntryWithSaveButton } from "./entry_with_save_button/EntryWithSaveButton";
 export { HotkeysEntry } from "./hotkeys_entry/HotkeysEntry";
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
index 9211bf37..c0c905cc 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -14,6 +14,7 @@ import {
 import {
     LabelComponent,
     DropdownMenu,
+    MultiDropdownMenu,
     ThresholdComponent,
     SwitchBox,
 } from "../_components";
@@ -88,33 +89,29 @@ const Mic_Container = () => {
                             toggleFunction={toggleEnableAutoMicSelect}
                         />
                     </div>
-
-                    <div className={styles.device_dropdown_wrapper}>
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.device.label_host")}</p>
-                            <DropdownMenu
-                                dropdown_id="mic_host"
-                                selected_id={currentSelectedMicHost.data}
-                                list={currentMicHostList.data}
-                                selectFunction={selectFunction_host}
-                                state={currentSelectedMicHost.state}
-                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.device.label_device")}</p>
-                            <DropdownMenu
-                                dropdown_id="mic_device"
-                                selected_id={currentSelectedMicDevice.data}
-                                list={currentMicDeviceList.data}
-                                selectFunction={selectFunction_device}
-                                state={currentSelectedMicDevice.state}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-                    </div>
+                    <MultiDropdownMenu
+                        settings={[
+                            {
+                                dropdown_id: "mic_host",
+                                secondary_label: t("config_page.device.label_host"),
+                                selected_id: currentSelectedMicHost.data,
+                                list: currentMicHostList.data,
+                                selectFunction: selectFunction_host,
+                                state: currentSelectedMicHost.state,
+                                style: { maxWidth: "20rem", minWidth: "10rem" },
+                                is_disabled: is_disabled_selector,
+                            },
+                            {
+                                dropdown_id: "mic_device",
+                                secondary_label: t("config_page.device.label_device"),
+                                selected_id: currentSelectedMicDevice.data,
+                                list: currentMicDeviceList.data,
+                                selectFunction: selectFunction_device,
+                                state: currentSelectedMicDevice.state,
+                                is_disabled: is_disabled_selector,
+                            }
+                        ]}
+                    />
                 </div>
             </div>
             <div className={styles.threshold_container}>
@@ -189,19 +186,16 @@ const Speaker_Container = () => {
                             toggleFunction={toggleEnableAutoSpeakerSelect}
                         />
                     </div>
-
-                    <div className={styles.device_dropdown}>
-                        <p className={styles.device_secondary_label}>{t("config_page.device.label_device")}</p>
-                        <DropdownMenu
-                            dropdown_id="speaker_device"
-                            label={t("config_page.device.speaker_device.label")}
-                            selected_id={currentSelectedSpeakerDevice.data}
-                            list={currentSpeakerDeviceList.data}
-                            selectFunction={selectFunction}
-                            state={currentSelectedSpeakerDevice.state}
-                            is_disabled={is_disabled_selector}
-                        />
-                    </div>
+                    <DropdownMenu
+                        dropdown_id="speaker_device"
+                        secondary_label={t("config_page.device.label_device")}
+                        label={t("config_page.device.speaker_device.label")}
+                        selected_id={currentSelectedSpeakerDevice.data}
+                        list={currentSpeakerDeviceList.data}
+                        selectFunction={selectFunction}
+                        state={currentSelectedSpeakerDevice.state}
+                        is_disabled={is_disabled_selector}
+                    />
                 </div>
             </div>
             <div className={styles.threshold_container}>
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.module.scss
index 5497b661..e88ae147 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -77,29 +77,4 @@
     gap: 1.2rem;
     justify-content: center;
     align-items: center;
-}
-
-.device_dropdown_wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 2.8rem;
-}
-
-.device_dropdown {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-    white-space: nowrap;
-    max-width: 24rem;
-    &.is_disabled {
-        pointer-events: none;
-    }
-}
-
-.device_secondary_label {
-    padding-left: 0.2rem;
-    padding-right: 0.4rem;
-    font-size: 1.4rem;
-    color: var(--dark_500_color);
-    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index 255183a8..85970ce1 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -20,6 +20,7 @@ import {
 
 import {
     DropdownMenu,
+    MultiDropdownMenu,
     LabelComponent,
     SectionLabelComponent,
 } from "../_components";
@@ -378,33 +379,29 @@ const TranscriptionComputeDevice_Box = () => {
                     desc={t("config_page.common.compute_device.desc")}
                 />
                 <div className={styles.device_contents}>
-
-                    <div className={styles.device_dropdown_wrapper}>
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
-                            <DropdownMenu
-                                dropdown_id="transcription_compute_device"
-                                selected_id={target_index}
-                                list={list_for_ui}
-                                selectFunction={selectFunction_ComputeDevice}
-                                state={currentSelectedTranscriptionComputeDevice.state}
-                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
-                            <DropdownMenu
-                                dropdown_id="transcription_compute_type"
-                                selected_id={currentSelectedTranscriptionComputeType.data}
-                                list={new_compute_types_labels}
-                                selectFunction={selectFunction_ComputeType}
-                                state={currentSelectedTranscriptionComputeType.state}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-                    </div>
+                    <MultiDropdownMenu
+                        settings={[
+                            {
+                                secondary_label: t("config_page.common.compute_device.label_device"),
+                                dropdown_id: "transcription_compute_device",
+                                selected_id: target_index,
+                                list: list_for_ui,
+                                selectFunction: selectFunction_ComputeDevice,
+                                state: currentSelectedTranscriptionComputeDevice.state,
+                                style: { maxWidth: "20rem", minWidth: "10rem" },
+                                is_disabled: is_disabled_selector,
+                            },
+                            {
+                                secondary_label: t("config_page.common.compute_device.label_type"),
+                                dropdown_id: "transcription_compute_type",
+                                selected_id: currentSelectedTranscriptionComputeType.data,
+                                list: new_compute_types_labels,
+                                selectFunction: selectFunction_ComputeType,
+                                state: currentSelectedTranscriptionComputeType.state,
+                                is_disabled: is_disabled_selector,
+                            }
+                        ]}
+                    />
                 </div>
             </div>
         </div>
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index 459b4e10..fae21999 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -17,6 +17,7 @@ import {
 
 import {
     DropdownMenu,
+    MultiDropdownMenu,
     LabelComponent,
 } from "../_components";
 
@@ -186,33 +187,29 @@ const TranslationComputeDevice_Box = () => {
                     desc={t("config_page.common.compute_device.desc")}
                 />
                 <div className={styles.device_contents}>
-
-                    <div className={styles.device_dropdown_wrapper}>
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_device")}</p>
-                            <DropdownMenu
-                                dropdown_id="translation_compute_device"
-                                selected_id={target_index}
-                                list={list_for_ui}
-                                selectFunction={selectFunction_ComputeDevice}
-                                state={currentSelectedTranslationComputeDevice.state}
-                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-
-                        <div className={styles.device_dropdown}>
-                            <p className={styles.device_secondary_label}>{t("config_page.common.compute_device.label_type")}</p>
-                            <DropdownMenu
-                                dropdown_id="translation_compute_type"
-                                selected_id={currentSelectedTranslationComputeType.data}
-                                list={new_compute_types_labels}
-                                selectFunction={selectFunction_ComputeType}
-                                state={currentSelectedTranslationComputeType.state}
-                                is_disabled={is_disabled_selector}
-                            />
-                        </div>
-                    </div>
+                    <MultiDropdownMenu
+                        settings={[
+                            {
+                                dropdown_id: "translation_compute_device",
+                                secondary_label: t("config_page.common.compute_device.label_device"),
+                                selected_id: target_index,
+                                list: list_for_ui,
+                                selectFunction: selectFunction_ComputeDevice,
+                                state: currentSelectedTranslationComputeDevice.state,
+                                style: { maxWidth: "20rem", minWidth: "10rem" },
+                                is_disabled: is_disabled_selector,
+                            },
+                            {
+                                dropdown_id: "translation_compute_type",
+                                secondary_label: t("config_page.common.compute_device.label_type"),
+                                selected_id: currentSelectedTranslationComputeType.data,
+                                list: new_compute_types_labels,
+                                selectFunction: selectFunction_ComputeType,
+                                state: currentSelectedTranslationComputeType.state,
+                                is_disabled: is_disabled_selector,
+                            }
+                        ]}
+                    />
                 </div>
             </div>
         </div>

From d529ed896248a107973143417a42eca327153638 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 14:48:13 +0900
Subject: [PATCH 7/9] [Refactor] Introduce MultiDropdownMenuContainer template
 for layout consistency.

---
 .../dropdown_menu/DropdownMenu.jsx            |  4 +-
 .../setting_box/_templates/Templates.jsx      | 17 +++++
 .../setting_box/device/Device.jsx             |  2 +-
 .../transcription/Transcription.jsx           | 65 ++++++++-----------
 .../transcription/Transcription.module.scss   | 33 ----------
 .../setting_box/translation/Translation.jsx   | 59 ++++++++---------
 .../translation/Translation.module.scss       | 48 --------------
 7 files changed, 72 insertions(+), 156 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
index fb4e0d7e..3de43b00 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
@@ -13,8 +13,8 @@ export const DropdownMenu = (props) => {
 export const MultiDropdownMenu = (props) => {
     return (
         <div className={styles.container}>
-            {props.settings.map((dropdown_props, index) => (
-                <DropdownMenu {...dropdown_props} />
+            {props.dropdown_settings.map((dropdown_props, index) => (
+                <DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
             ))}
         </div>
     );
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index a8ef6b6c..fc6960d0 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -5,6 +5,7 @@ import { useStore_IsOpenedDropdownMenu, useStore_IsBreakPoint } from "@store";
 import {
     LabelComponent,
     DropdownMenu,
+    MultiDropdownMenu,
     Slider,
     SwitchBox,
     Entry,
@@ -42,6 +43,22 @@ export const DropdownMenuContainer = (props) => {
     );
 };
 
+export const MultiDropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    return (
+        <div className={container_class} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <MultiDropdownMenu dropdown_settings={props.dropdown_settings} />
+        </div>
+    );
+};
+
 const TemplatesContainerWrapper = ({
     children,
     add_break_point = true,
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
index c0c905cc..c40a2f8e 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -90,7 +90,7 @@ const Mic_Container = () => {
                         />
                     </div>
                     <MultiDropdownMenu
-                        settings={[
+                        dropdown_settings={[
                             {
                                 dropdown_id: "mic_host",
                                 secondary_label: t("config_page.device.label_host"),
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index 85970ce1..3731dbad 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -11,6 +11,7 @@ import {
 import {
     WordFilterContainer,
     DownloadModelsContainer,
+    MultiDropdownMenuContainer,
     RadioButtonContainer,
     DropdownMenuContainer,
     SliderContainer,
@@ -282,8 +283,6 @@ const TranscriptionComputeDevice_Box = () => {
         currentSelectedTranscriptionComputeType,
         setSelectedTranscriptionComputeType,
     } = useTranscription();
-    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);
 
@@ -365,46 +364,34 @@ const TranscriptionComputeDevice_Box = () => {
         setSelectedTranscriptionComputeType(selected_data.selected_id);
     };
 
-    const device_container_class = clsx(styles.device_container, {
-        [styles.is_break_point]: currentIsBreakPoint.data,
-    });
-
     const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";
 
     return (
-        <div className={styles.mic_container}>
-            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent
-                    label={t("config_page.transcription.transcription_compute_device.label")}
-                    desc={t("config_page.common.compute_device.desc")}
-                />
-                <div className={styles.device_contents}>
-                    <MultiDropdownMenu
-                        settings={[
-                            {
-                                secondary_label: t("config_page.common.compute_device.label_device"),
-                                dropdown_id: "transcription_compute_device",
-                                selected_id: target_index,
-                                list: list_for_ui,
-                                selectFunction: selectFunction_ComputeDevice,
-                                state: currentSelectedTranscriptionComputeDevice.state,
-                                style: { maxWidth: "20rem", minWidth: "10rem" },
-                                is_disabled: is_disabled_selector,
-                            },
-                            {
-                                secondary_label: t("config_page.common.compute_device.label_type"),
-                                dropdown_id: "transcription_compute_type",
-                                selected_id: currentSelectedTranscriptionComputeType.data,
-                                list: new_compute_types_labels,
-                                selectFunction: selectFunction_ComputeType,
-                                state: currentSelectedTranscriptionComputeType.state,
-                                is_disabled: is_disabled_selector,
-                            }
-                        ]}
-                    />
-                </div>
-            </div>
-        </div>
+        <MultiDropdownMenuContainer
+            label={t("config_page.transcription.transcription_compute_device.label")}
+            desc={t("config_page.common.compute_device.desc")}
+            dropdown_settings={[
+                {
+                    secondary_label: t("config_page.common.compute_device.label_device"),
+                    dropdown_id: "transcription_compute_device",
+                    selected_id: target_index,
+                    list: list_for_ui,
+                    selectFunction: selectFunction_ComputeDevice,
+                    state: currentSelectedTranscriptionComputeDevice.state,
+                    style: { maxWidth: "20rem", minWidth: "10rem" },
+                    is_disabled: is_disabled_selector,
+                },
+                {
+                    secondary_label: t("config_page.common.compute_device.label_type"),
+                    dropdown_id: "transcription_compute_type",
+                    selected_id: currentSelectedTranscriptionComputeType.data,
+                    list: new_compute_types_labels,
+                    selectFunction: selectFunction_ComputeType,
+                    state: currentSelectedTranscriptionComputeType.state,
+                    is_disabled: is_disabled_selector,
+                }
+            ]}
+        />
     );
 };
 
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
index 8eed1df9..be78c8af 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
@@ -85,37 +85,4 @@
     justify-content: end;
     padding-left: 2rem;
     gap: 2rem;
-}
-
-.device_auto_select_wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 1.2rem;
-    justify-content: center;
-    align-items: center;
-}
-
-.device_dropdown_wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 2.8rem;
-}
-
-.device_dropdown {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-    white-space: nowrap;
-    max-width: 24rem;
-    &.is_disabled {
-        pointer-events: none;
-    }
-}
-
-.device_secondary_label {
-    padding-left: 0.2rem;
-    padding-right: 0.4rem;
-    font-size: 1.4rem;
-    color: var(--dark_500_color);
-    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index fae21999..a612eaba 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -11,6 +11,7 @@ import {
 import {
     DownloadModelsContainer,
     DeeplAuthKeyContainer,
+    MultiDropdownMenuContainer,
 
     useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";
@@ -180,39 +181,31 @@ const TranslationComputeDevice_Box = () => {
     const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
 
     return (
-        <div className={styles.mic_container}>
-            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent
-                    label={t("config_page.translation.translation_compute_device.label")}
-                    desc={t("config_page.common.compute_device.desc")}
-                />
-                <div className={styles.device_contents}>
-                    <MultiDropdownMenu
-                        settings={[
-                            {
-                                dropdown_id: "translation_compute_device",
-                                secondary_label: t("config_page.common.compute_device.label_device"),
-                                selected_id: target_index,
-                                list: list_for_ui,
-                                selectFunction: selectFunction_ComputeDevice,
-                                state: currentSelectedTranslationComputeDevice.state,
-                                style: { maxWidth: "20rem", minWidth: "10rem" },
-                                is_disabled: is_disabled_selector,
-                            },
-                            {
-                                dropdown_id: "translation_compute_type",
-                                secondary_label: t("config_page.common.compute_device.label_type"),
-                                selected_id: currentSelectedTranslationComputeType.data,
-                                list: new_compute_types_labels,
-                                selectFunction: selectFunction_ComputeType,
-                                state: currentSelectedTranslationComputeType.state,
-                                is_disabled: is_disabled_selector,
-                            }
-                        ]}
-                    />
-                </div>
-            </div>
-        </div>
+        <MultiDropdownMenuContainer
+            label={t("config_page.translation.translation_compute_device.label")}
+            desc={t("config_page.common.compute_device.desc")}
+            dropdown_settings={[
+                {
+                    dropdown_id: "translation_compute_device",
+                    secondary_label: t("config_page.common.compute_device.label_device"),
+                    selected_id: target_index,
+                    list: list_for_ui,
+                    selectFunction: selectFunction_ComputeDevice,
+                    state: currentSelectedTranslationComputeDevice.state,
+                    style: { maxWidth: "20rem", minWidth: "10rem" },
+                    is_disabled: is_disabled_selector,
+                },
+                {
+                    dropdown_id: "translation_compute_type",
+                    secondary_label: t("config_page.common.compute_device.label_type"),
+                    selected_id: currentSelectedTranslationComputeType.data,
+                    list: new_compute_types_labels,
+                    selectFunction: selectFunction_ComputeType,
+                    state: currentSelectedTranslationComputeType.state,
+                    is_disabled: is_disabled_selector,
+                }
+            ]}
+        />
     );
 };
 
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
index 7486c466..993e5256 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
@@ -55,52 +55,4 @@
 
 .threshold_section {
     width: 100%;
-}
-
-
-
-
-.device_label {
-    font-size: 1.8rem;
-}
-
-.device_contents {
-    display: flex;
-    width: 100%;
-    justify-content: end;
-    padding-left: 2rem;
-    gap: 2rem;
-}
-
-.device_auto_select_wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 1.2rem;
-    justify-content: center;
-    align-items: center;
-}
-
-.device_dropdown_wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 2.8rem;
-}
-
-.device_dropdown {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-    white-space: nowrap;
-    max-width: 24rem;
-    &.is_disabled {
-        pointer-events: none;
-    }
-}
-
-.device_secondary_label {
-    padding-left: 0.2rem;
-    padding-right: 0.4rem;
-    font-size: 1.4rem;
-    color: var(--dark_500_color);
-    white-space: nowrap;
 }
\ No newline at end of file

From ddcd19d5ebc7ca14a960adbca234ac9f85d2bdfa Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 15:27:10 +0900
Subject: [PATCH 8/9] [Refactor] Separate SwitchBox into _atom and wrapper, add
 secondary label support.

---
 .../_atoms/_switch_box/_SwitchBox.jsx         | 44 +++++++++++++++++++
 .../_atoms/_switch_box/_SwitchBox.module.scss | 33 ++++++++++++++
 .../_components/switch_box/SwitchBox.jsx      | 41 +++--------------
 .../switch_box/SwitchBox.module.scss          | 34 ++++----------
 .../setting_box/device/Device.jsx             | 26 +++++------
 .../PluginsControlComponent.jsx               | 10 ++---
 6 files changed, 106 insertions(+), 82 deletions(-)
 create mode 100644 src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.jsx
 create mode 100644 src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.module.scss

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.jsx
new file mode 100644
index 00000000..042864c1
--- /dev/null
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.jsx
@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { useState } from "react";
+import styles from "./_SwitchBox.module.scss";
+
+export const _SwitchBox = (props) => {
+    const [is_hovered, setIsHovered] = useState(false);
+    const [is_mouse_down, setIsMouseDown] = useState(false);
+
+    const is_pending = (props.variable.state === "pending");
+
+    const getClassNames = (base_class) => clsx(base_class, {
+        [styles.is_active]: (props.variable.data === true),
+        [styles.is_pending]: is_pending,
+        [styles.is_hovered]: is_hovered,
+        [styles.is_mouse_down]: is_mouse_down,
+    });
+
+    const onMouseEnter = () => setIsHovered(true);
+    const onMouseLeave = () => setIsHovered(false);
+    const onMouseDown = () => setIsMouseDown(true);
+    const onMouseUp = () => setIsMouseDown(false);
+
+    const toggleFunction = () => {
+        props.toggleFunction();
+    };
+
+
+    return (
+        <div className={styles.switchbox_container}>
+            <div className={getClassNames(styles.switchbox_wrapper)}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                onMouseDown={onMouseDown}
+                onMouseUp={onMouseUp}
+                onClick={toggleFunction}
+            >
+                <div className={getClassNames(styles.toggle_control)}>
+                    <span className={getClassNames(styles.control)}></span>
+                    {is_pending && <span className={styles.loader}></span>}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.module.scss
new file mode 100644
index 00000000..87bf6600
--- /dev/null
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_switch_box/_SwitchBox.module.scss
@@ -0,0 +1,33 @@
+@import "@scss_mixins";
+
+.switchbox_container {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    height: 2rem;
+}
+
+.switchbox_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    padding: 2rem;
+    height: 100%;
+    flex-shrink: 0;
+    &.is_pending {
+        pointer-events: none;
+    }
+}
+
+.toggle_control {
+    position: relative;
+    @include toggle_control_styles;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, right, -4rem);
+}
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
index 2d77a673..686d3b9b 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.jsx
@@ -1,44 +1,13 @@
 import clsx from "clsx";
 import { useState } from "react";
 import styles from "./SwitchBox.module.scss";
+import { _SwitchBox } from "../_atoms/_switch_box/_SwitchBox";
 
 export const SwitchBox = (props) => {
-    const [is_hovered, setIsHovered] = useState(false);
-    const [is_mouse_down, setIsMouseDown] = useState(false);
-
-    const is_pending = (props.variable.state === "pending");
-
-    const getClassNames = (base_class) => clsx(base_class, {
-        [styles.is_active]: (props.variable.data === true),
-        [styles.is_pending]: is_pending,
-        [styles.is_hovered]: is_hovered,
-        [styles.is_mouse_down]: is_mouse_down,
-    });
-
-    const onMouseEnter = () => setIsHovered(true);
-    const onMouseLeave = () => setIsHovered(false);
-    const onMouseDown = () => setIsMouseDown(true);
-    const onMouseUp = () => setIsMouseDown(false);
-
-    const toggleFunction = () => {
-        props.toggleFunction();
-    };
-
-
     return (
-        <div className={styles.switchbox_container}>
-            <div className={getClassNames(styles.switchbox_wrapper)}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-                onMouseDown={onMouseDown}
-                onMouseUp={onMouseUp}
-                onClick={toggleFunction}
-            >
-                <div className={getClassNames(styles.toggle_control)}>
-                    <span className={getClassNames(styles.control)}></span>
-                    {is_pending && <span className={styles.loader}></span>}
-                </div>
-            </div>
+        <div className={styles.container}>
+            {props.secondary_label && <p className={styles.secondary_label}>{props.secondary_label}</p>}
+            <_SwitchBox {...props} />
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
index 87bf6600..c07a373f 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/switch_box/SwitchBox.module.scss
@@ -1,33 +1,17 @@
 @import "@scss_mixins";
 
-.switchbox_container {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    height: 2rem;
-}
-
-.switchbox_wrapper {
+.container {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
-    padding: 2rem;
-    height: 100%;
-    flex-shrink: 0;
-    &.is_pending {
-        pointer-events: none;
-    }
+    gap: 1rem;
 }
 
-.toggle_control {
-    position: relative;
-    @include toggle_control_styles;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.loader {
-    @include loader(2rem, 0.2rem, right, -4rem);
+.secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
index c40a2f8e..b9408489 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -81,14 +81,11 @@ const Mic_Container = () => {
             <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.mic_host_device.label")} />
                 <div className={styles.device_contents}>
-
-                    <div className={styles.device_auto_select_wrapper}>
-                        <p className={styles.device_secondary_label}>{t("config_page.device.label_auto_select")}</p>
-                        <SwitchBox
-                            variable={currentEnableAutoMicSelect}
-                            toggleFunction={toggleEnableAutoMicSelect}
-                        />
-                    </div>
+                    <SwitchBox
+                        secondary_label={t("config_page.device.label_auto_select")}
+                        variable={currentEnableAutoMicSelect}
+                        toggleFunction={toggleEnableAutoMicSelect}
+                    />
                     <MultiDropdownMenu
                         dropdown_settings={[
                             {
@@ -178,14 +175,11 @@ const Speaker_Container = () => {
             <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.speaker_device.label")} />
                 <div className={styles.device_contents}>
-
-                    <div className={styles.device_auto_select_wrapper}>
-                        <p className={styles.device_secondary_label}>{t("config_page.device.label_auto_select")}</p>
-                        <SwitchBox
-                            variable={currentEnableAutoSpeakerSelect}
-                            toggleFunction={toggleEnableAutoSpeakerSelect}
-                        />
-                    </div>
+                    <SwitchBox
+                        secondary_label={t("config_page.device.label_auto_select")}
+                        variable={currentEnableAutoSpeakerSelect}
+                        toggleFunction={toggleEnableAutoSpeakerSelect}
+                    />
                     <DropdownMenu
                         dropdown_id="speaker_device"
                         secondary_label={t("config_page.device.label_device")}
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/plugins/plugins_control_component/PluginsControlComponent.jsx b/src-ui/views/app/config_page/setting_section/setting_box/plugins/plugins_control_component/PluginsControlComponent.jsx
index addd08c1..bf27774e 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/plugins/plugins_control_component/PluginsControlComponent.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/plugins/plugins_control_component/PluginsControlComponent.jsx
@@ -1,5 +1,5 @@
-import { SwitchBox } from "../../_components";
 import { _DownloadButton } from "../../_components/_atoms/_download_button/_DownloadButton";
+import { _SwitchBox } from "../../_components/_atoms/_switch_box/_SwitchBox";
 import styles from "./PluginsControlComponent.module.scss";
 import { useI18n } from "@useI18n";
 
@@ -90,7 +90,7 @@ const DownloadedPluginControl = ({
         return (
             <div className={styles.container}>
                 <p>{t("config_page.plugins.no_latest_info")}</p>
-                <SwitchBox variable={option} toggleFunction={togglePlugin} />
+                <_SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else if (plugin_status.is_latest_version_already) {
@@ -98,7 +98,7 @@ const DownloadedPluginControl = ({
             <div className={styles.container}>
                 <p>{latest_version_label}</p>
                 <p>{t("config_page.plugins.using_latest_version")}</p>
-                <SwitchBox variable={option} toggleFunction={togglePlugin} />
+                <_SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else if (plugin_status.is_latest_version_available) {
@@ -107,14 +107,14 @@ const DownloadedPluginControl = ({
                 <p>{latest_version_label}</p>
                 <p>{t("config_page.plugins.available_latest_version")}</p>
                 <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
-                <SwitchBox variable={option} toggleFunction={togglePlugin} />
+                <_SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else {
         return (
             <div className={styles.container}>
                 <p>{t("config_page.plugins.available_latest_version")}</p>
-                <SwitchBox variable={option} toggleFunction={togglePlugin} />
+                <_SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     }

From db605294667e32ef7c1cbf91bb8703ac28ec5420 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 12 Nov 2025 16:33:20 +0900
Subject: [PATCH 9/9] [Update]: Allow inserting custom components into
 MultiDropdownMenu. - For Device components Auto select device that is
 SwitchBox component.

---
 .../dropdown_menu/DropdownMenu.jsx            | 13 ++-
 .../setting_box/_templates/Templates.jsx      | 17 ++--
 .../setting_box/device/Device.jsx             | 72 ++++++++--------
 .../transcription/Transcription.module.scss   | 83 -------------------
 .../setting_box/translation/Translation.jsx   |  6 --
 .../translation/Translation.module.scss       | 58 -------------
 6 files changed, 51 insertions(+), 198 deletions(-)

diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
index 3de43b00..915502a2 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/dropdown_menu/DropdownMenu.jsx
@@ -13,9 +13,16 @@ export const DropdownMenu = (props) => {
 export const MultiDropdownMenu = (props) => {
     return (
         <div className={styles.container}>
-            {props.dropdown_settings.map((dropdown_props, index) => (
-                <DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
-            ))}
+            {props.dropdown_settings.map((dropdown_props, index) => {
+                if (dropdown_props.insert_component) {
+                    const InsertComponent = dropdown_props.insert_component;
+                    return <InsertComponent key={index} {...dropdown_props.insert_component_props} />;
+                }
+                return (
+                    <DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
+                );
+            }
+        )}
         </div>
     );
 };
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index fc6960d0..96378587 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -35,27 +35,23 @@ export const useOnMouseLeaveDropdownMenu = () => {
 
 export const DropdownMenuContainer = (props) => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
     return (
-        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+        <TemplatesContainerWrapper onMouseLeaveFunction={onMouseLeaveFunction} {...props}>
             <LabelComponent label={props.label} desc={props.desc} />
             <DropdownMenu {...props} />
-        </div>
+        </TemplatesContainerWrapper>
     );
 };
 
 export const MultiDropdownMenuContainer = (props) => {
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentIsBreakPoint } = useStore_IsBreakPoint();
-
-    const container_class = clsx(styles.container, {
-        [styles.is_break_point]: currentIsBreakPoint.data,
-    });
 
     return (
-        <div className={container_class} onMouseLeave={onMouseLeaveFunction}>
+        <TemplatesContainerWrapper onMouseLeaveFunction={onMouseLeaveFunction} {...props}>
             <LabelComponent label={props.label} desc={props.desc} />
             <MultiDropdownMenu dropdown_settings={props.dropdown_settings} />
-        </div>
+        </TemplatesContainerWrapper>
     );
 };
 
@@ -64,6 +60,7 @@ const TemplatesContainerWrapper = ({
     add_break_point = true,
     flex_column = false,
     remove_border_bottom = false,
+    onMouseLeaveFunction = null,
 }) => {
     const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
@@ -74,7 +71,7 @@ const TemplatesContainerWrapper = ({
     });
 
     return (
-        <div className={container_class} >
+        <div className={container_class} onMouseLeave={onMouseLeaveFunction}>
             {children}
         </div>
     );
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
index b9408489..fe468d57 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -9,6 +9,7 @@ import {
 
 import {
     useOnMouseLeaveDropdownMenu,
+    MultiDropdownMenuContainer,
 } from "../_templates/Templates";
 
 import {
@@ -71,46 +72,41 @@ const Mic_Container = () => {
         }
     };
 
-    const { currentIsBreakPoint } = useStore_IsBreakPoint();
-    const device_container_class = clsx(styles.device_container, {
-        [styles.is_break_point]: currentIsBreakPoint.data,
-    });
-
     return (
         <div className={styles.mic_container}>
-            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={t("config_page.device.mic_host_device.label")} />
-                <div className={styles.device_contents}>
-                    <SwitchBox
-                        secondary_label={t("config_page.device.label_auto_select")}
-                        variable={currentEnableAutoMicSelect}
-                        toggleFunction={toggleEnableAutoMicSelect}
-                    />
-                    <MultiDropdownMenu
-                        dropdown_settings={[
-                            {
-                                dropdown_id: "mic_host",
-                                secondary_label: t("config_page.device.label_host"),
-                                selected_id: currentSelectedMicHost.data,
-                                list: currentMicHostList.data,
-                                selectFunction: selectFunction_host,
-                                state: currentSelectedMicHost.state,
-                                style: { maxWidth: "20rem", minWidth: "10rem" },
-                                is_disabled: is_disabled_selector,
-                            },
-                            {
-                                dropdown_id: "mic_device",
-                                secondary_label: t("config_page.device.label_device"),
-                                selected_id: currentSelectedMicDevice.data,
-                                list: currentMicDeviceList.data,
-                                selectFunction: selectFunction_device,
-                                state: currentSelectedMicDevice.state,
-                                is_disabled: is_disabled_selector,
-                            }
-                        ]}
-                    />
-                </div>
-            </div>
+            <MultiDropdownMenuContainer
+                label={t("config_page.device.mic_host_device.label")}
+                remove_border_bottom={true}
+                dropdown_settings={[
+                    {
+                        insert_component: SwitchBox,
+                        insert_component_props: {
+                            secondary_label: t("config_page.device.label_auto_select"),
+                            variable: currentEnableAutoMicSelect,
+                            toggleFunction: toggleEnableAutoMicSelect,
+                        }
+                    },
+                    {
+                        dropdown_id: "mic_host",
+                        secondary_label: t("config_page.device.label_host"),
+                        selected_id: currentSelectedMicHost.data,
+                        list: currentMicHostList.data,
+                        selectFunction: selectFunction_host,
+                        state: currentSelectedMicHost.state,
+                        style: { maxWidth: "20rem", minWidth: "10rem" },
+                        is_disabled: is_disabled_selector,
+                    },
+                    {
+                        dropdown_id: "mic_device",
+                        secondary_label: t("config_page.device.label_device"),
+                        selected_id: currentSelectedMicDevice.data,
+                        list: currentMicDeviceList.data,
+                        selectFunction: selectFunction_device,
+                        state: currentSelectedMicDevice.state,
+                        is_disabled: is_disabled_selector,
+                    }
+                ]}
+            />
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()} />
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
index be78c8af..1170a41c 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
@@ -2,87 +2,4 @@
     display: flex;
     flex-direction: column;
     gap: 6.4rem;
-}
-
-
-
-
-
-
-
-
-
-
-// [Fix me] Need refactor.
-.mic_container {
-    display: flex;
-    flex-direction: column;
-    border-bottom: solid 0.1rem var(--dark_800_color);
-    padding-bottom: 1rem;
-}
-
-.speaker_container {
-    padding-top: 0rem;
-}
-
-.device_container {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2rem;
-    margin-bottom: 0rem;
-    &.is_break_point {
-        flex-direction: column;
-        gap: 2rem;
-        align-items: start;
-        & .device_contents {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-            padding-left: 0rem;
-        }
-    }
-}
-
-.threshold_container {
-    padding: 2rem;
-}
-
-
-
-.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;
-    flex-shrink: 0;
-}
-
-.threshold_section {
-    width: 100%;
-}
-
-
-
-
-.device_label {
-    font-size: 1.8rem;
-}
-
-.device_contents {
-    display: flex;
-    width: 100%;
-    justify-content: end;
-    padding-left: 2rem;
-    gap: 2rem;
 }
\ No newline at end of file
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index a612eaba..cb5ad232 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -91,8 +91,6 @@ const TranslationComputeDevice_Box = () => {
         currentSelectedTranslationComputeType,
         setSelectedTranslationComputeType,
     } = useTranslation();
-    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);
 
@@ -174,10 +172,6 @@ const TranslationComputeDevice_Box = () => {
         setSelectedTranslationComputeType(selected_data.selected_id);
     };
 
-    const device_container_class = clsx(styles.device_container, {
-        [styles.is_break_point]: currentIsBreakPoint.data,
-    });
-
     const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
 
     return (
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
index 993e5256..e69de29b 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.module.scss
@@ -1,58 +0,0 @@
-// [Fix me] Need refactor.
-.mic_container {
-    display: flex;
-    flex-direction: column;
-    border-bottom: solid 0.1rem var(--dark_800_color);
-    padding-bottom: 1rem;
-}
-
-.speaker_container {
-    padding-top: 0rem;
-}
-
-.device_container {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2rem;
-    margin-bottom: 0rem;
-    &.is_break_point {
-        flex-direction: column;
-        gap: 2rem;
-        align-items: start;
-        & .device_contents {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-            padding-left: 0rem;
-        }
-    }
-}
-
-.threshold_container {
-    padding: 2rem;
-}
-
-
-
-.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;
-    flex-shrink: 0;
-}
-
-.threshold_section {
-    width: 100%;
-}
\ No newline at end of file