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