Merge branch 'ui_refactoring' into develop

src-ui/_test_data.js

@@ -1,4 +1,4 @@
-export const generateTestData = (num) => {
+export const generateTestConversationData = (num) => {
     const testDataArray = [];
     const messagesJa = [
         "今日はとてもいい天気ですね。",

src-ui/app/App.jsx

@@ -11,18 +11,23 @@ import {
     TransparencyController,
     CornerRadiusController,
     PluginsController,
-} from "./_app_controllers/index.js";
+} from "./_app_controllers";
+
+import styles from "./App.module.scss";
 
-import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
-import { SplashComponent } from "./splash_component/SplashComponent";
-import { UpdatingComponent } from "./updating_component/UpdatingComponent";
-import { ModalController } from "./modal_controller/ModalController";
-import { SnackbarController } from "./snackbar_controller/SnackbarController";
-import styles from "./App.module.scss";
+
+import {
+    WindowTitleBar,
+    SplashComponent,
+    UpdatingComponent,
+    ModalController,
+    SnackbarController,
+    AppErrorBoundary,
+} from "./others";
+
 import { useIsBackendReady, useIsSoftwareUpdating, useIsVrctAvailable, useWindow } from "@logics_common";
-import { AppErrorBoundary } from "./error_boundary/AppErrorBoundary";
 
 export const App = () => {
     const { currentIsVrctAvailable } = useIsVrctAvailable();

src-ui/app/_app_controllers/StartPythonController.jsx

@@ -1,11 +1,16 @@
 import { invoke } from "@tauri-apps/api/core";
+import { Command } from "@tauri-apps/plugin-shell";
 import { useEffect, useRef } from "react";
-import { useStartPython } from "@logics/useStartPython";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
 
-import { useStore_SelectableFontFamilyList } from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { useReceiveRoutes } from "@useReceiveRoutes";
+import { store, useStore_SelectableFontFamilyList } from "@store";
 import { arrayToObject } from "@utils";
 
+import {
+    useNotificationStatus,
+} from "@logics_common";
+
 export const StartPythonController = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
@@ -26,6 +31,34 @@ export const StartPythonController = () => {
     return null;
 };
 
+const useStartPython = () => {
+    const { receiveRoutes } = useReceiveRoutes();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
+    const asyncStartPython = async () => {
+        const command = Command.sidecar("bin/VRCT-sidecar");
+        command.on("error", error => console.error(`error: "${error}"`));
+        command.stdout.on("data", (line) => {
+            let parsed_data = "";
+            try {
+                parsed_data = JSON.parse(line);
+                receiveRoutes(parsed_data);
+            } catch (error) {
+                console.log(error, line);
+            }
+        });
+        command.stderr.on("data", line => {
+            showNotification_Error(
+                `An error occurred. Please restart VRCT or contact the developers. The last line:${JSON.stringify(line)}`, { hide_duration: null });
+            console.error("stderr", line);
+        });
+        const backend_subprocess = await command.spawn();
+        store.backend_subprocess = backend_subprocess;
+    };
+
+    return { asyncStartPython };
+};
+
 const useAsyncFetchFonts = () => {
     const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
     const asyncFetchFonts = async () => {

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -12,5 +12,4 @@ export { Slider } from "./slider/Slider";
 export { SwitchBox } from "./switch_box/SwitchBox";
 export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
-export { DownloadModels } from "./download_models/DownloadModels";
-export { PluginsControlComponent } from "./plugins_control_component/PluginsControlComponent";
+export { DownloadModels } from "./download_models/DownloadModels";

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

@@ -7,8 +7,7 @@ import { useVolume } from "@logics_common";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import {
-    useMicThreshold,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 export const ThresholdComponent = (props) => {
@@ -27,7 +26,7 @@ const MicComponent = (props) => {
         currentMicThreshold,
         setMicThreshold,
         currentEnableAutomaticMicThreshold,
-    } = useMicThreshold();
+    } = useDevice();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
     const {
         volumeCheckStart_Mic,
@@ -84,7 +83,7 @@ const SpeakerComponent = (props) => {
         currentSpeakerThreshold,
         setSpeakerThreshold,
         currentEnableAutomaticSpeakerThreshold,
-    } = useSpeakerThreshold();
+    } = useDevice();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold.data);
     const {
         volumeCheckStart_Speaker,

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

@@ -4,8 +4,7 @@ import {
     useStore_SpeakerVolume,
 } from "@store";
 import {
-    useMicThreshold,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 export const SliderAndMeter = (props) => {
@@ -24,7 +23,7 @@ export const SliderAndMeter = (props) => {
 const ThresholdVolumeMeter_Mic = (props) => {
     const { currentMicVolume } = useStore_MicVolume();
 
-    const { currentEnableAutomaticMicThreshold } = useMicThreshold();
+    const { currentEnableAutomaticMicThreshold } = useDevice();
 
     const currentVolumeVariable = Math.min(currentMicVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;
@@ -50,7 +49,7 @@ const ThresholdVolumeMeter_Mic = (props) => {
 const ThresholdVolumeMeter_Speaker = (props) => {
     const { currentSpeakerVolume } = useStore_SpeakerVolume();
 
-    const { currentEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
+    const { currentEnableAutomaticSpeakerThreshold } = useDevice();
 
     const currentVolumeVariable = Math.min(currentSpeakerVolume.data, props.max);
     const volume_width_percentage = (currentVolumeVariable / props.max) * 100;

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

@@ -4,16 +4,7 @@ import clsx from "clsx";
 import { useStore_IsBreakPoint } from "@store";
 import { ui_configs } from "@ui_configs";
 import {
-    useEnableAutoMicSelect,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useMicThreshold,
-    useEnableAutoSpeakerSelect,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerThreshold,
+    useDevice,
 } from "@logics_configs";
 
 import {
@@ -38,13 +29,21 @@ export const Device = () => {
 
 const Mic_Container = () => {
     const { t } = useTranslation();
-    const { currentEnableAutoMicSelect, toggleEnableAutoMicSelect } = useEnableAutoMicSelect();
-    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
-    const { currentMicDeviceList } = useMicDeviceList();
+    const {
+        currentEnableAutoMicSelect,
+        toggleEnableAutoMicSelect,
+        currentMicDeviceList,
+        currentMicHostList,
+
+        currentSelectedMicHost,
+        setSelectedMicHost,
+        currentSelectedMicDevice,
+        setSelectedMicDevice,
+
+        currentEnableAutomaticMicThreshold,
+        toggleEnableAutomaticMicThreshold,
+    } = useDevice();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
 
     const selectFunction_host = (selected_data) => {
         setSelectedMicHost(selected_data.selected_id);
@@ -139,11 +138,16 @@ const Mic_Container = () => {
 
 const Speaker_Container = () => {
     const { t } = useTranslation();
-    const { currentEnableAutoSpeakerSelect, toggleEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
-    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+    const {
+        currentEnableAutoSpeakerSelect,
+        toggleEnableAutoSpeakerSelect,
+        currentSpeakerDeviceList,
+        currentSelectedSpeakerDevice,
+        setSelectedSpeakerDevice,
+        currentEnableAutomaticSpeakerThreshold,
+        toggleEnableAutomaticSpeakerThreshold,
+    } = useDevice();
     const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
-    const { currentEnableAutomaticSpeakerThreshold, toggleEnableAutomaticSpeakerThreshold } = useSpeakerThreshold();
 
     const selectFunction = (selected_data) => {
         setSelectedSpeakerDevice(selected_data.selected_id);

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { usePlugins } from "@logics_configs";
 import styles from "./Plugins.module.scss";
-import { PluginsControlComponent } from "../_components/plugins_control_component/PluginsControlComponent";
+import { PluginsControlComponent } from "./plugins_control_component/PluginsControlComponent";
 import { useNotificationStatus } from "@logics_common";
 import ExternalLink from "@images/external_link.svg?react";
 

src-ui/app/config_page/setting_section/setting_box/plugins/plugins_control_component/PluginsControlComponent.jsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { SwitchBox } from "../index";
-import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
+import { SwitchBox } from "../../_components";
+import { _DownloadButton } from "../../_components/_atoms/_download_button/_DownloadButton";
 import styles from "./PluginsControlComponent.module.scss";
 import { useTranslation } from "react-i18next";
 

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -1,12 +1,12 @@
 import { useTranslation } from "react-i18next";
 
-import { useSelectableLanguageList } from "@logics_main";
+import { useLanguageSettings } from "@logics_main";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
 export const LanguageSelector = ({ title, onClickFunction }) => {
     const { t } = useTranslation();
-    const { currentSelectableLanguageList } = useSelectableLanguageList();
+    const { currentSelectableLanguageList } = useLanguageSettings();
 
     const groupLanguagesByFirstLetter = (languages) => {
         return languages.reduce((acc, { language, country }) => {

src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx

@@ -10,7 +10,7 @@ import { useLanguageSettings } from "@logics_main";
 export const LanguageSwapButton = () => {
     const [isHovered, setIsHovered] = useState(false);
     const { t } = useTranslation();
-    const { runLanguageSwap } = useLanguageSettings();
+    const { swapSelectedLanguages } = useLanguageSettings();
 
     const label = isHovered
         ? t("main_page.swap_button_label")
@@ -29,7 +29,7 @@ export const LanguageSwapButton = () => {
                 className={styles.swap_button_wrapper}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                onClick={runLanguageSwap}
+                onClick={swapSelectedLanguages}
             >
                 <NarrowArrowDownSvg className={clsx(styles.narrow_arrow_down_svg, styles.reverse)} />
                 <p className={labelClassName}>{label}</p>

src-ui/app/others/index.js

@@ -0,0 +1,6 @@
+export { WindowTitleBar } from "./window_title_bar/WindowTitleBar.jsx";
+export { SplashComponent } from "./splash_component/SplashComponent.jsx";
+export { UpdatingComponent } from "./updating_component/UpdatingComponent.jsx";
+export { ModalController } from "./modal_controller/ModalController.jsx";
+export { SnackbarController } from "./snackbar_controller/SnackbarController.jsx";
+export { AppErrorBoundary } from "./error_boundary/AppErrorBoundary.jsx";

src-ui/app/others/splash_component/SplashComponent.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import styles from "./SplashComponent.module.scss";
-import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
-import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
+import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer";
+import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer";
 import MegaphoneSvg from "@images/megaphone.svg?react";
 import XMarkSvg from "@images/cancel.svg?react";
 import { useWindow } from "@logics_common";

src-ui/logics/common/useHandleOscQuery.js

@@ -7,7 +7,10 @@ export const useHandleOscQuery = () => {
     const { showNotification_Warning } = useNotificationStatus();
     const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
 
-    const handleOscQuery = ({ is_osc_query_enabled, disabled_functions }) => {
+    const handleOscQuery = (payload) => {
+        const is_osc_query_enabled = payload.data;
+        const disabled_functions = payload.disabled_functions;
+
         if (is_osc_query_enabled) {
             updateEnableVrcMicMuteSync(prev => ({
                 ...prev.data,

src-ui/logics/common/useIsVrctAvailable.js

@@ -1,10 +1,21 @@
 import { useStore_IsVrctAvailable } from "@store";
+import { useNotificationStatus } from "@logics_common";
 
 export const useIsVrctAvailable = () => {
     const { currentIsVrctAvailable, updateIsVrctAvailable } = useStore_IsVrctAvailable();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
+    const handleAiModelsAvailability = (is_ai_models_available) => {
+        if (is_ai_models_available === false) {
+            updateIsVrctAvailable(false);
+            showNotification_Error("AI models have not been detected. Check the network connection and restart VRCT (it will download automatically, normally).", { hide_duration: null });
+        }
+    };
 
     return {
         currentIsVrctAvailable,
         updateIsVrctAvailable,
+
+        handleAiModelsAvailability,
     };
 };

src-ui/logics/common/useMessage.js

@@ -3,7 +3,7 @@ import {
     useStore_MessageInputValue,
 } from "@store";
 
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMessage = () => {
     const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs();
@@ -42,6 +42,9 @@ export const useMessage = () => {
             messages: {message: message},
         });
     };
+    const addSystemMessageLog_FromBackend = (payload) => {
+        addSystemMessageLog(payload.message);
+    };
 
     const updateSentMessageLogById = (payload) => {
         updateMessageLogs(updateItemById(payload.id, payload.translation));
@@ -66,6 +69,7 @@ export const useMessage = () => {
         currentMessageLogs,
         sendMessage,
         addSystemMessageLog,
+        addSystemMessageLog_FromBackend,
         updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,

src-ui/logics/common/useOpenFolder.js

@@ -1,17 +1,27 @@
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOpenFolder = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+
     const openFolder_MessageLogs = () => {
         asyncStdoutToPython("/run/open_filepath_logs");
     };
+    const openedFolder_MessageLogs = () => {
+        console.log("Opened Directory, Message Logs");
+    };
 
     const openFolder_ConfigFile = () => {
         asyncStdoutToPython("/run/open_filepath_config_file");
     };
+    const openedFolder_ConfigFile = () => {
+        console.log("Opened Directory, Config File");
+    };
 
     return {
         openFolder_MessageLogs,
         openFolder_ConfigFile,
+
+        openedFolder_MessageLogs,
+        openedFolder_ConfigFile,
     };
 };

src-ui/logics/common/useSoftwareVersion.js

@@ -1,7 +1,7 @@
 import semver from "semver";
 
 import { useStore_SoftwareVersion, useStore_LatestSoftwareVersionInfo } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSoftwareVersion = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -13,6 +13,13 @@ export const useSoftwareVersion = () => {
         asyncStdoutToPython("/get/data/version");
     };
 
+    const updateSoftwareVersionInfo = (payload) => {
+        updateLatestSoftwareVersionInfo(prev => ({
+            is_update_available: payload.is_update_available,
+            new_version: payload.new_version || prev.data.new_version,
+        }));
+    };
+
     const isPluginCompatible = (main_version, lower_version, upper_version) => {
         // lower_version 以上かつ upper_version 以下なら互換性ありと判定
         return semver.gte(main_version, lower_version) && semver.lte(main_version, upper_version);
@@ -32,6 +39,7 @@ export const useSoftwareVersion = () => {
         getSoftwareVersion,
         updateSoftwareVersion,
 
+        updateSoftwareVersionInfo,
         currentLatestSoftwareVersionInfo,
         updateLatestSoftwareVersionInfo,
 

src-ui/logics/common/useUpdateSoftware.js

@@ -1,4 +1,4 @@
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useUpdateSoftware = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/common/useVolume.js

@@ -5,7 +5,7 @@ import {
     useStore_SpeakerThresholdCheckStatus,
 } from "@store";
 
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/common/useWindow.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { currentMonitor, availableMonitors, PhysicalPosition, PhysicalSize } from "@tauri-apps/api/window";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 import { useStore_IsBreakPoint } from "@store";
 import { useUiScaling } from "@logics_configs";
 import { store } from "@store";

src-ui/logics/configs/advanced_settings/useOscIpAddress.js

@@ -1,5 +1,5 @@
 import { useStore_OscIpAddress } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOscIpAddress = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/advanced_settings/useOscPort.js

@@ -1,5 +1,5 @@
 import { useStore_OscPort } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 import { useNotificationStatus } from "@logics_common";
 
 export const useOscPort = () => {

src-ui/logics/configs/advanced_settings/useWebsocket.js

@@ -3,7 +3,7 @@ import {
     useStore_WebsocketHost,
     useStore_WebsocketPort,
 } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useWebsocket = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useMessageLogUiScaling.js

@@ -1,5 +1,5 @@
 import { useStore_MessageLogUiScaling } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMessageLogUiScaling = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useRestoreWindowGeometry.js

@@ -1,5 +1,5 @@
 // import { useStore_RestoreWindowGeometry } from "@store";
-// import { useStdoutToPython } from "@logics/useStdoutToPython";
+// import { useStdoutToPython } from "@useStdoutToPython";
 
 // export const useRestoreWindowGeometry = () => {
 //     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useSelectedFontFamily.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedFontFamily } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedFontFamily = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useSendMessageButtonType.js

@@ -1,5 +1,5 @@
 import { useStore_SendMessageButtonType } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSendMessageButtonType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useTransparency.js

@@ -1,5 +1,5 @@
 import { useStore_Transparency } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useTransparency = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useUiLanguage.js

@@ -1,5 +1,5 @@
 import { useStore_UiLanguage } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useUiLanguage = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/appearance/useUiScaling.js

@@ -1,5 +1,5 @@
 import { useStore_UiScaling } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useUiScaling = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/device/useDevice.js

@@ -0,0 +1,257 @@
+import {
+    useStore_EnableAutoMicSelect,
+    useStore_EnableAutoSpeakerSelect,
+
+    useStore_MicDeviceList,
+    useStore_MicHostList,
+    useStore_SpeakerDeviceList,
+
+    useStore_SelectedMicHost,
+    useStore_SelectedMicDevice,
+
+    useStore_SelectedSpeakerDevice,
+
+    useStore_MicThreshold,
+    useStore_EnableAutomaticMicThreshold,
+    useStore_SpeakerThreshold,
+    useStore_EnableAutomaticSpeakerThreshold,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { arrayToObject } from "@utils";
+
+export const useDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect, pendingEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
+    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect, pendingEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
+
+    const { currentMicDeviceList, updateMicDeviceList, pendingMicDeviceList } = useStore_MicDeviceList();
+    const { currentMicHostList, updateMicHostList, pendingMicHostList } = useStore_MicHostList();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList, pendingSpeakerDeviceList } = useStore_SpeakerDeviceList();
+
+    const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
+    const { currentSelectedMicDevice, updateSelectedMicDevice, pendingSelectedMicDevice } = useStore_SelectedMicDevice();
+
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice, pendingSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
+
+    const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
+    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold, pendingEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
+
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
+    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold, pendingEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
+
+    // Auto Select (Mic)
+    const getEnableAutoMicSelect = () => {
+        pendingEnableAutoMicSelect();
+        asyncStdoutToPython("/get/data/auto_mic_select");
+    };
+
+    const toggleEnableAutoMicSelect = () => {
+        pendingEnableAutoMicSelect();
+        if (currentEnableAutoMicSelect.data) {
+            asyncStdoutToPython("/set/disable/auto_mic_select");
+        } else {
+            asyncStdoutToPython("/set/enable/auto_mic_select");
+        }
+    };
+    // Auto Select (Speaker)
+    const getEnableAutoSpeakerSelect = () => {
+        pendingEnableAutoSpeakerSelect();
+        asyncStdoutToPython("/get/data/auto_speaker_select");
+    };
+
+    const toggleEnableAutoSpeakerSelect = () => {
+        pendingEnableAutoSpeakerSelect();
+        if (currentEnableAutoSpeakerSelect.data) {
+            asyncStdoutToPython("/set/disable/auto_speaker_select");
+        } else {
+            asyncStdoutToPython("/set/enable/auto_speaker_select");
+        }
+    };
+
+
+    // List (Mic device)
+    const getMicDeviceList = () => {
+        pendingMicDeviceList();
+        asyncStdoutToPython("/get/data/mic_device_list");
+    };
+
+    const updateMicDeviceList_FromBackend = (payload) => {
+        updateMicDeviceList(arrayToObject(payload));
+    };
+    // List (Mic host)
+    const getMicHostList = () => {
+        pendingMicHostList();
+        asyncStdoutToPython("/get/data/mic_host_list");
+    };
+
+    const updateMicHostList_FromBackend = (payload) => {
+        updateMicHostList(arrayToObject(payload));
+    };
+    // List (Speaker device)
+    const getSpeakerDeviceList = () => {
+        pendingSpeakerDeviceList();
+        asyncStdoutToPython("/get/data/speaker_device_list");
+    };
+
+    const updateSpeakerDeviceList_FromBackend = (payload) => {
+        updateSpeakerDeviceList(arrayToObject(payload));
+    };
+
+
+    // Selected (Mic host)
+    const getSelectedMicHost = () => {
+        pendingSelectedMicHost();
+        asyncStdoutToPython("/get/data/selected_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        pendingSelectedMicHost();
+        asyncStdoutToPython("/set/data/selected_mic_host", selected_mic_host);
+    };
+    // Selected (Mic device)
+    const getSelectedMicDevice = () => {
+        pendingSelectedMicDevice();
+        asyncStdoutToPython("/get/data/selected_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        pendingSelectedMicDevice();
+        asyncStdoutToPython("/set/data/selected_mic_device", selected_mic_device);
+    };
+
+    // Selected (Mic and Host)
+    const updateSelectedMicHostAndDevice = (payload) => {
+        updateSelectedMicHost(payload.host);
+        updateSelectedMicDevice(payload.device);
+    };
+
+    // Selected (Speaker device)
+    const getSelectedSpeakerDevice = () => {
+        pendingSelectedSpeakerDevice();
+        asyncStdoutToPython("/get/data/selected_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        pendingSelectedSpeakerDevice();
+        asyncStdoutToPython("/set/data/selected_speaker_device", selected_speaker_device);
+    };
+
+
+    // Threshold (Mic)
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/get/data/mic_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/set/data/mic_threshold", mic_threshold);
+    };
+
+    const getEnableAutomaticMicThreshold = () => {
+        pendingEnableAutomaticMicThreshold();
+        asyncStdoutToPython("/get/data/mic_automatic_threshold");
+    };
+
+    const toggleEnableAutomaticMicThreshold = () => {
+        pendingEnableAutomaticMicThreshold();
+        if (currentEnableAutomaticMicThreshold.data) {
+            asyncStdoutToPython("/set/disable/mic_automatic_threshold");
+        } else {
+            asyncStdoutToPython("/set/enable/mic_automatic_threshold");
+        }
+    };
+    // Threshold (Speaker)
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/get/data/speaker_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/set/data/speaker_threshold", speaker_threshold);
+    };
+
+    const getEnableAutomaticSpeakerThreshold = () => {
+        pendingEnableAutomaticSpeakerThreshold();
+        asyncStdoutToPython("/get/data/speaker_automatic_threshold");
+    };
+
+    const toggleEnableAutomaticSpeakerThreshold = () => {
+        pendingEnableAutomaticSpeakerThreshold();
+        if (currentEnableAutomaticSpeakerThreshold.data) {
+            asyncStdoutToPython("/set/disable/speaker_automatic_threshold");
+        } else {
+            asyncStdoutToPython("/set/enable/speaker_automatic_threshold");
+        }
+    };
+
+
+
+    return {
+        currentEnableAutoMicSelect,
+        getEnableAutoMicSelect,
+        updateEnableAutoMicSelect,
+        toggleEnableAutoMicSelect,
+
+        currentEnableAutoSpeakerSelect,
+        getEnableAutoSpeakerSelect,
+        updateEnableAutoSpeakerSelect,
+        toggleEnableAutoSpeakerSelect,
+
+
+        currentMicDeviceList,
+        getMicDeviceList,
+        updateMicDeviceList,
+        updateMicDeviceList_FromBackend,
+
+        currentMicHostList,
+        getMicHostList,
+        updateMicHostList,
+        updateMicHostList_FromBackend,
+
+        currentSpeakerDeviceList,
+        getSpeakerDeviceList,
+        updateSpeakerDeviceList,
+        updateSpeakerDeviceList_FromBackend,
+
+
+        currentSelectedMicHost,
+        getSelectedMicHost,
+        updateSelectedMicHost,
+        setSelectedMicHost,
+
+        currentSelectedMicDevice,
+        getSelectedMicDevice,
+        updateSelectedMicDevice,
+        setSelectedMicDevice,
+
+        updateSelectedMicHostAndDevice,
+
+
+        currentSelectedSpeakerDevice,
+        getSelectedSpeakerDevice,
+        updateSelectedSpeakerDevice,
+        setSelectedSpeakerDevice,
+
+
+        currentMicThreshold,
+        getMicThreshold,
+        setMicThreshold,
+        updateMicThreshold,
+
+        currentEnableAutomaticMicThreshold,
+        getEnableAutomaticMicThreshold,
+        toggleEnableAutomaticMicThreshold,
+        updateEnableAutomaticMicThreshold,
+
+        currentSpeakerThreshold,
+        getSpeakerThreshold,
+        setSpeakerThreshold,
+        updateSpeakerThreshold,
+
+        currentEnableAutomaticSpeakerThreshold,
+        getEnableAutomaticSpeakerThreshold,
+        toggleEnableAutomaticSpeakerThreshold,
+        updateEnableAutomaticSpeakerThreshold,
+
+
+    };
+};

src-ui/logics/configs/device/useEnableAutoMicSelect.js

@@ -1,28 +0,0 @@
-import { useStore_EnableAutoMicSelect } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useEnableAutoMicSelect = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoMicSelect, updateEnableAutoMicSelect, pendingEnableAutoMicSelect } = useStore_EnableAutoMicSelect();
-
-    const getEnableAutoMicSelect = () => {
-        pendingEnableAutoMicSelect();
-        asyncStdoutToPython("/get/data/auto_mic_select");
-    };
-
-    const toggleEnableAutoMicSelect = () => {
-        pendingEnableAutoMicSelect();
-        if (currentEnableAutoMicSelect.data) {
-            asyncStdoutToPython("/set/disable/auto_mic_select");
-        } else {
-            asyncStdoutToPython("/set/enable/auto_mic_select");
-        }
-    };
-
-    return {
-        currentEnableAutoMicSelect,
-        getEnableAutoMicSelect,
-        updateEnableAutoMicSelect,
-        toggleEnableAutoMicSelect,
-    };
-};

src-ui/logics/configs/device/useEnableAutoSpeakerSelect.js

@@ -1,28 +0,0 @@
-import { useStore_EnableAutoSpeakerSelect } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useEnableAutoSpeakerSelect = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoSpeakerSelect, updateEnableAutoSpeakerSelect, pendingEnableAutoSpeakerSelect } = useStore_EnableAutoSpeakerSelect();
-
-    const getEnableAutoSpeakerSelect = () => {
-        pendingEnableAutoSpeakerSelect();
-        asyncStdoutToPython("/get/data/auto_speaker_select");
-    };
-
-    const toggleEnableAutoSpeakerSelect = () => {
-        pendingEnableAutoSpeakerSelect();
-        if (currentEnableAutoSpeakerSelect.data) {
-            asyncStdoutToPython("/set/disable/auto_speaker_select");
-        } else {
-            asyncStdoutToPython("/set/enable/auto_speaker_select");
-        }
-    };
-
-    return {
-        currentEnableAutoSpeakerSelect,
-        getEnableAutoSpeakerSelect,
-        updateEnableAutoSpeakerSelect,
-        toggleEnableAutoSpeakerSelect,
-    };
-};

src-ui/logics/configs/device/useMicDeviceList.js

@@ -1,18 +0,0 @@
-import { useStore_MicDeviceList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useMicDeviceList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicDeviceList, updateMicDeviceList, pendingMicDeviceList } = useStore_MicDeviceList();
-
-    const getMicDeviceList = () => {
-        pendingMicDeviceList();
-        asyncStdoutToPython("/get/data/mic_device_list");
-    };
-
-    return {
-        currentMicDeviceList,
-        getMicDeviceList,
-        updateMicDeviceList,
-    };
-};

src-ui/logics/configs/device/useMicHostList.js

@@ -1,18 +0,0 @@
-import { useStore_MicHostList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useMicHostList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicHostList, updateMicHostList, pendingMicHostList } = useStore_MicHostList();
-
-    const getMicHostList = () => {
-        pendingMicHostList();
-        asyncStdoutToPython("/get/data/mic_host_list");
-    };
-
-    return {
-        currentMicHostList,
-        getMicHostList,
-        updateMicHostList,
-    };
-};

src-ui/logics/configs/device/useMicThreshold.js

@@ -1,42 +0,0 @@
-import { useStore_MicThreshold, useStore_EnableAutomaticMicThreshold } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useMicThreshold = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateMicThreshold, currentMicThreshold } = useStore_MicThreshold();
-    const { updateEnableAutomaticMicThreshold, currentEnableAutomaticMicThreshold, pendingEnableAutomaticMicThreshold } = useStore_EnableAutomaticMicThreshold();
-
-    const getMicThreshold = () => {
-        asyncStdoutToPython("/get/data/mic_threshold");
-    };
-
-    const setMicThreshold = (mic_threshold) => {
-        asyncStdoutToPython("/set/data/mic_threshold", mic_threshold);
-    };
-
-    const getEnableAutomaticMicThreshold = () => {
-        pendingEnableAutomaticMicThreshold();
-        asyncStdoutToPython("/get/data/mic_automatic_threshold");
-    };
-
-    const toggleEnableAutomaticMicThreshold = () => {
-        pendingEnableAutomaticMicThreshold();
-        if (currentEnableAutomaticMicThreshold.data) {
-            asyncStdoutToPython("/set/disable/mic_automatic_threshold");
-        } else {
-            asyncStdoutToPython("/set/enable/mic_automatic_threshold");
-        }
-    };
-
-    return {
-        currentMicThreshold,
-        getMicThreshold,
-        setMicThreshold,
-        updateMicThreshold,
-
-        currentEnableAutomaticMicThreshold,
-        getEnableAutomaticMicThreshold,
-        toggleEnableAutomaticMicThreshold,
-        updateEnableAutomaticMicThreshold,
-    };
-};

src-ui/logics/configs/device/useSelectedMicDevice.js

@@ -1,24 +0,0 @@
-import { useStore_SelectedMicDevice } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useSelectedMicDevice = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicDevice, updateSelectedMicDevice, pendingSelectedMicDevice } = useStore_SelectedMicDevice();
-
-    const getSelectedMicDevice = () => {
-        pendingSelectedMicDevice();
-        asyncStdoutToPython("/get/data/selected_mic_device");
-    };
-
-    const setSelectedMicDevice = (selected_mic_device) => {
-        pendingSelectedMicDevice();
-        asyncStdoutToPython("/set/data/selected_mic_device", selected_mic_device);
-    };
-
-    return {
-        currentSelectedMicDevice,
-        getSelectedMicDevice,
-        updateSelectedMicDevice,
-        setSelectedMicDevice,
-    };
-};

src-ui/logics/configs/device/useSelectedMicHost.js

@@ -1,24 +0,0 @@
-import { useStore_SelectedMicHost } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useSelectedMicHost = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedMicHost, updateSelectedMicHost, pendingSelectedMicHost } = useStore_SelectedMicHost();
-
-    const getSelectedMicHost = () => {
-        pendingSelectedMicHost();
-        asyncStdoutToPython("/get/data/selected_mic_host");
-    };
-
-    const setSelectedMicHost = (selected_mic_host) => {
-        pendingSelectedMicHost();
-        asyncStdoutToPython("/set/data/selected_mic_host", selected_mic_host);
-    };
-
-    return {
-        currentSelectedMicHost,
-        getSelectedMicHost,
-        updateSelectedMicHost,
-        setSelectedMicHost,
-    };
-};

src-ui/logics/configs/device/useSelectedSpeakerDevice.js

@@ -1,24 +0,0 @@
-import { useStore_SelectedSpeakerDevice } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useSelectedSpeakerDevice = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice, pendingSelectedSpeakerDevice } = useStore_SelectedSpeakerDevice();
-
-    const getSelectedSpeakerDevice = () => {
-        pendingSelectedSpeakerDevice();
-        asyncStdoutToPython("/get/data/selected_speaker_device");
-    };
-
-    const setSelectedSpeakerDevice = (selected_speaker_device) => {
-        pendingSelectedSpeakerDevice();
-        asyncStdoutToPython("/set/data/selected_speaker_device", selected_speaker_device);
-    };
-
-    return {
-        currentSelectedSpeakerDevice,
-        getSelectedSpeakerDevice,
-        updateSelectedSpeakerDevice,
-        setSelectedSpeakerDevice,
-    };
-};

src-ui/logics/configs/device/useSpeakerDeviceList.js

@@ -1,18 +0,0 @@
-import { useStore_SpeakerDeviceList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useSpeakerDeviceList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerDeviceList, updateSpeakerDeviceList, pendingSpeakerDeviceList } = useStore_SpeakerDeviceList();
-
-    const getSpeakerDeviceList = () => {
-        pendingSpeakerDeviceList();
-        asyncStdoutToPython("/get/data/speaker_device_list");
-    };
-
-    return {
-        currentSpeakerDeviceList,
-        getSpeakerDeviceList,
-        updateSpeakerDeviceList,
-    };
-};

src-ui/logics/configs/device/useSpeakerThreshold.js

@@ -1,42 +0,0 @@
-import { useStore_SpeakerThreshold, useStore_EnableAutomaticSpeakerThreshold } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-
-export const useSpeakerThreshold = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStore_SpeakerThreshold();
-    const { updateEnableAutomaticSpeakerThreshold, currentEnableAutomaticSpeakerThreshold, pendingEnableAutomaticSpeakerThreshold } = useStore_EnableAutomaticSpeakerThreshold();
-
-    const getSpeakerThreshold = () => {
-        asyncStdoutToPython("/get/data/speaker_threshold");
-    };
-
-    const setSpeakerThreshold = (speaker_threshold) => {
-        asyncStdoutToPython("/set/data/speaker_threshold", speaker_threshold);
-    };
-
-    const getEnableAutomaticSpeakerThreshold = () => {
-        pendingEnableAutomaticSpeakerThreshold();
-        asyncStdoutToPython("/get/data/speaker_automatic_threshold");
-    };
-
-    const toggleEnableAutomaticSpeakerThreshold = () => {
-        pendingEnableAutomaticSpeakerThreshold();
-        if (currentEnableAutomaticSpeakerThreshold.data) {
-            asyncStdoutToPython("/set/disable/speaker_automatic_threshold");
-        } else {
-            asyncStdoutToPython("/set/enable/speaker_automatic_threshold");
-        }
-    };
-
-    return {
-        currentSpeakerThreshold,
-        getSpeakerThreshold,
-        setSpeakerThreshold,
-        updateSpeakerThreshold,
-
-        currentEnableAutomaticSpeakerThreshold,
-        getEnableAutomaticSpeakerThreshold,
-        toggleEnableAutomaticSpeakerThreshold,
-        updateEnableAutomaticSpeakerThreshold,
-    };
-};

src-ui/logics/configs/hotkeys/useHotkeys.js

@@ -1,5 +1,5 @@
 import { store, useStore_Hotkeys } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 import { useNotificationStatus } from "@logics_common";
 import { useMainFunction } from "@logics_main";
 import { register, unregisterAll, isRegistered } from "@tauri-apps/plugin-global-shortcut";

src-ui/logics/configs/index.js

@@ -1,13 +1,4 @@
-export { useEnableAutoMicSelect } from "./device/useEnableAutoMicSelect";
-export { useEnableAutoSpeakerSelect } from "./device/useEnableAutoSpeakerSelect";
-export { useMicDeviceList } from "./device/useMicDeviceList";
-export { useMicHostList } from "./device/useMicHostList";
-export { useMicThreshold } from "./device/useMicThreshold";
-export { useSelectedMicDevice } from "./device/useSelectedMicDevice";
-export { useSelectedMicHost } from "./device/useSelectedMicHost";
-export { useSelectedSpeakerDevice } from "./device/useSelectedSpeakerDevice";
-export { useSpeakerDeviceList } from "./device/useSpeakerDeviceList";
-export { useSpeakerThreshold } from "./device/useSpeakerThreshold";
+export { useDevice } from "./device/useDevice";
 
 export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
 export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";

src-ui/logics/configs/others/useEnableAutoClearMessageInputBox.js

@@ -1,5 +1,5 @@
 import { useStore_EnableAutoClearMessageInputBox } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableAutoClearMessageInputBox = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableAutoExportMessageLogs.js

@@ -1,5 +1,5 @@
 import { useStore_EnableAutoExportMessageLogs } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableAutoExportMessageLogs = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableNotificationVrcSfx.js

@@ -1,5 +1,5 @@
 import { useStore_EnableNotificationVrcSfx } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableNotificationVrcSfx = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableSendMessageToVrc.js

@@ -1,5 +1,5 @@
 import { useStore_EnableSendMessageToVrc } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableSendMessageToVrc = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableSendOnlyTranslatedMessages.js

@@ -1,5 +1,5 @@
 import { useStore_EnableSendOnlyTranslatedMessages } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableSendOnlyTranslatedMessages = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableSendReceivedMessageToVrc.js

@@ -1,5 +1,5 @@
 import { useStore_EnableSendReceivedMessageToVrc } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableSendReceivedMessageToVrc = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/others/useEnableVrcMicMuteSync.js

@@ -1,5 +1,5 @@
 import { useStore_EnableVrcMicMuteSync } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useEnableVrcMicMuteSync = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -19,10 +19,18 @@ export const useEnableVrcMicMuteSync = () => {
         }
     };
 
+    const updateEnableVrcMicMuteSync_FromBackend = (payload) => {
+        updateEnableVrcMicMuteSync((old_value) => {
+            return {...old_value.data, is_enabled: payload};
+        });
+    };
+
     return {
         currentEnableVrcMicMuteSync,
         getEnableVrcMicMuteSync,
         toggleEnableVrcMicMuteSync,
         updateEnableVrcMicMuteSync,
+
+        updateEnableVrcMicMuteSync_FromBackend,
     };
 };

src-ui/logics/configs/others/useSendMessageButtonType.js

@@ -1,5 +1,5 @@
 import { useStore_SendMessageButtonType } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSendMessageButtonType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/plugins/usePlugins.js

@@ -11,7 +11,7 @@ import {
     useStore_FetchedPluginsInfo,
     useStore_LoadedPlugins,
 } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 import { transform } from "@babel/standalone";
 import { writeFile, mkdir, exists, remove, readDir, BaseDirectory, readTextFile } from "@tauri-apps/plugin-fs";

src-ui/logics/configs/transcription/useMicMaxWords.js

@@ -1,5 +1,5 @@
 import { useStore_MicMaxWords } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMicMaxWords = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useMicPhraseTimeout.js

@@ -1,5 +1,5 @@
 import { useStore_MicPhraseTimeout } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMicPhraseTimeout = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useMicRecordTimeout.js

@@ -1,5 +1,5 @@
 import { useStore_MicRecordTimeout } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMicRecordTimeout = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useMicWordFilterList.js

@@ -1,5 +1,5 @@
 import { useStore_MicWordFilterList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useMicWordFilterList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -15,10 +15,27 @@ export const useMicWordFilterList = () => {
         asyncStdoutToPython("/set/data/mic_word_filter", selected_mic_word_filter);
     };
 
+    const updateMicWordFilterList_FromBackend = (payload) => {
+        updateMicWordFilterList((prev_list) => {
+            const updated_list = [...prev_list.data];
+            for (const value of payload) {
+                const existing_item = updated_list.find(item => item.value === value);
+                if (existing_item) {
+                    existing_item.is_redoable = false;
+                } else {
+                    updated_list.push({ value, is_redoable: false });
+                }
+            }
+            return updated_list;
+        });
+    };
+
     return {
         currentMicWordFilterList,
         getMicWordFilterList,
         updateMicWordFilterList,
         setMicWordFilterList,
+
+        updateMicWordFilterList_FromBackend,
     };
 };

src-ui/logics/configs/transcription/useSelectableWhisperComputeDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_SelectableWhisperComputeDeviceList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { transformToIndexedArray } from "@utils";
 
 export const useSelectableWhisperComputeDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,15 @@ export const useSelectableWhisperComputeDeviceList = () => {
         asyncStdoutToPython("/get/data/transcription_compute_device_list");
     };
 
+    const updateSelectableWhisperComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload));
+    };
+
     return {
         currentSelectableWhisperComputeDeviceList,
         getSelectableWhisperComputeDeviceList,
         updateSelectableWhisperComputeDeviceList,
+
+        updateSelectableWhisperComputeDeviceList_FromBackend,
     };
 };

src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedTranscriptionEngine } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedTranscriptionEngine = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useSelectedWhisperComputeDevice.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedWhisperComputeDevice } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedWhisperComputeDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useSelectedWhisperWeightType.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedWhisperWeightType } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedWhisperWeightType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useSpeakerMaxWords.js

@@ -1,5 +1,5 @@
 import { useStore_SpeakerMaxWords } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSpeakerMaxWords = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useSpeakerPhraseTimeout.js

@@ -1,5 +1,5 @@
 import { useStore_SpeakerPhraseTimeout } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSpeakerPhraseTimeout = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useSpeakerRecordTimeout.js

@@ -1,5 +1,5 @@
 import { useStore_SpeakerRecordTimeout } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSpeakerRecordTimeout = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/transcription/useWhisperWeightTypeStatus.js

@@ -1,5 +1,5 @@
 import { useStore_WhisperWeightTypeStatus } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useWhisperWeightTypeStatus = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/translation/useCTranslate2WeightTypeStatus.js

@@ -1,5 +1,5 @@
 import { useStore_CTranslate2WeightTypeStatus } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useCTranslate2WeightTypeStatus = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/translation/useDeepLAuthKey.js

@@ -1,5 +1,5 @@
 import { useStore_DeepLAuthKey } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 import { useTranslation } from "react-i18next";
 import { useNotificationStatus } from "@logics_common";
 
@@ -23,6 +23,9 @@ export const useDeepLAuthKey = () => {
         pendingDeepLAuthKey();
         asyncStdoutToPython("/delete/data/deepl_auth_key");
     };
+    const deletedDeepLAuthKey = () => {
+        updateDeepLAuthKey("");
+    };
 
     const savedDeepLAuthKey = (data) => {
         updateDeepLAuthKey(data);
@@ -36,6 +39,7 @@ export const useDeepLAuthKey = () => {
         setDeepLAuthKey,
         deleteDeepLAuthKey,
 
+        deletedDeepLAuthKey,
         savedDeepLAuthKey,
     };
 };

src-ui/logics/configs/translation/useSelectableCTranslate2ComputeDeviceList.js

@@ -1,5 +1,6 @@
 import { useStore_SelectableCTranslate2ComputeDeviceList } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { transformToIndexedArray } from "@utils";
 
 export const useSelectableCTranslate2ComputeDeviceList = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
@@ -10,9 +11,15 @@ export const useSelectableCTranslate2ComputeDeviceList = () => {
         asyncStdoutToPython("/get/data/translation_compute_device_list");
     };
 
+    const updateSelectableCTranslate2ComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload));
+    };
+
     return {
         currentSelectableCTranslate2ComputeDeviceList,
         getSelectableCTranslate2ComputeDeviceList,
         updateSelectableCTranslate2ComputeDeviceList,
+
+        updateSelectableCTranslate2ComputeDeviceList_FromBackend,
     };
 };

src-ui/logics/configs/translation/useSelectedCTranslate2ComputeDevice.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedCTranslate2ComputeDevice } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedCTranslate2ComputeDevice = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/translation/useSelectedCTranslate2WeightType.js

@@ -1,5 +1,5 @@
 import { useStore_SelectedCTranslate2WeightType } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSelectedCTranslate2WeightType = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js

@@ -1,5 +1,5 @@
 import { useStore_IsEnabledOverlayLargeLog } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useIsEnabledOverlayLargeLog = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js

@@ -1,5 +1,5 @@
 import { useStore_IsEnabledOverlaySmallLog } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useIsEnabledOverlaySmallLog = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useOverlayLargeLogSettings.js

@@ -1,5 +1,5 @@
 import { useStore_OverlayLargeLogSettings } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOverlayLargeLogSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js

@@ -1,5 +1,5 @@
 import { useStore_OverlayShowOnlyTranslatedMessages } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOverlayShowOnlyTranslatedMessages = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useOverlaySmallLogSettings.js

@@ -1,5 +1,5 @@
 import { useStore_OverlaySmallLogSettings } from "@store";
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useOverlaySmallLogSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/configs/vr/useSendTextToOverlay.js

@@ -1,4 +1,4 @@
-import { useStdoutToPython } from "@logics/useStdoutToPython";
+import { useStdoutToPython } from "@useStdoutToPython";
 
 export const useSendTextToOverlay = () => {
     const { asyncStdoutToPython } = useStdoutToPython();

src-ui/logics/main/index.js

@@ -3,5 +3,4 @@ export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
 export { useLanguageSettings } from "./useLanguageSettings";
 export { useMainFunction } from "./useMainFunction";
 export { useMessageLogScroll } from "./useMessageLogScroll";
-export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";
-export { useSelectableLanguageList } from "./useSelectableLanguageList";
+export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";