[Update] QuickSettings: Add plugins section.

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

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

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 {

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: