Merge branch 'fix_message_input_box' into develop

src-ui/app/main_page/main_section/message_container/MessageContainer.jsx

@@ -1,99 +1,67 @@
 import { useResizable } from "react-resizable-layout";
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, forwardRef } from "react";
 import styles from "./MessageContainer.module.scss";
-import { appWindow } from "@tauri-apps/api/window";
 import { LogBox } from "./log_box/LogBox";
 import { MessageLogSettingsContainer } from "./message_log_settings_container/MessageLogSettingsContainer";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
 import { useMessageInputBoxRatio } from "@logics_main";
-import { useUiScaling } from "@logics_configs";
-import { useStore_IsAppliedInitMessageBoxHeight } from "@store";
 
 export const MessageContainer = () => {
     const { currentMessageInputBoxRatio, asyncSetMessageInputBoxRatio } = useMessageInputBoxRatio();
-    const { currentUiScaling } = useUiScaling();
+    const [ui_message_box_ratio, setUiMessageBoxRatio] = useState(false);
     const [is_hovered, setIsHovered] = useState(false);
-    const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10);
-    const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem
-    const { currentIsAppliedInitMessageBoxHeight, updateIsAppliedInitMessageBoxHeight } = useStore_IsAppliedInitMessageBoxHeight();
 
     const container_ref = useRef(null);
+    const separator_ref = useRef(null);
     const log_box_ref = useRef(null);
-    const message_box_wrapper_ref = useRef(null);
+    const message_input_box_wrapper_ref = useRef(null);
 
-    const asyncSetMessageBoxHeightInRem = async (data) => {
-        const minimized = await appWindow.isMinimized();
-        if (minimized) return; // don't save while the window is minimized.
-        setMessageBoxHeightInRem(data);
+    const calculateMessageInputBoxRatio = (position) => {
+        if (log_box_ref.current && message_input_box_wrapper_ref.current && separator_ref.current && container_ref.current) {
+            const container_padding_bottom = parseFloat(
+                window.getComputedStyle(container_ref.current).paddingBottom
+            );
+            const total_height =
+                log_box_ref.current.offsetHeight +
+                separator_ref.current.offsetHeight * 2 +
+                message_input_box_wrapper_ref.current.offsetHeight;
+            const adjusted_position = position - container_padding_bottom;
+            const message_box_ratio = (adjusted_position / total_height) * 100;
+            return message_box_ratio;
+        }
+        console.warn("References not ready for calculation");
+        return 10; // Default initial height percentage
     };
 
-    const calculateMessageBoxRatioAndHeight = () => {
-        if (!currentIsAppliedInitMessageBoxHeight.data) {
-            asyncSetMessageInputBoxRatio(currentMessageInputBoxRatio.data);
-            asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
-            return;
-        }
-
-        if (log_box_ref.current && message_box_wrapper_ref.current && container_ref.current) {
-            const container_height = container_ref.current.offsetHeight;
-            const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
-            const total_height = container_height - container_padding_bottom;
-
-            const message_box_height = message_box_wrapper_ref.current.offsetHeight;
-            const message_box_ratio = (message_box_height / total_height) * 100;
-
-            asyncSetMessageInputBoxRatio(message_box_ratio);
-            asyncSetMessageBoxHeightInRem(convertRatioToRem(message_box_ratio));
-        } else {
-            console.warn("References not ready for calculation");
+    const asyncSaveRatio = (position) => {
+        if (position > 0) {
+            asyncSetMessageInputBoxRatio(calculateMessageInputBoxRatio(position));
         }
     };
 
     const { position, separatorProps } = useResizable({
         axis: "y",
         reverse: true,
-        onResizeEnd: calculateMessageBoxRatioAndHeight,
     });
 
     useEffect(() => {
-        asyncSetMessageBoxHeightInRem((position / FONT_SIZE_STANDARD) - 1.4);
+        if (position > 0) {
+            setUiMessageBoxRatio(calculateMessageInputBoxRatio(position));
+            const timeout = setTimeout(() => {
+                asyncSaveRatio(position);
+            }, 200);
+            return () => clearTimeout(timeout);
+        }
     }, [position]);
 
     useEffect(() => {
-        asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
-    }, [currentMessageInputBoxRatio.data]);
-
-    const convertRatioToRem = (ratio) => {
-        if (!container_ref.current) return 0;
-        const container_height = container_ref.current.offsetHeight;
-        const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
-        const total_height = container_height - container_padding_bottom;
-        return total_height === 0 ? 0 : ((ratio / 100) * total_height / FONT_SIZE_STANDARD);
-    };
-
-    useEffect(() => {
-        calculateMessageBoxRatioAndHeight();
-        updateIsAppliedInitMessageBoxHeight(true); // Ensure this happens after initial calculation
-    }, []);
-
-    useEffect(() => {
-        let resizeTimeout;
-
-        const unlisten = appWindow.onResized(() => {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                calculateMessageBoxRatioAndHeight();
-            }, 200);
-        });
-
-        return () => {
-            unlisten.then((dispose) => dispose());
-        };
-    }, []);
+        setUiMessageBoxRatio(currentMessageInputBoxRatio.data);
+    }, [currentMessageInputBoxRatio]);
 
     return (
         <div className={styles.container} ref={container_ref}>
-            <div className={styles.log_box_resize_wrapper}
+            <div
+                className={styles.log_box_resize_wrapper}
                 ref={log_box_ref}
                 onMouseOver={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
@@ -101,11 +69,11 @@ export const MessageContainer = () => {
                 <LogBox />
                 <MessageLogSettingsContainer to_visible_toggle_bar={is_hovered} />
             </div>
-            <Separator {...separatorProps} onDragStart={calculateMessageBoxRatioAndHeight} />
+            <Separator {...separatorProps} ref={separator_ref} />
             <div
                 className={styles.message_box_resize_wrapper}
-                ref={message_box_wrapper_ref}
-                style={{ height: `${message_box_height_in_rem}rem` }}
+                ref={message_input_box_wrapper_ref}
+                style={{ height: `${ui_message_box_ratio}%` }}
             >
                 <MessageInputBox />
             </div>
@@ -113,8 +81,8 @@ export const MessageContainer = () => {
     );
 };
 
-const Separator = ({ onDragStart, ...props }) => (
-    <div tabIndex={0} className={styles.separator} {...props} onDragStart={onDragStart}>
+const Separator = forwardRef((props, ref) => (
+    <div tabIndex={0} className={styles.separator} ref={ref} {...props}>
         <span className={styles.separator_line}></span>
     </div>
-);
+));

src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss

@@ -36,7 +36,7 @@
 }
 
 .message_box_resize_wrapper {
-    height: 10rem;
+    height: 10%;
     min-height: 3.8rem;
     max-height: 90%;
 }

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.module.scss

@@ -1,13 +1,12 @@
 .container {
     height: 100%;
     display: flex;
-    flex-direction: row;
+    gap: 1rem;
 }
 
 .message_box_wrapper {
     width: 100%;
     height: 100%;
-    margin-right: 1rem;
     padding: 0.8rem;
     background-color: var(--dark_875_color);
     border: 0.1rem solid var(--dark_750_color);