From 5ddc77a9ccf2be4a73cf4493eaf461f27d0f9b70 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:28:36 +0900
Subject: [PATCH] [bugfix] Main Page: Message Log Input Box Ratio: Fix init
 apply ratio. imperfectly, tho.

---
 .../message_container/MessageContainer.jsx    | 43 +++++++++++--------
 src-ui/store.js                               |  2 +
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
index 8ff1f14f..cad18079 100644
--- a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
@@ -7,12 +7,15 @@ import { MessageLogSettingsContainer } from "./message_log_settings_container/Me
 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 [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 log_box_ref = useRef(null);
@@ -23,8 +26,13 @@ export const MessageContainer = () => {
         if (minimized === true) return; // don't save while the window is minimized.
         setMessageBoxHeightInRem(data);
     };
-
     const calculateMessageBoxRatioAndHeight = () => {
+        if (!currentIsAppliedInitMessageBoxHeight.data) {
+            asyncSetMessageInputBoxRatio(currentMessageInputBoxRatio.data);
+            asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
+            return;
+        }
+
         if (log_box_ref.current && message_box_wrapper_ref.current) {
             const container_height = container_ref.current.offsetHeight;
             const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
@@ -34,9 +42,7 @@ export const MessageContainer = () => {
             const message_box_ratio = (message_box_height / total_height) * 100;
 
             asyncSetMessageInputBoxRatio(message_box_ratio);
-
-            const height_in_rem = convertRatioToRem(message_box_ratio);
-            asyncSetMessageBoxHeightInRem(height_in_rem);
+            asyncSetMessageBoxHeightInRem(convertRatioToRem(message_box_ratio));
         }
     };
 
@@ -65,23 +71,24 @@ export const MessageContainer = () => {
         return ((ratio / 100) * total_height / FONT_SIZE_STANDARD);
     };
 
+    useEffect(() => {
+        let resizeTimeout;
 
-        // Tauriのwindow resizeイベントをリッスン
-        useEffect(() => {
-            let resizeTimeout;
+        const unlisten = appWindow.onResized(() => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                calculateMessageBoxRatioAndHeight();
+            }, 200);
+        });
 
-            // イベントのリスナーを設定
-            const unlisten = appWindow.onResized(() => {
-                clearTimeout(resizeTimeout);
-                resizeTimeout = setTimeout(() => {
-                    calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行
-                }, 200); // ドラッグが終了したと見なすまでの遅延（200ms程度）
-            });
+        return () => {
+            unlisten.then((dispose) => dispose());
+        };
+    }, []);
 
-            return () => {
-                unlisten.then((dispose) => dispose()); // イベントリスナーを解除
-            };
-        }, []);
+    useEffect(() => {
+        updateIsAppliedInitMessageBoxHeight(true);
+    }, []);
 
     return (
         <div className={styles.container} ref={container_ref}>
diff --git a/src-ui/store.js b/src-ui/store.js
index 0470dd61..7ddf8418 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -17,6 +17,7 @@ export const store = {
     backend_subprocess: null,
     config_page: null,
     log_box_ref: null,
+    is_applied_init_message_box_height: false,
 };
 
 const generatePropertyNames = (base_name) => ({
@@ -122,6 +123,7 @@ export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_Foreground
 export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
 export const { atomInstance: Atom_MessageInputValue, useHook: useStore_MessageInputValue } = createAtomWithHook("", "MessageInputValue");
 export const { atomInstance: Atom_IsVisibleResendButton, useHook: useStore_IsVisibleResendButton } = createAtomWithHook(false, "IsVisibleResendButton");
+export const { atomInstance: Atom_IsAppliedInitMessageBoxHeight, useHook: useStore_IsAppliedInitMessageBoxHeight } = createAtomWithHook(false, "IsAppliedInitMessageBoxHeight");
 
 export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");