Merge branch 'ui' into for_webui

src-ui/app/App.jsx

@@ -1,7 +1,7 @@
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
-import { useConfig } from "@logics/useConfig";
+// import { useConfig } from "@logics/useConfig";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
 import styles from "./App.module.scss";
@@ -17,22 +17,28 @@ export const App = () => {
 };
 
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const {
+    const { getSoftwareVersion } = useSoftwareVersion();
-        getSoftwareVersion,
+    const { getSelectedMicHost } = useSelectedMicHost();
-        // getMicHostList,
+    const { getSelectedMicDevice } = useSelectedMicDevice();
-        getSelectedMicHost,
+    const { getSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-        // getMicDeviceList,
+    const { getMicThreshold } = useMicThreshold();
-        getSelectedMicDevice,
+    const { getSpeakerThreshold } = useSpeakerThreshold();
-        getSelectedSpeakerDevice,
+    const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
-
+    const { getSendMessageButtonType } = useSendMessageButtonType();
-        getEnableAutoClearMessageBox,
-        getSendMessageButtonType,
-    } = useConfig();
 
 
     useEffect(() => {
@@ -40,12 +46,13 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                // getMicHostList();
                 getSelectedMicHost();
-                // getMicDeviceList();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();
 
+                getMicThreshold();
+                getSpeakerThreshold();
+
                 getEnableAutoClearMessageBox();
                 getSendMessageButtonType();
             }).catch((err) => {

src-ui/app/config_page/ConfigPage.jsx

@@ -4,7 +4,7 @@ import { Topbar } from "./topbar/Topbar.jsx";
 import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
 import { SettingSection } from "./setting_section/SettingSection.jsx";
 
-import { useSoftwareVersion  } from "@store";
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
 import { useTranslation } from "react-i18next";
 
 export const ConfigPage = () => {

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

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

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx

@@ -19,12 +19,12 @@ import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png";
 
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { useUiLanguageStatus } from "@store";
+import { useStore_UiLanguage } from "@store";
 import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
 
 export const AboutVrct = () => {
     const { t } = useTranslation();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentUiLanguage } = useStore_UiLanguage();
     return (
         <div className={styles.container}>
             <div className={styles.dev_section}>
@@ -74,7 +74,7 @@ export const AboutVrct = () => {
                 <img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
                 <img src={special_thanks_members} className={styles.special_thanks_members_img} />
                 {
-                    currentUiLanguageStatus === "ja"
+                    currentUiLanguage === "ja"
                     ? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
                     : <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
                 }

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import styles from "./PosterShowcaseWorldsContents.module.scss";
-import { usePosterShowcaseWorldPageIndex } from "@store";
+import { useStore_PosterShowcaseWorldPageIndex } from "@store";
 const images = import.meta.glob("@images/about_vrct/showcased_worlds/*.{png,jpg,jpeg,svg}", { eager: true });
 
 const getImageByFileName = (file_name) => {
@@ -12,7 +12,7 @@ import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
 import { chunkArray } from "@utils/chunkArray";
 
 export const PosterShowcaseWorldsContents = () => {
-    const { currentPosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
+    const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
     const poster_showcase_world_images = poster_showcase_worlds_settings.map((setting) => ({
         img: getImageByFileName(setting.image_file_name),
         x_post_num: setting.x_post_num
@@ -59,7 +59,7 @@ import chat_white_square from "@images/chato_white_square.png";
 import { useEffect } from "react";
 import { randomIntMinMax } from "@utils/randomIntMinMax";
 const PosterShowcaseWorldsPagination = ({ page_length }) => {
-    const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = usePosterShowcaseWorldPageIndex();
+    const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
 
     useEffect(() => {
         updatePosterShowcaseWorldPageIndex(randomIntMinMax(page_length -1));

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import styles from "./PostersContents.module.scss";
-import { useUiLanguageStatus } from "@store";
+import { useStore_UiLanguage } from "@store";
 
-import { useVrctPosterIndex } from "@store";
+import { useStore_VrctPosterIndex } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import iya_vrct_poster_ja from "@images/about_vrct/vrct_posters/iya_vrct_poster_ja.png";
@@ -29,8 +29,8 @@ import poster_images_authors_m_ja from "@images/about_vrct/vrct_posters/authors/
 import poster_images_authors_m_en from "@images/about_vrct/vrct_posters/authors/poster_images_authors_m_en.png";
 
 export const PostersContents = () => {
-    const { currentVrctPosterIndex, updateVrctPosterIndex } = useVrctPosterIndex();
+    const { currentVrctPosterIndex, updateVrctPosterIndex } = useStore_VrctPosterIndex();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentUiLanguage } = useStore_UiLanguage();
 
 
     const updateIndex = (delta) => {
@@ -60,7 +60,7 @@ export const PostersContents = () => {
                 </button>
             </div>
             {
-                currentUiLanguageStatus === "ja"
+                currentUiLanguage === "ja"
                 ? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
                 : <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
             }

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 { useSelectedMicDevice, useMicDeviceList } from "@store";
+import { useStore_SelectedMicDevice, useStore_MicDeviceList } from "@store";
 export const Appearance = () => {
     const { t } = useTranslation();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
-    const { currentMicDeviceList } = useMicDeviceList();
+    const { currentMicDeviceList } = useStore_MicDeviceList();
     const {
         DropdownMenuContainer,
         SliderContainer,

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

@@ -1,10 +1,10 @@
 import styles from "./DropdownMenu.module.scss";
 import clsx from "clsx";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-import { useIsOpenedDropdownMenu } from "@store";
+import { useStore_IsOpenedDropdownMenu } from "@store";
 
 export const DropdownMenu = (props) => {
-    const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
+    const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
 
     const toggleDropdownMenu = () => {
         if (currentIsOpenedDropdownMenu === props.dropdown_id) {

src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx

@@ -1,20 +1,20 @@
 import styles from "./MessageFormat.module.scss";
 import { useTranslation } from "react-i18next";
 import {
-    useUiLanguageStatus,
+    useStore_UiLanguage,
-    useSendMessageFormat,
+    useStore_SendMessageFormat,
-    useSendMessageFormatWithT,
+    useStore_SendMessageFormatWithT,
-    useReceivedMessageFormat,
+    useStore_ReceivedMessageFormat,
-    useReceivedMessageFormatWithT,
+    useStore_ReceivedMessageFormatWithT,
 } from "@store";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import SwapImg from "@images/swap_icon.png";
 
 export const MessageFormat = (props) => {
-    const { currentSendMessageFormat, updateSendMessageFormat } = useSendMessageFormat();
+    const { currentSendMessageFormat, updateSendMessageFormat } = useStore_SendMessageFormat();
-    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useSendMessageFormatWithT();
+    const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useStore_SendMessageFormatWithT();
-    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useReceivedMessageFormat();
+    const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useStore_ReceivedMessageFormat();
-    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useReceivedMessageFormatWithT();
+    const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useStore_ReceivedMessageFormatWithT();
 
     let atoms = [];
     switch (props.id) {
@@ -49,14 +49,14 @@ export const MessageFormat = (props) => {
 
 const ExampleComponent = ({ id, current_format }) => {
     const { t } = useTranslation();
-    const { currentUiLanguageStatus } = useUiLanguageStatus();
+    const { currentUiLanguage } = useStore_UiLanguage();
 
     const createExampleMessage = () => {
         const originalLangMessage = t("config_page.send_message_format.example_text");
         let format = current_format;
 
         if (["send_with_t", "received_with_t"].includes(id)) {
-            const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
+            const translationLocale = currentUiLanguage === "en" ? "ja" : "en";
             const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
 
             return format.is_message_first

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -1,14 +1,101 @@
+import { useEffect, useState } from "react";
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
-
+import { useVolume } from "@logics/useVolume";
 export const ThresholdComponent = (props) => {
     return (
         <div className={styles.container}>
-            <VolumeCheckButton {...props}/>
+            {props.id === "mic_threshold"
-            <SliderAndMeter {...props}/>
+                ? <MicComponent {...props} />
-            <ThresholdEntry/>
+                : <SpeakerComponent {...props} />
+            }
         </div>
     );
+};
+import MicSvg from "@images/mic.svg?react";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+const MicComponent = (props) => {
+    const { currentMicThreshold, setMicThreshold } = useMicThreshold();
+    const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
+    const {volumeCheckStart_Mic, volumeCheckStop_Mic, currentMicThresholdCheckStatus } = useVolume();
+
+
+    useEffect(() => {
+        setUiThreshold(currentMicThreshold);
+    }, [currentMicThreshold]);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setMicThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={MicSvg}
+                startFunction={volumeCheckStart_Mic}
+                stopFunction={volumeCheckStop_Mic}
+                isChecking={currentMicThresholdCheckStatus}
+            />
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
+};
+import HeadphonesSvg from "@images/headphones.svg?react";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+const SpeakerComponent = (props) => {
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
+    const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
+    const {volumeCheckStart_Speaker, volumeCheckStop_Speaker, currentSpeakerThresholdCheckStatus } = useVolume();
+
+    useEffect(() => {
+        setUiThreshold(currentSpeakerThreshold);
+    }, [currentSpeakerThreshold]);
+
+    const setUiThresholdFunction = (payload_ui_threshold) => {
+        setUiThreshold(payload_ui_threshold);
+    };
+    const setThresholdFunction = (payload_threshold) => {
+        setSpeakerThreshold(payload_threshold);
+    };
+
+    return (
+        <>
+            <VolumeCheckButton
+                {...props}
+                SvgComponent={HeadphonesSvg}
+                startFunction={volumeCheckStart_Speaker}
+                stopFunction={volumeCheckStop_Speaker}
+                isChecking={currentSpeakerThresholdCheckStatus}
+            />
+            <SliderAndMeter
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+            <ThresholdEntry
+                {...props}
+                ui_threshold={ui_threshold}
+                setUiThresholdFunction={setUiThresholdFunction}
+                setThresholdFunction={setThresholdFunction}
+            />
+        </>
+    );
 };

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

@@ -3,5 +3,5 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    gap: 3rem;
+    gap: 2rem;
 }

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx

@@ -1,44 +1,40 @@
 import { useState } from "react";
 import styles from "./SliderAndMeter.module.scss";
 import {
-    useMicVolume,
+    useStore_MicVolume,
-    useSpeakerVolume,
+    useStore_SpeakerVolume,
 } from "@store";
 
-import { useVolume } from "@logics/useVolume";
-
 export const SliderAndMeter = (props) => {
     return (
         <div className={styles.container}>
             <div className={styles.meter_container}>
                 {props.id === "mic_threshold"
-                    ? <ThresholdVolumeMeter_Mic min={props.min} max={props.max}/>
+                    ? <ThresholdVolumeMeter_Mic {...props}/>
-                    : <ThresholdVolumeMeter_Speaker min={props.min} max={props.max}/>
+                    : <ThresholdVolumeMeter_Speaker {...props}/>
                 }
             </div>
-            <DevSection {...props}/>
         </div>
     );
 };
 
 
-const ThresholdVolumeMeter_Mic = ({min, max}) => {
+const ThresholdVolumeMeter_Mic = (props) => {
-    const [threshold, setThreshold] = useState(max / 2);
+    const { currentMicVolume } = useStore_MicVolume();
 
-    const { currentMicVolume } = useMicVolume();
+    const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
-
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
-    const currentVolumeVariable = Math.min(currentMicVolume.data, max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold}/>
             <input
                 type="range"
-                min={min}
+                min={props.min}
-                max={max}
+                max={props.max}
-                value={threshold}
+                value={props.ui_threshold}
-                onChange={(e) => setThreshold(e.target.value)}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>
@@ -46,23 +42,22 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => {
 };
 
 
-const ThresholdVolumeMeter_Speaker = ({min, max}) => {
+const ThresholdVolumeMeter_Speaker = (props) => {
-    const [threshold, setThreshold] = useState(max / 2);
+    const { currentSpeakerVolume } = useStore_SpeakerVolume();
 
-    const { currentSpeakerVolume } = useSpeakerVolume();
+    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
-
+    const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
-    const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max);
-    const volume_width_percentage = (currentVolumeVariable / max) * 100;
 
     return (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={props.ui_threshold} />
-                <input
+            <input
                 type="range"
-                min={min}
+                min={props.min}
-                max={max}
+                max={props.max}
-                value={threshold}
+                value={props.ui_threshold}
-                onChange={(e) => setThreshold(e.target.value)}
+                onChange={(e) => props.setUiThresholdFunction(e.target.value)}
+                onMouseUp={(e) => props.setThresholdFunction(e.target.value)}
                 className={styles.threshold_slider}
             />
         </>
@@ -70,6 +65,7 @@ const ThresholdVolumeMeter_Speaker = ({min, max}) => {
 };
 
 
+
 const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
 
     return (
@@ -81,44 +77,4 @@ const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => {
             }}
         />
     );
-};
-
-
-const DevSection = (props) => {
-    const {
-        volumeCheckStart_Mic,
-        volumeCheckStop_Mic,
-        volumeCheckStart_Speaker,
-        volumeCheckStop_Speaker,
-    } = useVolume();
-
-    const volumeCheckStart = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStart_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStart_Speaker();
-        }
-    };
-
-    const volumeCheckStop = () => {
-        if (props.id === "mic_threshold") {
-            volumeCheckStop_Mic();
-        } else if (props.id === "speaker_threshold") {
-            volumeCheckStop_Speaker();
-        }
-    };
-
-    return (
-        <div className={styles.dev_info_box}>
-            <p>dev</p>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStart()}>Start</button>
-            <button className={styles.volume_check_button} onClick={() => volumeCheckStop()}>Stop</button>
-            <div className={styles.volume_info}>
-                {/* <span>Current Volume: {(currentVolumeVariable)}</span> */}
-            </div>
-            <div className={styles.threshold_info}>
-                {/* <span>Threshold: {props.threshold}</span> */}
-            </div>
-        </div>
-    );
 };

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss

@@ -52,33 +52,4 @@
     &:focus {
         outline: none;
     }
-}
-
-
-
-
-//  for dev
-.dev_info_box {
-    position: absolute;
-    top: -4rem;
-    display: flex;
-    gap: 2rem
-}
-
-
-
-.volume_info, .threshold_info {
-    font-size: 1.2rem;
-}
-
-
-
-.volume_check_button {
-    font-size: 1.4rem;
-    background-color: var(--dark_800_color);
-    padding: 1rem;
-    cursor: pointer;
-    &:hover {
-        background-color: var(--dark_775_color);
-    }
 }

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx

@@ -1,22 +1,50 @@
-import { useState, useEffect } from "react";
 import styles from "./ThresholdEntry.module.scss";
 
-export const ThresholdEntry = () => {
+export const ThresholdEntry = (props) => {
-    const [input_value, setInputValue] = useState();
-
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
-    };
-
-
     return (
         <div className={styles.container}>
             <div className={styles.entry_wrapper}>
-                <input
+                {props.id === "mic_threshold"
-                    className={styles.entry_input_area}
+                    ? <ThresholdEntry_Mic {...props}/>
-                    onChange={onChangeFunction}
+                    : <ThresholdEntry_Speaker {...props}/>
-                />
+                }
             </div>
         </div>
     );
+};
+
+const ThresholdEntry_Mic = (props) => {
+    const onChangeFunction = (e) => {
+        if (e.currentTarget.value === "") {
+            props.setThresholdFunction("0");
+        } else {
+            props.setThresholdFunction(e.currentTarget.value);
+        }
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={props.ui_threshold}
+        />
+    );
+};
+
+const ThresholdEntry_Speaker = (props) => {
+    const onChangeFunction = (e) => {
+        if (e.currentTarget.value === "") {
+            props.setThresholdFunction("0");
+        } else {
+            props.setThresholdFunction(e.currentTarget.value);
+        }
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={props.ui_threshold}
+        />
+    );
 };

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.module.scss

@@ -1,9 +1,8 @@
 .container {
-    background-color: green;
 }
 
 .entry_wrapper {
-    width: 10rem;
+    width: 6rem;
     height: 100%;
     padding: 0.6rem;
     background-color: var(--dark_875_color);

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx

@@ -1,31 +1,27 @@
 import React from "react";
 import styles from "./VolumeCheckButton.module.scss";
-import MicSvg from "@images/mic.svg?react";
-import HeadphonesSvg from "@images/headphones.svg?react";
 import clsx from "clsx";
-// import { useVolume } from "@logics/useVolume";
 
 export const VolumeCheckButton = React.memo((props) => {
-    const SvgComponent = props.id === "mic_threshold" ? MicSvg : HeadphonesSvg;
-
-
     const getClassNames = (baseClass) => clsx(baseClass, {
-        // [styles.is_active]: (currentState.data === true),
+        [styles.is_active]: (props.isChecking?.data === true),
-        // [styles.is_loading]: (currentState.state === "loading"),
+        [styles.is_loading]: (props.isChecking.state === "loading"),
-        // [styles.is_hovered]: is_hovered,
-        // [styles.is_mouse_down]: is_mouse_down,
     });
-    // const {
+
-    //     volumeCheckStart_Mic,
+    const toggleFunction = () => {
-    //     volumeCheckStop_Mic,
+        if (props.isChecking?.data === true) {
-    // } = useVolume();
+            props.stopFunction();
+        } else if (props.isChecking?.data === false) {
+            props.startFunction();
+        }
+    };
 
 
     return (
-        // <div className={styles.container} onClick={() => volumeCheckStop_Mic()}>
         <div className={styles.container}>
-            <div className={getClassNames(styles.button_button)}>
+            <div className={getClassNames(styles.button)} onClick={toggleFunction}>
-                <SvgComponent className={getClassNames(styles.button_svg)} />
+                <props.SvgComponent className={styles.button_svg} />
+                <p className={styles.button_text}>Check Volume</p>
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.module.scss

@@ -1,14 +1,45 @@
-.button_button {
+.button {
     width: 100%;
     background-color: var(--dark_800_color);
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 1rem;
+    padding: 0.8rem 1rem;
-    border-radius: 50%;
+    border-radius: 0.4rem;
+    gap: 0.4rem;
+    cursor: pointer;
+    &.is_active {
+        background-color: var(--primary_500_color);
+        &:hover {
+            background-color: var(--primary_450_color);
+        }
+        &:active {
+            background-color: var(--primary_550_color);
+        }
+    }
+    &.is_loading {
+        background-color: var(--dark_850_color);
+        pointer-events: none;
+        .button_svg, .button_text {
+            color: var(--dark_500_color);
+        }
+    }
+
+
+    &:hover {
+        background-color: var(--dark_775_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
 }
 
 .button_svg {
-    width: 2.6rem;
+    width: 1.4rem;
     color: var(--dark_350_color);
+}
+
+.button_text {
+    font-size: 1.2rem;
+    color: var(--dark_basic_text_color);
 }

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -1,5 +1,5 @@
 import styles from "./useSettingBox.module.scss";
-import { useIsOpenedDropdownMenu } from "@store";
+import { useStore_IsOpenedDropdownMenu } from "@store";
 import clsx from "clsx";
 
 import { LabelComponent } from "./label_component/LabelComponent";
@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
-export const useSettingBox = () => {
-    const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
 
-    const DropdownMenuContainer = (props) => {
+const useOnMouseLeaveDropdownMenu = () => {
-        const onMouseLeaveFunction = () => {
+    const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
-            updateIsOpenedDropdownMenu("");
-        };
 
-        return (
+    const onMouseLeaveFunction = () => {
-            <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+        updateIsOpenedDropdownMenu("");
-                <LabelComponent label={props.label} desc={props.desc} />
-                <DropdownMenu {...props}/>
-            </div>
-        );
     };
 
+    return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
+    return (
+        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DropdownMenu {...props} />
+        </div>
+    );
+};
+
+
+export const ThresholdContainer = (props) => {
+    return (
+        <div className={styles.threshold_container}>
+            <div className={styles.threshold_switch_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Switchbox {...props}/>
+            </div>
+            <div className={styles.threshold_section}>
+                <ThresholdComponent {...props}/>
+            </div>
+        </div>
+    );
+};
+
+
+export const useSettingBox = () => {
+    console.log("useSettingBox______________");
+
+
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
         );
     };
 
-    const ThresholdContainer = (props) => {
-        return (
-            <div className={styles.threshold_container}>
-                <div className={styles.threshold_switch_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <Switchbox {...props}/>
-                </div>
-                <div className={styles.threshold_section}>
-                    <ThresholdComponent {...props}/>
-                </div>
-            </div>
-        );
-    };
-
     const DeeplAuthKeyContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
     };
 
     return {
-        DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
-        ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,

src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx

@@ -1,11 +1,11 @@
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
-import { useWordFilterList, useIsOpenedWordFilterList } from "@store";
+import { useStore_WordFilterList, useStore_IsOpenedWordFilterList } from "@store";
 export const WordFilter = () => {
     const [input_value, setInputValue] = useState();
-    const { currentWordFilterList, updateWordFilterList } = useWordFilterList();
+    const { currentWordFilterList, updateWordFilterList } = useStore_WordFilterList();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
 
     const onChangeEntry = (e) => {
         setInputValue(e.target.value);
@@ -112,8 +112,8 @@ import { useTranslation } from "react-i18next";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 export const WordFilterListToggleComponent = (props) => {
     const { t } = useTranslation();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useIsOpenedWordFilterList();
+    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
-    const { currentWordFilterList } = useWordFilterList();
+    const { currentWordFilterList } = useStore_WordFilterList();
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {

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

@@ -1,119 +1,119 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
 import {
-    useMicHostList,
+    DropdownMenuContainer,
-    useSelectedMicHost,
+    ThresholdContainer,
-    useSelectedMicDevice,
+} from "../components/useSettingBox";
-    useMicDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerDeviceList,
-} from "@store";
-
-import { useConfig } from "@logics/useConfig";
-
 export const Device = () => {
-    const { t } = useTranslation();
-    const {
-        DropdownMenuContainer,
-        ThresholdContainer,
-    } = useSettingBox();
-
-
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicHost } = useSelectedMicHost();
-
-    const { currentMicDeviceList } = useMicDeviceList();
-    const { currentSelectedMicDevice } = useSelectedMicDevice();
-
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
-    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-
-    const {
-        setSelectedMicHost,
-        setSelectedMicDevice,
-        getMicHostList,
-        getMicDeviceList,
-        setSelectedSpeakerDevice,
-        getSpeakerDeviceList,
-    } = useConfig();
-
-    const selectFunction = (selected_data) => {
-        switch (selected_data.dropdown_id) {
-            case "mic_host":
-                setSelectedMicHost(selected_data.selected_id);
-                break;
-
-            case "mic_device":
-                setSelectedMicDevice(selected_data.selected_id);
-                break;
-
-            case "speaker_device":
-                setSelectedSpeakerDevice(selected_data.selected_id);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    // const volumeCheckStartFunction_Mic = () => {
-    //     volumeCheckStart_Mic();
-    // };
-    // const volumeCheckStopFunction_Mic = () => {
-    //     volumeCheckStop_Mic();
-    // };
-
 
     return (
         <>
-            <DropdownMenuContainer
+            <DropdownMenuContainer_MicHost />
-                dropdown_id="mic_host"
+            <DropdownMenuContainer_MicDevice />
-                label={t("config_page.mic_host.label")}
+            <ThresholdContainer_Mic />
-                selected_id={currentSelectedMicHost.data}
+            <DropdownMenuContainer_SpeakerDevice />
-                list={currentMicHostList.data}
+            <ThresholdContainer_Speaker />
-                selectFunction={selectFunction}
-                openListFunction={getMicHostList}
-                state={currentSelectedMicHost.state}
-            />
-
-            <DropdownMenuContainer
-                dropdown_id="mic_device"
-                label={t("config_page.mic_device.label")}
-                selected_id={currentSelectedMicDevice.data}
-                list={currentMicDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicDeviceList}
-                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="2000"
-                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
-                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
-            />
-
-
-            <DropdownMenuContainer
-                dropdown_id="speaker_device"
-                label={t("config_page.speaker_device.label")}
-                selected_id={currentSelectedSpeakerDevice.data}
-                list={currentSpeakerDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getSpeakerDeviceList}
-                state={currentSelectedSpeakerDevice.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="4000"
-            />
         </>
     );
+};
+
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+const DropdownMenuContainer_MicHost = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
+    const { currentMicHostList, getMicHostList } = useMicHostList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicHost(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_host"
+            label={t("config_page.mic_host.label")}
+            selected_id={currentSelectedMicHost.data}
+            list={currentMicHostList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicHostList}
+            state={currentSelectedMicHost.state}
+        />
+    );
+};
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+const DropdownMenuContainer_MicDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+    const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_device"
+            label={t("config_page.mic_device.label")}
+            selected_id={currentSelectedMicDevice.data}
+            list={currentMicDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicDeviceList}
+            state={currentSelectedMicDevice.state}
+        />
+    );
+};
+
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+const DropdownMenuContainer_SpeakerDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedSpeakerDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="speaker_device"
+            label={t("config_page.speaker_device.label")}
+            selected_id={currentSelectedSpeakerDevice.data}
+            list={currentSpeakerDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getSpeakerDeviceList}
+            state={currentSelectedSpeakerDevice.state}
+        />
+    );
+};
+
+const ThresholdContainer_Mic = () => {
+    const { t } = useTranslation();
+
+    return (
+        <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="2000"
+        />
+    );
+};
+
+const ThresholdContainer_Speaker = () => {
+    const { t } = useTranslation();
+
+    return (
+        <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="4000"
+        />
+    );
 };

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { useSettingBox } from "../components/useSettingBox";
 // import {
-//     useEnableAutoClearMessageBox,
+//     useStore_EnableAutoClearMessageBox,
 // } from "@store";
 
 import { useConfig } from "@logics/useConfig";

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

@@ -22,11 +22,11 @@ export const SidebarSection = () => {
 
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { useSelectedConfigTabId } from "@store";
+import { useStore_SelectedConfigTabId } from "@store";
 
 const Tab = (props) => {
     const { t } = useTranslation();
-    const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useSelectedConfigTabId();
+    const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     const onclickFunction = () => {
         updateSelectedConfigTabId(props.tab_id);
     };

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

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./Topbar.module.scss";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import { TitleBox } from "./title_box/TitleBox";
@@ -9,7 +9,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
-    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
     const closeConfigPage = () => {
         updateIsOpenedConfigPage(false);
     };

src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx

@@ -1,10 +1,10 @@
 import { useTranslation } from "react-i18next";
 import styles from "./SectionTitleBox.module.scss";
-import { useSelectedConfigTabId } from "@store";
+import { useStore_SelectedConfigTabId } from "@store";
 
 export const SectionTitleBox = () => {
     const { t } = useTranslation();
-    const { currentSelectedConfigTabId } = useSelectedConfigTabId();
+    const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     return (
         <div className={styles.container}>
             <p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>

src-ui/app/main_page/MainPage.jsx

@@ -2,10 +2,10 @@ import clsx from "clsx";
 import styles from "./MainPage.module.scss";
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 
 export const MainPage = () => {
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     return (
         <div className={clsx(styles.page, styles.main_page, {

src-ui/app/main_page/main_section/MainSection.jsx

@@ -4,7 +4,7 @@ import { TopBar } from "./top_bar/TopBar";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { LanguageSelector } from "./language_selector/LanguageSelector";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const MainSection = () => {
 
@@ -18,7 +18,7 @@ export const MainSection = () => {
 };
 
 const HandleLanguageSelector = () => {
-    const { currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     if (currentIsOpenedLanguageSelector.your_language === true) {
         return <LanguageSelector id="your_language"/>;

src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.jsx

@@ -1,9 +1,9 @@
 import styles from "./LanguageSelectorTopBar.module.scss";
 
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 
 export const LanguageSelectorTopBar = (props) => {
-    const { updateIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const closeLanguageSelector = () => {
         updateIsOpenedLanguageSelector({

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
-import { useMessageLogsStatus, store } from "@store";
+import { useStore_MessageLogs, store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
 import { scrollToBottom } from "@logics/scrollToBottom";
 
 export const LogBox = () => {
-    const { currentMessageLogsStatus } = useMessageLogsStatus();
+    const { currentMessageLogs } = useStore_MessageLogs();
     const log_container_ref = useRef(null);
     const [is_scrolling, setIsScrolling] = useState(false);
 
@@ -14,7 +14,7 @@ export const LogBox = () => {
         if (!is_scrolling) {
             scrollToBottom(store.log_box_ref, true);
         }
-    }, [currentMessageLogsStatus]);
+    }, [currentMessageLogs]);
 
     useEffect(() => {
         const handleScroll = () => {
@@ -39,7 +39,7 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
-            {currentMessageLogsStatus.map(message_data => (
+            {currentMessageLogs.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -2,16 +2,17 @@ import { useState } from "react";
 import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics/useMessage";
-import { store, useEnableAutoClearMessageBox } from "@store";
+import { store } from "@store";
 import { scrollToBottom } from "@logics/scrollToBottom";
-import { useConfig } from "@logics/useConfig";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 
 export const MessageInputBox = () => {
     const [inputValue, setInputValue] = useState("");
     const { sendMessage } = useMessage();
 
     const { currentEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType } = useConfig();
+    const { currentSendMessageButtonType } = useSendMessageButtonType();
 
     const onSubmitFunction = (e) => {
         e.preventDefault();

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -1,18 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const toggleCompactMode = () => {
-        updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
+        updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
     };
 
     const class_names = clsx(styles["arrow_left_svg"], {
-        [styles["reverse"]]: currentMainPageCompactModeStatus
+        [styles["reverse"]]: currentIsMainPageCompactMode
     });
 
     return (

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

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
 import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
     const container_class_name = clsx(styles["container"], {
-        [styles["is_compact_mode"]]: currentMainPageCompactModeStatus
+        [styles["is_compact_mode"]]: currentIsMainPageCompactMode
     });
 
     return (
         <div className={container_class_name}>
             <Logo />
             <MainFunctionSwitch />
-            {!currentMainPageCompactModeStatus && <LanguageSettings />}
+            {!currentIsMainPageCompactMode && <LanguageSettings />}
             <OpenSettings />
         </div>
     );

src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx

@@ -6,10 +6,10 @@ import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
 import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
 import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
-import { useIsOpenedTranslatorSelector } from "@store";
+import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
-    const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
     const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
 
     return (
@@ -24,12 +24,12 @@ export const LanguageSettings = () => {
 
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
-import { useIsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
 import { useMainFunction } from "@logics/useMainFunction";
 
 const PresetContainer = () => {
     const { t } = useTranslation();
-    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
+    const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const {
         currentTranscriptionSendStatus,

src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx

@@ -12,16 +12,16 @@ export const PresetTabSelector = () => {
 
 import clsx from "clsx";
 
-import { useSelectedPresetTabStatus } from "@store";
+import { useStore_SelectedPresetTabNumber } from "@store";
 
 const Tab = (props) => {
-    const { updateSelectedPresetTabStatus, currentSelectedPresetTabStatus } = useSelectedPresetTabStatus();
+    const { updateSelectedPresetTabNumber, currentSelectedPresetTabNumber } = useStore_SelectedPresetTabNumber();
     const onclickFunction = () => {
-        updateSelectedPresetTabStatus(props.preset_number);
+        updateSelectedPresetTabNumber(props.preset_number);
     };
 
     const class_names = clsx(styles["tab_container"], {
-        [styles["is_selected"]]: (currentSelectedPresetTabStatus === props.preset_number) ? true : false
+        [styles["is_selected"]]: (currentSelectedPresetTabNumber === props.preset_number) ? true : false
     });
 
     return (

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx

@@ -2,17 +2,17 @@ import { useTranslation } from "react-i18next";
 
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
-import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
+import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const TranslatorSelectorOpenButton = () => {
     const { t } = useTranslation();
-    const { currentSelectedTranslatorIdStatus } = useSelectedTranslatorIdStatus();
+    const { currentSelectedTranslatorId } = useStore_SelectedTranslatorId();
-    const { currentTranslatorListStatus } = useTranslatorListStatus();
+    const { currentTranslatorList } = useStore_TranslatorList();
-    const currentTranslator = currentTranslatorListStatus.find(
+    const currentTranslator = currentTranslatorList.find(
-        translator_data => translator_data.translator_key === currentSelectedTranslatorIdStatus
+        translator_data => translator_data.translator_key === currentSelectedTranslatorId
     );
 
-    const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
 

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx

@@ -1,10 +1,10 @@
 import styles from "./TranslatorSelector.module.scss";
 import { chunkArray } from "@utils/chunkArray";
 
-import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
+import { useStore_TranslatorList, useStore_SelectedTranslatorId, useStore_IsOpenedTranslatorSelector } from "@store";
 export const TranslatorSelector = () => {
-    const { currentTranslatorListStatus } = useTranslatorListStatus();
+    const { currentTranslatorList } = useStore_TranslatorList();
-    const columns = chunkArray(currentTranslatorListStatus, 2);
+    const columns = chunkArray(currentTranslatorList, 2);
 
     return (
         <div className={styles.container}>
@@ -28,17 +28,17 @@ export const TranslatorSelector = () => {
 
 import clsx from "clsx";
 const TranslatorBox = (props) => {
-    const { currentSelectedTranslatorIdStatus, updateSelectedTranslatorIdStatus} = useSelectedTranslatorIdStatus();
+    const { currentSelectedTranslatorId, updateSelectedTranslatorId} = useStore_SelectedTranslatorId();
-    const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
+    const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 
     const box_class_name = clsx(
         styles.box,
-        { [styles["is_selected"]]: (currentSelectedTranslatorIdStatus === props.translator_id) ? true : false },
+        { [styles["is_selected"]]: (currentSelectedTranslatorId === props.translator_id) ? true : false },
         { [styles["is_available"]]: (props.is_available === true) ? true : false }
     );
 
     const selectTranslator = () => {
-        updateSelectedTranslatorIdStatus(props.translator_id);
+        updateSelectedTranslatorId(props.translator_id);
         updateIsOpenedTranslatorSelector(false);
     };
     return (

src-ui/app/main_page/sidebar_section/logo/Logo.jsx

@@ -11,11 +11,11 @@ export const Logo = () => {
 
 import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
 import chato_img from "@images/chato_white.png";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 export const LogoBox = () => {
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-    if (currentMainPageCompactModeStatus === true) {
+    if (currentIsMainPageCompactMode === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {
         return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx

@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import ForegroundSvg from "@images/foreground.svg?react";
-import { useMainPageCompactModeStatus } from "@store";
+import { useStore_IsMainPageCompactMode } from "@store";
 
 import { useMainFunction } from "@logics/useMainFunction";
 
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
+    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
-        [styles.is_compact_mode]: currentMainPageCompactModeStatus,
+        [styles.is_compact_mode]: currentIsMainPageCompactMode,
         [styles.is_active]: (currentState.data === true),
         [styles.is_loading]: (currentState.state === "loading"),
         [styles.is_hovered]: is_hovered,

src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx

@@ -1,9 +1,9 @@
 import styles from "./OpenSettings.module.scss";
-import { useIsOpenedConfigPage } from "@store";
+import { useStore_IsOpenedConfigPage } from "@store";
 import ConfigurationSvg from "@images/configuration.svg?react";
 
 export const OpenSettings = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     const openConfigPage = () => {
         updateIsOpenedConfigPage(true);

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -0,0 +1,28 @@
+import { useStore_EnableAutoClearMessageBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStore_EnableAutoClearMessageBox();
+
+    const getEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        if (currentEnableAutoClearMessageBox.data) {
+            asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+        }
+    };
+
+    return {
+        currentEnableAutoClearMessageBox,
+        getEnableAutoClearMessageBox,
+        toggleEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox,
+    };
+};

src-ui/logics/configs/useMicDeviceList.js

@@ -0,0 +1,18 @@
+import { useStore_MicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicDeviceList, updateMicDeviceList } = useStore_MicDeviceList();
+
+    const getMicDeviceList = () => {
+        updateMicDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_device");
+    };
+
+    return {
+        currentMicDeviceList,
+        getMicDeviceList,
+        updateMicDeviceList,
+    };
+};

src-ui/logics/configs/useMicHostList.js

@@ -0,0 +1,18 @@
+import { useStore_MicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicHostList, updateMicHostList } = useStore_MicHostList();
+
+    const getMicHostList = () => {
+        updateMicHostList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_host");
+    };
+
+    return {
+        currentMicHostList,
+        getMicHostList,
+        updateMicHostList,
+    };
+};

src-ui/logics/configs/useMicThreshold.js

@@ -0,0 +1,22 @@
+import { useStore_MicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
+
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/config/input_mic_energy_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+    };
+
+    return {
+        currentMicThreshold,
+        getMicThreshold,
+        setMicThreshold,
+        updateMicThreshold,
+    };
+};

src-ui/logics/configs/useSelectedMicDevice.js

@@ -0,0 +1,24 @@
+import { useStore_SelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStore_SelectedMicDevice();
+
+    const getSelectedMicDevice = () => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+    };
+
+    return {
+        currentSelectedMicDevice,
+        getSelectedMicDevice,
+        updateSelectedMicDevice,
+        setSelectedMicDevice,
+    };
+};

src-ui/logics/configs/useSelectedMicHost.js

@@ -0,0 +1,24 @@
+import { useStore_SelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStore_SelectedMicHost();
+
+    const getSelectedMicHost = () => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+    };
+
+    return {
+        currentSelectedMicHost,
+        getSelectedMicHost,
+        updateSelectedMicHost,
+        setSelectedMicHost,
+    };
+};

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -0,0 +1,24 @@
+import { useStore_SelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return {
+        currentSelectedSpeakerDevice,
+        getSelectedSpeakerDevice,
+        updateSelectedSpeakerDevice,
+        setSelectedSpeakerDevice,
+    };
+};

src-ui/logics/configs/useSendMessageButtonType.js

@@ -0,0 +1,24 @@
+import { useStore_SendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStore_SendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (selected_type) => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+    };
+
+    return {
+        currentSendMessageButtonType,
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        updateSendMessageButtonType,
+    };
+};

src-ui/logics/configs/useSoftwareVersion.js

@@ -0,0 +1,18 @@
+import { useStore_SoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStore_SoftwareVersion();
+
+    const getSoftwareVersion = () => {
+        updateSoftwareVersion(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/version");
+    };
+
+    return {
+        currentSoftwareVersion,
+        getSoftwareVersion,
+        updateSoftwareVersion,
+    };
+};

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -0,0 +1,18 @@
+import { useStore_SpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStore_SpeakerDeviceList();
+
+    const getSpeakerDeviceList = () => {
+        updateSpeakerDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_speaker_device");
+    };
+
+    return {
+        currentSpeakerDeviceList,
+        getSpeakerDeviceList,
+        updateSpeakerDeviceList,
+    };
+};

src-ui/logics/configs/useSpeakerThreshold.js

@@ -0,0 +1,22 @@
+import { useStore_SpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
+
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/config/input_speaker_energy_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+    };
+
+    return {
+        currentSpeakerThreshold,
+        getSpeakerThreshold,
+        setSpeakerThreshold,
+        updateSpeakerThreshold,
+    };
+};

src-ui/logics/useConfig.js

@@ -1,138 +0,0 @@
-import {
-    useSoftwareVersion,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-
-    useEnableAutoClearMessageBox,
-    useSendMessageButtonType,
-} from "@store";
-
-import { useStdoutToPython } from "./useStdoutToPython";
-
-import { arrayToObject } from "@utils/arrayToObject";
-
-export const useConfig = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-
-    const { updateSoftwareVersion } = useSoftwareVersion();
-    const { updateMicHostList } = useMicHostList();
-    const { updateSelectedMicHost } = useSelectedMicHost();
-    const { updateMicDeviceList } = useMicDeviceList();
-    const { updateSelectedMicDevice } = useSelectedMicDevice();
-    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
-
-
-    const asyncPending = () => new Promise(() => {});
-    return {
-        getSoftwareVersion: () => {
-            updateSoftwareVersion(asyncPending);
-            asyncStdoutToPython("/config/version");
-        },
-        updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
-
-        getMicHostList: () => {
-            updateMicHostList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_host");
-        },
-        updateMicHostList: (payload) => {
-            updateMicHostList(arrayToObject(payload.data));
-        },
-        getSelectedMicHost: () => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_host");
-        },
-        updateSelectedMicHost: (payload) => {
-            updateSelectedMicHost(payload.data);
-        },
-        setSelectedMicHost: (selected_mic_host) => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
-        },
-
-        getMicDeviceList: () => {
-            updateMicDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_device");
-        },
-        updateMicDeviceList: (payload) => {
-            updateMicDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedMicDevice: () => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_device");
-        },
-        updateSelectedMicDevice: (payload) => {
-            updateSelectedMicDevice(payload.data);
-        },
-        setSelectedMicDevice: (selected_mic_device) => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
-        },
-
-        getSpeakerDeviceList: () => {
-            updateSpeakerDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_speaker_device");
-        },
-        updateSpeakerDeviceList: (payload) => {
-            updateSpeakerDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedSpeakerDevice: () => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_speaker_device");
-        },
-        updateSelectedSpeakerDevice: (payload) => {
-            updateSelectedSpeakerDevice(payload.data);
-        },
-        setSelectedSpeakerDevice: (selected_speaker_device) => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
-        },
-
-        updateMicHostAndDevice: (payload) => {
-            updateSelectedMicHost(payload.data.host);
-            updateSelectedMicDevice(payload.data.device);
-        },
-
-
-
-        // Others
-        getEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            asyncStdoutToPython("/config/enable_auto_clear_message_box");
-        },
-        toggleEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            if (currentEnableAutoClearMessageBox.data) {
-                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
-            }
-        },
-        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox: (payload) => {
-            updateEnableAutoClearMessageBox(payload.data);
-        },
-
-        getSendMessageButtonType: () => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/config/send_message_button_type");
-        },
-        setSendMessageButtonType: (selected_type) => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
-        },
-        currentSendMessageButtonType: currentSendMessageButtonType,
-        updateSendMessageButtonType: (payload) => {
-            updateSendMessageButtonType(payload.data);
-        },
-
-
-
-    };
-};

src-ui/logics/useMainFunction.js

@@ -1,85 +1,88 @@
 import { getCurrent } from "@tauri-apps/api/window";
 
 import {
-    useTranslationStatus,
+    useStore_TranslationStatus,
-    useTranscriptionSendStatus,
+    useStore_TranscriptionSendStatus,
-    useTranscriptionReceiveStatus,
+    useStore_TranscriptionReceiveStatus,
-    useForegroundStatus,
+    useStore_ForegroundStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMainFunction = () => {
     const {
         currentTranslationStatus,
         updateTranslationStatus,
         asyncUpdateTranslationStatus,
-    } = useTranslationStatus();
+    } = useStore_TranslationStatus();
     const {
         currentTranscriptionSendStatus,
         updateTranscriptionSendStatus,
         asyncUpdateTranscriptionSendStatus,
-    } = useTranscriptionSendStatus();
+    } = useStore_TranscriptionSendStatus();
     const {
         currentTranscriptionReceiveStatus,
         updateTranscriptionReceiveStatus,
         asyncUpdateTranscriptionReceiveStatus,
-    } = useTranscriptionReceiveStatus();
+    } = useStore_TranscriptionReceiveStatus();
     const {
         currentForegroundStatus,
         updateForegroundStatus,
-    } = useForegroundStatus();
+    } = useStore_ForegroundStatus();
 
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const asyncPending = () => new Promise(() => {});
+    const toggleTranslation = () => {
+        asyncUpdateTranslationStatus(asyncPending);
+        if (currentTranslationStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_translation");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_translation");
+        }
+    };
+
+    const toggleTranscriptionSend = () => {
+        asyncUpdateTranscriptionSendStatus(asyncPending);
+        if (currentTranscriptionSendStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_send");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_send");
+        }
+    };
+
+    const toggleTranscriptionReceive = () => {
+        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        if (currentTranscriptionReceiveStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_receive");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_receive");
+        }
+    };
+
+    const toggleForeground = () => {
+        const main_page = getCurrent();
+        const is_foreground_enabled = !currentForegroundStatus.data;
+        main_page.setAlwaysOnTop(is_foreground_enabled);
+        updateForegroundStatus(is_foreground_enabled);
+    };
+
     return {
-        toggleTranslation: () => {
+        currentTranslationStatus,
-            asyncUpdateTranslationStatus(asyncPending);
+        toggleTranslation,
-            if (currentTranslationStatus.data) {
+        updateTranslationStatus,
-                asyncStdoutToPython("/controller/callback_disable_translation");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_translation");
-            }
-        },
-        currentTranslationStatus: currentTranslationStatus,
-        updateTranslationStatus: (payload) => {
-            updateTranslationStatus(payload.data);
-        },
 
-        toggleTranscriptionSend: () => {
+        currentTranscriptionSendStatus,
-            asyncUpdateTranscriptionSendStatus(asyncPending);
+        toggleTranscriptionSend,
-            if (currentTranscriptionSendStatus.data) {
+        updateTranscriptionSendStatus,
-                asyncStdoutToPython("/controller/callback_disable_transcription_send");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_send");
-            }
-        },
-        currentTranscriptionSendStatus: currentTranscriptionSendStatus,
-        updateTranscriptionSendStatus: (payload) => {
-            updateTranscriptionSendStatus(payload.data);
-        },
 
-        toggleTranscriptionReceive: () => {
+        currentTranscriptionReceiveStatus,
-            asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        toggleTranscriptionReceive,
-            if (currentTranscriptionReceiveStatus.data) {
+        updateTranscriptionReceiveStatus,
-                asyncStdoutToPython("/controller/callback_disable_transcription_receive");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_receive");
-            }
-        },
-        currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
-        updateTranscriptionReceiveStatus: (payload) => {
-            updateTranscriptionReceiveStatus(payload.data);
-        },
 
-        toggleForeground: () => {
+        currentForegroundStatus,
-            const main_page = getCurrent();
+        toggleForeground,
-            const is_foreground_enabled = !currentForegroundStatus.data;
+        updateForegroundStatus,
-            main_page.setAlwaysOnTop(is_foreground_enabled);
-            updateForegroundStatus(is_foreground_enabled);
 
-        },
-        currentForegroundStatus: currentForegroundStatus,
     };
 };

src-ui/logics/useMessage.js

@@ -1,49 +1,51 @@
 import {
-    useMessageLogsStatus,
+    useStore_MessageLogs,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMessage = () => {
-    const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
+    const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs();
     const { asyncStdoutToPython } = useStdoutToPython();
 
+    const sendMessage = (message) => {
+        const uuid = crypto.randomUUID();
+        const send_message_object = {
+            id: uuid,
+            message: message,
+        };
+        asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
+
+        addMessageLogs({
+            id: uuid,
+            category: "sent",
+            status: "pending",
+            created_at: generateTimeData(),
+            messages: {
+                original: message,
+                translated: [],
+            },
+        });
+    };
+
+    const updateSentMessageLogById = (payload) => {
+        updateMessageLogs(updateItemById(payload.id, payload.translation));
+    };
+    const addSentMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "sent");
+        addMessageLogs(message_object);
+    };
+    const addReceivedMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "received");
+        addMessageLogs(message_object);
+    };
+
     return {
-        sendMessage: (message) => {
+        currentMessageLogs,
-            const uuid = crypto.randomUUID();
+        sendMessage,
-            const send_message_object = {
+        updateSentMessageLogById,
-                id: uuid,
+        addSentMessageLog,
-                message: message,
+        addReceivedMessageLog,
-            };
-            asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
-
-            addMessageLogsStatus({
-                id: uuid,
-                category: "sent",
-                status: "pending",
-                created_at: generateTimeData(),
-                messages: {
-                    original: message,
-                    translated: [],
-                },
-            });
-        },
-        currentMessageLogsStatus: currentMessageLogsStatus,
-
-        updateSentMessageLog: (payload) => {
-            const data = payload.data;
-            updateMessageLogsStatus(updateItemById(data.id, data.translation));
-        },
-        addSentMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "sent");
-            addMessageLogsStatus(message_object);
-        },
-        addReceivedMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "received");
-            addMessageLogsStatus(message_object);
-        },
     };
 };
 

src-ui/logics/useReceiveRoutes.js

@@ -1,8 +1,21 @@
+import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
-import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
 import { useVolume } from "./useVolume";
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
+
 export const useReceiveRoutes = () => {
     const {
         updateTranslationStatus,
@@ -11,27 +24,30 @@ export const useReceiveRoutes = () => {
     } = useMainFunction();
 
     const {
-        updateSentMessageLog,
+        updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
 
+    const { updateSoftwareVersion } = useSoftwareVersion();
+    const { updateMicHostList } = useMicHostList();
+    const { updateSelectedMicHost } = useSelectedMicHost();
+    const { updateMicDeviceList } = useMicDeviceList();
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { updateMicThreshold } = useMicThreshold();
+    const { updateSpeakerThreshold } = useSpeakerThreshold();
+    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { updateSendMessageButtonType } = useSendMessageButtonType();
+
+
     const {
-        updateSoftwareVersion,
+        updateVolumeVariable_Mic,
-        updateMicHostList,
+        updateVolumeVariable_Speaker,
-        updateSelectedMicHost,
+        updateMicThresholdCheckStatus,
-        updateMicDeviceList,
+        updateSpeakerThresholdCheckStatus,
-        updateSelectedMicDevice,
+    } = useVolume();
-        updateMicHostAndDevice,
-
-        updateSpeakerDeviceList,
-        updateSelectedSpeakerDevice,
-
-        updateEnableAutoClearMessageBox,
-        updateSendMessageButtonType,
-    } = useConfig();
-
-    const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
 
     const routes = {
         "/controller/callback_enable_translation": updateTranslationStatus,
@@ -44,20 +60,27 @@ export const useReceiveRoutes = () => {
 
         "/config/version": updateSoftwareVersion,
 
-        "/controller/list_mic_host": updateMicHostList,
+        "/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
         "/config/choice_mic_host": updateSelectedMicHost,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+        "/controller/callback_set_mic_host": (payload) => {
+            updateSelectedMicHost(payload.host);
+            updateSelectedMicDevice(payload.device);
+        },
 
-        "/controller/list_mic_device": updateMicDeviceList,
+        "/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
         "/config/choice_mic_device": updateSelectedMicDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
-        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
+        "/controller/callback_enable_check_mic_threshold": () => updateMicThresholdCheckStatus(true),
+        "/controller/callback_disable_check_mic_threshold": () => updateMicThresholdCheckStatus(false),
+        "/controller/callback_enable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(true),
+        "/controller/callback_disable_check_speaker_threshold": () => updateSpeakerThresholdCheckStatus(false),
 
         "/config/enable_auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
@@ -66,8 +89,13 @@ export const useReceiveRoutes = () => {
         "/config/send_message_button_type": updateSendMessageButtonType,
         "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
+        "/config/input_mic_energy_threshold": updateMicThreshold,
+        "/controller/callback_set_mic_energy_threshold": updateMicThreshold,
+        "/config/input_speaker_energy_threshold": updateSpeakerThreshold,
+        "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
 
-        "/controller/callback_messagebox_send": updateSentMessageLog,
+
+        "/controller/callback_messagebox_send": updateSentMessageLogById,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
     };
@@ -76,7 +104,7 @@ export const useReceiveRoutes = () => {
         switch (parsed_data.status) {
             case 200:
                 const route = routes[parsed_data.endpoint];
-                (route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
+                (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
                 break;
 
             case 348:

src-ui/logics/useVolume.js

@@ -1,30 +1,48 @@
 import {
-    useMicVolume,
+    useStore_MicVolume,
-    useSpeakerVolume,
+    useStore_SpeakerVolume,
+    useStore_MicThresholdCheckStatus,
+    useStore_SpeakerThresholdCheckStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
-
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateMicVolume } = useMicVolume();
+    const { updateMicVolume } = useStore_MicVolume();
-    const { updateSpeakerVolume } = useSpeakerVolume();
+    const { updateSpeakerVolume } = useStore_SpeakerVolume();
+    const { currentMicThresholdCheckStatus, updateMicThresholdCheckStatus } = useStore_MicThresholdCheckStatus();
+    const { currentSpeakerThresholdCheckStatus, updateSpeakerThresholdCheckStatus } = useStore_SpeakerThresholdCheckStatus();
 
-    // const asyncPending = () => new Promise(() => {});
+    const asyncPending = () => new Promise(() => {});
     return {
-        volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
+        volumeCheckStart_Mic: () => {
-        volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+            updateMicThresholdCheckStatus(asyncPending);
-        updateVolumeVariable_Mic: (payload) => {
+            asyncStdoutToPython("/controller/callback_enable_check_mic_threshold");
-            updateMicVolume(payload.data);
         },
+        volumeCheckStop_Mic: () => {
+            updateMicThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_mic_threshold");
+        },
+        updateVolumeVariable_Mic: (payload) => {
+            updateMicVolume(payload);
+        },
+        currentMicThresholdCheckStatus: currentMicThresholdCheckStatus,
+        updateMicThresholdCheckStatus: (payload) => updateMicThresholdCheckStatus(payload),
 
-        volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
+        volumeCheckStart_Speaker: () => {
-        volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold");
+        },
+        volumeCheckStop_Speaker: () => {
+            updateSpeakerThresholdCheckStatus(asyncPending);
+            asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold");
+        },
         updateVolumeVariable_Speaker: (payload) => {
-            updateSpeakerVolume(payload.data);
+            updateSpeakerVolume(payload);
-        }
+        },
-
+        currentSpeakerThresholdCheckStatus: currentSpeakerThresholdCheckStatus,
+        updateSpeakerThresholdCheckStatus: (payload) => updateSpeakerThresholdCheckStatus(payload),
 
     };
 };

src-ui/logics/useWindow.js

@@ -1,9 +1,9 @@
 import { WebviewWindow } from "@tauri-apps/api/window";
-import { store, useIsOpenedConfigPage } from "@store";
+import { store, useStore_IsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 
 export const useWindow = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { updateIsOpenedConfigPage } = useStore_IsOpenedConfigPage();
 
     const createConfigPage = async () => {
         const main_page = getCurrent();

src-ui/store.js

@@ -94,75 +94,79 @@ const createAsyncAtomWithHook = (initialValue, base_ame) => {
     return { atomInstance, useHook };
 };
 
-export const { atomInstance: Atom_SoftwareVersion, useHook: useSoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
+export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
 
-export const { atomInstance: Atom_UiLanguageStatus, useHook: useUiLanguageStatus } = createAtomWithHook("en", "UiLanguageStatus");
+export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
-export const { atomInstance: Atom_TranslationStatus, useHook: useTranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
+export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAsyncAtomWithHook(false, "TranslationStatus");
-export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useTranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
+export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAsyncAtomWithHook(false, "TranscriptionSendStatus");
-export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useTranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
+export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAsyncAtomWithHook(false, "TranscriptionReceiveStatus");
-export const { atomInstance: Atom_ForegroundStatus, useHook: useForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
+export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAsyncAtomWithHook(false, "ForegroundStatus");
 
-export const { atomInstance: Atom_MessageLogsStatus, useHook: useMessageLogsStatus } = createAtomWithHook(generateTestData(20), "MessageLogsStatus");
+export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
-export const { atomInstance: Atom_MainPageCompactModeStatus, useHook: useMainPageCompactModeStatus } = createAtomWithHook(false, "MainPageCompactModeStatus");
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useIsOpenedLanguageSelector } = createAtomWithHook(
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
     { your_language: false, target_language: false },
     "IsOpenedLanguageSelector"
 );
 
-export const { atomInstance: Atom_SelectedPresetTabStatus, useHook: useSelectedPresetTabStatus } = createAtomWithHook(1, "SelectedPresetTabStatus");
+export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
-export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useIsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
+export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
-export const { atomInstance: Atom_SelectedConfigTabId, useHook: useSelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
+export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
 
 
 // Config Page
-export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList");
+export const { atomInstance: Atom_MicHostList, useHook: useStore_MicHostList } = createAsyncAtomWithHook({}, "MicHostList");
-export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
+export const { atomInstance: Atom_SelectedMicHost, useHook: useStore_SelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
+export const { atomInstance: Atom_MicDeviceList, useHook: useStore_MicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useStore_SelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
-export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useStore_SpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
-export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useStore_SelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
-export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_MicVolume, useHook: useStore_MicVolume } = createAsyncAtomWithHook(0, "MicVolume");
-export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useStore_SpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
 
-export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
+export const { atomInstance: Atom_MicThresholdCheckStatus, useHook: useStore_MicThresholdCheckStatus } = createAsyncAtomWithHook(false, "MicThresholdCheckStatus");
+export const { atomInstance: Atom_SpeakerThresholdCheckStatus, useHook: useStore_SpeakerThresholdCheckStatus } = createAsyncAtomWithHook(false, "SpeakerThresholdCheckStatus");
+
+export const { atomInstance: Atom_MicThreshold, useHook: useStore_MicThreshold } = createAtomWithHook(0, "MicThreshold");
+export const { atomInstance: Atom_SpeakerThreshold, useHook: useStore_SpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold");
+
+
+export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({
     before: "",
     after: "",
 }, "SendMessageFormat");
-export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useSendMessageFormatWithT } = createAtomWithHook({
+export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useStore_SendMessageFormatWithT } = createAtomWithHook({
     before: "",
     between: "",
     after: "",
     is_message_first: true,
 }, "SendMessageFormatWithT");
-export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useReceivedMessageFormat } = createAtomWithHook({
+export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useStore_ReceivedMessageFormat } = createAtomWithHook({
     before: "",
     after: "",
 }, "ReceivedMessageFormat");
-export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceivedMessageFormatWithT } = createAtomWithHook({
+export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_ReceivedMessageFormatWithT } = createAtomWithHook({
     before: "",
     between: "",
     after: "",
     is_message_first: true,
 }, "ReceivedMessageFormatWithT");
 
-export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
+export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");
-export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
+export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
-
 
 
 // Others
-export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useStore_EnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
-export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useStore_SendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");
 
 
+export const { atomInstance: Atom_TranslatorList, useHook: useStore_TranslatorList } = createAtomWithHook(translator_list, "TranslatorList");
+export const { atomInstance: Atom_SelectedTranslatorId, useHook: useStore_SelectedTranslatorId } = createAtomWithHook("CTranslate2", "SelectedTranslatorId");
+export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
-
+export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
-export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
+export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
-export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
-export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
-
-export const { atomInstance: Atom_VrctPosterIndex, useHook: useVrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
-export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: usePosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");

vite.config.js

@@ -40,6 +40,7 @@ export default defineConfig(async () => ({
             "@images": path.resolve(__dirname, "src-ui/assets"),
             "@utils": path.resolve(__dirname, "src-ui/utils"),
             "@logics": path.resolve(__dirname, "src-ui/logics"),
+            "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
         },
     },