[Update] Plugins: Add update function.

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.jsx

@@ -32,6 +32,15 @@ export const _DownloadButton = ({option, ...props}) => {
                         <p className={styles.download_button_label}>{t("config_page.model_download_button_label")}</p>
                     </button>
                 );
+            case option.update_button:
+                return (
+                    <button
+                        className={styles.update_button}
+                        onClick={() => props.downloadStartFunction(option.id)}
+                    >
+                        <p className={styles.download_button_label}>Update</p>
+                    </button>
+                );
             default:
                 return null;
         }

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss

@@ -28,4 +28,18 @@
 .progress_label {
     position: absolute;
     font-size: 1rem;
+}
+
+.update_button {
+    pointer-events: auto;
+    background-color: var(--primary_400_color);
+    padding: 0.8rem;
+    flex-shrink: 0;
+    border-radius: 0.2rem;
+    &:hover {
+        background-color: var(--primary_450_color);
+    }
+    &:active {
+        background-color: var(--primary_500_color);
+    }
 }

src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.jsx

@@ -1,48 +1,31 @@
-import {
-    SwitchBox,
-} from "../index";
+import { SwitchBox } from "../index";
 import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
 import styles from "./PluginsControlComponent.module.scss";
 
-export const PluginsControlComponent = ({ variable_state, plugin_status, toggleFunction, ...props }) => {
+export const PluginsControlComponent = ({ variable_state, plugin_status, toggleFunction, downloadStartFunction }) => {
+    const { plugin_id, is_pending, is_downloaded, is_enabled, is_latest_version_available, is_plugin_supported, is_outdated } = plugin_status;
+
     const option = {
-        id: plugin_status.plugin_id,
-        is_pending: plugin_status.is_pending,
-        is_downloaded: plugin_status.is_downloaded,
-        data: plugin_status.is_enabled,
+        id: plugin_id,
+        is_pending: is_pending,
+        is_downloaded: is_downloaded,
+        data: is_enabled,
+        update_button: is_downloaded && is_latest_version_available,
         state: variable_state,
         progress: null,
     };
 
-    const adjustedToggleFunction = () => {
-        toggleFunction(plugin_status.plugin_id);
-    };
-
-    let is_turn_on_able = false;
-    if (plugin_status.is_downloaded && plugin_status.is_plugin_supported) {
-        is_turn_on_able = true;
-    }
-    if (plugin_status.is_outdated) {
-        is_turn_on_able = true;
-    }
+    const togglePlugin = () => toggleFunction(plugin_id);
+    const is_turn_on_able = is_downloaded && (is_plugin_supported || is_outdated);
 
     return (
         <div className={styles.container}>
-            {is_turn_on_able &&
-                <SwitchBox
-                    variable={option}
-                    toggleFunction={adjustedToggleFunction}
-                />}
-            {plugin_status.is_plugin_supported ?
-                <_DownloadButton
-                    option={option}
-                    downloadStartFunction={props.downloadStartFunction}
-                />
-            :
-                <div className={styles.unavailable_text}>
-                    Downloaded but outdated.
-                </div>
-            }
+            {is_plugin_supported ? (
+                <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
+            ) : (
+                <div className={styles.unavailable_text}>Downloaded but outdated.</div>
+            )}
+            {is_turn_on_able && <SwitchBox variable={option} toggleFunction={togglePlugin} />}
         </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.module.scss

@@ -1,4 +1,8 @@
 .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
 }
 
 .unavailable_text {

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -88,7 +88,8 @@ const PluginDownloadContainer = () => {
                     ) : (
                         <div className={styles.plugin_info_wrapper}>
                             <div className={styles.plugin_info}>
-                                <p>Version: {plugin.plugin_version}</p>
+                                <p>Downloaded Version: {plugin.downloaded_plugin_version}</p>
+                                <p>Latest Version: {plugin.latest_plugin_version}</p>
                                 <p>
                                     Compatible: {plugin.min_supported_vrct_version} ~ {plugin.max_supported_vrct_version}
                                 </p>