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