Merge branch 'ui_refactoring' into develop

locales/useI18n.js

@@ -0,0 +1,11 @@
+// To avoid a name conflict with our own `useTranslation` function,
+// rename the one from `react-i18next` to `useI18n`.
+// This is aliased via `vite.config.js`, so it can be imported using `@useI18n`.
+// Example:
+// import { useI18n } from "@useI18n";
+//
+// export const useTranslation = () => {
+//     const { t } = useI18n();
+//     ...
+// };
+export { useTranslation as useI18n } from "react-i18next";

src-ui/app/App.jsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import {
     KeyEventController,
@@ -32,7 +32,7 @@ import { useIsBackendReady, useIsSoftwareUpdating, useIsVrctAvailable, useWindow
 export const App = () => {
     const { currentIsVrctAvailable } = useIsVrctAvailable();
     const { currentIsBackendReady } = useIsBackendReady();
-    const { i18n } = useTranslation();
+    const { i18n } = useI18n();
 
     return (
         <div className={styles.container}>

src-ui/app/_app_controllers/FontFamilyController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useSelectedFontFamily } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const FontFamilyController = () => {
-    const { currentSelectedFontFamily } = useSelectedFontFamily();
+    const { currentSelectedFontFamily } = useAppearance();
     useEffect(() => {
         document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data);
     }, [currentSelectedFontFamily.data]);

src-ui/app/_app_controllers/TransparencyController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useTransparency } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const TransparencyController = () => {
-    const { currentTransparency } = useTransparency();
+    const { currentTransparency } = useAppearance();
     useEffect(() => {
         document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
     }, [currentTransparency.data]);

src-ui/app/_app_controllers/UiLanguageController.jsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 
-import { useTranslation } from "react-i18next";
-import { useUiLanguage } from "@logics_configs";
+import { useI18n } from "@useI18n";
+import { useAppearance } from "@logics_configs";
 
 export const UiLanguageController = () => {
-    const { currentUiLanguage } = useUiLanguage();
-    const { i18n } = useTranslation();
+    const { currentUiLanguage } = useAppearance();
+    const { i18n } = useI18n();
 
     useEffect(() => {
         i18n.changeLanguage(currentUiLanguage.data);

src-ui/app/_app_controllers/UiSizeController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useUiScaling } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const UiSizeController = () => {
-    const { currentUiScaling } = useUiScaling();
+    const { currentUiScaling } = useAppearance();
     const font_size = 62.5 * currentUiScaling.data / 100;
 
     useEffect(() => {

src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { store } from "@store";
 import { usePlugins } from "@logics_configs";
 import { useSoftwareVersion } from "@logics_common";
 import { useNotificationStatus } from "@logics_common";
 
 export const MergePluginsController = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentLoadedPlugins,
         updatePluginsData,

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.jsx

@@ -1,9 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import CircularProgress from "@mui/material/CircularProgress";
 import styles from "./_DownloadButton.module.scss";
 
 export const _DownloadButton = ({option, ...props}) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const renderContent = () => {
         const circular_progress = Math.floor(option.progress / 10) * 10;

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.jsx

@@ -1,5 +1,5 @@
 import styles from "./DeeplAuthKey.module.scss";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
 import ExternalLink from "@images/external_link.svg?react";
@@ -8,7 +8,7 @@ import { useState, useRef } from "react";
 import { useEffect } from "react";
 
 export const DeeplAuthKey = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const [is_editable, seIsEditable] = useState(false);
     const entryRef = useRef(null);
 
@@ -60,7 +60,7 @@ export const DeeplAuthKey = (props) => {
 
 
 export const OpenWebpage_DeeplAuthKey = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div className={styles.open_webpage_button_wrapper}>
             <a className={styles.open_webpage_button} href="https://www.deepl.com/ja/your-account/keys" target="_blank" rel="noreferrer" >

src-ui/app/config_page/setting_section/setting_box/_components/entry_with_save_button/EntryWithSaveButton.jsx

@@ -1,11 +1,11 @@
 import styles from "./EntryWithSaveButton.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import CircularProgress from "@mui/material/CircularProgress";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { clsx } from "clsx";
 
 export const EntryWithSaveButton = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const onChangeFunction = (e) => {
         props.onChangeFunction?.(e.target.value);
     };

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./VolumeCheckButton.module.scss";
 
 export const VolumeCheckButton = React.memo((props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_active]: (props.isChecking?.data === true),
         [styles.is_pending]: (props.isChecking.state === "pending"),

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

@@ -1,15 +1,15 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
 import { useStore_IsOpenedMicWordFilterList } from "@store";
-import { useMicWordFilterList } from "@logics_configs";
+import { useTranscription } from "@logics_configs";
 
 export const WordFilter = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const [input_value, setInputValue] = useState("");
-    const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useMicWordFilterList();
+    const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useTranscription();
     const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
 
     const extractRedoableFalseItem = (updated_list) => {
@@ -126,9 +126,9 @@ const WordFilterItem = (props) => {
 
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 export const WordFilterListToggleComponent = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
-    const { currentMicWordFilterList } = useMicWordFilterList();
+    const { currentMicWordFilterList } = useTranscription();
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {

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

@@ -27,12 +27,12 @@ import special_thanks_message_ja from "@images/about_vrct/special_thanks_message
 import poster_showcase_section_title from "@images/about_vrct/poster_showcase_section_title.png";
 
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { useStore_UiLanguage } from "@store";
 import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
 
 export const AboutVrct = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentUiLanguage } = useStore_UiLanguage();
     return (
         <div className={styles.container}>

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -1,12 +1,10 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./AdvancedSettings.module.scss";
 
 import { useOpenFolder } from "@logics_common";
 import {
-    useOscIpAddress,
-    useOscPort,
-    useWebsocket,
+    useAdvancedSettings,
 } from "@logics_configs";
 
 import {
@@ -37,8 +35,8 @@ export const AdvancedSettings = () => {
 };
 
 const OscIpAddressContainer = () => {
-    const { t } = useTranslation();
-    const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
+    const { t } = useI18n();
+    const { currentOscIpAddress, setOscIpAddress } = useAdvancedSettings();
     const [input_value, setInputValue] = useState(currentOscIpAddress.data);
 
     const onChangeFunction = (value) => {
@@ -67,8 +65,8 @@ const OscIpAddressContainer = () => {
 };
 
 const OscPortContainer = () => {
-    const { t } = useTranslation();
-    const { currentOscPort, setOscPort } = useOscPort();
+    const { t } = useI18n();
+    const { currentOscPort, setOscPort } = useAdvancedSettings();
     const [input_value, setInputValue] = useState(currentOscPort.data);
 
     const onChangeFunction = (value) => {
@@ -98,7 +96,7 @@ const OscPortContainer = () => {
 };
 
 const OpenConfigFolderContainer = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { openFolder_ConfigFile } = useOpenFolder();
 
     return (
@@ -115,7 +113,7 @@ const OpenConfigFolderContainer = () => {
 // Duplicate
 import { useStore_OpenedQuickSetting } from "@store";
 const OpenSwitchComputeDeviceModalContainer = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const onClickFunction = () => {
         updateOpenedQuickSetting("update_software");
@@ -145,8 +143,8 @@ const WebsocketContainer = () => {
 };
 
 const EnableWebsocketContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableWebsocket, toggleEnableWebsocket } = useWebsocket();
+    const { t } = useI18n();
+    const { currentEnableWebsocket, toggleEnableWebsocket } = useAdvancedSettings();
 
     return (
         <CheckboxContainer
@@ -158,8 +156,8 @@ const EnableWebsocketContainer = () => {
 };
 
 const WebsocketHostContainer = () => {
-    const { t } = useTranslation();
-    const { currentWebsocketHost, setWebsocketHost } = useWebsocket();
+    const { t } = useI18n();
+    const { currentWebsocketHost, setWebsocketHost } = useAdvancedSettings();
     const [input_value, setInputValue] = useState(currentWebsocketHost.data);
 
     const onChangeFunction = (value) => {
@@ -188,8 +186,8 @@ const WebsocketHostContainer = () => {
 };
 
 const WebsocketPortContainer = () => {
-    const { t } = useTranslation();
-    const { currentWebsocketPort, setWebsocketPort } = useWebsocket();
+    const { t } = useI18n();
+    const { currentWebsocketPort, setWebsocketPort } = useAdvancedSettings();
     const [input_value, setInputValue] = useState(currentWebsocketPort.data);
 
     const onChangeFunction = (value) => {

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

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./Appearance.module.scss";
 import { ui_configs } from "@ui_configs";
 import { useStore_SelectableFontFamilyList } from "@store";
@@ -10,13 +10,7 @@ import {
 } from "@logics_common";
 
 import {
-    useUiLanguage,
-    useUiScaling,
-    useMessageLogUiScaling,
-    useSendMessageButtonType,
-    useShowResendButton,
-    useSelectedFontFamily,
-    useTransparency,
+    useAppearance,
 } from "@logics_configs";
 
 import {
@@ -41,8 +35,8 @@ export const Appearance = () => {
 };
 
 const UiLanguageContainer = () => {
-    const { t } = useTranslation();
-    const { currentUiLanguage, setUiLanguage } = useUiLanguage();
+    const { t } = useI18n();
+    const { currentUiLanguage, setUiLanguage } = useAppearance();
 
     const is_not_en_lang = currentUiLanguage.data !== "en" && currentUiLanguage.data !== undefined;
     return (
@@ -58,8 +52,8 @@ const UiLanguageContainer = () => {
 };
 
 const UiScalingContainer = () => {
-    const { t } = useTranslation();
-    const { currentUiScaling, setUiScaling } = useUiScaling();
+    const { t } = useI18n();
+    const { currentUiScaling, setUiScaling } = useAppearance();
     const { asyncUpdateBreakPoint } = useWindow();
 
     const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
@@ -103,8 +97,8 @@ const UiScalingContainer = () => {
 
 
 export const MessageLogUiScalingContainer = () => {
-    const { t } = useTranslation();
-    const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling();
+    const { t } = useI18n();
+    const { currentMessageLogUiScaling, setMessageLogUiScaling } = useAppearance();
     const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);
 
     const onchangeFunction = (value) => {
@@ -144,8 +138,8 @@ export const MessageLogUiScalingContainer = () => {
 };
 
 const SendMessageButtonTypeContainer = () => {
-    const { t } = useTranslation();
-    const { currentSendMessageButtonType, setSendMessageButtonType } = useSendMessageButtonType();
+    const { t } = useI18n();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useAppearance();
 
     return (
         <RadioButtonContainer
@@ -164,8 +158,8 @@ const SendMessageButtonTypeContainer = () => {
 };
 
 const ShowResendButtonContainer = () => {
-    const { t } = useTranslation();
-    const { currentShowResendButton, toggleShowResendButton } = useShowResendButton();
+    const { t } = useI18n();
+    const { currentShowResendButton, toggleShowResendButton } = useAppearance();
 
     return (
         <CheckboxContainer
@@ -178,8 +172,8 @@ const ShowResendButtonContainer = () => {
 };
 
 const FontFamilyContainer = () => {
-    const { t } = useTranslation();
-    const { currentSelectedFontFamily, setSelectedFontFamily } = useSelectedFontFamily();
+    const { t } = useI18n();
+    const { currentSelectedFontFamily, setSelectedFontFamily } = useAppearance();
 
     const selectFunction = (selected_data) => {
         setSelectedFontFamily(selected_data.selected_id);
@@ -199,8 +193,8 @@ const FontFamilyContainer = () => {
 };
 
 const TransparencyContainer = () => {
-    const { t } = useTranslation();
-    const { currentTransparency, setTransparency } = useTransparency();
+    const { t } = useI18n();
+    const { currentTransparency, setTransparency } = useAppearance();
     const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
 
     const onchangeFunction = (value) => {

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./Device.module.scss";
 import clsx from "clsx";
 import { useStore_IsBreakPoint } from "@store";
@@ -28,7 +28,7 @@ export const Device = () => {
 };
 
 const Mic_Container = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentEnableAutoMicSelect,
         toggleEnableAutoMicSelect,
@@ -137,7 +137,7 @@ const Mic_Container = () => {
 };
 
 const Speaker_Container = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentEnableAutoSpeakerSelect,
         toggleEnableAutoSpeakerSelect,

src-ui/app/config_page/setting_section/setting_box/hotkeys/Hotkeys.jsx

@@ -1,7 +1,7 @@
 import { useHotkeys } from "@logics_configs";
 import styles from "./Hotkeys.module.scss";
 import { HotkeysEntryContainer } from "../_templates/Templates";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 export const Hotkeys = () => {
     return (
         <div className={styles.container}>
@@ -11,7 +11,7 @@ export const Hotkeys = () => {
 };
 
 const HotkeysBoxContainer = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentHotkeys, setHotkeys } = useHotkeys();
 
     return (

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

@@ -1,15 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./Others.module.scss";
 
 import { useOpenFolder } from "@logics_common";
 import {
-    useEnableAutoClearMessageInputBox,
-    useEnableSendOnlyTranslatedMessages,
-    useEnableAutoExportMessageLogs,
-    useEnableVrcMicMuteSync,
-    useEnableSendMessageToVrc,
-    useEnableSendReceivedMessageToVrc,
-    useEnableNotificationVrcSfx,
+    useOthers,
 } from "@logics_configs";
 
 import {
@@ -26,7 +20,7 @@ import { Checkbox } from "@common_components";
 import OpenFolderSvg from "@images/open_folder.svg?react";
 
 export const Others = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     return (
         <div className={styles.container}>
@@ -50,8 +44,8 @@ export const Others = () => {
 };
 
 const AutoClearMessageInputBoxContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
+    const { t } = useI18n();
+    const { currentEnableAutoClearMessageInputBox, toggleEnableAutoClearMessageInputBox } = useOthers();
 
     return (
         <CheckboxContainer
@@ -62,8 +56,8 @@ const AutoClearMessageInputBoxContainer = () => {
     );
 };
 const SendOnlyTranslatedMessagesContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableSendOnlyTranslatedMessages, toggleEnableSendOnlyTranslatedMessages } = useEnableSendOnlyTranslatedMessages();
+    const { t } = useI18n();
+    const { currentEnableSendOnlyTranslatedMessages, toggleEnableSendOnlyTranslatedMessages } = useOthers();
 
     return (
         <CheckboxContainer
@@ -74,8 +68,8 @@ const SendOnlyTranslatedMessagesContainer = () => {
     );
 };
 const AutoExportMessageLogsContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
+    const { t } = useI18n();
+    const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useOthers();
     const { openFolder_MessageLogs } = useOpenFolder();
 
     return (
@@ -98,8 +92,8 @@ const AutoExportMessageLogsContainer = () => {
     );
 };
 export const VrcMicMuteSyncContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+    const { t } = useI18n();
+    const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useOthers();
 
     const variable = {
         state: currentEnableVrcMicMuteSync.state,
@@ -117,8 +111,8 @@ export const VrcMicMuteSyncContainer = () => {
     );
 };
 const SendMessageToVrcContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableSendMessageToVrc, toggleEnableSendMessageToVrc } = useEnableSendMessageToVrc();
+    const { t } = useI18n();
+    const { currentEnableSendMessageToVrc, toggleEnableSendMessageToVrc } = useOthers();
 
     return (
         <CheckboxContainer
@@ -132,8 +126,8 @@ const SendMessageToVrcContainer = () => {
 
 
 const EnableNotificationVrcSfxContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableNotificationVrcSfx, toggleEnableNotificationVrcSfx } = useEnableNotificationVrcSfx();
+    const { t } = useI18n();
+    const { currentEnableNotificationVrcSfx, toggleEnableNotificationVrcSfx } = useOthers();
 
     return (
         <CheckboxContainer
@@ -146,8 +140,8 @@ const EnableNotificationVrcSfxContainer = () => {
 };
 
 const SendReceivedMessageToVrcContainer = () => {
-    const { t } = useTranslation();
-    const { currentEnableSendReceivedMessageToVrc, toggleEnableSendReceivedMessageToVrc } = useEnableSendReceivedMessageToVrc();
+    const { t } = useI18n();
+    const { currentEnableSendReceivedMessageToVrc, toggleEnableSendReceivedMessageToVrc } = useOthers();
 
     return (
         <CheckboxContainer

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, useCallback } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { usePlugins } from "@logics_configs";
 import styles from "./Plugins.module.scss";
 import { PluginsControlComponent } from "./plugins_control_component/PluginsControlComponent";
@@ -27,7 +27,7 @@ export const Plugins = () => {
 };
 
 const PluginDownloadContainer = () => {
-    const { t, i18n } = useTranslation();
+    const { t, i18n } = useI18n();
     const {
         downloadAndExtractPlugin,
         currentPluginsData,

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

@@ -1,7 +1,7 @@
 import { SwitchBox } from "../../_components";
 import { _DownloadButton } from "../../_components/_atoms/_download_button/_DownloadButton";
 import styles from "./PluginsControlComponent.module.scss";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 export const PluginsControlComponent = ({
     variable_state,
@@ -9,7 +9,7 @@ export const PluginsControlComponent = ({
     toggleFunction,
     downloadStartFunction,
 }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const option = {
         id: plugin_status.plugin_id,
@@ -64,7 +64,7 @@ const DownloadedPluginControl = ({
     downloaded_version_label,
     latest_version_label,
 }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const togglePlugin = () => {
         toggleFunction(plugin_status.plugin_id);
@@ -128,7 +128,7 @@ const NotDownloadedPluginControl = ({
     downloaded_version_label,
     latest_version_label,
 }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     if (plugin_status.is_latest_version_available) {
         return (

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -1,22 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./Transcription.module.scss";
 import { updateLabelsById, genNumObjArray } from "@utils";
 
 import {
-    useMicRecordTimeout,
-    useMicPhraseTimeout,
-    useMicMaxWords,
-
-    useSpeakerRecordTimeout,
-    useSpeakerPhraseTimeout,
-    useSpeakerMaxWords,
-
-    useSelectedTranscriptionEngine,
-    useWhisperWeightTypeStatus,
-    useSelectedWhisperWeightType,
-
-    useSelectedWhisperComputeDevice,
-    useSelectableWhisperComputeDeviceList,
+    useTranscription,
 } from "@logics_configs";
 
 import {
@@ -43,7 +30,7 @@ export const Transcription = () => {
 
 
 const Mic_Container = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div>
             <SectionLabelComponent label={t("config_page.transcription.section_label_mic")} />
@@ -56,8 +43,8 @@ const Mic_Container = () => {
 };
 
 const MicRecordTimeout_Box = () => {
-    const { t } = useTranslation();
-    const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
+    const { t } = useI18n();
+    const { currentMicRecordTimeout, setMicRecordTimeout } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setMicRecordTimeout(selected_data.selected_id);
@@ -76,8 +63,8 @@ const MicRecordTimeout_Box = () => {
     );
 };
 const MicPhraseTimeout_Box = () => {
-    const { t } = useTranslation();
-    const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
+    const { t } = useI18n();
+    const { currentMicPhraseTimeout, setMicPhraseTimeout } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setMicPhraseTimeout(selected_data.selected_id);
@@ -96,8 +83,8 @@ const MicPhraseTimeout_Box = () => {
     );
 };
 const MicMaxWords_Box = () => {
-    const { t } = useTranslation();
-    const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
+    const { t } = useI18n();
+    const { currentMicMaxWords, setMicMaxWords } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setMicMaxWords(selected_data.selected_id);
@@ -117,7 +104,7 @@ const MicMaxWords_Box = () => {
 };
 
 const MicWordFilter_Box = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     return (
         <WordFilterContainer
@@ -131,7 +118,7 @@ const MicWordFilter_Box = () => {
 
 
 const Speaker_Container = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div>
             <SectionLabelComponent label={t("config_page.transcription.section_label_speaker")} />
@@ -143,8 +130,8 @@ const Speaker_Container = () => {
 };
 
 const SpeakerRecordTimeout_Box = () => {
-    const { t } = useTranslation();
-    const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
+    const { t } = useI18n();
+    const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setSpeakerRecordTimeout(selected_data.selected_id);
@@ -163,8 +150,8 @@ const SpeakerRecordTimeout_Box = () => {
     );
 };
 const SpeakerPhraseTimeout_Box = () => {
-    const { t } = useTranslation();
-    const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
+    const { t } = useI18n();
+    const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setSpeakerPhraseTimeout(selected_data.selected_id);
@@ -182,8 +169,8 @@ const SpeakerPhraseTimeout_Box = () => {
     );
 };
 const SpeakerMaxWords_Box = () => {
-    const { t } = useTranslation();
-    const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
+    const { t } = useI18n();
+    const { currentSpeakerMaxWords, setSpeakerMaxWords } = useTranscription();
 
     const selectFunction = (selected_data) => {
         setSpeakerMaxWords(selected_data.selected_id);
@@ -205,7 +192,7 @@ const SpeakerMaxWords_Box = () => {
 
 
 const TranscriptionEngine_Container = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div>
             <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
@@ -217,8 +204,8 @@ const TranscriptionEngine_Container = () => {
 };
 
 const TranscriptionEngine_Box = () => {
-    const { t } = useTranslation();
-    const { currentSelectedTranscriptionEngine, setSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
+    const { t } = useI18n();
+    const { currentSelectedTranscriptionEngine, setSelectedTranscriptionEngine } = useTranscription();
 
     return (
         <RadioButtonContainer
@@ -235,13 +222,13 @@ const TranscriptionEngine_Box = () => {
 };
 
 const WhisperWeightType_Box = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentWhisperWeightTypeStatus,
         pendingWhisperWeightType,
         downloadWhisperWeight,
-    } = useWhisperWeightTypeStatus();
-    const { currentSelectedWhisperWeightType, setSelectedWhisperWeightType } = useSelectedWhisperWeightType();
+    } = useTranscription();
+    const { currentSelectedWhisperWeightType, setSelectedWhisperWeightType } = useTranscription();
 
     const selectFunction = (id) => {
         setSelectedWhisperWeightType(id);
@@ -288,9 +275,9 @@ const WhisperWeightType_Box = () => {
 // Duplicate
 import { useComputeMode } from "@logics_common";
 const WhisperComputeDevice_Box = () => {
-    const { t } = useTranslation();
-    const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useSelectedWhisperComputeDevice();
-    const { currentSelectableWhisperComputeDeviceList } = useSelectableWhisperComputeDeviceList();
+    const { t } = useI18n();
+    const { currentSelectedWhisperComputeDevice, setSelectedWhisperComputeDevice } = useTranscription();
+    const { currentSelectableWhisperComputeDeviceList } = useTranscription();
 
     const selectFunction = (selected_data) => {
         const target_obj = currentSelectableWhisperComputeDeviceList.data[selected_data.selected_id];

src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx

@@ -1,14 +1,10 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./Translation.module.scss";
 import { updateLabelsById } from "@utils";
 
 import {
-    useDeepLAuthKey,
-    useCTranslate2WeightTypeStatus,
-    useSelectedCTranslate2WeightType,
-    useSelectedCTranslate2ComputeDevice,
-    useSelectableCTranslate2ComputeDeviceList,
+    useTranslation,
 } from "@logics_configs";
 
 import {
@@ -29,13 +25,15 @@ export const Translation = () => {
 };
 
 const CTranslate2WeightType_Box = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentCTranslate2WeightTypeStatus,
         pendingCTranslate2WeightType,
         downloadCTranslate2Weight,
-    } = useCTranslate2WeightTypeStatus();
-    const { currentSelectedCTranslate2WeightType, setSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
+
+        currentSelectedCTranslate2WeightType,
+        setSelectedCTranslate2WeightType,
+    } = useTranslation();
 
     const selectFunction = (id) => {
         setSelectedCTranslate2WeightType(id);
@@ -77,9 +75,9 @@ const CTranslate2WeightType_Box = () => {
 // Duplicate
 import { useComputeMode } from "@logics_common";
 const CTranslation2ComputeDevice_Box = () => {
-    const { t } = useTranslation();
-    const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useSelectedCTranslate2ComputeDevice();
-    const { currentSelectableCTranslate2ComputeDeviceList } = useSelectableCTranslate2ComputeDeviceList();
+    const { t } = useI18n();
+    const { currentSelectedCTranslate2ComputeDevice, setSelectedCTranslate2ComputeDevice } = useTranslation();
+    const { currentSelectableCTranslate2ComputeDeviceList } = useTranslation();
 
     const selectFunction = (selected_data) => {
         const target_obj = currentSelectableCTranslate2ComputeDeviceList.data[selected_data.selected_id];
@@ -120,8 +118,8 @@ const CTranslation2ComputeDevice_Box = () => {
 };
 
 const DeeplAuthKey_Box = () => {
-    const { t } = useTranslation();
-    const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useDeepLAuthKey();
+    const { t } = useI18n();
+    const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useTranslation();
     const [input_value, seInputValue] = useState(currentDeepLAuthKey.data);
 
     const onChangeFunction = (value) => {

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./Vr.module.scss";
 import { ui_configs } from "@ui_configs";
@@ -15,12 +15,7 @@ import {
 } from "../_components/";
 
 import {
-    useIsEnabledOverlaySmallLog,
-    useOverlaySmallLogSettings,
-    useIsEnabledOverlayLargeLog,
-    useOverlayLargeLogSettings,
-    useOverlayShowOnlyTranslatedMessages,
-    useSendTextToOverlay,
+    useVr,
 } from "@logics_configs";
 
 import RedoSvg from "@images/redo.svg?react";
@@ -30,17 +25,23 @@ import TriangleSvg from "@images/triangle.svg?react";
 import { randomIntMinMax } from "@utils";
 
 export const Vr = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
     const toggleIsOpenedSmallSettings = () => {
         setIsOpenedSmallSettings(!is_opened_small_settings);
     };
 
-    const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
-    const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+    const {
+        currentIsEnabledOverlayLargeLog,
+        toggleIsEnabledOverlayLargeLog,
+        currentIsEnabledOverlaySmallLog,
+        toggleIsEnabledOverlaySmallLog,
+        currentOverlayLargeLogSettings,
+        setOverlayLargeLogSettings,
+        currentOverlaySmallLogSettings,
+        setOverlaySmallLogSettings,
+    } = useVr();
 
-    const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
-    const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
 
     const restoreDefaultSettings = () => {
         setOverlaySmallLogSettings(ui_configs.overlay_small_log_default_settings);
@@ -99,7 +100,7 @@ const OverlaySettingsContainer = ({
     id
 }) => {
 
-    const { t } = useTranslation();
+    const { t } = useI18n();
     useEffect(() => {
         setSettings(current_overlay_settings);
     }, [current_overlay_settings]);
@@ -193,7 +194,7 @@ const PageSwitcherContainer = (props) => {
 
 
 export const PositionControls = ({ settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const {
         variable_display: x_variable_display,
@@ -302,7 +303,7 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
 };
 
 export const RotationControls = ({ settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const {
         variable_display: x_variable_display,
@@ -443,7 +444,7 @@ const AdjustButtonContainer = ({ wrapper_class_name, is_max, is_min, countUp, co
 
 
 const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
     const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
@@ -512,8 +513,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
 
 
 const CommonSettingsContainer = () => {
-    const { t } = useTranslation();
-    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+    const { t } = useI18n();
+    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useVr();
 
     return (
         <div className={styles.common_container}>
@@ -536,8 +537,8 @@ const ResetButton = ({onClickFunction}) => {
 };
 
 const SendSampleTextToggleButton = () => {
-    const { t } = useTranslation();
-    const { sendTextToOverlay } = useSendTextToOverlay();
+    const { t } = useI18n();
+    const { sendTextToOverlay } = useVr();
     const [is_started, setIsStarted] = useState(false);
 
     useEffect(() => {

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

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

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 
 import styles from "./Topbar.module.scss";
@@ -10,7 +10,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentIsOpenedConfigPage, setIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
         setIsOpenedConfigPage(false);

src-ui/app/config_page/topbar/compact_switch_box/CompactSwitchBox.jsx

@@ -1,9 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import styles from "./CompactSwitchBox.module.scss";
 
 export const CompactSwitchBox = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div className={styles.container}>
             <p>{t("config_page.compact_mode")}</p>

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

@@ -1,9 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./SectionTitleBox.module.scss";
 import { useStore_SelectedConfigTabId } from "@store";
 
 export const SectionTitleBox = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
     return (
         <div className={styles.container}>

src-ui/app/config_page/topbar/title_box/TitleBox.jsx

@@ -1,10 +1,10 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import styles from "./TitleBox.module.scss";
 import chato_img from "@images/chato_white.png";
 
 export const TitleBox = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return (
         <div className={styles.container}>
             <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />

src-ui/app/config_page/version_label/VersionLabel.jsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { useState } from "react";
 import clsx from "clsx";
 import styles from "./VersionLabel.module.scss";
@@ -10,7 +10,7 @@ import CheckMarkSvg from "@images/check_mark.svg?react";
 export const VersionLabel = () => {
     const [is_copied, setIsCopied] = useState(false);
 
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentSoftwareVersion } = useSoftwareVersion();
     const { currentComputeMode } = useComputeMode();
 

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./MainSection.module.scss";
 
 import { TopBar } from "./top_bar/TopBar";
@@ -37,7 +37,7 @@ export const MainSection = () => {
 
 
 const HandleLanguageSelector = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
     const {
         currentSelectedPresetTabNumber,

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

@@ -1,11 +1,11 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 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 { t } = useI18n();
     const { currentSelectableLanguageList } = useLanguageSettings();
 
     const groupLanguagesByFirstLetter = (languages) => {

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

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

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

@@ -27,9 +27,9 @@ export const LogBox = () => {
     );
 };
 
-import { useMessageLogUiScaling } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 const MessageLogUiSizeController = () => {
-    const { currentMessageLogUiScaling } = useMessageLogUiScaling();
+    const { currentMessageLogUiScaling } = useAppearance();
     const font_size = currentMessageLogUiScaling.data / 100;
 
     useEffect(() => {

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

@@ -1,18 +1,18 @@
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./MessageContainer.module.scss";
 import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
 import { useMessage } from "@logics_common";
-import { useShowResendButton } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const MessageContainer = ({ messages, status, category, created_at }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         sendMessage,
         updateMessageInputValue,
     } = useMessage();
-    const { currentShowResendButton } = useShowResendButton();
+    const { currentShowResendButton } = useAppearance();
     const [is_hovered, setIsHovered] = useState(false);
     const [is_locked, setIsLocked] = useState(false);
 

src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import styles from "./MessageSubMenuContainer.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
@@ -68,6 +68,6 @@ export const MessageSubMenuContainer = (props) => {
 };
 
 const Title_p = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     return <p className={styles.tooltip_title}>{t("main_page.message_log.resend_button_on_hover_desc")}</p>;
 };

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

@@ -2,7 +2,7 @@ import { useState, useEffect, useLayoutEffect, useRef } from "react";
 import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics_common";
-import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
+import { useAppearance, useOthers } from "@logics_configs";
 import { useMessageLogScroll } from "@logics_main";
 import { store } from "@store";
 
@@ -18,8 +18,8 @@ export const MessageInputBox = () => {
         stopTyping,
     } = useMessage();
 
-    const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
-    const { currentSendMessageButtonType } = useSendMessageButtonType();
+    const { currentEnableAutoClearMessageInputBox } = useOthers();
+    const { currentSendMessageButtonType } = useAppearance();
 
     const { scrollToBottom } = useMessageLogScroll();
 

src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
 import styles from "./MessageLogSettingsContainer.module.scss";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import { MessageLogUiScalingContainer } from "@setting_box";
 import ConfigSvg from "@images/configuration.svg?react";
 
 export const MessageLogSettingsContainer = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const [is_opened, setIsOpened] = useState(false);
     const [is_hovered, setIsHovered] = useState(false);
 

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -1,11 +1,11 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./RightSideComponents.module.scss";
 import RefreshSvg from "@images/refresh.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
 import { useStore_OpenedQuickSetting } from "@store";
 import { useSoftwareVersion } from "@logics_common";
-import { useIsEnabledOverlaySmallLog, useIsEnabledOverlayLargeLog, useEnableVrcMicMuteSync } from "@logics_configs";
+import { useVr, useOthers } from "@logics_configs";
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
 export const RightSideComponents = () => {
@@ -30,10 +30,12 @@ export const RightSideComponents = () => {
 };
 
 const OpenOverlayQuickSetting = () => {
-    // const { t } = useTranslation();
+    // const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
-    const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
-    const { currentIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+    const {
+        currentIsEnabledOverlaySmallLog,
+        currentIsEnabledOverlayLargeLog,
+    } = useVr();
 
     const onClickFunction = () => {
         updateOpenedQuickSetting("overlay");
@@ -50,7 +52,7 @@ const OpenOverlayQuickSetting = () => {
     );
 };
 const PluginsQuickSetting = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
 
     const onClickFunction = () => {
@@ -66,9 +68,9 @@ const PluginsQuickSetting = () => {
 };
 
 const OpenVrcMicMuteSyncQuickSetting = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
-    const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+    const { currentEnableVrcMicMuteSync } = useOthers();
 
     const onClickFunction = () => {
         updateOpenedQuickSetting("vrc_mic_mute_sync");
@@ -85,7 +87,7 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
 
 const SoftwareUpdateAvailableButton = () => {
     const { currentLatestSoftwareVersionInfo } = useSoftwareVersion();
-    const { t } = useTranslation();
+    const { t } = useI18n();
     if (currentLatestSoftwareVersionInfo.data.is_update_available === false) return null;
 
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();

src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx

@@ -1,9 +1,9 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./OpenQuickSettingButton.module.scss";
 
 export const OpenQuickSettingButton = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const variable = (typeof props.variable === "boolean") ? props.variable : null;
     return (
         <div className={styles.container}>

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import styles from "./LanguageSettings.module.scss";
 import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
 import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
@@ -8,7 +8,7 @@ import { AddRemoveTargetLanguageButtons } from "./add_remove_target_language_but
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 
 export const LanguageSettings = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateIsOpenedTranslatorSelector } = useStore_IsOpenedTranslatorSelector();
     const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
 
@@ -26,7 +26,7 @@ import HeadphonesSvg from "@images/headphones.svg?react";
 import { useMainFunction } from "@logics_main";
 
 const PresetContainer = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { currentTranscriptionSendStatus, currentTranscriptionReceiveStatus } = useMainFunction();
 
     const yourLanguageSettings = {

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./LanguageSelectorOpenButton.module.scss";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -8,7 +8,7 @@ import {
 } from "@logics_main";
 
 export const LanguageSelectorOpenButton = ({ TurnedOnSvgComponent, is_turned_on, selector_key, target_key }) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
 
     const {

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import styles from "./LanguageSwapButton.module.scss";
 
@@ -9,7 +9,7 @@ import { useLanguageSettings } from "@logics_main";
 
 export const LanguageSwapButton = () => {
     const [isHovered, setIsHovered] = useState(false);
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { swapSelectedLanguages } = useLanguageSettings();
 
     const label = isHovered

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { updateLabelsById } from "@utils";
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
@@ -7,7 +7,7 @@ import { useLanguageSettings } from "@logics_main";
 import WarningSvg from "@images/warning.svg?react";
 
 export const TranslatorSelectorOpenButton = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentSelectedYourLanguages,
         currentSelectedTargetLanguages,

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

@@ -1,12 +1,13 @@
 import clsx from "clsx";
 import styles from "./TranslatorSelector.module.scss";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import { chunkArray } from "@utils";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 
-export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => {    const { t } = useTranslation();
+export const TranslatorSelector = ({selected_id, translation_engines, is_selected_same_language}) => {
+    const { t } = useI18n();
     const columns = chunkArray(translation_engines, 2);
 
     return (
@@ -46,7 +47,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
 };
 
 const TranslatorBox = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { setSelectedTranslationEngines} = useLanguageSettings();
     const { updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
 

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

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./MainFunctionSwitch.module.scss";
 import TranslationSvg from "@images/translation.svg?react";
@@ -11,7 +11,7 @@ import {
 } from "@logics_main";
 
 export const MainFunctionSwitch = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     const {
         toggleTranslation, currentTranslationStatus,

src-ui/app/others/modal_controller/update_modal/UpdateModal.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import styles from "./UpdateModal.module.scss";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { useStore_OpenedQuickSetting } from "@store";
 import { usePlugins } from "@logics_configs";
 import {
@@ -13,7 +13,7 @@ import {
 import { PluginCompatibilityList } from "./plugins_compatibility_list/PluginCompatibilityList";
 
 export const UpdateModal = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware();
     const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
@@ -91,7 +91,7 @@ const VersionDescComponent = (props) => {
 };
 
 const CurrentVersionLabel = (props) => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     if (props.is_latest_version_already) {
         return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_latest_version_already")}</p>;

src-ui/app/others/splash_component/download_models_container/DownloadModelsContainer.jsx

@@ -3,13 +3,13 @@ import vrct_logo_for_dark_mode from "@images/vrct_logo_for_dark_mode.png";
 import vrct_now_downloading from "@images/VRCT_now_downloading.png";
 
 import {
-    useCTranslate2WeightTypeStatus,
-    useWhisperWeightTypeStatus,
+    useTranslation,
+    useTranscription,
 } from "@logics_configs";
 
 export const DownloadModelsContainer = () => {
-    const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
-    const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
+    const { currentCTranslate2WeightTypeStatus } = useTranslation();
+    const { currentWhisperWeightTypeStatus } = useTranscription();
 
     const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
     const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");

src-ui/app/others/updating_component/UpdatingComponent.jsx

@@ -1,10 +1,10 @@
 import styles from "./UpdatingComponent.module.scss";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import CircularProgress from "@mui/material/CircularProgress";
 import chat_white_square from "@images/chato_white_square.png";
 
 export const UpdatingComponent = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
 
     return (
         <div className={styles.container}>

src-ui/logics/_useBackendErrorHandling.js

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 
 import {
     useNotificationStatus,
@@ -9,43 +9,42 @@ import {
 } from "@logics_main";
 
 import {
-    useMicRecordTimeout,
-    useMicPhraseTimeout,
-    useMicMaxWords,
+    useTranscription,
 
-    useSpeakerRecordTimeout,
-    useSpeakerPhraseTimeout,
-    useSpeakerMaxWords,
+    useTranslation,
 
-    useDeepLAuthKey,
+    useOthers,
 
-    useEnableVrcMicMuteSync,
-
-    useOscIpAddress,
-    useWebsocket,
+    useAdvancedSettings,
 } from "@logics_configs";
 import { ui_configs } from "../ui_configs";
 
 export const _useBackendErrorHandling = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { showNotification_Error } = useNotificationStatus();
 
+    const {
+        updateMicRecordTimeout,
+        updateMicPhraseTimeout,
+        updateMicMaxWords,
+
+        updateSpeakerRecordTimeout,
+        updateSpeakerPhraseTimeout,
+        updateSpeakerMaxWords,
+    } = useTranscription();
+
     const { updateTranslationStatus, updateTranscriptionSendStatus, updateTranscriptionReceiveStatus } = useMainFunction();
 
-    const { updateMicRecordTimeout } = useMicRecordTimeout();
-    const { updateMicPhraseTimeout } = useMicPhraseTimeout();
-    const { updateMicMaxWords } = useMicMaxWords();
+    const { updateDeepLAuthKey } = useTranslation();
 
-    const { updateSpeakerRecordTimeout } = useSpeakerRecordTimeout();
-    const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
-    const { updateSpeakerMaxWords } = useSpeakerMaxWords();
+    const { updateEnableVrcMicMuteSync } = useOthers();
 
-    const { updateDeepLAuthKey } = useDeepLAuthKey();
-
-    const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
-
-    const { updateOscIpAddress } = useOscIpAddress();
-    const { updateEnableWebsocket, updateWebsocketHost, updateWebsocketPort } = useWebsocket();
+    const {
+        updateOscIpAddress,
+        updateEnableWebsocket,
+        updateWebsocketHost,
+        updateWebsocketPort,
+    } = useAdvancedSettings();
 
     const errorHandling_Backend = ({message, data, endpoint, result}) => {
         switch (endpoint) {

src-ui/logics/common/useHandleOscQuery.js

@@ -1,11 +1,11 @@
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { useNotificationStatus } from "@logics_common";
-import { useEnableVrcMicMuteSync } from "@logics_configs";
+import { useOthers } from "@logics_configs";
 
 export const useHandleOscQuery = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const { showNotification_Warning } = useNotificationStatus();
-    const { updateEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+    const { updateEnableVrcMicMuteSync } = useOthers();
 
     const handleOscQuery = (payload) => {
         const is_osc_query_enabled = payload.data;

src-ui/logics/common/useWindow.js

@@ -2,12 +2,12 @@ import { useEffect, useRef } from "react";
 import { currentMonitor, availableMonitors, PhysicalPosition, PhysicalSize } from "@tauri-apps/api/window";
 import { useStdoutToPython } from "@useStdoutToPython";
 import { useStore_IsBreakPoint } from "@store";
-import { useUiScaling } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 import { store } from "@store";
 
 export const useWindow = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentUiScaling } = useUiScaling();
+    const { currentUiScaling } = useAppearance();
     const { updateIsBreakPoint } = useStore_IsBreakPoint();
 
     const appWindow = store.appWindow;

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

@@ -1,16 +1,54 @@
 import {
+    useStore_OscIpAddress,
+    useStore_OscPort,
     useStore_EnableWebsocket,
     useStore_WebsocketHost,
     useStore_WebsocketPort,
 } from "@store";
 import { useStdoutToPython } from "@useStdoutToPython";
+import { useNotificationStatus } from "@logics_common";
 
-export const useWebsocket = () => {
+export const useAdvancedSettings = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+    const { showNotification_Error } = useNotificationStatus();
+
+    // OSC IP Address
+    const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
+    // OSC Port
+    const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
+    // WebSocket
     const { currentEnableWebsocket, updateEnableWebsocket, pendingEnableWebsocket } = useStore_EnableWebsocket();
     const { currentWebsocketHost, updateWebsocketHost, pendingWebsocketHost } = useStore_WebsocketHost();
     const { currentWebsocketPort, updateWebsocketPort, pendingWebsocketPort } = useStore_WebsocketPort();
 
+    // OSC IP Address
+    const getOscIpAddress = () => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/get/data/osc_ip_address");
+    };
+
+    const setOscIpAddress = (osc_ip_address) => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
+    };
+
+    // OSC Port
+    const getOscPort = () => {
+        pendingOscPort();
+        asyncStdoutToPython("/get/data/osc_port");
+    };
+
+    const setOscPort = (osc_port) => {
+        pendingOscPort();
+        asyncStdoutToPython("/set/data/osc_port", osc_port);
+    };
+
+    const saveErrorOscPort = ({data, message, _result}) => {
+        updateOscPort(d => d.data);
+        showNotification_Error(_result);
+    };
+
+    // WebSocket
     const getEnableWebsocket = () => {
         pendingEnableWebsocket();
         asyncStdoutToPython("/get/data/websocket_server");
@@ -47,7 +85,22 @@ export const useWebsocket = () => {
         asyncStdoutToPython("/set/data/websocket_port", websocket_port);
     };
 
+
     return {
+        // OSC IP Address
+        currentOscIpAddress,
+        getOscIpAddress,
+        updateOscIpAddress,
+        setOscIpAddress,
+
+        // OSC Port
+        currentOscPort,
+        getOscPort,
+        updateOscPort,
+        setOscPort,
+        saveErrorOscPort,
+
+        // WebSocket
         currentEnableWebsocket,
         updateEnableWebsocket,
         getEnableWebsocket,
@@ -62,6 +115,5 @@ export const useWebsocket = () => {
         updateWebsocketPort,
         getWebsocketPort,
         setWebsocketPort,
-
     };
 };

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

@@ -1,24 +0,0 @@
-import { useStore_OscIpAddress } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useOscIpAddress = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
-
-    const getOscIpAddress = () => {
-        pendingOscIpAddress();
-        asyncStdoutToPython("/get/data/osc_ip_address");
-    };
-
-    const setOscIpAddress = (osc_ip_address) => {
-        pendingOscIpAddress();
-        asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
-    };
-
-    return {
-        currentOscIpAddress,
-        getOscIpAddress,
-        updateOscIpAddress,
-        setOscIpAddress,
-    };
-};

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

@@ -1,33 +0,0 @@
-import { useStore_OscPort } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-import { useNotificationStatus } from "@logics_common";
-
-export const useOscPort = () => {
-    const { showNotification_Error } = useNotificationStatus();
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
-
-    const getOscPort = () => {
-        pendingOscPort();
-        asyncStdoutToPython("/get/data/osc_port");
-    };
-
-    const setOscPort = (osc_port) => {
-        pendingOscPort();
-        asyncStdoutToPython("/set/data/osc_port", osc_port);
-    };
-
-    const saveErrorOscPort = ({data, message, _result}) => {
-        updateOscPort(d => d.data);
-        showNotification_Error(_result);
-    };
-
-    return {
-        currentOscPort,
-        getOscPort,
-        updateOscPort,
-        setOscPort,
-
-        saveErrorOscPort,
-    };
-};

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

@@ -0,0 +1,156 @@
+import {
+    useStore_UiLanguage,
+    useStore_UiScaling,
+    useStore_MessageLogUiScaling,
+    useStore_SendMessageButtonType,
+    useStore_ShowResendButton,
+    useStore_SelectedFontFamily,
+    useStore_Transparency,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+
+export const useAppearance = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    // UI Language
+    const { currentUiLanguage, updateUiLanguage, pendingUiLanguage } = useStore_UiLanguage();
+    // UI Scaling
+    const { currentUiScaling, updateUiScaling, pendingUiScaling } = useStore_UiScaling();
+    // Message Log Ui Scaling
+    const { currentMessageLogUiScaling, updateMessageLogUiScaling, pendingMessageLogUiScaling } = useStore_MessageLogUiScaling();
+    // Send Message Button Type
+    const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
+    // Show Resend Button
+    const { currentShowResendButton, updateShowResendButton, pendingShowResendButton } = useStore_ShowResendButton();
+    // Selected Font Family
+    const { currentSelectedFontFamily, updateSelectedFontFamily, pendingSelectedFontFamily } = useStore_SelectedFontFamily();
+    // Transparency
+    const { currentTransparency, updateTransparency, pendingTransparency } = useStore_Transparency();
+
+
+    // UI Language
+    const getUiLanguage = () => {
+        pendingUiLanguage();
+        asyncStdoutToPython("/get/data/ui_language");
+    };
+
+    const setUiLanguage = (selected_ui_language) => {
+        pendingUiLanguage();
+        asyncStdoutToPython("/set/data/ui_language", selected_ui_language);
+    };
+
+    // UI Scaling
+    const getUiScaling = () => {
+        pendingUiScaling();
+        asyncStdoutToPython("/get/data/ui_scaling");
+    };
+
+    const setUiScaling = (selected_ui_scaling) => {
+        pendingUiScaling();
+        asyncStdoutToPython("/set/data/ui_scaling", selected_ui_scaling);
+    };
+
+    // Message Log Ui Scaling
+    const getMessageLogUiScaling = () => {
+        pendingMessageLogUiScaling();
+        asyncStdoutToPython("/get/data/textbox_ui_scaling");
+    };
+
+    const setMessageLogUiScaling = (selected_ui_scaling) => {
+        pendingMessageLogUiScaling();
+        asyncStdoutToPython("/set/data/textbox_ui_scaling", selected_ui_scaling);
+    };
+
+    // Send Message Button Type
+    const getSendMessageButtonType = () => {
+        pendingSendMessageButtonType();
+        asyncStdoutToPython("/get/data/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (send_message_button_type) => {
+        pendingSendMessageButtonType();
+        asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type);
+    };
+
+    // Show Resend Button
+    const getShowResendButton = () => {
+        pendingShowResendButton();
+        asyncStdoutToPython("/get/data/show_resend_button");
+    };
+
+    const toggleShowResendButton = () => {
+        pendingShowResendButton();
+        if (currentShowResendButton.data) {
+            asyncStdoutToPython("/set/disable/show_resend_button");
+        } else {
+            asyncStdoutToPython("/set/enable/show_resend_button");
+        }
+    };
+
+    // Selected Font Family
+    const getSelectedFontFamily = () => {
+        pendingSelectedFontFamily();
+        asyncStdoutToPython("/get/data/font_family");
+    };
+
+    const setSelectedFontFamily = (selected_font_family) => {
+        pendingSelectedFontFamily();
+        asyncStdoutToPython("/set/data/font_family", selected_font_family);
+    };
+
+    // Transparency
+    const getTransparency = () => {
+        pendingTransparency();
+        asyncStdoutToPython("/get/data/transparency");
+    };
+
+    const setTransparency = (selected_transparency) => {
+        pendingTransparency();
+        asyncStdoutToPython("/set/data/transparency", selected_transparency);
+    };
+
+
+    return {
+        // UI Language
+        currentUiLanguage,
+        getUiLanguage,
+        updateUiLanguage,
+        setUiLanguage,
+
+        // UI Scaling
+        currentUiScaling,
+        getUiScaling,
+        updateUiScaling,
+        setUiScaling,
+
+        // Message Log Ui Scaling
+        currentMessageLogUiScaling,
+        getMessageLogUiScaling,
+        updateMessageLogUiScaling,
+        setMessageLogUiScaling,
+
+        // Send Message Button Type
+        currentSendMessageButtonType,
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        updateSendMessageButtonType,
+
+        // Show Resend Button
+        currentShowResendButton,
+        getShowResendButton,
+        updateShowResendButton,
+        toggleShowResendButton,
+
+        // Selected Font Family
+        currentSelectedFontFamily,
+        getSelectedFontFamily,
+        updateSelectedFontFamily,
+        setSelectedFontFamily,
+
+        // Transparency
+        currentTransparency,
+        getTransparency,
+        updateTransparency,
+        setTransparency,
+    };
+};

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

@@ -1,24 +0,0 @@
-import { useStore_MessageLogUiScaling } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useMessageLogUiScaling = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMessageLogUiScaling, updateMessageLogUiScaling, pendingMessageLogUiScaling } = useStore_MessageLogUiScaling();
-
-    const getMessageLogUiScaling = () => {
-        pendingMessageLogUiScaling();
-        asyncStdoutToPython("/get/data/textbox_ui_scaling");
-    };
-
-    const setMessageLogUiScaling = (selected_ui_scaling) => {
-        pendingMessageLogUiScaling();
-        asyncStdoutToPython("/set/data/textbox_ui_scaling", selected_ui_scaling);
-    };
-
-    return {
-        currentMessageLogUiScaling,
-        getMessageLogUiScaling,
-        updateMessageLogUiScaling,
-        setMessageLogUiScaling,
-    };
-};

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

@@ -1,28 +0,0 @@
-// import { useStore_RestoreWindowGeometry } from "@store";
-// import { useStdoutToPython } from "@useStdoutToPython";
-
-// export const useRestoreWindowGeometry = () => {
-//     const { asyncStdoutToPython } = useStdoutToPython();
-//     const { currentRestoreWindowGeometry, updateRestoreWindowGeometry, pendingRestoreWindowGeometry } = useStore_RestoreWindowGeometry();
-
-//     const getRestoreWindowGeometry = () => {
-//         pendingRestoreWindowGeometry();
-//         asyncStdoutToPython("/get/data/restore_main_window_geometry");
-//     };
-
-//     const toggleRestoreWindowGeometry = () => {
-//         pendingRestoreWindowGeometry();
-//         if (currentRestoreWindowGeometry.data) {
-//             asyncStdoutToPython("/set/disable/restore_main_window_geometry");
-//         } else {
-//             asyncStdoutToPython("/set/enable/restore_main_window_geometry");
-//         }
-//     };
-
-//     return {
-//         currentRestoreWindowGeometry,
-//         getRestoreWindowGeometry,
-//         toggleRestoreWindowGeometry,
-//         updateRestoreWindowGeometry,
-//     };
-// };

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

@@ -1,24 +0,0 @@
-import { useStore_SelectedFontFamily } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedFontFamily = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedFontFamily, updateSelectedFontFamily, pendingSelectedFontFamily } = useStore_SelectedFontFamily();
-
-    const getSelectedFontFamily = () => {
-        pendingSelectedFontFamily();
-        asyncStdoutToPython("/get/data/font_family");
-    };
-
-    const setSelectedFontFamily = (selected_font_family) => {
-        pendingSelectedFontFamily();
-        asyncStdoutToPython("/set/data/font_family", selected_font_family);
-    };
-
-    return {
-        currentSelectedFontFamily,
-        getSelectedFontFamily,
-        updateSelectedFontFamily,
-        setSelectedFontFamily,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SendMessageButtonType } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSendMessageButtonType = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSendMessageButtonType, updateSendMessageButtonType, pendingSendMessageButtonType } = useStore_SendMessageButtonType();
-
-    const getSendMessageButtonType = () => {
-        pendingSendMessageButtonType();
-        asyncStdoutToPython("/get/data/send_message_button_type");
-    };
-
-    const setSendMessageButtonType = (send_message_button_type) => {
-        pendingSendMessageButtonType();
-        asyncStdoutToPython("/set/data/send_message_button_type", send_message_button_type);
-    };
-
-    return {
-        currentSendMessageButtonType,
-        getSendMessageButtonType,
-        setSendMessageButtonType,
-        updateSendMessageButtonType,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_ShowResendButton } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useShowResendButton = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentShowResendButton, updateShowResendButton, pendingShowResendButton } = useStore_ShowResendButton();
-
-    const getShowResendButton = () => {
-        pendingShowResendButton();
-        asyncStdoutToPython("/get/data/show_resend_button");
-    };
-
-    const toggleShowResendButton = () => {
-        pendingShowResendButton();
-        if (currentShowResendButton.data) {
-            asyncStdoutToPython("/set/disable/show_resend_button");
-        } else {
-            asyncStdoutToPython("/set/enable/show_resend_button");
-        }
-    };
-
-    return {
-        currentShowResendButton,
-        getShowResendButton,
-        updateShowResendButton,
-        toggleShowResendButton,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_Transparency } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useTransparency = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentTransparency, updateTransparency, pendingTransparency } = useStore_Transparency();
-
-    const getTransparency = () => {
-        pendingTransparency();
-        asyncStdoutToPython("/get/data/transparency");
-    };
-
-    const setTransparency = (selected_transparency) => {
-        pendingTransparency();
-        asyncStdoutToPython("/set/data/transparency", selected_transparency);
-    };
-
-    return {
-        currentTransparency,
-        getTransparency,
-        updateTransparency,
-        setTransparency,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_UiLanguage } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useUiLanguage = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentUiLanguage, updateUiLanguage, pendingUiLanguage } = useStore_UiLanguage();
-
-    const getUiLanguage = () => {
-        pendingUiLanguage();
-        asyncStdoutToPython("/get/data/ui_language");
-    };
-
-    const setUiLanguage = (selected_ui_language) => {
-        pendingUiLanguage();
-        asyncStdoutToPython("/set/data/ui_language", selected_ui_language);
-    };
-
-    return {
-        currentUiLanguage,
-        getUiLanguage,
-        updateUiLanguage,
-        setUiLanguage,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_UiScaling } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useUiScaling = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentUiScaling, updateUiScaling, pendingUiScaling } = useStore_UiScaling();
-
-    const getUiScaling = () => {
-        pendingUiScaling();
-        asyncStdoutToPython("/get/data/ui_scaling");
-    };
-
-    const setUiScaling = (selected_ui_scaling) => {
-        pendingUiScaling();
-        asyncStdoutToPython("/set/data/ui_scaling", selected_ui_scaling);
-    };
-
-    return {
-        currentUiScaling,
-        getUiScaling,
-        updateUiScaling,
-        setUiScaling,
-    };
-};

src-ui/logics/configs/index.js

@@ -1,58 +1,12 @@
 export { useDevice } from "./device/useDevice";
-
-export { useMessageLogUiScaling } from "./appearance/useMessageLogUiScaling";
-export { useSelectedFontFamily } from "./appearance/useSelectedFontFamily";
-export { useTransparency } from "./appearance/useTransparency";
-export { useSendMessageButtonType } from "./appearance/useSendMessageButtonType";
-export { useShowResendButton } from "./appearance/useShowResendButton";
-export { useUiLanguage } from "./appearance/useUiLanguage";
-export { useUiScaling } from "./appearance/useUiScaling";
-
-export { useEnableAutoClearMessageInputBox } from "./others/useEnableAutoClearMessageInputBox";
-export { useEnableAutoExportMessageLogs } from "./others/useEnableAutoExportMessageLogs";
-export { useEnableSendMessageToVrc } from "./others/useEnableSendMessageToVrc";
-export { useEnableSendReceivedMessageToVrc } from "./others/useEnableSendReceivedMessageToVrc";
-export { useEnableSendOnlyTranslatedMessages } from "./others/useEnableSendOnlyTranslatedMessages";
-export { useEnableVrcMicMuteSync } from "./others/useEnableVrcMicMuteSync";
-export { useEnableNotificationVrcSfx } from "./others/useEnableNotificationVrcSfx";
-
-export { useMicRecordTimeout } from "./transcription/useMicRecordTimeout";
-export { useMicPhraseTimeout } from "./transcription/useMicPhraseTimeout";
-export { useMicMaxWords } from "./transcription/useMicMaxWords";
-export { useMicWordFilterList } from "./transcription/useMicWordFilterList";
-
-export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout";
-export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
-export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
-
-export { useSelectedTranscriptionEngine } from "./transcription/useSelectedTranscriptionEngine";
-export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus";
-export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType";
-export { useSelectableWhisperComputeDeviceList } from "./transcription/useSelectableWhisperComputeDeviceList";
-export { useSelectedWhisperComputeDevice } from "./transcription/useSelectedWhisperComputeDevice";
-
-export { useDeepLAuthKey } from "./translation/useDeepLAuthKey";
-export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2WeightTypeStatus";
-export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
-export { useSelectableCTranslate2ComputeDeviceList } from "./translation/useSelectableCTranslate2ComputeDeviceList";
-export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCTranslate2ComputeDevice";
-
-export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
-export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
-export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
-export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
-export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
-export { useSendTextToOverlay } from "./vr/useSendTextToOverlay";
-
+export { useAppearance } from "./appearance/useAppearance";
+export { useOthers } from "./others/useOthers";
+export { useTranscription } from "./transcription/useTranscription";
+export { useTranslation } from "./translation/useTranslation";
+export { useVr } from "./vr/useVr";
 export { useHotkeys } from "./hotkeys/useHotkeys";
-
-export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
-export { useOscPort } from "./advanced_settings/useOscPort";
-export { useWebsocket } from "./advanced_settings/useWebsocket";
-
-
+export { useAdvancedSettings } from "./advanced_settings/useAdvancedSettings";
 export { useSupporters } from "./supporters/useSupporters";
-
 export { usePlugins } from "./plugins/usePlugins";
 
 export { useSettingBoxScrollPosition } from "./useSettingBoxScrollPosition";

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

@@ -1,28 +0,0 @@
-import { useStore_EnableAutoClearMessageInputBox } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableAutoClearMessageInputBox = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox();
-
-    const getEnableAutoClearMessageInputBox = () => {
-        pendingEnableAutoClearMessageInputBox();
-        asyncStdoutToPython("/get/data/auto_clear_message_box");
-    };
-
-    const toggleEnableAutoClearMessageInputBox = () => {
-        pendingEnableAutoClearMessageInputBox();
-        if (currentEnableAutoClearMessageInputBox.data) {
-            asyncStdoutToPython("/set/disable/auto_clear_message_box");
-        } else {
-            asyncStdoutToPython("/set/enable/auto_clear_message_box");
-        }
-    };
-
-    return {
-        currentEnableAutoClearMessageInputBox,
-        getEnableAutoClearMessageInputBox,
-        toggleEnableAutoClearMessageInputBox,
-        updateEnableAutoClearMessageInputBox,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_EnableAutoExportMessageLogs } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableAutoExportMessageLogs = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs();
-
-    const getEnableAutoExportMessageLogs = () => {
-        pendingEnableAutoExportMessageLogs();
-        asyncStdoutToPython("/get/data/logger_feature");
-    };
-
-    const toggleEnableAutoExportMessageLogs = () => {
-        pendingEnableAutoExportMessageLogs();
-        if (currentEnableAutoExportMessageLogs.data) {
-            asyncStdoutToPython("/set/disable/logger_feature");
-        } else {
-            asyncStdoutToPython("/set/enable/logger_feature");
-        }
-    };
-
-    return {
-        currentEnableAutoExportMessageLogs,
-        getEnableAutoExportMessageLogs,
-        toggleEnableAutoExportMessageLogs,
-        updateEnableAutoExportMessageLogs,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_EnableNotificationVrcSfx } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableNotificationVrcSfx = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableNotificationVrcSfx, updateEnableNotificationVrcSfx, pendingEnableNotificationVrcSfx } = useStore_EnableNotificationVrcSfx();
-
-    const getEnableNotificationVrcSfx = () => {
-        pendingEnableNotificationVrcSfx();
-        asyncStdoutToPython("/get/data/notification_vrc_sfx");
-    };
-
-    const toggleEnableNotificationVrcSfx = () => {
-        pendingEnableNotificationVrcSfx();
-        if (currentEnableNotificationVrcSfx.data) {
-            asyncStdoutToPython("/set/disable/notification_vrc_sfx");
-        } else {
-            asyncStdoutToPython("/set/enable/notification_vrc_sfx");
-        }
-    };
-
-    return {
-        currentEnableNotificationVrcSfx,
-        getEnableNotificationVrcSfx,
-        toggleEnableNotificationVrcSfx,
-        updateEnableNotificationVrcSfx,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_EnableSendMessageToVrc } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableSendMessageToVrc = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc();
-
-    const getEnableSendMessageToVrc = () => {
-        pendingEnableSendMessageToVrc();
-        asyncStdoutToPython("/get/data/send_message_to_vrc");
-    };
-
-    const toggleEnableSendMessageToVrc = () => {
-        pendingEnableSendMessageToVrc();
-        if (currentEnableSendMessageToVrc.data) {
-            asyncStdoutToPython("/set/disable/send_message_to_vrc");
-        } else {
-            asyncStdoutToPython("/set/enable/send_message_to_vrc");
-        }
-    };
-
-    return {
-        currentEnableSendMessageToVrc,
-        getEnableSendMessageToVrc,
-        toggleEnableSendMessageToVrc,
-        updateEnableSendMessageToVrc,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_EnableSendOnlyTranslatedMessages } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableSendOnlyTranslatedMessages = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages();
-
-    const getEnableSendOnlyTranslatedMessages = () => {
-        pendingEnableSendOnlyTranslatedMessages();
-        asyncStdoutToPython("/get/data/send_only_translated_messages");
-    };
-
-    const toggleEnableSendOnlyTranslatedMessages = () => {
-        pendingEnableSendOnlyTranslatedMessages();
-        if (currentEnableSendOnlyTranslatedMessages.data) {
-            asyncStdoutToPython("/set/disable/send_only_translated_messages");
-        } else {
-            asyncStdoutToPython("/set/enable/send_only_translated_messages");
-        }
-    };
-
-    return {
-        currentEnableSendOnlyTranslatedMessages,
-        getEnableSendOnlyTranslatedMessages,
-        toggleEnableSendOnlyTranslatedMessages,
-        updateEnableSendOnlyTranslatedMessages,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_EnableSendReceivedMessageToVrc } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableSendReceivedMessageToVrc = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc();
-
-    const getEnableSendReceivedMessageToVrc = () => {
-        pendingEnableSendReceivedMessageToVrc();
-        asyncStdoutToPython("/get/data/send_received_message_to_vrc");
-    };
-
-    const toggleEnableSendReceivedMessageToVrc = () => {
-        pendingEnableSendReceivedMessageToVrc();
-        if (currentEnableSendReceivedMessageToVrc.data) {
-            asyncStdoutToPython("/set/disable/send_received_message_to_vrc");
-        } else {
-            asyncStdoutToPython("/set/enable/send_received_message_to_vrc");
-        }
-    };
-
-    return {
-        currentEnableSendReceivedMessageToVrc,
-        getEnableSendReceivedMessageToVrc,
-        toggleEnableSendReceivedMessageToVrc,
-        updateEnableSendReceivedMessageToVrc,
-    };
-};

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

@@ -1,36 +0,0 @@
-import { useStore_EnableVrcMicMuteSync } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useEnableVrcMicMuteSync = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync();
-
-    const getEnableVrcMicMuteSync = () => {
-        pendingEnableVrcMicMuteSync();
-        asyncStdoutToPython("/get/data/vrc_mic_mute_sync");
-    };
-
-    const toggleEnableVrcMicMuteSync = () => {
-        pendingEnableVrcMicMuteSync();
-        if (currentEnableVrcMicMuteSync.data.is_enabled) {
-            asyncStdoutToPython("/set/disable/vrc_mic_mute_sync");
-        } else {
-            asyncStdoutToPython("/set/enable/vrc_mic_mute_sync");
-        }
-    };
-
-    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/useOthers.js

@@ -0,0 +1,192 @@
+import {
+    useStore_EnableAutoClearMessageInputBox,
+    useStore_EnableSendOnlyTranslatedMessages,
+    useStore_EnableAutoExportMessageLogs,
+    useStore_EnableVrcMicMuteSync,
+    useStore_EnableSendMessageToVrc,
+    useStore_EnableNotificationVrcSfx,
+    useStore_EnableSendReceivedMessageToVrc,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+
+export const useOthers = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    // Auto Clear Message Input Box
+    const { currentEnableAutoClearMessageInputBox, updateEnableAutoClearMessageInputBox, pendingEnableAutoClearMessageInputBox } = useStore_EnableAutoClearMessageInputBox();
+    // Send Only Translated Messages
+    const { currentEnableSendOnlyTranslatedMessages, updateEnableSendOnlyTranslatedMessages, pendingEnableSendOnlyTranslatedMessages } = useStore_EnableSendOnlyTranslatedMessages();
+    // Auto Export Message Logs
+    const { currentEnableAutoExportMessageLogs, updateEnableAutoExportMessageLogs, pendingEnableAutoExportMessageLogs } = useStore_EnableAutoExportMessageLogs();
+    // VRC Mic Mute Sync
+    const { currentEnableVrcMicMuteSync, updateEnableVrcMicMuteSync, pendingEnableVrcMicMuteSync } = useStore_EnableVrcMicMuteSync();
+    // Send Message To VRCT
+    const { currentEnableSendMessageToVrc, updateEnableSendMessageToVrc, pendingEnableSendMessageToVrc } = useStore_EnableSendMessageToVrc();
+    // Sounds
+    // Notification VRC SFX
+    const { currentEnableNotificationVrcSfx, updateEnableNotificationVrcSfx, pendingEnableNotificationVrcSfx } = useStore_EnableNotificationVrcSfx();
+    // Speaker2Chatbox
+    // Send Received Message To VRC
+    const { currentEnableSendReceivedMessageToVrc, updateEnableSendReceivedMessageToVrc, pendingEnableSendReceivedMessageToVrc } = useStore_EnableSendReceivedMessageToVrc();
+
+
+    // Auto Clear Message Input Box
+    const getEnableAutoClearMessageInputBox = () => {
+        pendingEnableAutoClearMessageInputBox();
+        asyncStdoutToPython("/get/data/auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageInputBox = () => {
+        pendingEnableAutoClearMessageInputBox();
+        if (currentEnableAutoClearMessageInputBox.data) {
+            asyncStdoutToPython("/set/disable/auto_clear_message_box");
+        } else {
+            asyncStdoutToPython("/set/enable/auto_clear_message_box");
+        }
+    };
+
+    // Send Only Translated Messages
+    const getEnableSendOnlyTranslatedMessages = () => {
+        pendingEnableSendOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/send_only_translated_messages");
+    };
+
+    const toggleEnableSendOnlyTranslatedMessages = () => {
+        pendingEnableSendOnlyTranslatedMessages();
+        if (currentEnableSendOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/send_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/send_only_translated_messages");
+        }
+    };
+
+    // Auto Export Message Logs
+    const getEnableAutoExportMessageLogs = () => {
+        pendingEnableAutoExportMessageLogs();
+        asyncStdoutToPython("/get/data/logger_feature");
+    };
+
+    const toggleEnableAutoExportMessageLogs = () => {
+        pendingEnableAutoExportMessageLogs();
+        if (currentEnableAutoExportMessageLogs.data) {
+            asyncStdoutToPython("/set/disable/logger_feature");
+        } else {
+            asyncStdoutToPython("/set/enable/logger_feature");
+        }
+    };
+
+    // VRC Mic Mute Sync
+    const getEnableVrcMicMuteSync = () => {
+        pendingEnableVrcMicMuteSync();
+        asyncStdoutToPython("/get/data/vrc_mic_mute_sync");
+    };
+
+    const toggleEnableVrcMicMuteSync = () => {
+        pendingEnableVrcMicMuteSync();
+        if (currentEnableVrcMicMuteSync.data.is_enabled) {
+            asyncStdoutToPython("/set/disable/vrc_mic_mute_sync");
+        } else {
+            asyncStdoutToPython("/set/enable/vrc_mic_mute_sync");
+        }
+    };
+
+    const updateEnableVrcMicMuteSync_FromBackend = (payload) => {
+        updateEnableVrcMicMuteSync((old_value) => {
+            return {...old_value.data, is_enabled: payload};
+        });
+    };
+
+    // Send Message To VRCT
+    const getEnableSendMessageToVrc = () => {
+        pendingEnableSendMessageToVrc();
+        asyncStdoutToPython("/get/data/send_message_to_vrc");
+    };
+
+    const toggleEnableSendMessageToVrc = () => {
+        pendingEnableSendMessageToVrc();
+        if (currentEnableSendMessageToVrc.data) {
+            asyncStdoutToPython("/set/disable/send_message_to_vrc");
+        } else {
+            asyncStdoutToPython("/set/enable/send_message_to_vrc");
+        }
+    };
+
+    // Sounds
+    // Notification VRC SFX
+    const getEnableNotificationVrcSfx = () => {
+        pendingEnableNotificationVrcSfx();
+        asyncStdoutToPython("/get/data/notification_vrc_sfx");
+    };
+
+    const toggleEnableNotificationVrcSfx = () => {
+        pendingEnableNotificationVrcSfx();
+        if (currentEnableNotificationVrcSfx.data) {
+            asyncStdoutToPython("/set/disable/notification_vrc_sfx");
+        } else {
+            asyncStdoutToPython("/set/enable/notification_vrc_sfx");
+        }
+    };
+
+    // Speaker2Chatbox
+    // Send Received Message To VRC
+    const getEnableSendReceivedMessageToVrc = () => {
+        pendingEnableSendReceivedMessageToVrc();
+        asyncStdoutToPython("/get/data/send_received_message_to_vrc");
+    };
+
+    const toggleEnableSendReceivedMessageToVrc = () => {
+        pendingEnableSendReceivedMessageToVrc();
+        if (currentEnableSendReceivedMessageToVrc.data) {
+            asyncStdoutToPython("/set/disable/send_received_message_to_vrc");
+        } else {
+            asyncStdoutToPython("/set/enable/send_received_message_to_vrc");
+        }
+    };
+
+    return {
+        // Auto Clear Message Input Box
+        currentEnableAutoClearMessageInputBox,
+        getEnableAutoClearMessageInputBox,
+        toggleEnableAutoClearMessageInputBox,
+        updateEnableAutoClearMessageInputBox,
+
+        // Send Only Translated Messages
+        currentEnableSendOnlyTranslatedMessages,
+        getEnableSendOnlyTranslatedMessages,
+        toggleEnableSendOnlyTranslatedMessages,
+        updateEnableSendOnlyTranslatedMessages,
+
+        // Auto Export Message Logs
+        currentEnableAutoExportMessageLogs,
+        getEnableAutoExportMessageLogs,
+        toggleEnableAutoExportMessageLogs,
+        updateEnableAutoExportMessageLogs,
+
+        // VRC Mic Mute Sync
+        currentEnableVrcMicMuteSync,
+        getEnableVrcMicMuteSync,
+        toggleEnableVrcMicMuteSync,
+        updateEnableVrcMicMuteSync,
+        updateEnableVrcMicMuteSync_FromBackend,
+
+        // Send Message To VRCT
+        currentEnableSendMessageToVrc,
+        getEnableSendMessageToVrc,
+        toggleEnableSendMessageToVrc,
+        updateEnableSendMessageToVrc,
+
+        // Sounds
+        // Notification VRC SFX
+        currentEnableNotificationVrcSfx,
+        getEnableNotificationVrcSfx,
+        toggleEnableNotificationVrcSfx,
+        updateEnableNotificationVrcSfx,
+
+        // Speaker2Chatbox
+        // Send Received Message To VRC
+        currentEnableSendReceivedMessageToVrc,
+        getEnableSendReceivedMessageToVrc,
+        toggleEnableSendReceivedMessageToVrc,
+        updateEnableSendReceivedMessageToVrc,
+    };
+};

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

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/core";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { IS_PLUGIN_PATH_DEV_MODE, getPluginsList } from "@ui_configs";
 import {
     store,
@@ -36,7 +36,7 @@ import * as logics_common from "@logics_common";
 const PLUGIN_LIST_URL = getPluginsList();
 
 export const usePlugins = () => {
-    const { t } = useTranslation();
+    const { t, i18n } = useI18n();
     const { showNotification_Success, showNotification_Error } = useNotificationStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
@@ -50,8 +50,6 @@ export const usePlugins = () => {
     const { asyncTauriFetchGithub } = useFetch();
 
 
-    const { i18n } = useTranslation();
-
     const generatePluginContext = (downloaded_plugin_info) => {
         const plugin_context = {
             registerComponent: (component) => {

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

@@ -1,24 +0,0 @@
-import { useStore_MicMaxWords } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useMicMaxWords = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicMaxWords, updateMicMaxWords, pendingMicMaxWords } = useStore_MicMaxWords();
-
-    const getMicMaxWords = () => {
-        pendingMicMaxWords();
-        asyncStdoutToPython("/get/data/mic_max_phrases");
-    };
-
-    const setMicMaxWords = (selected_mic_max_phrases) => {
-        pendingMicMaxWords();
-        asyncStdoutToPython("/set/data/mic_max_phrases", selected_mic_max_phrases);
-    };
-
-    return {
-        currentMicMaxWords,
-        getMicMaxWords,
-        updateMicMaxWords,
-        setMicMaxWords,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_MicPhraseTimeout } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useMicPhraseTimeout = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicPhraseTimeout, updateMicPhraseTimeout, pendingMicPhraseTimeout } = useStore_MicPhraseTimeout();
-
-    const getMicPhraseTimeout = () => {
-        pendingMicPhraseTimeout();
-        asyncStdoutToPython("/get/data/mic_phrase_timeout");
-    };
-
-    const setMicPhraseTimeout = (selected_mic_phrase_timeout) => {
-        pendingMicPhraseTimeout();
-        asyncStdoutToPython("/set/data/mic_phrase_timeout", selected_mic_phrase_timeout);
-    };
-
-    return {
-        currentMicPhraseTimeout,
-        getMicPhraseTimeout,
-        updateMicPhraseTimeout,
-        setMicPhraseTimeout,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_MicRecordTimeout } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useMicRecordTimeout = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicRecordTimeout, updateMicRecordTimeout, pendingMicRecordTimeout } = useStore_MicRecordTimeout();
-
-    const getMicRecordTimeout = () => {
-        pendingMicRecordTimeout();
-        asyncStdoutToPython("/get/data/mic_record_timeout");
-    };
-
-    const setMicRecordTimeout = (selected_mic_record_timeout) => {
-        pendingMicRecordTimeout();
-        asyncStdoutToPython("/set/data/mic_record_timeout", selected_mic_record_timeout);
-    };
-
-    return {
-        currentMicRecordTimeout,
-        getMicRecordTimeout,
-        updateMicRecordTimeout,
-        setMicRecordTimeout,
-    };
-};

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

@@ -1,41 +0,0 @@
-import { useStore_MicWordFilterList } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useMicWordFilterList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentMicWordFilterList, updateMicWordFilterList, pendingMicWordFilterList } = useStore_MicWordFilterList();
-
-    const getMicWordFilterList = () => {
-        pendingMicWordFilterList();
-        asyncStdoutToPython("/get/data/mic_word_filter");
-    };
-
-    const setMicWordFilterList = (selected_mic_word_filter) => {
-        pendingMicWordFilterList();
-        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,25 +0,0 @@
-import { useStore_SelectableWhisperComputeDeviceList } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-import { transformToIndexedArray } from "@utils";
-
-export const useSelectableWhisperComputeDeviceList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectableWhisperComputeDeviceList, updateSelectableWhisperComputeDeviceList, pendingSelectableWhisperComputeDeviceList } = useStore_SelectableWhisperComputeDeviceList();
-
-    const getSelectableWhisperComputeDeviceList = () => {
-        pendingSelectableWhisperComputeDeviceList();
-        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,24 +0,0 @@
-import { useStore_SelectedTranscriptionEngine } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedTranscriptionEngine = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedTranscriptionEngine, updateSelectedTranscriptionEngine, pendingSelectedTranscriptionEngine } = useStore_SelectedTranscriptionEngine();
-
-    const getSelectedTranscriptionEngine = () => {
-        pendingSelectedTranscriptionEngine();
-        asyncStdoutToPython("/get/data/selected_transcription_engine");
-    };
-
-    const setSelectedTranscriptionEngine = (selected_transcription_engine) => {
-        pendingSelectedTranscriptionEngine();
-        asyncStdoutToPython("/set/data/selected_transcription_engine", selected_transcription_engine);
-    };
-
-    return {
-        currentSelectedTranscriptionEngine,
-        getSelectedTranscriptionEngine,
-        updateSelectedTranscriptionEngine,
-        setSelectedTranscriptionEngine,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SelectedWhisperComputeDevice } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedWhisperComputeDevice = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedWhisperComputeDevice, updateSelectedWhisperComputeDevice, pendingSelectedWhisperComputeDevice } = useStore_SelectedWhisperComputeDevice();
-
-    const getSelectedWhisperComputeDevice = () => {
-        pendingSelectedWhisperComputeDevice();
-        asyncStdoutToPython("/get/data/selected_transcription_compute_device");
-    };
-
-    const setSelectedWhisperComputeDevice = (selected_transcription_compute_device) => {
-        pendingSelectedWhisperComputeDevice();
-        asyncStdoutToPython("/set/data/selected_transcription_compute_device", selected_transcription_compute_device);
-    };
-
-    return {
-        currentSelectedWhisperComputeDevice,
-        getSelectedWhisperComputeDevice,
-        updateSelectedWhisperComputeDevice,
-        setSelectedWhisperComputeDevice,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SelectedWhisperWeightType } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedWhisperWeightType = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
-
-    const getSelectedWhisperWeightType = () => {
-        pendingSelectedWhisperWeightType();
-        asyncStdoutToPython("/get/data/whisper_weight_type");
-    };
-
-    const setSelectedWhisperWeightType = (selected_whisper_weight_type) => {
-        pendingSelectedWhisperWeightType();
-        asyncStdoutToPython("/set/data/whisper_weight_type", selected_whisper_weight_type);
-    };
-
-    return {
-        currentSelectedWhisperWeightType,
-        getSelectedWhisperWeightType,
-        updateSelectedWhisperWeightType,
-        setSelectedWhisperWeightType,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SpeakerMaxWords } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSpeakerMaxWords = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerMaxWords, updateSpeakerMaxWords, pendingSpeakerMaxWords } = useStore_SpeakerMaxWords();
-
-    const getSpeakerMaxWords = () => {
-        pendingSpeakerMaxWords();
-        asyncStdoutToPython("/get/data/speaker_max_phrases");
-    };
-
-    const setSpeakerMaxWords = (selected_speaker_max_phrases) => {
-        pendingSpeakerMaxWords();
-        asyncStdoutToPython("/set/data/speaker_max_phrases", selected_speaker_max_phrases);
-    };
-
-    return {
-        currentSpeakerMaxWords,
-        getSpeakerMaxWords,
-        updateSpeakerMaxWords,
-        setSpeakerMaxWords,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SpeakerPhraseTimeout } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSpeakerPhraseTimeout = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerPhraseTimeout, updateSpeakerPhraseTimeout, pendingSpeakerPhraseTimeout } = useStore_SpeakerPhraseTimeout();
-
-    const getSpeakerPhraseTimeout = () => {
-        pendingSpeakerPhraseTimeout();
-        asyncStdoutToPython("/get/data/speaker_phrase_timeout");
-    };
-
-    const setSpeakerPhraseTimeout = (selected_speaker_phrase_timeout) => {
-        pendingSpeakerPhraseTimeout();
-        asyncStdoutToPython("/set/data/speaker_phrase_timeout", selected_speaker_phrase_timeout);
-    };
-
-    return {
-        currentSpeakerPhraseTimeout,
-        getSpeakerPhraseTimeout,
-        updateSpeakerPhraseTimeout,
-        setSpeakerPhraseTimeout,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SpeakerRecordTimeout } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSpeakerRecordTimeout = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSpeakerRecordTimeout, updateSpeakerRecordTimeout, pendingSpeakerRecordTimeout } = useStore_SpeakerRecordTimeout();
-
-    const getSpeakerRecordTimeout = () => {
-        pendingSpeakerRecordTimeout();
-        asyncStdoutToPython("/get/data/speaker_record_timeout");
-    };
-
-    const setSpeakerRecordTimeout = (selected_speaker_record_timeout) => {
-        pendingSpeakerRecordTimeout();
-        asyncStdoutToPython("/set/data/speaker_record_timeout", selected_speaker_record_timeout);
-    };
-
-    return {
-        currentSpeakerRecordTimeout,
-        getSpeakerRecordTimeout,
-        updateSpeakerRecordTimeout,
-        setSpeakerRecordTimeout,
-    };
-};

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

@@ -0,0 +1,292 @@
+import {
+    useStore_MicRecordTimeout,
+    useStore_MicPhraseTimeout,
+    useStore_MicMaxWords,
+    useStore_MicWordFilterList,
+
+    useStore_SpeakerMaxWords,
+    useStore_SpeakerPhraseTimeout,
+    useStore_SpeakerRecordTimeout,
+
+    useStore_SelectableWhisperComputeDeviceList,
+    useStore_SelectedTranscriptionEngine,
+    useStore_SelectedWhisperComputeDevice,
+    useStore_SelectedWhisperWeightType,
+
+    useStore_WhisperWeightTypeStatus,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { transformToIndexedArray } from "@utils";
+
+export const useTranscription = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    // Mic
+    const { currentMicRecordTimeout, updateMicRecordTimeout, pendingMicRecordTimeout } = useStore_MicRecordTimeout();
+    const { currentMicPhraseTimeout, updateMicPhraseTimeout, pendingMicPhraseTimeout } = useStore_MicPhraseTimeout();
+    const { currentMicMaxWords, updateMicMaxWords, pendingMicMaxWords } = useStore_MicMaxWords();
+    const { currentMicWordFilterList, updateMicWordFilterList, pendingMicWordFilterList } = useStore_MicWordFilterList();
+
+    // Speaker
+    const { currentSpeakerRecordTimeout, updateSpeakerRecordTimeout, pendingSpeakerRecordTimeout } = useStore_SpeakerRecordTimeout();
+    const { currentSpeakerPhraseTimeout, updateSpeakerPhraseTimeout, pendingSpeakerPhraseTimeout } = useStore_SpeakerPhraseTimeout();
+    const { currentSpeakerMaxWords, updateSpeakerMaxWords, pendingSpeakerMaxWords } = useStore_SpeakerMaxWords();
+
+    // Transcription Engines
+    const { currentSelectedTranscriptionEngine, updateSelectedTranscriptionEngine, pendingSelectedTranscriptionEngine } = useStore_SelectedTranscriptionEngine();
+    const { currentWhisperWeightTypeStatus, updateWhisperWeightTypeStatus, pendingWhisperWeightTypeStatus } = useStore_WhisperWeightTypeStatus();
+    const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
+    const { currentSelectableWhisperComputeDeviceList, updateSelectableWhisperComputeDeviceList, pendingSelectableWhisperComputeDeviceList } = useStore_SelectableWhisperComputeDeviceList();
+    const { currentSelectedWhisperComputeDevice, updateSelectedWhisperComputeDevice, pendingSelectedWhisperComputeDevice } = useStore_SelectedWhisperComputeDevice();
+
+
+    // Mic
+    const getMicRecordTimeout = () => {
+        pendingMicRecordTimeout();
+        asyncStdoutToPython("/get/data/mic_record_timeout");
+    };
+
+    const setMicRecordTimeout = (selected_mic_record_timeout) => {
+        pendingMicRecordTimeout();
+        asyncStdoutToPython("/set/data/mic_record_timeout", selected_mic_record_timeout);
+    };
+
+
+    const getMicPhraseTimeout = () => {
+        pendingMicPhraseTimeout();
+        asyncStdoutToPython("/get/data/mic_phrase_timeout");
+    };
+
+    const setMicPhraseTimeout = (selected_mic_phrase_timeout) => {
+        pendingMicPhraseTimeout();
+        asyncStdoutToPython("/set/data/mic_phrase_timeout", selected_mic_phrase_timeout);
+    };
+
+
+    const getMicMaxWords = () => {
+        pendingMicMaxWords();
+        asyncStdoutToPython("/get/data/mic_max_phrases");
+    };
+
+    const setMicMaxWords = (selected_mic_max_phrases) => {
+        pendingMicMaxWords();
+        asyncStdoutToPython("/set/data/mic_max_phrases", selected_mic_max_phrases);
+    };
+
+    const getMicWordFilterList = () => {
+        pendingMicWordFilterList();
+        asyncStdoutToPython("/get/data/mic_word_filter");
+    };
+
+    const setMicWordFilterList = (selected_mic_word_filter) => {
+        pendingMicWordFilterList();
+        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;
+        });
+    };
+
+    // Speaker
+    const getSpeakerRecordTimeout = () => {
+        pendingSpeakerRecordTimeout();
+        asyncStdoutToPython("/get/data/speaker_record_timeout");
+    };
+
+    const setSpeakerRecordTimeout = (selected_speaker_record_timeout) => {
+        pendingSpeakerRecordTimeout();
+        asyncStdoutToPython("/set/data/speaker_record_timeout", selected_speaker_record_timeout);
+    };
+
+
+    const getSpeakerPhraseTimeout = () => {
+        pendingSpeakerPhraseTimeout();
+        asyncStdoutToPython("/get/data/speaker_phrase_timeout");
+    };
+
+    const setSpeakerPhraseTimeout = (selected_speaker_phrase_timeout) => {
+        pendingSpeakerPhraseTimeout();
+        asyncStdoutToPython("/set/data/speaker_phrase_timeout", selected_speaker_phrase_timeout);
+    };
+
+
+    const getSpeakerMaxWords = () => {
+        pendingSpeakerMaxWords();
+        asyncStdoutToPython("/get/data/speaker_max_phrases");
+    };
+
+    const setSpeakerMaxWords = (selected_speaker_max_phrases) => {
+        pendingSpeakerMaxWords();
+        asyncStdoutToPython("/set/data/speaker_max_phrases", selected_speaker_max_phrases);
+    };
+
+
+    // Transcription Engines
+    // Transcription Engines (Google / Whisper)
+    const getSelectedTranscriptionEngine = () => {
+        pendingSelectedTranscriptionEngine();
+        asyncStdoutToPython("/get/data/selected_transcription_engine");
+    };
+
+    const setSelectedTranscriptionEngine = (selected_transcription_engine) => {
+        pendingSelectedTranscriptionEngine();
+        asyncStdoutToPython("/set/data/selected_transcription_engine", selected_transcription_engine);
+    };
+
+
+    // Transcription Engines (Weight Type List)
+    const updateDownloadedWhisperWeightTypeStatus = (downloaded_weight_type_status) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) => ({
+                ...item,
+                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+            }))
+        );
+    };
+    const updateDownloadProgressWhisperWeightTypeStatus = (payload) => {
+        if (payload === true) return console.error("fix me.");
+
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                payload.weight_type === item.id
+                    ? { ...item, progress: payload.progress * 100 }
+                    : item
+            )
+        );
+    };
+    const pendingWhisperWeightType = (id) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_pending: true }
+                    : item
+            )
+        );
+    };
+    const downloadedWhisperWeightType = (id) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+                    : item
+            )
+        );
+    };
+
+    const downloadWhisperWeight = (weight_type) => {
+        asyncStdoutToPython("/run/download_whisper_weight", weight_type);
+    };
+
+    // Transcription Engines (Selected Weight Type)
+    const getSelectedWhisperWeightType = () => {
+        pendingSelectedWhisperWeightType();
+        asyncStdoutToPython("/get/data/whisper_weight_type");
+    };
+
+    const setSelectedWhisperWeightType = (selected_whisper_weight_type) => {
+        pendingSelectedWhisperWeightType();
+        asyncStdoutToPython("/set/data/whisper_weight_type", selected_whisper_weight_type);
+    };
+
+
+    // Transcription Engines (Compute Device List)
+    const getSelectableWhisperComputeDeviceList = () => {
+        pendingSelectableWhisperComputeDeviceList();
+        asyncStdoutToPython("/get/data/transcription_compute_device_list");
+    };
+
+    const updateSelectableWhisperComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableWhisperComputeDeviceList(transformToIndexedArray(payload));
+    };
+
+    // Transcription Engines (Selected Compute Device)
+    const getSelectedWhisperComputeDevice = () => {
+        pendingSelectedWhisperComputeDevice();
+        asyncStdoutToPython("/get/data/selected_transcription_compute_device");
+    };
+
+    const setSelectedWhisperComputeDevice = (selected_transcription_compute_device) => {
+        pendingSelectedWhisperComputeDevice();
+        asyncStdoutToPython("/set/data/selected_transcription_compute_device", selected_transcription_compute_device);
+    };
+
+    return {
+        // Mic
+        currentMicRecordTimeout,
+        getMicRecordTimeout,
+        updateMicRecordTimeout,
+        setMicRecordTimeout,
+
+        currentMicPhraseTimeout,
+        getMicPhraseTimeout,
+        updateMicPhraseTimeout,
+        setMicPhraseTimeout,
+
+        currentMicMaxWords,
+        getMicMaxWords,
+        updateMicMaxWords,
+        setMicMaxWords,
+
+        currentMicWordFilterList,
+        getMicWordFilterList,
+        updateMicWordFilterList,
+        setMicWordFilterList,
+        updateMicWordFilterList_FromBackend,
+
+        // Speaker
+        currentSpeakerRecordTimeout,
+        getSpeakerRecordTimeout,
+        updateSpeakerRecordTimeout,
+        setSpeakerRecordTimeout,
+
+        currentSpeakerPhraseTimeout,
+        getSpeakerPhraseTimeout,
+        updateSpeakerPhraseTimeout,
+        setSpeakerPhraseTimeout,
+
+        currentSpeakerMaxWords,
+        getSpeakerMaxWords,
+        updateSpeakerMaxWords,
+        setSpeakerMaxWords,
+
+        // Transcription Engines
+        currentSelectedTranscriptionEngine,
+        getSelectedTranscriptionEngine,
+        updateSelectedTranscriptionEngine,
+        setSelectedTranscriptionEngine,
+
+        currentWhisperWeightTypeStatus,
+        updateWhisperWeightTypeStatus,
+        updateDownloadedWhisperWeightTypeStatus,
+        updateDownloadProgressWhisperWeightTypeStatus,
+        pendingWhisperWeightType,
+        downloadedWhisperWeightType,
+        downloadWhisperWeight,
+
+        currentSelectedWhisperWeightType,
+        getSelectedWhisperWeightType,
+        updateSelectedWhisperWeightType,
+        setSelectedWhisperWeightType,
+
+        currentSelectableWhisperComputeDeviceList,
+        getSelectableWhisperComputeDeviceList,
+        updateSelectableWhisperComputeDeviceList,
+        updateSelectableWhisperComputeDeviceList_FromBackend,
+
+        currentSelectedWhisperComputeDevice,
+        getSelectedWhisperComputeDevice,
+        updateSelectedWhisperComputeDevice,
+        setSelectedWhisperComputeDevice,
+    };
+};

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

@@ -1,60 +0,0 @@
-import { useStore_WhisperWeightTypeStatus } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useWhisperWeightTypeStatus = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentWhisperWeightTypeStatus, updateWhisperWeightTypeStatus, pendingWhisperWeightTypeStatus } = useStore_WhisperWeightTypeStatus();
-
-    const updateDownloadedWhisperWeightTypeStatus = (downloaded_weight_type_status) => {
-        updateWhisperWeightTypeStatus((old_status) =>
-            old_status.data.map((item) => ({
-                ...item,
-                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
-            }))
-        );
-    };
-    const updateDownloadProgressWhisperWeightTypeStatus = (payload) => {
-        if (payload === true) return console.error("fix me.");
-
-        updateWhisperWeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                payload.weight_type === item.id
-                    ? { ...item, progress: payload.progress * 100 }
-                    : item
-            )
-        );
-    };
-    const pendingWhisperWeightType = (id) => {
-        updateWhisperWeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                id === item.id
-                    ? { ...item, is_pending: true }
-                    : item
-            )
-        );
-    };
-    const downloadedWhisperWeightType = (id) => {
-        updateWhisperWeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                id === item.id
-                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
-                    : item
-            )
-        );
-    };
-
-    const downloadWhisperWeight = (weight_type) => {
-        asyncStdoutToPython("/run/download_whisper_weight", weight_type);
-    };
-
-    return {
-        currentWhisperWeightTypeStatus,
-        updateWhisperWeightTypeStatus,
-
-        updateDownloadedWhisperWeightTypeStatus,
-        updateDownloadProgressWhisperWeightTypeStatus,
-        pendingWhisperWeightType,
-        downloadedWhisperWeightType,
-        downloadWhisperWeight,
-    };
-};

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

@@ -1,60 +0,0 @@
-import { useStore_CTranslate2WeightTypeStatus } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useCTranslate2WeightTypeStatus = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
-
-    const updateDownloadedCTranslate2WeightTypeStatus = (downloaded_weight_type_status) => {
-        updateCTranslate2WeightTypeStatus((old_status) =>
-            old_status.data.map((item) => ({
-                ...item,
-                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
-            }))
-        );
-    };
-    const updateDownloadProgressCTranslate2WeightTypeStatus = (payload) => {
-        if (payload === true) return console.error("fix me.");
-
-        updateCTranslate2WeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                payload.weight_type === item.id
-                    ? { ...item, progress: payload.progress * 100 }
-                    : item
-            )
-        );
-    };
-    const pendingCTranslate2WeightType = (id) => {
-        updateCTranslate2WeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                id === item.id
-                    ? { ...item, is_pending: true }
-                    : item
-            )
-        );
-    };
-    const downloadedCTranslate2WeightType = (id) => {
-        updateCTranslate2WeightTypeStatus((old_status) =>
-            old_status.data.map((item) =>
-                id === item.id
-                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
-                    : item
-            )
-        );
-    };
-
-    const downloadCTranslate2Weight = (weight_type) => {
-        asyncStdoutToPython("/run/download_ctranslate2_weight", weight_type);
-    };
-
-    return {
-        currentCTranslate2WeightTypeStatus,
-        updateCTranslate2WeightTypeStatus,
-
-        updateDownloadedCTranslate2WeightTypeStatus,
-        updateDownloadProgressCTranslate2WeightTypeStatus,
-        pendingCTranslate2WeightType,
-        downloadedCTranslate2WeightType,
-        downloadCTranslate2Weight,
-    };
-};

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

@@ -1,45 +0,0 @@
-import { useStore_DeepLAuthKey } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-import { useTranslation } from "react-i18next";
-import { useNotificationStatus } from "@logics_common";
-
-export const useDeepLAuthKey = () => {
-    const { t } = useTranslation();
-    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentDeepLAuthKey, updateDeepLAuthKey, pendingDeepLAuthKey } = useStore_DeepLAuthKey();
-
-    const getDeepLAuthKey = () => {
-        pendingDeepLAuthKey();
-        asyncStdoutToPython("/get/data/deepl_auth_key");
-    };
-
-    const setDeepLAuthKey = (selected_deepl_auth_key) => {
-        pendingDeepLAuthKey();
-        asyncStdoutToPython("/set/data/deepl_auth_key", selected_deepl_auth_key);
-    };
-
-    const deleteDeepLAuthKey = () => {
-        pendingDeepLAuthKey();
-        asyncStdoutToPython("/delete/data/deepl_auth_key");
-    };
-    const deletedDeepLAuthKey = () => {
-        updateDeepLAuthKey("");
-    };
-
-    const savedDeepLAuthKey = (data) => {
-        updateDeepLAuthKey(data);
-        showNotification_Success(t("config_page.translation.deepl_auth_key.auth_key_success"));
-    };
-
-    return {
-        currentDeepLAuthKey,
-        getDeepLAuthKey,
-        updateDeepLAuthKey,
-        setDeepLAuthKey,
-        deleteDeepLAuthKey,
-
-        deletedDeepLAuthKey,
-        savedDeepLAuthKey,
-    };
-};

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

@@ -1,25 +0,0 @@
-import { useStore_SelectableCTranslate2ComputeDeviceList } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-import { transformToIndexedArray } from "@utils";
-
-export const useSelectableCTranslate2ComputeDeviceList = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectableCTranslate2ComputeDeviceList, updateSelectableCTranslate2ComputeDeviceList, pendingSelectableCTranslate2ComputeDeviceList } = useStore_SelectableCTranslate2ComputeDeviceList();
-
-    const getSelectableCTranslate2ComputeDeviceList = () => {
-        pendingSelectableCTranslate2ComputeDeviceList();
-        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,24 +0,0 @@
-import { useStore_SelectedCTranslate2ComputeDevice } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedCTranslate2ComputeDevice = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedCTranslate2ComputeDevice, updateSelectedCTranslate2ComputeDevice, pendingSelectedCTranslate2ComputeDevice } = useStore_SelectedCTranslate2ComputeDevice();
-
-    const getSelectedCTranslate2ComputeDevice = () => {
-        pendingSelectedCTranslate2ComputeDevice();
-        asyncStdoutToPython("/get/data/selected_translation_compute_device");
-    };
-
-    const setSelectedCTranslate2ComputeDevice = (selected_translation_compute_device) => {
-        pendingSelectedCTranslate2ComputeDevice();
-        asyncStdoutToPython("/set/data/selected_translation_compute_device", selected_translation_compute_device);
-    };
-
-    return {
-        currentSelectedCTranslate2ComputeDevice,
-        getSelectedCTranslate2ComputeDevice,
-        updateSelectedCTranslate2ComputeDevice,
-        setSelectedCTranslate2ComputeDevice,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_SelectedCTranslate2WeightType } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSelectedCTranslate2WeightType = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
-
-    const getSelectedCTranslate2WeightType = () => {
-        pendingSelectedCTranslate2WeightType();
-        asyncStdoutToPython("/get/data/ctranslate2_weight_type");
-    };
-
-    const setSelectedCTranslate2WeightType = (selected_ctranslate2_weight_type) => {
-        pendingSelectedCTranslate2WeightType();
-        asyncStdoutToPython("/set/data/ctranslate2_weight_type", selected_ctranslate2_weight_type);
-    };
-
-    return {
-        currentSelectedCTranslate2WeightType,
-        getSelectedCTranslate2WeightType,
-        updateSelectedCTranslate2WeightType,
-        setSelectedCTranslate2WeightType,
-    };
-};

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

@@ -0,0 +1,155 @@
+import {
+    useStore_CTranslate2WeightTypeStatus,
+    useStore_SelectedCTranslate2WeightType,
+    useStore_SelectableCTranslate2ComputeDeviceList,
+    useStore_SelectedCTranslate2ComputeDevice,
+    useStore_DeepLAuthKey,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+import { useI18n } from "@useI18n";
+import { transformToIndexedArray } from "@utils";
+import { useNotificationStatus } from "@logics_common";
+
+export const useTranslation = () => {
+    const { t } = useI18n();
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
+    const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
+    const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
+    const { currentSelectableCTranslate2ComputeDeviceList, updateSelectableCTranslate2ComputeDeviceList, pendingSelectableCTranslate2ComputeDeviceList } = useStore_SelectableCTranslate2ComputeDeviceList();
+    const { currentSelectedCTranslate2ComputeDevice, updateSelectedCTranslate2ComputeDevice, pendingSelectedCTranslate2ComputeDevice } = useStore_SelectedCTranslate2ComputeDevice();
+    const { currentDeepLAuthKey, updateDeepLAuthKey, pendingDeepLAuthKey } = useStore_DeepLAuthKey();
+
+
+    const updateDownloadedCTranslate2WeightTypeStatus = (downloaded_weight_type_status) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) => ({
+                ...item,
+                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+            }))
+        );
+    };
+    const updateDownloadProgressCTranslate2WeightTypeStatus = (payload) => {
+        if (payload === true) return console.error("fix me.");
+
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                payload.weight_type === item.id
+                    ? { ...item, progress: payload.progress * 100 }
+                    : item
+            )
+        );
+    };
+    const pendingCTranslate2WeightType = (id) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_pending: true }
+                    : item
+            )
+        );
+    };
+    const downloadedCTranslate2WeightType = (id) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+                    : item
+            )
+        );
+    };
+    const downloadCTranslate2Weight = (weight_type) => {
+        asyncStdoutToPython("/run/download_ctranslate2_weight", weight_type);
+    };
+
+
+    const getSelectedCTranslate2WeightType = () => {
+        pendingSelectedCTranslate2WeightType();
+        asyncStdoutToPython("/get/data/ctranslate2_weight_type");
+    };
+
+    const setSelectedCTranslate2WeightType = (selected_ctranslate2_weight_type) => {
+        pendingSelectedCTranslate2WeightType();
+        asyncStdoutToPython("/set/data/ctranslate2_weight_type", selected_ctranslate2_weight_type);
+    };
+
+
+    const getSelectableCTranslate2ComputeDeviceList = () => {
+        pendingSelectableCTranslate2ComputeDeviceList();
+        asyncStdoutToPython("/get/data/translation_compute_device_list");
+    };
+
+    const updateSelectableCTranslate2ComputeDeviceList_FromBackend = (payload) => {
+        updateSelectableCTranslate2ComputeDeviceList(transformToIndexedArray(payload));
+    };
+
+
+    const getSelectedCTranslate2ComputeDevice = () => {
+        pendingSelectedCTranslate2ComputeDevice();
+        asyncStdoutToPython("/get/data/selected_translation_compute_device");
+    };
+
+    const setSelectedCTranslate2ComputeDevice = (selected_translation_compute_device) => {
+        pendingSelectedCTranslate2ComputeDevice();
+        asyncStdoutToPython("/set/data/selected_translation_compute_device", selected_translation_compute_device);
+    };
+
+
+    const getDeepLAuthKey = () => {
+        pendingDeepLAuthKey();
+        asyncStdoutToPython("/get/data/deepl_auth_key");
+    };
+
+    const setDeepLAuthKey = (selected_deepl_auth_key) => {
+        pendingDeepLAuthKey();
+        asyncStdoutToPython("/set/data/deepl_auth_key", selected_deepl_auth_key);
+    };
+
+    const deleteDeepLAuthKey = () => {
+        pendingDeepLAuthKey();
+        asyncStdoutToPython("/delete/data/deepl_auth_key");
+    };
+    const deletedDeepLAuthKey = () => {
+        updateDeepLAuthKey("");
+    };
+
+    const savedDeepLAuthKey = (data) => {
+        updateDeepLAuthKey(data);
+        showNotification_Success(t("config_page.translation.deepl_auth_key.auth_key_success"));
+    };
+
+
+    return {
+        currentCTranslate2WeightTypeStatus,
+        updateCTranslate2WeightTypeStatus,
+        updateDownloadedCTranslate2WeightTypeStatus,
+        updateDownloadProgressCTranslate2WeightTypeStatus,
+        pendingCTranslate2WeightType,
+        downloadedCTranslate2WeightType,
+        downloadCTranslate2Weight,
+
+        currentSelectedCTranslate2WeightType,
+        getSelectedCTranslate2WeightType,
+        updateSelectedCTranslate2WeightType,
+        setSelectedCTranslate2WeightType,
+
+        currentSelectableCTranslate2ComputeDeviceList,
+        getSelectableCTranslate2ComputeDeviceList,
+        updateSelectableCTranslate2ComputeDeviceList,
+        updateSelectableCTranslate2ComputeDeviceList_FromBackend,
+
+        currentSelectedCTranslate2ComputeDevice,
+        getSelectedCTranslate2ComputeDevice,
+        updateSelectedCTranslate2ComputeDevice,
+        setSelectedCTranslate2ComputeDevice,
+
+        currentDeepLAuthKey,
+        getDeepLAuthKey,
+        updateDeepLAuthKey,
+        setDeepLAuthKey,
+        deleteDeepLAuthKey,
+        deletedDeepLAuthKey,
+        savedDeepLAuthKey,
+    };
+};

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

@@ -1,28 +0,0 @@
-import { useStore_IsEnabledOverlayLargeLog } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useIsEnabledOverlayLargeLog = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentIsEnabledOverlayLargeLog, updateIsEnabledOverlayLargeLog, pendingIsEnabledOverlayLargeLog } = useStore_IsEnabledOverlayLargeLog();
-
-    const getIsEnabledOverlayLargeLog = () => {
-        pendingIsEnabledOverlayLargeLog();
-        asyncStdoutToPython("/get/data/overlay_large_log");
-    };
-
-    const toggleIsEnabledOverlayLargeLog = () => {
-        pendingIsEnabledOverlayLargeLog();
-        if (currentIsEnabledOverlayLargeLog.data) {
-            asyncStdoutToPython("/set/disable/overlay_large_log");
-        } else {
-            asyncStdoutToPython("/set/enable/overlay_large_log");
-        }
-    };
-
-    return {
-        currentIsEnabledOverlayLargeLog,
-        getIsEnabledOverlayLargeLog,
-        updateIsEnabledOverlayLargeLog,
-        toggleIsEnabledOverlayLargeLog,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_IsEnabledOverlaySmallLog } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useIsEnabledOverlaySmallLog = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog();
-
-    const getIsEnabledOverlaySmallLog = () => {
-        pendingIsEnabledOverlaySmallLog();
-        asyncStdoutToPython("/get/data/overlay_small_log");
-    };
-
-    const toggleIsEnabledOverlaySmallLog = () => {
-        pendingIsEnabledOverlaySmallLog();
-        if (currentIsEnabledOverlaySmallLog.data) {
-            asyncStdoutToPython("/set/disable/overlay_small_log");
-        } else {
-            asyncStdoutToPython("/set/enable/overlay_small_log");
-        }
-    };
-
-    return {
-        currentIsEnabledOverlaySmallLog,
-        getIsEnabledOverlaySmallLog,
-        updateIsEnabledOverlaySmallLog,
-        toggleIsEnabledOverlaySmallLog,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_OverlayLargeLogSettings } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useOverlayLargeLogSettings = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentOverlayLargeLogSettings, updateOverlayLargeLogSettings, pendingOverlayLargeLogSettings } = useStore_OverlayLargeLogSettings();
-
-    const getOverlayLargeLogSettings = () => {
-        // pendingOverlayLargeLogSettings();
-        asyncStdoutToPython("/get/data/overlay_large_log_settings");
-    };
-
-    const setOverlayLargeLogSettings = (overlay_large_log_settings) => {
-        // pendingOverlayLargeLogSettings();
-        asyncStdoutToPython("/set/data/overlay_large_log_settings", overlay_large_log_settings);
-    };
-
-    return {
-        currentOverlayLargeLogSettings,
-        getOverlayLargeLogSettings,
-        updateOverlayLargeLogSettings,
-        setOverlayLargeLogSettings,
-    };
-};

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

@@ -1,28 +0,0 @@
-import { useStore_OverlayShowOnlyTranslatedMessages } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useOverlayShowOnlyTranslatedMessages = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentOverlayShowOnlyTranslatedMessages, updateOverlayShowOnlyTranslatedMessages, pendingOverlayShowOnlyTranslatedMessages } = useStore_OverlayShowOnlyTranslatedMessages();
-
-    const getOverlayShowOnlyTranslatedMessages = () => {
-        pendingOverlayShowOnlyTranslatedMessages();
-        asyncStdoutToPython("/get/data/overlay_show_only_translated_messages");
-    };
-
-    const toggleOverlayShowOnlyTranslatedMessages = () => {
-        pendingOverlayShowOnlyTranslatedMessages();
-        if (currentOverlayShowOnlyTranslatedMessages.data) {
-            asyncStdoutToPython("/set/disable/overlay_show_only_translated_messages");
-        } else {
-            asyncStdoutToPython("/set/enable/overlay_show_only_translated_messages");
-        }
-    };
-
-    return {
-        currentOverlayShowOnlyTranslatedMessages,
-        getOverlayShowOnlyTranslatedMessages,
-        updateOverlayShowOnlyTranslatedMessages,
-        toggleOverlayShowOnlyTranslatedMessages,
-    };
-};

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

@@ -1,24 +0,0 @@
-import { useStore_OverlaySmallLogSettings } from "@store";
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useOverlaySmallLogSettings = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    const { currentOverlaySmallLogSettings, updateOverlaySmallLogSettings, pendingOverlaySmallLogSettings } = useStore_OverlaySmallLogSettings();
-
-    const getOverlaySmallLogSettings = () => {
-        // pendingOverlaySmallLogSettings();
-        asyncStdoutToPython("/get/data/overlay_small_log_settings");
-    };
-
-    const setOverlaySmallLogSettings = (overlay_small_log_settings) => {
-        // pendingOverlaySmallLogSettings();
-        asyncStdoutToPython("/set/data/overlay_small_log_settings", overlay_small_log_settings);
-    };
-
-    return {
-        currentOverlaySmallLogSettings,
-        getOverlaySmallLogSettings,
-        updateOverlaySmallLogSettings,
-        setOverlaySmallLogSettings,
-    };
-};

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

@@ -1,13 +0,0 @@
-import { useStdoutToPython } from "@useStdoutToPython";
-
-export const useSendTextToOverlay = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-
-    const sendTextToOverlay = (text) => {
-        asyncStdoutToPython("/run/send_text_overlay", text);
-    };
-
-    return {
-        sendTextToOverlay,
-    };
-};

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

@@ -0,0 +1,120 @@
+import {
+    useStore_IsEnabledOverlaySmallLog,
+    useStore_IsEnabledOverlayLargeLog,
+    useStore_OverlaySmallLogSettings,
+    useStore_OverlayLargeLogSettings,
+    useStore_OverlayShowOnlyTranslatedMessages,
+} from "@store";
+import { useStdoutToPython } from "@useStdoutToPython";
+
+export const useVr = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog();
+    const { currentIsEnabledOverlayLargeLog, updateIsEnabledOverlayLargeLog, pendingIsEnabledOverlayLargeLog } = useStore_IsEnabledOverlayLargeLog();
+    const { currentOverlaySmallLogSettings, updateOverlaySmallLogSettings, pendingOverlaySmallLogSettings } = useStore_OverlaySmallLogSettings();
+    const { currentOverlayLargeLogSettings, updateOverlayLargeLogSettings, pendingOverlayLargeLogSettings } = useStore_OverlayLargeLogSettings();
+    const { currentOverlayShowOnlyTranslatedMessages, updateOverlayShowOnlyTranslatedMessages, pendingOverlayShowOnlyTranslatedMessages } = useStore_OverlayShowOnlyTranslatedMessages();
+
+
+    const getIsEnabledOverlaySmallLog = () => {
+        pendingIsEnabledOverlaySmallLog();
+        asyncStdoutToPython("/get/data/overlay_small_log");
+    };
+
+    const toggleIsEnabledOverlaySmallLog = () => {
+        pendingIsEnabledOverlaySmallLog();
+        if (currentIsEnabledOverlaySmallLog.data) {
+            asyncStdoutToPython("/set/disable/overlay_small_log");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_small_log");
+        }
+    };
+
+
+    const getIsEnabledOverlayLargeLog = () => {
+        pendingIsEnabledOverlayLargeLog();
+        asyncStdoutToPython("/get/data/overlay_large_log");
+    };
+
+    const toggleIsEnabledOverlayLargeLog = () => {
+        pendingIsEnabledOverlayLargeLog();
+        if (currentIsEnabledOverlayLargeLog.data) {
+            asyncStdoutToPython("/set/disable/overlay_large_log");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_large_log");
+        }
+    };
+
+
+    const getOverlaySmallLogSettings = () => {
+        // pendingOverlaySmallLogSettings();
+        asyncStdoutToPython("/get/data/overlay_small_log_settings");
+    };
+
+    const setOverlaySmallLogSettings = (overlay_small_log_settings) => {
+        // pendingOverlaySmallLogSettings();
+        asyncStdoutToPython("/set/data/overlay_small_log_settings", overlay_small_log_settings);
+    };
+
+
+    const getOverlayLargeLogSettings = () => {
+        // pendingOverlayLargeLogSettings();
+        asyncStdoutToPython("/get/data/overlay_large_log_settings");
+    };
+
+    const setOverlayLargeLogSettings = (overlay_large_log_settings) => {
+        // pendingOverlayLargeLogSettings();
+        asyncStdoutToPython("/set/data/overlay_large_log_settings", overlay_large_log_settings);
+    };
+
+
+    const getOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/overlay_show_only_translated_messages");
+    };
+
+    const toggleOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        if (currentOverlayShowOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/overlay_show_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_show_only_translated_messages");
+        }
+    };
+
+
+    const sendTextToOverlay = (text) => {
+        asyncStdoutToPython("/run/send_text_overlay", text);
+    };
+
+
+    return {
+        currentIsEnabledOverlaySmallLog,
+        getIsEnabledOverlaySmallLog,
+        updateIsEnabledOverlaySmallLog,
+        toggleIsEnabledOverlaySmallLog,
+
+        currentIsEnabledOverlayLargeLog,
+        getIsEnabledOverlayLargeLog,
+        updateIsEnabledOverlayLargeLog,
+        toggleIsEnabledOverlayLargeLog,
+
+        currentOverlaySmallLogSettings,
+        getOverlaySmallLogSettings,
+        updateOverlaySmallLogSettings,
+        setOverlaySmallLogSettings,
+
+        currentOverlayLargeLogSettings,
+        getOverlayLargeLogSettings,
+        updateOverlayLargeLogSettings,
+        setOverlayLargeLogSettings,
+
+        currentOverlayShowOnlyTranslatedMessages,
+        getOverlayShowOnlyTranslatedMessages,
+        updateOverlayShowOnlyTranslatedMessages,
+        toggleOverlayShowOnlyTranslatedMessages,
+
+        sendTextToOverlay,
+    };
+};