From 798a4a87fc3d7213092c370d323b2938de54a527 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 20 Dec 2024 19:05:30 +0900
Subject: [PATCH] [Update] Change the design. Update/Switch CPU/GPU version.

---
 locales/en.yml                                |  20 ++--
 locales/ja.yml                                |  24 ++--
 .../advanced_settings/AdvancedSettings.jsx    |   2 +-
 .../app/modal_controller/ModalController.jsx  |   4 +-
 .../SwitchComputeDeviceModal.jsx              |  47 --------
 .../SwitchComputeDeviceModal.module.scss      |  69 -----------
 .../update_modal/UpdateModal.jsx              |  78 ++++++++++---
 .../update_modal/UpdateModal.module.scss      | 107 ++++++++++++++++--
 8 files changed, 181 insertions(+), 170 deletions(-)
 delete mode 100644 src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx
 delete mode 100644 src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss

diff --git a/locales/en.yml b/locales/en.yml
index f139788d..40ed70f8 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -59,19 +59,15 @@ main_page:
     updating: Now updating...
 
 update_modal:
-    update_software_desc: |-
-        Download the new version and automatically restart the app.
-        It'll take a while. Do it now?
-    deny_update_software: Do it later
-    accept_update_software: Update and Restart
-
-switch_compute_device_modal:
+    cpu_desc: Use CPU only as the compute device
+    cuda_desc: Selectable between CPU and GPU as compute devices
+    cuda_disk_space_desc: Requires approximately {{size}} of disk space
     close_modal: Close
-    switch_to_cpu_desc: Download and replace with the CPU version. The GPU will no longer be selectable as the compute device, and only the CPU will be used.
-    switch_to_cuda_desc: Download and replace with the CUDA (GPU-selectable) version. It will be able to select both the CPU and GPU, but it will require approximately 5GB of disk space.
-    switch_to_cpu_button: Switch to CPU version
-    switch_to_cuda_button: Switch to CUDA (GPU) version
-    restart_desc: The app will automatically restart.
+    download_latest_and_restart: |-
+        The latest version will be downloaded,
+        and the app will automatically restart.
+    is_latest_version_already: Already using the latest version
+    is_current_compute_device: Currently using this version
 
 config_page:
     version: version {{version}}
diff --git a/locales/ja.yml b/locales/ja.yml
index bdac7184..0b6eb496 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -58,23 +58,15 @@ main_page:
     updating: アップデート中...
 
 update_modal:
-    update_software_desc: |-
-        新しいバージョンをダウンロードしてアプリを再起動します。
-        少し時間がかかります。今すぐ行いますか？
-    deny_update_software: 後でする
-    accept_update_software: アップデートして再起動
-
-switch_compute_device_modal:
+    cpu_desc: 処理デバイスとしてCPUのみを使用
+    cuda_desc: 処理デバイスとしてCPUとGPUの両方を選択可能
+    cuda_disk_space_desc: 約{{size}}のディスク容量が必要
     close_modal: 閉じる
-    switch_to_cpu_desc: |-
-        CPUバージョンをダウンロードして置き換えます。
-        処理デバイスとしてGPUを選択できなくなり、CPUのみを使用するようになります。
-    switch_to_cuda_desc: |-
-        CUDA（GPU選択可能）バージョンをダウンロードして置き換えます。
-        CPUとGPUの両方を選択できるようになりますが、約5GBのディスク容量が必要になります。
-    switch_to_cpu_button: CPUバージョンに切り替える
-    switch_to_cuda_button: CUDA（GPU）バージョンに切り替える
-    restart_desc: アプリが自動的に再起動します。
+    download_latest_and_restart: |-
+        最新版がダウンロードされ、
+        アプリは自動的に再起動します。
+    is_latest_version_already: すでに最新版を使用中
+    is_current_compute_device: 現在使用中のバージョン
 
 config_page:
     version: バージョン {{version}}
diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
index 3193edc9..9c1ab116 100644
--- a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx
@@ -101,7 +101,7 @@ const OpenSwitchComputeDeviceModalContainer = () => {
     const { t } = useTranslation();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     const onClickFunction = () => {
-        updateOpenedQuickSetting("switch_compute_device");
+        updateOpenedQuickSetting("update_software");
     };
 
     return (
diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx
index 293f6aad..022d1271 100644
--- a/src-ui/app/modal_controller/ModalController.jsx
+++ b/src-ui/app/modal_controller/ModalController.jsx
@@ -2,7 +2,7 @@ import styles from "./ModalController.module.scss";
 import { useStore_OpenedQuickSetting } from "@store";
 import { Vr, VrcMicMuteSyncContainer } from "@setting_box";
 import { UpdateModal } from "./update_modal/UpdateModal";
-import { SwitchComputeDeviceModal } from "./switch_compute_device_modal/SwitchComputeDeviceModal";
+
 export const ModalController = () => {
     const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
     if (currentOpenedQuickSetting.data === "") return null;
@@ -26,8 +26,6 @@ const QuickSettingsController = () => {
             return <VrcMicMuteSyncContainer />;
         case "update_software":
             return <UpdateModal />;
-        case "switch_compute_device":
-            return <SwitchComputeDeviceModal />;
         default:
             return null;
     }
diff --git a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx b/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx
deleted file mode 100644
index 47f0c3b2..00000000
--- a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styles from "./SwitchComputeDeviceModal.module.scss";
-import { useTranslation } from "react-i18next";
-import { useStore_OpenedQuickSetting } from "@store";
-import { useComputeMode, useUpdateSoftware } from "@logics_common";
-import { useIsSoftwareUpdating } from "@logics_common";
-
-export const SwitchComputeDeviceModal = () => {
-    const { t } = useTranslation();
-    const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
-    const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware();
-    const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
-    const { currentComputeMode } = useComputeMode();
-
-
-    const is_cpu_version = currentComputeMode.data === "cpu";
-
-    const switch_compute_device_desc = is_cpu_version
-    ? t("switch_compute_device_modal.switch_to_cuda_desc")
-    : t("switch_compute_device_modal.switch_to_cpu_desc");
-
-    const accept_button_label = is_cpu_version
-    ? t("switch_compute_device_modal.switch_to_cuda_button") // to CUDA
-    : t("switch_compute_device_modal.switch_to_cpu_button"); // to CPU
-
-
-    const onClickUpdateSoftware = () => {
-        updateIsSoftwareUpdating(true);
-        if (is_cpu_version === true) {
-            updateSoftware_CUDA();
-        } else {
-            updateSoftware();
-        }
-    };
-
-    return (
-        <div className={styles.container}>
-            <p className={styles.label}>{switch_compute_device_desc}</p>
-            <div className={styles.button_wrapper}>
-                <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("switch_compute_device_modal.close_modal")}</button>
-                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>
-                    {accept_button_label}
-                    <p className={styles.restart_desc}>{t("switch_compute_device_modal.restart_desc")}</p>
-                </button>
-            </div>
-        </div>
-    );
-};
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss b/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss
deleted file mode 100644
index 2a5d1b30..00000000
--- a/src-ui/app/modal_controller/switch_compute_device_modal/SwitchComputeDeviceModal.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.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%;
-    gap: 2rem;
-    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);
-    position: relative;
-    &: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);
-    }
-}
-
-.restart_desc {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-top: 1rem;
-    transform: translate(-50%);
-    color: var(--dark_basic_text_color);
-    font-size: 1.4rem;
-    width: max-content;
-    pointer-events: none;
-}
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
index 5da29b6a..e78235e9 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
@@ -2,34 +2,86 @@ import styles from "./UpdateModal.module.scss";
 import { useTranslation } from "react-i18next";
 import { useStore_OpenedQuickSetting } from "@store";
 import { useComputeMode, useUpdateSoftware } from "@logics_common";
-import { useIsSoftwareUpdating } from "@logics_common";
+import { useIsSoftwareUpdating, useIsSoftwareUpdateAvailable } from "@logics_common";
+import clsx from "clsx";
 
 export const UpdateModal = () => {
     const { t } = useTranslation();
     const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting();
-    const { updateSoftware } = useUpdateSoftware();
+    const { updateSoftware, updateSoftware_CUDA } = useUpdateSoftware();
     const { updateIsSoftwareUpdating } = useIsSoftwareUpdating();
     const { currentComputeMode } = useComputeMode();
+    const { currentIsSoftwareUpdateAvailable } = useIsSoftwareUpdateAvailable();
 
+    const is_latest_version_already = currentIsSoftwareUpdateAvailable.data === false;
     const is_cpu_version = currentComputeMode.data === "cpu";
 
     const onClickUpdateSoftware = () => {
         updateIsSoftwareUpdating(true);
-        // Update to the same as now compute device
-        if (is_cpu_version === true) {
-            updateSoftware();
-        } else {
-            updateSoftware_CUDA();
-        }
-    };
+        updateSoftware();
+    }
+    const onClickUpdateSoftware_CUDA = () => {
+        updateIsSoftwareUpdating(true);
+        updateSoftware_CUDA();
+    }
+
+    const cpu_accept_button_class_name = clsx(styles.accept_button, {
+        [styles.current_compute_version]: is_cpu_version,
+        [styles.is_latest_version_already]: is_latest_version_already,
+    })
+    const cuda_accept_button_class_name = clsx(styles.accept_button, {
+        [styles.current_compute_version]: !is_cpu_version,
+        [styles.is_latest_version_already]: is_latest_version_already,
+    })
 
     return (
         <div className={styles.container}>
-            <p className={styles.label}>{t("update_modal.update_software_desc")}</p>
-            <div className={styles.button_wrapper}>
-                <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.deny_update_software")}</button>
-                <button className={styles.accept_button} onClick={onClickUpdateSoftware}>{t("update_modal.accept_update_software")}</button>
+            <div className={styles.wrapper}>
+                <div className={styles.update_section}>
+                    <div className={styles.cpu_section}>
+                        <div className={styles.button_wrapper}>
+                            <button className={cpu_accept_button_class_name} onClick={onClickUpdateSoftware}>CPU</button>
+                            {is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} /> : null}
+                        </div>
+                        <div>
+                            <VersionDescComponent desc={t("update_modal.cpu_desc")} />
+                        </div>
+                    </div>
+                    <div className={styles.cuda_section}>
+                        <div className={styles.button_wrapper}>
+                            <button className={cuda_accept_button_class_name} onClick={onClickUpdateSoftware_CUDA}>CUDA (GPU)</button>
+                            {!is_cpu_version ? <CurrentVersionLabel is_latest_version_already={is_latest_version_already} is_cuda={true}/> : null}
+                        </div>
+                        <div>
+                            <VersionDescComponent desc={t("update_modal.cuda_desc")} />
+                            <VersionDescComponent desc={t("update_modal.cuda_disk_space_desc", {size: "5GB"})} />
+                        </div>
+                    </div>
+
+                    <p className={styles.update_desc}>{t("update_modal.download_latest_and_restart")}</p>
+                </div>
+                <div className={styles.button_wrapper}>
+                    <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.close_modal")}</button>
+                </div>
             </div>
         </div>
     );
