[Update] Quick Settings: Add Vrc Mic Mute Sync.

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";

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();
 

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}
+        />
+    );
 };

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