[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/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();