[Refactor] (Huge Refactoring 2)

Consolidated all logic into category-specific files.
Renamed useTranslation from react-i18next to useI18n to avoid a name conflict with our own function.

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