[Update] Display OSC unavailability warning on VRC mic mute sync setting.

src-ui/views/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.jsx

@@ -1,5 +1,6 @@
 import styles from "./LabelComponent.module.scss";
 import { _OpenWebpageButton } from "../_atoms/_open_webpage_button/_OpenWebpageButton";
+import WarningSvg from "@images/warning.svg?react";
 
 export const LabelComponent = (props) => {
     return (
@@ -9,6 +10,17 @@ export const LabelComponent = (props) => {
                 ? <p className={styles.desc}>{props.desc}</p>
                 : null
             }
+            {props.add_warnings && Array.isArray(props.add_warnings) && props.add_warnings.length > 0 && (
+                <div className={styles.warnings_section}>
+                    {props.add_warnings.map((w, i) => (
+                        <div className={styles.warning_item} key={i}>
+                            <WarningSvg className={styles.warning_svg} />
+                            <p className={styles.warning_label}>{w.label}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+
             {props.webpage_url && <_OpenWebpageButton webpage_url={props.webpage_url} open_webpage_label={props.open_webpage_label} /> }
         </div>
     );

src-ui/views/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss

@@ -2,7 +2,8 @@
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    // flex-shrink: 0;
+    max-width: 38rem;
+    overflow-wrap: break-word;
 }
 
 .label {
@@ -16,6 +17,28 @@
     font-size: 1.4rem;
     font-weight: 300;
     color: var(--dark_500_color);
-    max-width: 38rem;
     overflow-wrap: break-word;
+}
+
+.warnings_section {
+    font-weight: 300;
+    color: var(--dark_500_color);
+}
+
+.warning_item {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.warning_label {
+    font-size: 1.2rem;
+    color: var(--warning_color);
+    overflow-wrap: break-word;
+}
+
+.warning_svg {
+    width: 1.4rem;
+    color: var(--warning_color);
+    flex-shrink: 0;
 }

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

@@ -110,12 +110,20 @@ export const VrcMicMuteSyncContainer = () => {
     const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useOthers();
     const { currentIsOscAvailable } = useIsOscAvailable();
 
+    const add_warnings = [];
+    if (currentIsOscAvailable.data === false) {
+        add_warnings.push({
+            label: t("config_page.common.warning_labels.unable_to_use_osc_query"),
+        });
+    }
+
     return (
         <CheckboxContainer
             label={t("config_page.others.vrc_mic_mute_sync.label")}
             desc={t("config_page.others.vrc_mic_mute_sync.desc")}
             variable={currentEnableVrcMicMuteSync}
             is_available={currentIsOscAvailable.data}
+            add_warnings={add_warnings}
             toggleFunction={toggleEnableVrcMicMuteSync}
         />
     );