[Update] Add the safety that is not show on UI if the plugin, downloaded, is not supported.

src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx

@@ -7,6 +7,7 @@ export const MergePluginsController = () => {
     const {
         currentLoadedPlugins,
         updatePluginsData,
+        updateTargetPluginData,
         currentPluginsData,
         currentFetchedPluginsInfo,
         currentSavedPluginsStatus,
@@ -148,14 +149,15 @@ export const MergePluginsController = () => {
             ) {
                 if (!downloadingRef.current.has(plugin.plugin_id)) {
                     downloadingRef.current.add(plugin.plugin_id);
+                    const target_plugin_id = plugin.plugin_id;
                     downloadAndExtractPlugin(plugin)
                         .then(() => {
-                            console.log(`Plugin ${plugin.plugin_id} updated successfully`);
-                            downloadingRef.current.delete(plugin.plugin_id);
+                            console.log(`Plugin ${target_plugin_id} updated successfully`);
+                            downloadingRef.current.delete(target_plugin_id);
                         })
                         .catch((error) => {
-                            console.error(`Plugin ${plugin.plugin_id} update failed`, error);
-                            downloadingRef.current.delete(plugin.plugin_id);
+                            console.error(`Plugin ${target_plugin_id} update failed`, error);
+                            downloadingRef.current.delete(target_plugin_id);
                         });
                 }
             }

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

@@ -16,7 +16,12 @@ import { usePlugins } from "@logics_configs";
 export const MainSection = () => {
     const { currentPluginsData } = usePlugins();
 
-    const render_plugins = currentPluginsData.data.filter((plugin) => (plugin.is_downloaded && plugin.is_enabled && plugin.downloaded_plugin_info.location === "main_section"));
+    const render_plugins = currentPluginsData.data.filter((plugin) => (
+        plugin.is_downloaded &&
+        plugin.is_enabled &&
+        plugin.downloaded_plugin_info.is_plugin_supported &&
+        plugin.downloaded_plugin_info.location === "main_section"
+    ));
 
     return (
         <div className={styles.container}>

src-ui/app/main_page/main_section/MainSection.module.scss

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     // justify-content: space-between;
+    overflow-y: auto;
 }
 
 .language_selector_container {

src-ui/logics/configs/plugins/usePlugins.js

@@ -373,6 +373,17 @@ export const usePlugins = () => {
         return  currentPluginsData.data.filter(plugin => plugin.is_enabled);
     }
 
+    const updateTargetPluginData = (target_plugin_id, attribute, value) => {
+        updatePluginsData(prev => {
+            prev.data.forEach(plugin => {
+                if (plugin.plugin_id === target_plugin_id) {
+                    plugin[attribute] = value;
+                }
+            });
+            return prev.data;
+        });
+    }
+
 
 
     return {
@@ -391,6 +402,8 @@ export const usePlugins = () => {
         currentPluginsData,
         updatePluginsData,
 
+        updateTargetPluginData,
+
         currentFetchedPluginsInfo,
         updateFetchedPluginsInfo,