[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;
+}

src-ui/common_components/checkbox/Checkbox.jsx

@@ -0,0 +1,49 @@
+import styles from "./Checkbox.module.scss";
+
+export const Checkbox = ({
+    checkboxId,
+    variable,
+    toggleFunction,
+    state = "idle",
+    size = "2.8rem",
+    color = "var(--primary_600_color)",
+    borderWidth = "0.2rem",
+    padding = "2rem",
+}) => {
+
+    return (
+        <div className={styles.checkbox_container}>
+            <label
+                className={styles.checkbox_wrapper}
+                htmlFor={checkboxId}
+                style={{
+                    "--checkbox-size": size,
+                    "--checkbox-color": color,
+                    "--checkbox-border-width": borderWidth,
+                    "--checkbox-padding": padding,
+                }}
+            >
+                {state === "pending" ? (
+                    <span className={styles.loader}></span>
+                ) : (
+                    <input
+                        type="checkbox"
+                        id={checkboxId}
+                        checked={variable.data}
+                        onClick={(e) => e.stopPropagation()}
+                        onChange={() => {
+                            if (toggleFunction) {
+                                toggleFunction();
+                            }
+                        }}
+                    />
+                )}
+                <span className={styles.cbx}>
+                    <svg viewBox="0 0 12 12">
+                        <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
+                    </svg>
+                </span>
+            </label>
+        </div>
+    );
+};

src-ui/common_components/checkbox/Checkbox.module.scss

@@ -0,0 +1,60 @@
+@import "@scss_mixins";
+
+.checkbox_container {
+    height: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.checkbox_wrapper {
+    display: inline-block;
+    cursor: pointer;
+    padding: var(--checkbox-padding, 2rem);
+    position: relative;
+
+    &:hover {
+        & .cbx {
+            border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem);
+        }
+    }
+}
+
+.checkbox_wrapper .cbx {
+    display: block;
+    width: var(--checkbox-size, 2.8rem);
+    height: var(--checkbox-size, 2.8rem);
+    border-radius: 0.4rem;
+    border: var(--dark_700_color) solid var(--checkbox-border-width, 0.2rem);
+    transition: all 0.15s ease;
+    padding: calc(var(--checkbox-size, 2.8rem) / 7);
+}
+
+.checkbox_wrapper .cbx svg {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: var(--dark_basic_text_color);
+    stroke-width: calc(var(--checkbox-border-width, 0.2rem) / 2);
+    stroke-dasharray: 1.7rem;
+    stroke-dashoffset: 1.7rem;
+}
+
+.checkbox_wrapper input[type="checkbox"] {
+    display: none;
+    visibility: hidden;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx {
+    background-color: var(--checkbox-color, var(--primary_600_color));
+    border: none;
+}
+
+.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg {
+    stroke-dashoffset: 0;
+    transition: all 0.15s ease;
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, right, -2rem);
+}

src-ui/common_components/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox/Checkbox";

src-ui/logics/main/index.js

@@ -1,3 +1,4 @@
+export { useIsVisibleResendButton } from "./useIsVisibleResendButton";
 export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
 export { useLanguageSettings } from "./useLanguageSettings";
 export { useMainFunction } from "./useMainFunction";

src-ui/logics/main/useIsVisibleResendButton.js

@@ -0,0 +1,15 @@
+import { useStore_IsVisibleResendButton } from "@store";
+
+export const useIsVisibleResendButton = () => {
+    const { currentIsVisibleResendButton, updateIsVisibleResendButton } = useStore_IsVisibleResendButton();
+
+    const toggleIsVisibleResendButton = () => {
+        updateIsVisibleResendButton(!currentIsVisibleResendButton.data);
+    };
+
+    return {
+        currentIsVisibleResendButton,
+        toggleIsVisibleResendButton,
+        updateIsVisibleResendButton,
+    };
+};

src-ui/store.js

@@ -121,6 +121,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_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
 

vite.config.js

@@ -46,6 +46,7 @@ export default defineConfig(async () => ({
             "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"),
 
             "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"),
+            "@common_components": path.resolve(__dirname, "src-ui/common_components/index.js"),
         },
     },