[Update] Config Page: Add Device tab. add mic host list.(not selectable yet.)

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -1,15 +1,18 @@
 import { useSelectedConfigTabId } from "@store";
 
+import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
 import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useSelectedConfigTabId();
     switch (currentSelectedConfigTabId) {
-        case "appearance":
-            return <Appearance />;
-        case "about_vrct":
-            return <AboutVrct />;
+        case "device":
+            return <Device />;
+        // case "appearance":
+        //     return <Appearance />;
+        // case "about_vrct":
+        //     return <AboutVrct />;
 
         default:
             return null;

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -2,11 +2,11 @@ import { useTranslation } from "react-i18next";
 import FolderOpenSvg from "@images/folder_open.svg?react";
 
 import { useSettingBox } from "../components/useSettingBox";
-import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
+import { useSelectedMicDevice, useMicDeviceList } from "@store";
 export const Appearance = () => {
     const { t } = useTranslation();
-    const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
-    const { currentMicDeviceListStatus } = useMicDeviceListStatus();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
+    const { currentMicDeviceList } = useMicDeviceList();
     const {
         DropdownMenuContainer,
         SliderContainer,
@@ -29,13 +29,13 @@ export const Appearance = () => {
                 }, 3000);
             });
         };
-        updateSelectedMicDeviceStatus(asyncFunction);
+        updateSelectedMicDevice(asyncFunction);
     };
 
     return (
         <>
             <DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
-            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
+            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
 
             <SliderContainer label="Transparent" desc="description" min="0" max="3000"/>
             <CheckboxContainer label="Transparent" desc="description" checkbox_id="checkbox_id_1"/>

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -35,12 +35,18 @@ export const DropdownMenu = (props) => {
         [styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
     });
 
+    const getSelectedText = () => {
+        if (props.state !== "hasData") return;
+        return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
+    };
+
+
     return (
         <div className={styles.container}>
             <div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu}>
                 {(props.state === "loading")
                     ? <p className={styles.dropdown_selected_text}>Loading...</p>
-                    : <p className={styles.dropdown_selected_text}>{props.list[props.selected_id]}</p>
+                    : <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
                 }
                 {(props.state === "loading")
                     ? <span className={styles.loader}></span>
@@ -49,14 +55,15 @@ export const DropdownMenu = (props) => {
             </div>
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
-                    {
-                        Object.entries(props.list).map(([key, value]) => {
+                    {(props.state === "hasData")
+                        ? Object.entries(props.list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
                                     <p className={styles.value_text} >{value}</p>
                                 </div>
                             );
                         })
+                        : null
                     }
                 </div>
             </div>

src-ui/app/config_page/setting_section/setting_box/components/label_component/LabelComponent.jsx

@@ -4,7 +4,10 @@ export const LabelComponent = (props) => {
     return (
         <div className={styles.label_component}>
             <p className={styles.label}>{props.label}</p>
-            <p className={styles.desc}>{props.desc}</p>
+            {props.desc
+                ? <p className={styles.desc}>{props.desc}</p>
+                : null
+            }
         </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss

@@ -26,6 +26,7 @@
     align-items: center;
     gap: 2rem;
     padding: 2rem;
+    border-bottom: solid 0.1rem var(--dark_800_color);
 }
 
 .threshold_switch_section {

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import FolderOpenSvg from "@images/folder_open.svg?react";
+
+import { useSettingBox } from "../components/useSettingBox";
+import {
+    useMicHostList,
+    useSelectedMicHost,
+    useSelectedMicDevice,
+    useMicDeviceList,
+} from "@store";
+
+export const Device = () => {
+    const { t } = useTranslation();
+    const {
+        DropdownMenuContainer,
+        ThresholdContainer,
+    } = useSettingBox();
+
+
+    const { currentMicHostList, updateMicHostList } = useMicHostList();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useSelectedMicHost();
+
+    const { currentMicDeviceList } = useMicDeviceList();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
+
+    const selectFunction = (selected_data) => {
+        switch (selected_data.dropdown_id) {
+            case "mic_host":
+
+                break;
+
+            default:
+                break;
+        }
+    };
+
+
+    return (
+        <>
+            <DropdownMenuContainer
+                dropdown_id="mic_host"
+                label={t("config_page.mic_host.label")}
+                selected_id={currentSelectedMicHost.data}
+                list={currentMicHostList.data}
+                selectFunction={selectFunction}
+                state={currentSelectedMicHost.state}
+            />
+            {/* <DropdownMenuContainer
+                dropdown_id="mic_device"
+                label={t("config_page.mic_device.label")}
+                selected_id={currentSelectedMicDevice.data}
+                list={currentMicDeviceList.data}
+                selectFunction={selectFunction}
+                state={currentSelectedMicDevice.state}
+            /> */}
+{/*
+            <ThresholdContainer label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold"  min="0" max="3000"/>
+
+
+            <DropdownMenuContainer dropdown_id="speaker_device" label={t("config_page.speaker_device.label")}  selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
+
+            <ThresholdContainer label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")} id="speaker_threshold"  min="0" max="3000"/> */}
+        </>
+    );
+};

src-ui/app/config_page/sidebar_section/SidebarSection.jsx

@@ -4,6 +4,7 @@ export const SidebarSection = () => {
     return (
         <div className={styles.container}>
             <div className={styles.tabs_wrapper}>
+                <Tab tab_id="device" />
                 <Tab tab_id="appearance" />
                 <Tab tab_id="translation" />
                 <Tab tab_id="transcription" />

src-ui/app/config_page/topbar/Topbar.jsx

@@ -12,7 +12,6 @@ export const Topbar = () => {
     const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
         updateIsOpenedConfigPage(false);
-
     };
 
     return (