[Update] Config Page: Add notification ui. show error messages.

src-ui/logics/common/index.js

@@ -5,6 +5,7 @@ export { useWindow } from "./useWindow";
 export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";
 export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable";
 export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating";
+export { useNotificationStatus } from "./useNotificationStatus";
 export { useOpenFolder } from "./useOpenFolder";
 export { useMessage } from "./useMessage";
 export { useUpdateSoftware } from "./useUpdateSoftware";

src-ui/logics/common/useNotificationStatus.js

@@ -0,0 +1,42 @@
+import { useStore_NotificationStatus } from "@store";
+
+export const useNotificationStatus = () => {
+    const { currentNotificationStatus, updateNotificationStatus } = useStore_NotificationStatus();
+
+    const generateRandomKey = () => Math.random();
+
+    const showNotification_Error = (message) => {
+        updateNotificationStatus({
+            status: "error",
+            is_open: true,
+            key: generateRandomKey(),
+            message: message,
+        });
+    };
+
+    const showNotification_Success = (message) => {
+        updateNotificationStatus({
+            status: "success",
+            is_open: true,
+            key: generateRandomKey(),
+            message: message,
+        });
+    };
+
+    const closeNotification = (event, reason) => {
+        if (reason === "clickaway") return;
+        updateNotificationStatus((prev) => ({
+            ...prev.data,
+            is_open: false,
+        }));
+    };
+
+    return {
+        currentNotificationStatus,
+        updateNotificationStatus,
+
+        showNotification_Error,
+        showNotification_Success,
+        closeNotification,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -2,6 +2,9 @@ import { translator_status } from "@ui_configs";
 import { arrayToObject } from "@utils";
 
 import {
+    useNotificationStatus,
+
+
     useComputeMode,
     useInitProgress,
     useIsBackendReady,
@@ -167,6 +170,10 @@ export const useReceiveRoutes = () => {
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
 
+
+
+    const { showNotification_Success, showNotification_Error } = useNotificationStatus();
+
     const routes = {
         // Common
         "/run/feed_watchdog": () => {},
@@ -494,6 +501,7 @@ export const useReceiveRoutes = () => {
                 const error_route = error_routes[parsed_data.endpoint];
                 (error_route) ? error_route(parsed_data.result.data) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`);
                 console.error(`status 400: ${JSON.stringify(parsed_data.result)}`);
+                showNotification_Error(parsed_data.result.message);
                 break;
 
             case 348: