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