[Update/bugfix] Notification UI:

Adjust an animation.
Add localizations.
Fix stack behavior that was not updated correctly. (it still has an issue tho.)

locales/en.yml

@@ -269,6 +269,9 @@ config_page:
         websocket_port:
             label: "WebSocket Port"
 
+    notifications:
+        save_success: "Settings have been saved"
+
 plugin_notifications:
     downloading: Downloading the plugin.
     downloaded_success: Downloaded successfully.

locales/ja.yml

@@ -269,6 +269,9 @@ config_page:
         websocket_port:
             label: "WebSocket Port"
 
+    notifications:
+        save_success: "設定を保存しました。"
+
 plugin_notifications:
     downloading: プラグインをダウンロード中。
     downloaded_success: プラグインのダウンロードが完了しました。

src-ui/app/others/snackbar_controller/ReactToastifyOverrideClass.scss

@@ -138,7 +138,7 @@
 .fade_out {
     opacity: 1;
     animation-name: fade_out;
-    animation-duration: 0.2s;
+    animation-duration: 0.1s;
-    animation-timing-function: ease-out;
+    animation-timing-function: ease-in;
     animation-fill-mode: forwards;
 }

src-ui/app/others/snackbar_controller/SnackbarController.jsx

@@ -35,14 +35,13 @@ export const SnackbarController = () => {
         }
     );
 
-    let hideDuration = 5000;
+    let hide_duration = 5000;
     if (settings.options?.hide_duration === null) {
-        hideDuration = false;
+        hide_duration = false;
     } else if (Number(settings.options?.hide_duration)) {
-        hideDuration = Number(settings.options?.hide_duration);
+        hide_duration = Number(settings.options?.hide_duration);
     }
 
-    const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
 
     useEffect(() => {
         if (!settings.is_open) return;
@@ -50,22 +49,29 @@ export const SnackbarController = () => {
         const message_text = settings.message;
         const category_id = settings.category_id ? settings.category_id : message_text;
 
-        setContainerKey(prevKey => prevKey + 1);
+        const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
+
+        const asyncShowNotification = async () => {
+            setTimeout(() => {
+                toast(message_text, {
+                    toastId: category_id,
+                    type: settings.status,
+                    autoClose: hide_duration,
+                    transition: CustomTransition,
+                    toastClassName: snackbar_classname,
+                    hideProgressBar: to_hide_progress_bar,
+                    progressClassName: styles.toast_progress,
+                    closeButton: <CloseButtonContainer />,
+                    onClose: () => {
+                        closeNotification();
+                    },
+                });
+            }, 100);
+        };
+
+        setContainerKey(prevKey => prevKey + 1);
+        asyncShowNotification();
 
-        setTimeout(() => {
-            toast(message_text, {
-                toastId: category_id,
-                type: settings.status,
-                autoClose: hideDuration,
-                transition: CustomTransition,
-                toastClassName: snackbar_classname,
-                progressClassName: styles.toast_progress,
-                closeButton: <CloseButtonContainer />,
-                onClose: () => {
-                    closeNotification();
-                },
-            });
-        }, 50);
     }, [settings]);
 
     return (
@@ -73,7 +79,7 @@ export const SnackbarController = () => {
             key={containerKey}
             position="bottom-left"
             transition={CustomTransition}
-            hideProgressBar={to_hide_progress_bar}
+            hideProgressBar={false}
             newestOnTop={false}
             closeOnClick={false}
             pauseOnFocusLoss={false}

src-ui/logics/common/useNotificationStatus.js

@@ -1,7 +1,9 @@
 import { useStore_NotificationStatus } from "@store";
+import { useI18n } from "@useI18n";
 
 export const useNotificationStatus = () => {
     const { currentNotificationStatus, updateNotificationStatus } = useStore_NotificationStatus();
+    const { t } = useI18n();
 
     const showNotification_Warning = (message, options = {}) => {
         updateNotificationStatus({
@@ -34,12 +36,12 @@ export const useNotificationStatus = () => {
     };
 
     const showNotification_SaveSuccess = (options = {}) => {
-        options = { hide_duration: 2000, to_hide_progress_bar: true, ...options };
+        options = { hide_duration: 1000, to_hide_progress_bar: true, ...options };
         updateNotificationStatus({
             status: "success",
             is_open: true,
-            category_id: (options.category_id) ? options.category_id : null,
+            category_id: "save_success",
-            message: "設定の適用と、保存が完了しました。",
+            message: t("config_page.notifications.save_success"),
             options: options,
         });
     };

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

@@ -283,6 +283,10 @@ export const usePlugins = () => {
     };
 
     const toggleSavedPluginsStatus = (target_plugin_id) => {
+        const successPluginNotification = (message) => showNotification_Success(message, {
+            hide_duration: 1000,
+            category_id: "to_enable_plugin"
+        });
         const is_exists = currentSavedPluginsStatus.data.some(
             (d) => d.plugin_id === target_plugin_id
         );
@@ -292,8 +296,8 @@ export const usePlugins = () => {
                 if (d.plugin_id === target_plugin_id) {
                     d.is_enabled = !d.is_enabled;
                     (d.is_enabled)
-                        ? showNotification_Success(t("plugin_notifications.is_enabled"))
+                        ? successPluginNotification(t("plugin_notifications.is_enabled"))
-                        : showNotification_Success(t("plugin_notifications.is_disabled"));
+                        : successPluginNotification(t("plugin_notifications.is_disabled"));
                 }
                 return d;
             });
@@ -303,7 +307,7 @@ export const usePlugins = () => {
                 plugin_id: target_plugin_id,
                 is_enabled: true,
             });
-            showNotification_Success(t("plugin_notifications.is_enabled"))
+            successPluginNotification(t("plugin_notifications.is_enabled"))
         }
 
         // 「currentPluginsData.data」でis_downloadedがtrueのものだけ残す