From 51bf5a2e2781870c987a7a937ff6305345b37956 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:32:53 +0900
Subject: [PATCH] [Update] Quick Settings: Add Vrc Mic Mute Sync.

---
 .../setting_section/setting_box/index.js      |  2 +-
 .../setting_box/others/Others.jsx             |  2 +-
 .../RightSideComponents.jsx                   | 23 ++++++++++++++++---
 .../app/modal_controller/ModalController.jsx  | 17 ++++++++++++--
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js
index 1d8953fd..a656c23c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/index.js
+++ b/src-ui/app/config_page/setting_section/setting_box/index.js
@@ -1,7 +1,7 @@
 export { Device } from "./device/Device";
 export { Appearance } from "./appearance/Appearance";
 export { Transcription } from "./transcription/Transcription";
-export { Others } from "./others/Others";
+export { Others, VrcMicMuteSyncContainer } from "./others/Others";
 export { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
 export { Vr } from "./vr/Vr";
 // export { AboutVrct } from "./about_vrct/AboutVrct";
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 2112db2c..da450f77 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -82,7 +82,7 @@ const AutoExportMessageLogsContainer = () => {
         </div>
     );
 };
-const VrcMicMuteSyncContainer = () => {
+export const VrcMicMuteSyncContainer = () => {
     const { t } = useTranslation();
     const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
 
diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
index fc05b10a..3afbb24a 100644
--- a/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.jsx
@@ -2,13 +2,13 @@ import styles from "./RightSideComponents.module.scss";
 import HelpSvg from "@images/help.svg?react";
 
 import { useStore_OpenedQuickSetting } from "@store";
-import { useIsEnabledOverlaySmallLog } from "@logics_configs";
+import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs";
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
 export const RightSideComponents = () => {
     return (
         <div className={styles.container}>
-            <p>VRC mic mute sync</p>
+            <OpenVrcMicMuteSyncQuickSetting />
             <OpenOverlayQuickSetting />
             <a
             className={styles.help_and_info_button}
@@ -23,7 +23,7 @@ export const RightSideComponents = () => {
 };
 
 const OpenOverlayQuickSetting = () => {
-    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const { currentIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
 
     const onClickFunction = () => {
@@ -37,4 +37,21 @@ const OpenOverlayQuickSetting = () => {
             onClickFunction={onClickFunction}
         />
     );
+};
+
+const OpenVrcMicMuteSyncQuickSetting = () => {
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentEnableVrcMicMuteSync } = useEnableVrcMicMuteSync();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("vrc_mic_mute_sync");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label="VRC mic mute sync"
+            variable={currentEnableVrcMicMuteSync.data}
+            onClickFunction={onClickFunction}
+        />
+    );
 };
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx
index 4d2e4e54..762f9fb6 100644
--- a/src-ui/app/modal_controller/ModalController.jsx
+++ b/src-ui/app/modal_controller/ModalController.jsx
@@ -1,6 +1,6 @@
 import styles from "./ModalController.module.scss";
 import { useStore_OpenedQuickSetting } from "@store";
-import { Vr } from "@setting_box";
+import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
 export const ModalController = () => {
     const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     if (currentOpenedQuickSetting.data === "") return null;
@@ -8,8 +8,21 @@ export const ModalController = () => {
         <div className={styles.container}>
             <div className={styles.bg_onclick_close_area} onClick={() => updateOpenedQuickSetting("")}></div>
             <div className={styles.wrapper}>
-                <Vr />
+                <QuickSettingsController />
             </div>
         </div>
     );
+};
+
+const QuickSettingsController = () => {
+    const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
+    switch (currentOpenedQuickSetting.data) {
+        case "overlay":
+            return <Vr />;
+        case "vrc_mic_mute_sync":
+            return <VrcMicMuteSyncContainer />;
+        default:
+            return null;
+    }
 };
\ No newline at end of file