+};
+
+const VersionDescComponent = (props) => {
+    return (
+        <div className={styles.version_desc_wrapper}>
+            <div className={styles.version_desc_point}></div>
+            <p className={styles.version_desc}>{props.desc}</p>
+        </div>
+    );
+};
+
+const CurrentVersionLabel = (props) => {
+    const { t } = useTranslation();
+
+    if (props.is_latest_version_already) {
+        return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_latest_version_already")}</p>;
+    }
+    return <p className={clsx(styles.current_version_label, {[styles.is_cuda]: props.is_cuda})}>{t("update_modal.is_current_compute_device")}</p>;
 };
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
index 99d69293..2c253a9a 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
@@ -8,18 +8,52 @@
     gap: 2.4rem;
 }
 
-.label {
-    font-size: 2rem;
-    max-width: 48rem;
-    text-align: center;
-    color: var(--dark_basic_text_color);
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8rem;
 }
+
+.update_section {
+    border: 0.1rem solid var(--dark_600_color);
+    border-radius: 0.4rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4rem;
+    padding: 6rem 2rem;
+    position: relative;
+}
+.update_desc {
+    position: absolute;
+    top: 100%;
+    transform: translateY(-50%);
+    font-size: 1.4rem;
+    background-color: var(--dark_900_color);
+    padding: 0 2.8rem;
+    text-align: center;
+    font-weight: 400;
+}
+
+
+.cpu_section, .cuda_section  {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 3rem;
+}
+
 .button_wrapper {
     display: flex;
-    width: 100%;
-    max-width: 48rem;
+    width: 16rem;
     justify-content: space-between;
+    position: relative;
 }
+
 .deny_button, .accept_button {
     font-size: 1.6rem;
     padding: 1rem;
@@ -35,17 +69,35 @@
 }
 
 .accept_button {
-    background-color: var(--primary_550_color);
+    background-color: var(--primary_700_color);
+    position: relative;
+    overflow: visible;
     &:hover {
         background-color: var(--primary_450_color);
     }
     &:active {
         background-color: var(--primary_600_color);
     }
+    &.current_compute_version {
+        &::after {
+            content: "";
+            position: absolute;
+            top: -1rem;
+            right: -1rem;
+            bottom: -1rem;
+            left: -1rem;
+            border: 0.1rem solid var(--primary_400_color);
+            border-radius: 0.4rem;
+        }
+        &.is_latest_version_already {
+            background-color: var(--dark_800_color);
+            pointer-events: none;
+        }
+    }
 }
 
 .deny_button {
-    background-color: var(--dark_750_color);
+    background-color: var(--dark_800_color);
     &:hover {
         background-color: var(--dark_700_color);
     }
@@ -53,3 +105,40 @@
         background-color: var(--dark_800_color);
     }
 }
+
+.current_version_label {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0 0 0.4rem 0;
+    font-size: 1.2rem;
+    width: max-content;
+    height: max-content;
+    background-color: var(--dark_900_color);
+    padding: 0 1rem;
+    font-weight: 300;
+    &.is_cuda {
+        top: 100%;
+        margin: 0.4rem 0 0 0;
+    }
+}
+
+.version_desc_wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.version_desc_point {
+    background-color: var(--dark_basic_text_color);
+    width: 0.3rem;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+}
+.version_desc {
+    font-size: 1.4rem;
+    max-width: 48rem;
+    // text-align: center;
+    font-weight: 300;
+    color: var(--dark_basic_text_color);
+}
\ No newline at end of file