Integrate toast notifications for API error handling

packages/app-elements/src/main.ts

@@ -239,7 +239,7 @@ export {
   type TimelineEvent,
   type TimelineProps,
 } from "#ui/composite/Timeline"
-export { ToastContainer, toast } from "#ui/composite/Toast"
+export { isToastInitialized, ToastContainer, toast } from "#ui/composite/Toast"
 export {
   Toolbar,
   type ToolbarItem,

packages/app-elements/src/ui/composite/Toast.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames"
 import type React from "react"
+import { useEffect } from "react"
 import {
   type Id,
   ToastContainer as OriginalToastContainer,
@@ -9,7 +10,20 @@ import {
 } from "react-toastify"
 import { Icon } from "#ui/atoms/Icon"
 
+// Function to check if toast is initialized
+export const isToastInitialized = (): boolean => {
+  return document.body.hasAttribute("data-toast-initialized")
+}
+
 export const ToastContainer = (): React.JSX.Element => {
+  // Add data attribute when component mounts
+  useEffect(() => {
+    document.body.setAttribute("data-toast-initialized", "true")
+    return () => {
+      document.body.removeAttribute("data-toast-initialized")
+    }
+  }, [])
+
   return (
     <OriginalToastContainer
       newestOnTop

packages/app-elements/src/ui/forms/ReactHookForm/setApiFormErrors.ts

@@ -1,4 +1,5 @@
 import type { UseFormSetError } from "react-hook-form"
+import { isToastInitialized, toast } from "#ui/composite/Toast"
 
 interface ApiError {
   /**
@@ -172,9 +173,16 @@ export function setApiFormErrors({
   })
 
   if (errorByTypes.others.length > 0) {
-    setError(API_ERROR_FIELD_NAME, {
-      type: "server",
-      message: errorByTypes.others.join(". "),
-    })
+    const message = errorByTypes.others.join(". ")
+    if (isToastInitialized()) {
+      toast(message, {
+        type: "error",
+      })
+    } else {
+      setError(API_ERROR_FIELD_NAME, {
+        type: "server",
+        message,
+      })
+    }
   }
 }