[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/_app_controllers/FontFamilyController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useSelectedFontFamily } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const FontFamilyController = () => {
-    const { currentSelectedFontFamily } = useSelectedFontFamily();
+    const { currentSelectedFontFamily } = useAppearance();
     useEffect(() => {
         document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data);
     }, [currentSelectedFontFamily.data]);

src-ui/app/_app_controllers/TransparencyController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useTransparency } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const TransparencyController = () => {
-    const { currentTransparency } = useTransparency();
+    const { currentTransparency } = useAppearance();
     useEffect(() => {
         document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
     }, [currentTransparency.data]);

src-ui/app/_app_controllers/UiLanguageController.jsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 
-import { useTranslation } from "react-i18next";
-import { useUiLanguage } from "@logics_configs";
+import { useI18n } from "@useI18n";
+import { useAppearance } from "@logics_configs";
 
 export const UiLanguageController = () => {
-    const { currentUiLanguage } = useUiLanguage();
-    const { i18n } = useTranslation();
+    const { currentUiLanguage } = useAppearance();
+    const { i18n } = useI18n();
 
     useEffect(() => {
         i18n.changeLanguage(currentUiLanguage.data);

src-ui/app/_app_controllers/UiSizeController.jsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import { useUiScaling } from "@logics_configs";
+import { useAppearance } from "@logics_configs";
 
 export const UiSizeController = () => {
-    const { currentUiScaling } = useUiScaling();
+    const { currentUiScaling } = useAppearance();
     const font_size = 62.5 * currentUiScaling.data / 100;
 
     useEffect(() => {

src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useI18n } from "@useI18n";
 import { store } from "@store";
 import { usePlugins } from "@logics_configs";
 import { useSoftwareVersion } from "@logics_common";
 import { useNotificationStatus } from "@logics_common";
 
 export const MergePluginsController = () => {
-    const { t } = useTranslation();
+    const { t } = useI18n();
     const {
         currentLoadedPlugins,
         updatePluginsData,