[Update] Plugins: Add error handlings when network is not connected and failed to fetch plugins info.

Also add pending ui(TMP) while fetching.

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

@@ -33,6 +33,7 @@ const PluginDownloadContainer = () => {
         currentSavedPluginsStatus,
         toggleSavedPluginsStatus,
         handlePendingPlugin,
+        currentFetchedPluginsInfo,
     } = usePlugins();
     const { showNotification_Success, showNotification_Error } = useNotificationStatus();
 
@@ -65,8 +66,14 @@ const PluginDownloadContainer = () => {
         a.plugin_id.localeCompare(b.plugin_id)
     );
 
+    // Duplicate
+    const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
+    const is_fetching = currentFetchedPluginsInfo.state === "pending";
+
     return (
         <div className={styles.plugins_list_container}>
+            {is_failed_to_fetch && <p>Failed to fetch plugins data</p>}
+            {is_fetching && <p>Fetching plugins data...</p>}
             {sorted_plugins_data.map((plugin) => (
                 <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
                     <p className={styles.title}>

src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx

@@ -9,6 +9,7 @@ export const PluginCompatibilityList = () => {
     const {
         enabledPluginsList,
         asyncFetchPluginsInfo,
+        currentFetchedPluginsInfo,
     } = usePlugins();
 
     useEffect(() => {
@@ -35,9 +36,15 @@ export const PluginCompatibilityList = () => {
 
     if (!is_any_incompatible_plugin && !is_any_compatible_plugin) return null; // This is just for safety.
 
+    // Duplicate
+    const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
+    const is_fetching = currentFetchedPluginsInfo.state === "pending";
+
     return (
         <div className={styles.container}>
             <p className={styles.title}>使用中プラグインの互換性チェック</p>
+            {is_failed_to_fetch && <p>Failed to fetch plugins data</p>}
+            {is_fetching && <p>Fetching plugins data...</p>}
             <div className={styles.plugins_compatibility_container}>
                 {incompatible_plugins_list.map(plugin => {
                     const target_data = plugin.downloaded_plugin_info;

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

@@ -40,7 +40,7 @@ export const usePlugins = () => {
     const { showNotification_Success, showNotification_Error } = useNotificationStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
-    const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
+    const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo, errorFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
     const { currentLoadedPlugins, updateLoadedPlugins, pendingLoadedPlugins } = useStore_LoadedPlugins();
 
     const { currentSavedPluginsStatus, updateSavedPluginsStatus, pendingSavedPluginsStatus } = useStore_SavedPluginsStatus();
@@ -252,6 +252,7 @@ export const usePlugins = () => {
             updateFetchedPluginsInfo(updated_list);
         } catch (error) {
             console.error("Error fetching plugin info list: ", error);
+            errorFetchedPluginsInfo();
         }
 
         store.is_initialized_fetched_plugin_info = true;

src-ui/logics/useReceiveRoutes.js

@@ -206,7 +206,12 @@ export const useReceiveRoutes = () => {
         "/set/data/main_window_geometry": () => {},
         "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
         "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
-        "/run/software_update_info": updateLatestSoftwareVersionInfo,
+        "/run/software_update_info": (payload) => {
+            updateLatestSoftwareVersionInfo(prev => ({
+                is_update_available: payload.is_update_available,
+                new_version: payload.new_version || prev.data.new_version,
+            }));
+        },
         "/run/connected_network": handleNetworkConnection,
 
         // Main Page

src-ui/store.js

@@ -119,7 +119,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 export const { atomInstance: Atom_LatestSoftwareVersionInfo, useHook: useStore_LatestSoftwareVersionInfo } = createAtomWithHook({
     is_update_available: false,
-    new_version: "",
+    new_version: "0.0.0",
 }, "LatestSoftwareVersionInfo");
 export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
 export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint");