[Fix/Update] FIx OSC availability handling and integrate into UI components.

src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,7 +1,11 @@
 import { useI18n } from "@useI18n";
 import styles from "./Others.module.scss";
 
-import { useOpenFolder } from "@logics_common";
+import {
+    useOpenFolder,
+    useIsOscAvailable,
+} from "@logics_common";
+
 import {
     useOthers,
 } from "@logics_configs";
@@ -104,18 +108,14 @@ const AutoExportMessageLogsContainer = () => {
 export const VrcMicMuteSyncContainer = () => {
     const { t } = useI18n();
     const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useOthers();
-
-    const variable = {
-        state: currentEnableVrcMicMuteSync.state,
-        data: currentEnableVrcMicMuteSync.data.is_enabled,
-    };
+    const { currentIsOscAvailable } = useIsOscAvailable();
 
     return (
         <CheckboxContainer
             label={t("config_page.others.vrc_mic_mute_sync.label")}
             desc={t("config_page.others.vrc_mic_mute_sync.desc")}
-            variable={variable}
-            is_available={currentEnableVrcMicMuteSync.data.is_available}
+            variable={currentEnableVrcMicMuteSync}
+            is_available={currentIsOscAvailable.data}
             toggleFunction={toggleEnableVrcMicMuteSync}
         />
     );

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

@@ -4,7 +4,11 @@ import RefreshSvg from "@images/refresh.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
 import { useStore_OpenedQuickSetting } from "@store";
-import { useSoftwareVersion } from "@logics_common";
+import {
+    useSoftwareVersion,
+    useIsOscAvailable,
+} from "@logics_common";
+
 import { useVr, useOthers } from "@logics_configs";
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
@@ -70,6 +74,7 @@ const PluginsQuickSetting = () => {
 const OpenVrcMicMuteSyncQuickSetting = () => {
     const { t } = useI18n();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { currentIsOscAvailable } = useIsOscAvailable();
     const { currentEnableVrcMicMuteSync } = useOthers();
 
     const onClickFunction = () => {
@@ -79,7 +84,8 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
     return (
         <OpenQuickSettingButton
             label={t("config_page.others.vrc_mic_mute_sync.label")}
-            variable={currentEnableVrcMicMuteSync.data.is_enabled}
+            variable={currentEnableVrcMicMuteSync.data}
+            is_available={currentIsOscAvailable.data}
             onClickFunction={onClickFunction}
         />
     );

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

@@ -1,21 +1,31 @@
 import { useI18n } from "@useI18n";
 import clsx from "clsx";
 import styles from "./OpenQuickSettingButton.module.scss";
+import WarningSvg from "@images/warning.svg?react";
 
 export const OpenQuickSettingButton = (props) => {
     const { t } = useI18n();
     const variable = (typeof props.variable === "boolean") ? props.variable : null;
+    const is_available = (typeof props.is_available === "boolean") ? props.is_available : true;
+
+    const getIndicatorLabelClassName = (base_classnames = []) => {
+        return clsx(...base_classnames, is_available && styles.is_available);
+    };
+
     return (
         <div className={styles.container}>
             <div className={styles.button_wrapper} onClick={props.onClickFunction}>
                 <p className={styles.button_label}>{props.label}</p>
                 {variable !== null && (
                     props.variable === true ? (
-                        <p className={clsx(styles.button_indicator_label, styles.enabled)}>
+                        <p className={getIndicatorLabelClassName([styles.button_indicator_label, styles.is_enabled])}>
                             {t("main_page.state_text_enabled")}
+                            {is_available === false && (
+                                <WarningSvg className={styles.warning_svg} />
+                            )}
                         </p>
                     ) : (
-                        <p className={clsx(styles.button_indicator_label, styles.disabled)}>
+                        <p className={getIndicatorLabelClassName([styles.button_indicator_label, styles.is_disabled])}>
                             {t("main_page.state_text_disabled")}
                         </p>
                     )

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

@@ -26,10 +26,20 @@
 
 .button_indicator_label {
     font-size: 1rem;
-    &.disabled {
+    &.is_disabled {
         color: var(--dark_600_color);
     }
-    &.enabled {
+    &.is_enabled {
         color: var(--primary_300_color);
+        &:not(.is_available) {
+            color: var(--warning_color);
+        }
     }
+}
+
+.warning_svg {
+    margin-left: 0.4rem;
+    padding-bottom: 0.1rem;
+    width: 1.1rem;
+    color: var(--warning_color);
 }