[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/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,