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

src-ui/app/App.jsx

@@ -31,6 +31,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
 
@@ -39,6 +40,7 @@ const StartPythonFacadeComponent = () => {
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
+    const { getIsMainPageCompactMode } = useIsMainPageCompactMode();
     const { getSoftwareVersion } = useSoftwareVersion();
     const { getEnableAutoMicSelect } = useEnableAutoMicSelect();
     const { getEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -67,6 +69,7 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getUiLanguage();
+                getIsMainPageCompactMode();
 
                 getSoftwareVersion();
 

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,

src-ui/logics/main/useIsMainPageCompactMode.js

@@ -0,0 +1,26 @@
+import { useStore_IsMainPageCompactMode } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsMainPageCompactMode = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentIsMainPageCompactMode, updateIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
+
+    const getIsMainPageCompactMode = () => {
+        asyncStdoutToPython("/get/main_window_sidebar_compact_mode");
+    };
+
+    const toggleIsMainPageCompactMode = () => {
+        if (currentIsMainPageCompactMode.data) {
+            asyncStdoutToPython("/set/disable_main_window_sidebar_compact_mode");
+        } else {
+            asyncStdoutToPython("/set/enable_main_window_sidebar_compact_mode");
+        }
+    };
+
+    return {
+        currentIsMainPageCompactMode,
+        getIsMainPageCompactMode,
+        toggleIsMainPageCompactMode,
+        updateIsMainPageCompactMode,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -5,8 +5,10 @@ import { useMainFunction } from "@logics_main/useMainFunction";
 import { useMessage } from "@logics_common/useMessage";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
+import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useVolume } from "@logics_common/useVolume";
 
+
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
 import { useEnableAutoMicSelect } from "@logics_configs/useEnableAutoMicSelect";
 import { useEnableAutoSpeakerSelect } from "@logics_configs/useEnableAutoSpeakerSelect";
@@ -24,6 +26,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
 export const useReceiveRoutes = () => {
+    const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
     const {
         updateTranslationStatus,
         updateTranscriptionSendStatus,
@@ -66,6 +69,10 @@ export const useReceiveRoutes = () => {
 
     const routes = {
         // Main Page
+        // Page Controls
+        "/get/main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
+        "/set/enable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
+        "/set/disable_main_window_sidebar_compact_mode": updateIsMainPageCompactMode,
         // Main Functions
         "/set/enable_translation": updateTranslationStatus,
         "/set/disable_translation": updateTranslationStatus,