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] [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>