From 83686f3073506e524d43cc6514d68a14a8a9d71c Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 11 May 2025 16:58:19 +0900
Subject: [PATCH] [Update] QuickSettings: Add plugins section.

---
 .../RightSideComponents.jsx                    | 18 ++++++++++++++++++
 .../_buttons/OpenQuickSettingButton.jsx        | 16 ++++++++++++----
 .../OpenQuickSettingButton.module.scss         |  5 +++--
 .../app/modal_controller/ModalController.jsx   |  8 +++++---
 4 files changed, 38 insertions(+), 9 deletions(-)

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 1917d523..7bd3ae59 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
@@ -9,8 +9,11 @@ import { useIsEnabledOverlaySmallLog, useIsEnabledOverlayLargeLog, useEnableVrcM
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
 export const RightSideComponents = () => {
+
     return (
         <div className={styles.container}>
+
+            <PluginsQuickSetting />
             <OpenVrcMicMuteSyncQuickSetting />
             <OpenOverlayQuickSetting />
             <SoftwareUpdateAvailableButton />
@@ -46,6 +49,21 @@ const OpenOverlayQuickSetting = () => {
         />
     );
 };
+const PluginsQuickSetting = () => {
+    const { t } = useTranslation();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
+    const onClickFunction = () => {
+        updateOpenedQuickSetting("plugins");
+    };
+
+    return (
+        <OpenQuickSettingButton
+            label={t("config_page.side_menu_labels.plugins")}
+            onClickFunction={onClickFunction}
+        />
+    );
+};
 
 const OpenVrcMicMuteSyncQuickSetting = () => {
     const { t } = useTranslation();
diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
index d23eae2c..abc779e3 100644
--- a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.jsx
@@ -4,14 +4,22 @@ import styles from "./OpenQuickSettingButton.module.scss";
 
 export const OpenQuickSettingButton = (props) => {
     const { t } = useTranslation();
+    const variable = (typeof props.variable === "boolean") ? props.variable : null;
     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)}>{t("main_page.state_text_enabled")}</p>
-                    : <p className={clsx(styles.button_indicator_label, styles.disabled)}>{t("main_page.state_text_disabled")}</p>
-                }
+                {variable !== null && (
+                    props.variable === true ? (
+                        <p className={clsx(styles.button_indicator_label, styles.enabled)}>
+                            {t("main_page.state_text_enabled")}
+                        </p>
+                    ) : (
+                        <p className={clsx(styles.button_indicator_label, styles.disabled)}>
+                            {t("main_page.state_text_disabled")}
+                        </p>
+                    )
+                )}
             </div>
         </div>
     );
diff --git a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
index 2b542209..d46cbee0 100644
--- a/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
+++ b/src-ui/app/main_page/main_section/top_bar/right_side_components/_buttons/OpenQuickSettingButton.module.scss
@@ -1,14 +1,15 @@
 .container {
-    // height: 100%;
+    height: 100%;
 }
 
 .button_wrapper {
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 0.2rem;
-    padding: 0.6rem 0.4rem;
+    padding: 0 0.8rem;
     border-radius: 0.2rem;
     cursor: pointer;
     &:hover {
diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx
index 022d1271..edfd1d55 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, VrcMicMuteSyncContainer } from "@setting_box";
+import { Vr, VrcMicMuteSyncContainer, Plugins } from "@setting_box";
 import { UpdateModal } from "./update_modal/UpdateModal";
 
 export const ModalController = () => {
@@ -20,10 +20,12 @@ const QuickSettingsController = () => {
     const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
 
     switch (currentOpenedQuickSetting.data) {
-        case "overlay":
-            return <Vr />;
+        case "plugins":
+            return <Plugins />;
         case "vrc_mic_mute_sync":
             return <VrcMicMuteSyncContainer />;
+        case "overlay":
+            return <Vr />;
         case "update_software":
             return <UpdateModal />;
         default: