[Update] Main Page: Add the software update available button.

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

@@ -1,8 +1,10 @@
 import { useTranslation } from "react-i18next";
 import styles from "./RightSideComponents.module.scss";
+import RefreshSvg from "@images/refresh.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
 import { useStore_OpenedQuickSetting } from "@store";
+import { useIsSoftwareUpdateAvailable } from "@logics_common";
 import { useIsEnabledOverlaySmallLog, useEnableVrcMicMuteSync } from "@logics_configs";
 import { OpenQuickSettingButton } from "./_buttons/OpenQuickSettingButton";
 
@@ -11,6 +13,7 @@ export const RightSideComponents = () => {
         <div className={styles.container}>
             <OpenVrcMicMuteSyncQuickSetting />
             <OpenOverlayQuickSetting />
+            <SoftwareUpdateAvailableButton />
             <a
             className={styles.help_and_info_button}
             href="https://mzsoftware.notion.site/VRCT-Documents-be79b7a165f64442ad8f326d86c22246"
@@ -57,4 +60,17 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
             onClickFunction={onClickFunction}
         />
     );
+};
+
+const SoftwareUpdateAvailableButton = () => {
+    const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
+    const { t } = useTranslation();
+    if (currentIsSoftwareUpdateAvailable.data === false) return null;
+
+    return (
+        <button className={styles.software_update_button}>
+            <RefreshSvg className={styles.refresh_svg}/>
+            <p className={styles.software_update_label}>{t("main_page.update_available")}</p>
+        </button>
+    );
 };

src-ui/app/main_page/main_section/top_bar/right_side_components/RightSideComponents.module.scss

@@ -21,4 +21,29 @@
 .help_svg {
     width: 2.4rem;
     color: var(--dark_400_color);
+}
+
+.software_update_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--primary_300_color);
+    padding: 1rem 0.4rem;
+    cursor: pointer;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_900_color);
+    }
+}
+
+.refresh_svg {
+    width: 1.8rem;
+    transform: rotate(-30deg);
+}
+
+.software_update_label {
+    font-size: 1.2rem;
 }