[Update] Config Page: Auto Export Message Logs. Add open folder button.

src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.jsx

@@ -1,9 +1,9 @@
 import styles from "./ActionButton.module.scss";
 
-export const ActionButton = ({IconComponent, OnclickFunction}) => {
+export const ActionButton = ({IconComponent, onclickFunction}) => {
     return (
         <div className={styles.container}>
-            <button className={styles.button_wrapper} onClick={OnclickFunction}>
+            <button className={styles.button_wrapper} onClick={onclickFunction}>
                 <IconComponent className={styles.button_svg}/>
             </button>
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/action_button/ActionButton.module.scss

@@ -11,4 +11,5 @@
 
 .button_svg {
     width: 2.4rem;
+    color: var(--dark_400_color);
 }

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -4,8 +4,6 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    justify-content: space-between;
-    align-items: center;
     gap: 2rem;
     &.flex_column {
         flex-direction: column;

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
+import styles from "./Others.module.scss";
 
+import { useOpenFolder } from "@logics_common";
 import {
     useEnableAutoClearMessageInputBox,
     useEnableSendOnlyTranslatedMessages,
@@ -12,6 +14,13 @@ import {
     CheckboxContainer,
 } from "../_templates/Templates";
 
+import {
+    LabelComponent,
+    Checkbox,
+    ActionButton,
+} from "../_components/";
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
 
 export const Others = () => {
     return (
@@ -52,14 +61,25 @@ const SendOnlyTranslatedMessagesContainer = () => {
 const AutoExportMessageLogsContainer = () => {
     const { t } = useTranslation();
     const { currentEnableAutoExportMessageLogs, toggleEnableAutoExportMessageLogs } = useEnableAutoExportMessageLogs();
+    const { openFolder_MessageLogs } = useOpenFolder();
 
     return (
-        <CheckboxContainer
+        <div className={styles.container}>
+            <LabelComponent
                 label={t("config_page.auto_export_message_logs.label")}
                 desc={t("config_page.auto_export_message_logs.desc")}
+                />
+            <div className={styles.switch_section_container}>
+                <ActionButton
+                    IconComponent={OpenFolderSvg}
+                    onclickFunction={openFolder_MessageLogs}
+                />
+                <Checkbox
                     variable={currentEnableAutoExportMessageLogs}
                     toggleFunction={toggleEnableAutoExportMessageLogs}
                 />
+            </div>
+        </div>
     );
 };
 const VrcMicMuteSyncContainer = () => {

src-ui/app/config_page/setting_section/setting_box/others/Others.module.scss

@@ -0,0 +1,22 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+    border-bottom: solid 0.1rem var(--dark_800_color);
+}
+
+.switch_section_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    align-items: center;
+    gap: 2rem;
+}

src-ui/logics/common/index.js

@@ -1,4 +1,5 @@
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
+export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useVolume } from "./useVolume";

src-ui/logics/common/useOpenFolder.js

@@ -0,0 +1,12 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOpenFolder = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const openFolder_MessageLogs = () => {
+        asyncStdoutToPython("/run/open_filepath_logs");
+    };
+
+    return {
+        openFolder_MessageLogs,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -116,6 +116,8 @@ export const useReceiveRoutes = () => {
         "/run/feed_watchdog": () => {},
         "/get/data/main_window_geometry": restoreWindowGeometry,
         "/set/data/main_window_geometry": () => {},
+        "/run/open_filepath_logs": () => {console.log("Opened Directory, Message Logs");
+        },
 
         // Main Page
         // Page Controls