[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"
@@ -58,3 +61,16 @@ const OpenVrcMicMuteSyncQuickSetting = () => {
         />
     );
 };
+
+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

@@ -22,3 +22,28 @@
     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;
+}

src-ui/assets/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.944 12.979c-.489 4.509-4.306 8.021-8.944 8.021-2.698 0-5.112-1.194-6.763-3.075l1.245-1.633c1.283 1.645 3.276 2.708 5.518 2.708 3.526 0 6.444-2.624 6.923-6.021h-2.923l4-5.25 4 5.25h-3.056zm-15.864-1.979c.487-3.387 3.4-6 6.92-6 2.237 0 4.228 1.059 5.51 2.698l1.244-1.632c-1.65-1.876-4.061-3.066-6.754-3.066-4.632 0-8.443 3.501-8.941 8h-3.059l4 5.25 4-5.25h-2.92z"/></svg>

src-ui/logics/common/index.js

@@ -1,5 +1,6 @@
 export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
+export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
 export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useVolume } from "./useVolume";

src-ui/logics/common/useIsSoftwareUpdateAvailable.js

@@ -0,0 +1,10 @@
+import { useStore_IsSoftwareUpdateAvailable } from "@store";
+
+export const useIsSoftwareUpdateAvailable = () => {
+    const { currentIsSoftwareUpdateAvailable, updateIsSoftwareUpdateAvailable } = useStore_IsSoftwareUpdateAvailable();
+
+    return {
+        currentIsSoftwareUpdateAvailable,
+        updateIsSoftwareUpdateAvailable,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -5,6 +5,7 @@ import {
     useWindow,
     useMessage,
     useVolume,
+    useIsSoftwareUpdateAvailable,
 } from "@logics_common";
 
 import {
@@ -81,6 +82,7 @@ export const useReceiveRoutes = () => {
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
+    const { updateIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
     const { updateSoftwareVersion } = useSoftwareVersion();
     const { updateEnableAutoMicSelect } = useEnableAutoMicSelect();
     const { updateEnableAutoSpeakerSelect } = useEnableAutoSpeakerSelect();
@@ -154,6 +156,7 @@ export const useReceiveRoutes = () => {
         "/set/data/main_window_geometry": () => {},
         "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
         "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
+        "/run/update_software_flag": updateIsSoftwareUpdateAvailable,
 
         // Main Page
         // Page Controls

src-ui/store.js

@@ -108,6 +108,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
     transcription_receive: false,
 }, "MainFunctionsStateMemory");
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
+export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
 
 // Main Page
 // Functions