[Update] Main Page: Message Logs: Add message log settings. and add tot visible resend or not toggle.

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -91,7 +91,7 @@ const UiScalingContainer = () => {
 };
 
 
-const MessageLogUiScalingContainer = () => {
+export const MessageLogUiScalingContainer = () => {
     const { t } = useTranslation();
     const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling();
     const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);

src-ui/app/config_page/setting_section/setting_box/index.js

@@ -1,5 +1,5 @@
 export { Device } from "./device/Device";
-export { Appearance } from "./appearance/Appearance";
+export { Appearance, MessageLogUiScalingContainer } from "./appearance/Appearance";
 export { Translation } from "./translation/Translation";
 export { Transcription } from "./transcription/Transcription";
 export { Others, VrcMicMuteSyncContainer } from "./others/Others";

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

@@ -3,13 +3,14 @@ import { useRef, useEffect, useState } 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";
-
 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
 
@@ -84,8 +85,13 @@ export const MessageContainer = () => {
 
     return (
         <div className={styles.container} ref={container_ref}>
-            <div ref={log_box_ref} className={styles.log_box_resize_wrapper}>
+            <div className={styles.log_box_resize_wrapper}
+                ref={log_box_ref}
+                onMouseOver={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
                 <LogBox />
+                <MessageLogSettingsContainer to_visible_toggle_bar={is_hovered}/>
             </div>
             <Separator {...separatorProps} onDragStart={calculateMessageBoxRatioAndHeight} />
             <div

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

@@ -9,6 +9,7 @@
 .log_box_resize_wrapper {
     flex: 1;
     overflow: auto;
+    position: relative;
 }
 
 .separator {

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

@@ -4,13 +4,14 @@ import clsx from "clsx";
 import styles from "./MessageContainer.module.scss";
 import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
 import { useMessage } from "@logics_common";
+import { useIsVisibleResendButton } from "@logics_main";
 export const MessageContainer = ({ messages, status, category, created_at }) => {
     const { t } = useTranslation();
     const {
         sendMessage,
         updateMessageInputValue,
     } = useMessage();
-
+    const { currentIsVisibleResendButton } = useIsVisibleResendButton();
     const [is_hovered, setIsHovered] = useState(false);
     const [is_locked, setIsLocked] = useState(false);
 
@@ -45,6 +46,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
 
     const message_type_class_name = clsx({
         [styles.sent_message]: is_sent_message,
+        [styles.is_shown_resend_button]: currentIsVisibleResendButton.data,
         [styles.received_message]: !is_sent_message,
     });
 
@@ -67,7 +69,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
                     }
                 </div>
             </div>
-            {is_sent_message && is_hovered ? (
+            {currentIsVisibleResendButton.data && is_sent_message && is_hovered ? (
                 <MessageSubMenuContainer
                     setIsHovered={lockHoverState}
                     resendFunction={resendFunction}

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

@@ -8,7 +8,7 @@
     display: flex;
     user-select: text;
     gap: 0.6rem;
-    &.sent_message:hover {
+    &.sent_message.is_shown_resend_button:hover {
         background-color: var(--dark_950_color);
     }
 }

src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import styles from "./MessageLogSettingsContainer.module.scss";
+import clsx from "clsx";
+
+import { useIsVisibleResendButton } from "@logics_main";
+import { MessageLogUiScalingContainer } from "@setting_box";
+import { Checkbox } from "@common_components";
+
+export const MessageLogSettingsContainer = (props) => {
+    const [is_opened, setIsOpened] = useState(false);
+    const [is_hovered, setIsHovered] = useState(false);
+
+    const { currentIsVisibleResendButton, toggleIsVisibleResendButton } = useIsVisibleResendButton();
+
+    const container_class_name = clsx(styles.container, {
+        [styles.to_visible_toggle_bar]: props.to_visible_toggle_bar,
+        [styles.is_hovered]: is_hovered,
+        [styles.is_opened]: is_opened
+    });
+
+    const toggleVisibleResendButton = () => {
+        toggleIsVisibleResendButton();
+    };
+
+    return (
+        <div className={container_class_name}
+            onMouseOver={() => setIsHovered(true)}
+            onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}}
+            onClick={() => setIsOpened(true)}
+        >
+            <MessageLogUiScalingContainer />
+            <div className={styles.others_wrapper}>
+                <div className={styles.resend_checkbox_toggle} onClick={toggleVisibleResendButton}>
+                    <p className={styles.resend_checkbox_label}>Show Resend Button</p>
+                    <Checkbox
+                        id="visible_resend_button"
+                        variable={currentIsVisibleResendButton}
+                        size="2rem"
+                        padding="0"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss

@@ -0,0 +1,49 @@
+$container_height: 18rem;
+.container {
+    position: absolute;
+    top: -#{$container_height};
+    left: 0;
+    height: $container_height;
+    width: 100%;
+    background-color:  (#555555cc);
+    backdrop-filter: blur(0.6rem);
+    transition: top 0.3s ease;
+    padding: 0.6rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    &.to_visible_toggle_bar {
+        top: calc(-#{$container_height} + 1rem);
+    }
+    &.is_hovered {
+        top: calc(-#{$container_height} + 2rem);
+    }
+    &.is_opened {
+        top: 0;
+    }
+    &:not(.is_opened) {
+        cursor: pointer;
+    }
+}
+
+.others_wrapper {
+    width: 100%;
+    display: flex;
+}
+
+.resend_checkbox_toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.6rem 1.2rem;
+    gap: 1rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_850_color);
+    }
+}
+
+.resend_checkbox_label {
+    font-size: 1.4rem;
+}