[Update]: Allow inserting custom components into MultiDropdownMenu.

- For Device components Auto select device that is SwitchBox component.

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) => (
+            {props.dropdown_settings.map((dropdown_props, index) => {
-                <DropdownMenu key={dropdown_props.dropdown_id} {...dropdown_props} />
+                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>
     );
 };

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>
     );

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}>
+            <MultiDropdownMenuContainer
-                <LabelComponent label={t("config_page.device.mic_host_device.label")} />
+                label={t("config_page.device.mic_host_device.label")}
-                <div className={styles.device_contents}>
+                remove_border_bottom={true}
-                    <SwitchBox
+                dropdown_settings={[
-                        secondary_label={t("config_page.device.label_auto_select")}
+                    {
-                        variable={currentEnableAutoMicSelect}
+                        insert_component: SwitchBox,
-                        toggleFunction={toggleEnableAutoMicSelect}
+                        insert_component_props: {
-                    />
+                            secondary_label: t("config_page.device.label_auto_select"),
-                    <MultiDropdownMenu
+                            variable: currentEnableAutoMicSelect,
-                        dropdown_settings={[
+                            toggleFunction: toggleEnableAutoMicSelect,
-                            {
+                        }
-                                dropdown_id: "mic_host",
+                    },
-                                secondary_label: t("config_page.device.label_host"),
+                    {
-                                selected_id: currentSelectedMicHost.data,
+                        dropdown_id: "mic_host",
-                                list: currentMicHostList.data,
+                        secondary_label: t("config_page.device.label_host"),
-                                selectFunction: selectFunction_host,
+                        selected_id: currentSelectedMicHost.data,
-                                state: currentSelectedMicHost.state,
+                        list: currentMicHostList.data,
-                                style: { maxWidth: "20rem", minWidth: "10rem" },
+                        selectFunction: selectFunction_host,
-                                is_disabled: is_disabled_selector,
+                        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,
+                        dropdown_id: "mic_device",
-                                list: currentMicDeviceList.data,
+                        secondary_label: t("config_page.device.label_device"),
-                                selectFunction: selectFunction_device,
+                        selected_id: currentSelectedMicDevice.data,
-                                state: currentSelectedMicDevice.state,
+                        list: currentMicDeviceList.data,
-                                is_disabled: is_disabled_selector,
+                        selectFunction: selectFunction_device,
-                            }
+                        state: currentSelectedMicDevice.state,
-                        ]}
+                        is_disabled: is_disabled_selector,
-                    />
+                    }
-                </div>
+                ]}
-            </div>
+            />
             <div className={styles.threshold_container}>
                 <div className={styles.threshold_switch_section}>
                     <LabelComponent {...getLabels()} />

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;
 }

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 (

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%;
-}