[Update] Add update software UI(modal).

src-ui/app/_index_css/variables.css

@@ -8,6 +8,7 @@
     --primary_400_color: #48a495;
     --primary_450_color: #429c8c;
     --primary_500_color: #3b9483;
+    --primary_550_color: #398E7D;
     --primary_600_color: #368777;
     --primary_650_color: #347f6f;
     --primary_700_color: #317767;

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

@@ -67,8 +67,10 @@ const SoftwareUpdateAvailableButton = () => {
     const { t } = useTranslation();
     if (currentIsSoftwareUpdateAvailable.data === false) return null;
 
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+
     return (
-        <button className={styles.software_update_button}>
+        <button className={styles.software_update_button} onClick={()=>updateOpenedQuickSetting("update_software")}>
             <RefreshSvg className={styles.refresh_svg}/>
             <p className={styles.software_update_label}>{t("main_page.update_available")}</p>
         </button>

src-ui/app/modal_controller/ModalController.jsx

@@ -1,6 +1,7 @@
 import styles from "./ModalController.module.scss";
 import { useStore_OpenedQuickSetting } from "@store";
 import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
+import { UpdateModal } from "./update_modal/UpdateModal";
 export const ModalController = () => {
     const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     if (currentOpenedQuickSetting.data === "") return null;
@@ -22,6 +23,8 @@ const QuickSettingsController = () => {
             return <Vr />;
         case "vrc_mic_mute_sync":
             return <VrcMicMuteSyncContainer />;
+        case "update_software":
+            return <UpdateModal />;
         default:
             return null;
     }

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -0,0 +1,20 @@
+import styles from "./UpdateModal.module.scss";
+import { useTranslation } from "react-i18next";
+import { useStore_OpenedQuickSetting } from "@store";
+import { useUpdateSoftware } from "@logics_common";
+
+export const UpdateModal = () => {
+    const { t } = useTranslation();
+    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
+    const { updateSoftware } = useUpdateSoftware();
+
+    return (
+        <div className={styles.container}>
+            <p className={styles.label}>{t("main_page.confirmation_message.update_software")}</p>
+            <div className={styles.button_wrapper}>
+                <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("main_page.confirmation_message.deny_update_software")}</button>
+                <button className={styles.accept_button} onClick={() => updateSoftware()}>{t("main_page.confirmation_message.accept_update_software")}</button>
+            </div>
+        </div>
+    );
+};

src-ui/app/modal_controller/update_modal/UpdateModal.module.scss

@@ -0,0 +1,55 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2.4rem;
+}
+
+.label {
+    font-size: 2rem;
+    max-width: 48rem;
+    text-align: center;
+    color: var(--dark_basic_text_color);
+}
+.button_wrapper {
+    display: flex;
+    width: 100%;
+    max-width: 48rem;
+    justify-content: space-between;
+}
+.deny_button, .accept_button {
+    font-size: 1.6rem;
+    padding: 1rem;
+    min-width: 10rem;
+    flex: 1;
+    max-width: 20rem;
+    text-align: center;
+    border-radius: 0.4rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--dark_basic_text_color);
+}
+
+.accept_button {
+    background-color: var(--primary_550_color);
+    &:hover {
+        background-color: var(--primary_450_color);
+    }
+    &:active {
+        background-color: var(--primary_600_color);
+    }
+}
+
+.deny_button {
+    background-color: var(--dark_750_color);
+    &:hover {
+        background-color: var(--dark_700_color);
+    }
+    &:active {
+        background-color: var(--dark_800_color);
+    }
+}

src-ui/logics/common/index.js

@@ -5,4 +5,5 @@ export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
 export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
 export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
+export { useUpdateSoftware } from "./useUpdateSoftware";
 export { useVolume } from "./useVolume";

src-ui/logics/common/useUpdateSoftware.js

@@ -0,0 +1,12 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUpdateSoftware = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const updateSoftware = () => {
+        asyncStdoutToPython("/run/update_software");
+    };
+
+    return {
+        updateSoftware,
+    };
+};