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