[Update] Quick Settings: Add Overlay settings.

src-ui/app/App.jsx

@@ -3,6 +3,7 @@ import { useStartPython } from "@logics/useStartPython";
 import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
+import { ModalController } from "./modal_controller/ModalController";
 import styles from "./App.module.scss";
 
 export const App = () => {
@@ -21,6 +22,7 @@ export const App = () => {
             <div className={styles.pages_wrapper}>
                 <ConfigPage />
                 <MainPage />
+                <ModalController />
             </div>
         </div>
     );

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -1,12 +1,14 @@
 import { useStore_SelectedConfigTabId } from "@store";
 
-import { Device } from "./device/Device";
-import { Appearance } from "./appearance/Appearance";
-import { Transcription } from "./transcription/Transcription";
-import { Others } from "./others/Others";
-import { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
-import { Vr } from "./vr/Vr";
-// import { AboutVrct } from "./about_vrct/AboutVrct";
+import {
+    Device,
+    Appearance,
+    Transcription,
+    Others,
+    AdvancedSettings,
+    Vr,
+    // AboutVrct,
+} from "@setting_box";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();

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

@@ -0,0 +1,7 @@
+export { Device } from "./device/Device";
+export { Appearance } from "./appearance/Appearance";
+export { Transcription } from "./transcription/Transcription";
+export { Others } from "./others/Others";
+export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
+export { Vr } from "./vr/Vr";
+// export { AboutVrct } from "./about_vrct/AboutVrct";

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx

@@ -1,12 +1,15 @@
 import styles from "./RightSideComponents.module.scss";
-
 import HelpSvg from "@images/help.svg?react";
 
+import { useStore_OpenedQuickSetting } from "@store";
+import { useIsEnabledOverlaySmallLog } from "@logics_configs";
+import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
+
 export const RightSideComponents = () => {
     return (
         <div className={styles.container}>
             <p>VRC mic mute sync</p>
-            <p>Overlay(VR)</p>
+            <OpenOverlayQuickSetting />
             <a
             className={styles.help_and_info_button}
             href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -17,4 +20,21 @@ export const RightSideComponents = () => {
             </a>
         </div>
     );
+};
+
+const OpenOverlayQuickSetting = () => {
+    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("overlay");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label="Overlay(VR)"
+            variable={currentIsEnabledOverlaySmallLog.data}
+            onClickFunction={onClickFunction}
+        />
+    );
 };

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss

@@ -3,6 +3,7 @@
     flex-direction: row;
     align-items: center;
     gap: 1rem;
+    height: 100%;
 }
 
 .help_and_info_button {

src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import styles from "./OpenQuickSettingButton.module.scss";
+
+export const OpenQuickSettingButton = (props) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.button_wrapper} onClick={props.onClickFunction}>
+                <p className={styles.button_label}>{props.label}</p>
+                {props.variable === true
+                    ? <p className={clsx(styles.button_indicator_label, styles.enabled)}>Enabled</p>
+                    : <p className={clsx(styles.button_indicator_label, styles.disabled)}>Disabled</p>
+                }
+            </div>
+        </div>
+    );
+};

src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss

@@ -0,0 +1,34 @@
+.container {
+    // height: 100%;
+}
+
+.button_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.6rem 0.4rem;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.button_label {
+    font-size: 1.2rem;
+}
+
+.button_indicator_label {
+    font-size: 1rem;
+    &.disabled {
+        color: var(--dark_600_color);
+    }
+    &.enabled {
+        color: var(--primary_300_color);
+    }
+}

src-ui/app/modal_controller/ModalController.jsx

@@ -0,0 +1,15 @@
+import styles from "./ModalController.module.scss";
+import { useStore_OpenedQuickSetting } from "@store";
+import { Vr } from "@setting_box";
+export const ModalController = () => {
+    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    if (currentOpenedQuickSetting.data === "") return null;
+    return (
+        <div className={styles.container}>
+            <div className={styles.bg_onclick_close_area} onClick={() => updateOpenedQuickSetting("")}></div>
+            <div className={styles.wrapper}>
+                <Vr />
+            </div>
+        </div>
+    );
+};

src-ui/app/modal_controller/ModalController.module.scss

@@ -0,0 +1,29 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.bg_onclick_close_area {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color:  (#ffffff22);
+    backdrop-filter: blur(0.2rem);
+}
+
+.wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow-y: auto;
+    background-color: var(--dark_875_color);
+    width: 60%;
+    height: 96%;
+    padding: 2rem;
+    border-radius: 0.6rem;
+}

src-ui/logics/configs/index.js

@@ -31,6 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
 export { useOverlaySettings } from "./vr/useOverlaySettings";
 export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 

src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js

@@ -0,0 +1,28 @@
+import { useStore_IsEnabledOverlaySmallLog } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsEnabledOverlaySmallLog = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog();
+
+    const getIsEnabledOverlaySmallLog = () => {
+        // pendingIsEnabledOverlaySmallLog();
+        asyncStdoutToPython("/get/data/overlay_settings");
+    };
+
+    const toggleIsEnabledOverlaySmallLog = () => {
+        pendingIsEnabledOverlaySmallLog();
+        if (currentIsEnabledOverlaySmallLog.data) {
+            asyncStdoutToPython("/set/disable/overlay_small_log");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_small_log");
+        }
+    };
+
+    return {
+        currentIsEnabledOverlaySmallLog,
+        getIsEnabledOverlaySmallLog,
+        updateIsEnabledOverlaySmallLog,
+        toggleIsEnabledOverlaySmallLog,
+    };
+};

src-ui/store.js

@@ -103,6 +103,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
     transcription_send: false,
     transcription_receive: false,
 }, "MainFunctionsStateMemory");
+export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 
 // Main Page
 // Functions
@@ -204,6 +205,7 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove
     display_duration: 5,
     fadeout_duration: 2,
 }, "OverlaySmallLogSettings");
+export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");

vite.config.js

@@ -43,6 +43,8 @@ export default defineConfig(async () => ({
             "@logics_common": path.resolve(__dirname, "src-ui/logics/common"),
             "@logics_main": path.resolve(__dirname, "src-ui/logics/main"),
             "@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"),
         },
     },