From 1c56167dbadde88ba45fa1ceab125d0015bd4462 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 17 Apr 2025 17:30:30 +0900
Subject: [PATCH] [Update] Plugins: Show enabled plugins compatibility when
 update modal is opened.

---
 .../update_modal/UpdateModal.jsx              | 67 +++++++------------
 .../update_modal/UpdateModal.module.scss      | 10 ++-
 .../PluginCompatibilityList.jsx               | 61 +++++++++++++++++
 .../PluginCompatibilityList.module.scss       | 63 +++++++++++++++++
 src-ui/assets/x_mark.svg                      |  1 +
 5 files changed, 160 insertions(+), 42 deletions(-)
 create mode 100644 src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
 create mode 100644 src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss
 create mode 100644 src-ui/assets/x_mark.svg

diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
index caf89d43..c35a240c 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import styles from "./UpdateModal.module.scss";
 import { useTranslation } from "react-i18next";
 import { useStore_OpenedQuickSetting } from "@store";
@@ -9,7 +10,7 @@ import {
     useSoftwareVersion,
 } from "@logics_common";
 
-import clsx from "clsx";
+import { PluginCompatibilityList } from "./plugins_compatibility_list/PluginCompatibilityList";
 
 export const UpdateModal = () => {
     const { t } = useTranslation();
@@ -44,31 +45,34 @@ export const UpdateModal = () => {
     return (
         <div className={styles.container}>
             <div className={styles.wrapper}>
-                {isAnyPluginEnabled() && <PluginUpdateNotification />}
-                <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 className={styles.update_section_wrapper}>
+                    {isAnyPluginEnabled() && <PluginCompatibilityList />}
+                    <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 className={styles.version_desc_container}>
+                                <VersionDescComponent desc={t("update_modal.cpu_desc")} />
+                            </div>
                         </div>
-                        <div className={styles.version_desc_container}>
-                            <VersionDescComponent desc={t("update_modal.cpu_desc")} />
+                        <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 className={styles.version_desc_container}>
+                                <VersionDescComponent desc={t("update_modal.cuda_desc")} />
+                                <VersionDescComponent desc={t("update_modal.cuda_compare_cpu_desc")} />
+                                <VersionDescComponent desc={t("update_modal.cuda_disk_space_desc", {size: "5GB"})} />
+                            </div>
                         </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 className={styles.version_desc_container}>
-                            <VersionDescComponent desc={t("update_modal.cuda_desc")} />
-                            <VersionDescComponent desc={t("update_modal.cuda_compare_cpu_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>
+                        <p className={styles.update_desc}>{t("update_modal.download_latest_and_restart")}</p>
+                    </div>
                 </div>
+
                 <div className={styles.button_wrapper}>
                     <button className={styles.deny_button} onClick={() => updateOpenedQuickSetting("")} >{t("update_modal.close_modal")}</button>
                 </div>
@@ -93,23 +97,4 @@ const CurrentVersionLabel = (props) => {
         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>;
-};
-
-const PluginUpdateNotification = () => {
-    const { enabledPluginsList } = usePlugins();
-
-    // ダウンロード済みのもの or プラグイン最新版が、VRCT最新版（VRCTアプデ後）に非対応のもの
-    const incompatible_plugins_list = enabledPluginsList().filter(plugin => {
-        if (!plugin.is_downloaded) return false;
-        if (!plugin.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !plugin.latest_plugin_info.is_plugin_supported_latest_vrct) return true;
-    });
-
-    return (
-        <div>
-            {incompatible_plugins_list.map(plugin => {
-                const target_data = plugin.downloaded_plugin_info;
-                return <p key={plugin.plugin_id} >{target_data.title}</p>
-            })}
-        </div>
-    );
 };
\ 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 57881896..4fe27802 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
@@ -3,7 +3,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: safe center;
     align-items: center;
     gap: 2.4rem;
 }
@@ -16,6 +16,14 @@
     gap: 8rem;
 }
 
+.update_section_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+}
+
 .update_section {
     border: 0.1rem solid var(--dark_600_color);
     border-radius: 0.4rem;
diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
new file mode 100644
index 00000000..96e1054a
--- /dev/null
+++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
@@ -0,0 +1,61 @@
+import styles from "./PluginCompatibilityList.module.scss";
+import { usePlugins } from "@logics_configs";
+import CheckMarkSvg from "@images/check_mark.svg?react";
+import XSvg from "@images/x_mark.svg?react";
+import WarningSvg from "@images/warning.svg?react";
+
+export const PluginCompatibilityList = () => {
+    const { enabledPluginsList } = usePlugins();
+
+    // ダウンロード済みのもの
+    const downloaded_plugin = enabledPluginsList().filter(p => p.is_downloaded);
+
+    // プラグイン最新版が、VRCT最新版（VRCTアプデ後）に非対応のもの
+    const compatible_plugins_list = [];
+    const incompatible_plugins_list = [];
+    for (const p of downloaded_plugin) {
+        if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !p.latest_plugin_info?.is_plugin_supported_latest_vrct) {
+            incompatible_plugins_list.push(p);
+        } else {
+            compatible_plugins_list.push(p);
+        }
+    }
+
+    const is_any_compatible_plugin = incompatible_plugins_list.length > 0;
+
+    return (
+        <div className={styles.container}>
+            <p className={styles.title}>使用中プラグインの互換性チェック</p>
+            <div className={styles.plugins_compatibility_container}>
+                {incompatible_plugins_list.map(plugin => {
+                    const target_data = plugin.downloaded_plugin_info;
+                    return <PluginContainer key={target_data.plugin_id} target_data={target_data} is_compatible={false}/>;
+                })}
+                {compatible_plugins_list.map(plugin => {
+                    const target_data = plugin.downloaded_plugin_info;
+                    return <PluginContainer key={target_data.plugin_id} target_data={target_data} is_compatible={true} />;
+                })}
+            </div>
+            {is_any_compatible_plugin &&
+                <div className={styles.warning_container}>
+                    <WarningSvg className={styles.warning_svg}/>
+                    <p className={styles.warning_text}>VRCT最新バージョンで互換性のないプラグインはアップデート後に無効化されます。引き続き使用したい場合は、各プラグインの更新を待ってください。</p>
+                </div>
+            }
+        </div>
+    );
+};
+
+const PluginContainer = ({ target_data, is_compatible }) => {
+    console.log(target_data.plugin_id);
+
+    return (
+        <div className={styles.plugin_box}>
+            <p className={clsx(styles.plugin_label, {[styles.is_compatible]: is_compatible})} >{target_data.title}</p>
+            {is_compatible
+                ? <CheckMarkSvg className={styles.check_mark_svg}/>
+                : <XSvg className={styles.x_svg}/>
+            }
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss
new file mode 100644
index 00000000..0b439619
--- /dev/null
+++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.module.scss
@@ -0,0 +1,63 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.title {
+    font-size: 1.6rem;
+}
+
+.plugins_compatibility_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2rem 1rem;
+    flex-wrap: wrap;
+}
+
+.plugin_box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.4rem 0.6rem;
+    gap: 0.6rem;
+}
+
+.plugin_label {
+    font-size: 1.4rem;
+    color: var(--error_bc_color);
+    &.is_compatible {
+        color: var(--primary_300_color);
+    }
+}
+
+
+.check_mark_svg {
+    width: 1.8rem;
+    color: var(--primary_300_color);
+}
+.x_svg {
+    width: 1.8rem;
+    color: var(--error_bc_color);
+}
+
+.warning_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.warning_svg {
+    padding-bottom: 0.4rem;
+    width: 2.4rem;
+    color: var(--waring_color);
+    flex-shrink: 0;
+}
+
+.warning_text {
+    font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/src-ui/assets/x_mark.svg b/src-ui/assets/x_mark.svg
new file mode 100644
index 00000000..e4a0922e
--- /dev/null
+++ b/src-ui/assets/x_mark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>
\ No newline at end of file