[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.
This commit is contained in:
Sakamoto Shiina
2025-06-19 08:40:45 +09:00
parent 65b5ffb2fa
commit e480c373cd
100 changed files with 1334 additions and 1525 deletions

View File

@@ -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,

View File

@@ -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) => {

View File

@@ -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({

View File

@@ -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(() => {

View File

@@ -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);

View File

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

View File

@@ -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();

View File

@@ -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);

View File

@@ -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();

View File

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