[Update/TMP] Save plugin status that if enabled or not(on store.js, yet).

Handle download.

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

@@ -13,6 +13,7 @@
     background-color: var(--dark_800_color);
     padding: 0.8rem;
     flex-shrink: 0;
+    border-radius: 0.2rem;
     &:hover {
         background-color: var(--dark_750_color);
     }

src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx

@@ -2,30 +2,32 @@ import {
     SwitchBox,
 } from "../index";
 import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
+import styles from "./DownloadPlugins.module.scss";
 
-export const DownloadPlugins = ({plugin_info, ...props}) => {
-
+export const DownloadPlugins = ({plugin_info, plugin_status, ...props}) => {
     const option = {
+        id: plugin_info.plugin_id,
         is_pending: plugin_info.is_pending,
         is_downloaded: plugin_info.is_downloaded,
-    }
-    console.log(plugin_info);
+        progress: null,
+    };
 
 
     return (
-        <div>
-            {/* <SwitchBox
-                variable={currentEnableAutoMicSelect}
-                toggleFunction={toggleEnableAutoMicSelect}
-            /> */}
+        <div className={styles.container}>
+            {plugin_info.is_downloaded && plugin_info.is_plugin_supported &&
+                <SwitchBox
+                    variable={plugin_status}
+                    toggleFunction={plugin_status.toggleFunction}
+                />}
             {plugin_info.is_plugin_supported ?
                 <_DownloadButton
                     option={option}
                     downloadStartFunction={props.downloadStartFunction}
                 />
             :
-                <div>
-                    Unavailable
+                <div className={styles.unavailable_text}>
+                    Downloaded but outdated.
                 </div>
             }
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss

@@ -0,0 +1,7 @@
+.container {
+}
+
+.unavailable_text {
+    padding: 1rem;
+    font-size: 1.2rem;
+}

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

@@ -16,31 +16,41 @@ const PluginDownloadContainer = () => {
         downloadAndExtractPlugin,
         currentPluginsInfoList,
         updatePluginsInfoList,
+        currentSavedPluginsStatus,
+        updateSavedPluginsStatus,
+        currentLoadedPluginsList,
+        // updateLoadedPluginsList,
     } = usePlugins();
 
-    const downloadStartFunction = async (plugin) => {
+    const downloadStartFunction = async (target_plugin_id) => {
         updatePluginsInfoList((old_value) => {
             const new_value = old_value.data.map(d => {
-                if (d.plugin_id === plugin.plugin_id) {
+                if (d.plugin_id === target_plugin_id) {
                     d.is_pending = true;
                 }
                 return d;
             });
             return new_value;
         });
-        await downloadAndExtractPlugin(plugin);
-        updatePluginsInfoList((old_value) => {
-            const new_value = old_value.data.map(d => {
-                if (d.plugin_id === plugin.plugin_id) {
-                    d.is_pending = false;
-                }
-                return d;
+        const target_plugin_info = currentPluginsInfoList.data.find(d => d.plugin_id === target_plugin_id);
+        downloadAndExtractPlugin(target_plugin_info).then(() => {
+            updatePluginsInfoList((old_value) => {
+                const new_value = old_value.data.map(d => {
+                    if (d.plugin_id === target_plugin_id) {
+                        d.is_pending = false;
+                        d.is_downloaded = true;
+                    }
+                    return d;
+                });
+                return new_value;
             });
-            return new_value;
-        });
+        })
     };
+    // console.log(currentPluginsInfoList.data);
 
-    const plugin_list = currentPluginsInfoList.data;
+
+    // const plugin_list = currentPluginsInfoList.data;
+    const plugin_list = [...currentPluginsInfoList.data, ...currentLoadedPluginsList.data];
     // const plugin_list = [
     //     {
     //         title: "VRCT Example Plugins 1",
@@ -64,6 +74,26 @@ const PluginDownloadContainer = () => {
     //     },
     // ];
 
+    const getTargetPluginStatus = (target_plugin_id) => {
+        let plugin_status = currentSavedPluginsStatus.data.find(d => d.plugin_id === target_plugin_id) ?? {};
+        const is_downloaded = currentLoadedPluginsList.data.find(d => d.plugin_id === target_plugin_id) ? true : false;
+
+        plugin_status.toggleFunction = () => {
+            updateSavedPluginsStatus((old_value) => {
+                const new_value = old_value.data.map(d => {
+                    if (d.plugin_id === target_plugin_id) {
+                        d.data = !d.data;
+                        d.state = "ok";
+                    }
+                    return d;
+                });
+                return new_value;
+            });
+        }
+        plugin_status.is_downloaded = is_downloaded;
+        plugin_status.is_pending = false;
+        return plugin_status;
+    };
 
 
 
@@ -85,6 +115,7 @@ const PluginDownloadContainer = () => {
                             </div>
                             <DownloadPlugins
                                 plugin_info={plugin}
+                                plugin_status={getTargetPluginStatus(plugin.plugin_id)}
                                 downloadStartFunction={downloadStartFunction}
                             />
                         </div>

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss

@@ -20,6 +20,13 @@
     }
 }
 
+.plugin_info_wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .title {
     font-size: 1.6rem;
 }

src-ui/app/main_page/main_section/PluginHost.jsx

@@ -3,7 +3,7 @@ import { usePlugins } from "@logics_configs";
 
 export const PluginHost = () => {
     const { currentLoadedPluginsList } = usePlugins();
-    console.log(currentLoadedPluginsList.data);
+    // console.log(currentLoadedPluginsList.data);
 
     return (
         <div>