[Update] Main Page: Connect to backend. IsMainPageCompactMode.

src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx

@@ -1,22 +1,18 @@
 import clsx from "clsx";
 import styles from "./SidebarCompactModeButton.module.scss";
 
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 export const SidebarCompactModeButton = () => {
-    const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
-
-    const toggleCompactMode = () => {
-        updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
-    };
+    const { toggleIsMainPageCompactMode, currentIsMainPageCompactMode } = useIsMainPageCompactMode();
 
     const class_names = clsx(styles["arrow_left_svg"], {
         [styles["reverse"]]: currentIsMainPageCompactMode.data
     });
 
     return (
-        <div className={styles.container} onClick={toggleCompactMode}>
+        <div className={styles.container} onClick={toggleIsMainPageCompactMode}>
             <ArrowLeftSvg className={class_names} preserveAspectRatio="none" />
         </div>
     );

src-ui/app/main_page/sidebar_section/SidebarSection.jsx

@@ -1,7 +1,8 @@
 import clsx from "clsx";
 
 import styles from "./SidebarSection.module.scss";
-import { useStore_IsMainPageCompactMode, useStore_IsOpenedLanguageSelector } from "@store";
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 import { Logo } from "./logo/Logo";
 import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,7 +10,7 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
 import { OpenSettings } from "./open_settings/OpenSettings";
 
 export const SidebarSection = () => {
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
     const container_class_name = clsx(styles.container, {
         [styles.is_compact_mode]: currentIsMainPageCompactMode.data
     });

src-ui/app/main_page/sidebar_section/logo/Logo.jsx

@@ -11,10 +11,10 @@ export const Logo = () => {
 
 import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
 import chato_img from "@images/chato_white.png";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 export const LogoBox = () => {
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
     if (currentIsMainPageCompactMode.data === true) {
         return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
     } else {

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx

@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
 import MicSvg from "@images/mic.svg?react";
 import HeadphonesSvg from "@images/headphones.svg?react";
 import ForegroundSvg from "@images/foreground.svg?react";
-import { useStore_IsMainPageCompactMode } from "@store";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 
 import { useMainFunction } from "@logics_main/useMainFunction";
 
@@ -74,7 +74,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
     const [is_hovered, setIsHovered] = useState(false);
     const [is_mouse_down, setIsMouseDown] = useState(false);
 
-    const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+    const { currentIsMainPageCompactMode } = useIsMainPageCompactMode();
 
     const getClassNames = (baseClass) => clsx(baseClass, {
         [styles.is_compact_mode]: currentIsMainPageCompactMode.data,