toast layout

Author: ci-bot

apps/remix-ide/src/app/plugins/notification.tsx

@@ -11,7 +11,7 @@ interface INotificationApi {
   methods: {
     modal: (args: AppModal) => void
     alert: (args: AlertModal) => void
-    toast: (message: string) => void
+    toast: (message: string) => number
     hideToaster: (id: number) => void
   }
 }
@@ -43,12 +43,13 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
     return this.dispatcher.alert(args)
   }
 
-  async toast(message: string | JSX.Element, timeout?: number) {
-    this.toastId++
-    return this.dispatcher.toast(message, timeout, this.toastId)
+  async toast(message: string | JSX.Element, timeout?: number, timestamp?: number): Promise<number>  {
+    timestamp = timestamp || Date.now()
+    this.dispatcher.toast(message, timeout, timestamp)
+    return timestamp
   }
 
   async hideToaster(id: number) {
-    toast.dismiss(id)
+    toast.dismiss('toast-' + id)
   }
 }

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx

@@ -1,16 +1,27 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useDialogDispatchers, useDialogs } from '../../context/provider'
-import { Toaster } from '@remix-ui/toaster'
+import { ToasterContainer } from '@remix-ui/toaster'
 import ModalWrapper from './modal-wrapper'
 
 const AppDialogs = () => {
   const { handleHideModal, handleToaster } = useDialogDispatchers()
-  const { focusModal, focusToaster } = useDialogs()
+  const { focusModal, toasters } = useDialogs()
+
+  // Map toasters to ToasterProps format with useMemo to prevent recreating on every render
+  const toastList = useMemo(() => {
+    return toasters.map((toaster) => ({
+      message: toaster.message,
+      id: toaster.toastId || `toast-${toaster.timestamp}`,
+      timeout: toaster.timeout,
+      timestamp: toaster.timestamp,
+      handleHide: handleToaster
+    }))
+  }, [toasters, handleToaster])
 
   return (
     <>
       <ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper>
-      <Toaster message={focusToaster.message} id={focusToaster.toastId} timeout={focusToaster.timeout} timestamp={focusToaster.timestamp} handleHide={handleToaster} />
+      <ToasterContainer toasts={toastList} />
     </>
   )
 }

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -69,10 +69,11 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
     })
   }
 
-  const toast = (message: string | JSX.Element, timeout?: number) => {
+  const toast = (message: string | JSX.Element, timeout?: number, timestamp?: number) => {
+    timestamp = timestamp || Date.now()
     dispatch({
       type: modalActionTypes.setToast,
-      payload: { message, timestamp: Date.now(), timeout }
+      payload: { message, timestamp, timeout }
     })
   }
 

libs/remix-ui/toaster/src/lib/toaster.css

@@ -7,6 +7,10 @@
   min-width: 350px;
   max-width: 600px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  line-height: 1.4;
 }
 
 .remixui_custom_toast {
@@ -18,14 +22,30 @@
 /* Override Sonner default styles to match Remix theme */
 [data-sonner-toaster] {
   z-index: 1001 !important;
+  display: flex;
+  flex-direction: column;
 }
 
 [data-sonner-toast] {
-  background:var(--bs-primary, #212529) !important;
-  color: var(--bs-info-text-emphasis, #212529) !important;
+  background: var(--bs-light, #f8f9fa) !important;
+  color: var(--bs-dark, #212529) !important;
   border: 0px solid var(--bs-dark, #6c757d) !important;
   font-weight: 700 !important;
   font-size: 19px !important;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: auto !important;
+  position: relative;
+  width: 100%;
+  margin-bottom: 12px;
+  transform: none !important;
+}
+
+[data-sonner-toast]:hover {
+  transform: none !important;
+  scale: 1 !important;
 }
 
 [data-sonner-toast][data-styled="true"] {
@@ -50,8 +70,8 @@
   right: 12px;
   background: transparent !important;
   border: none;
-  color: var(--bs-info-text-emphasis, #212529) !important;
-  opacity: 0.5;
+  color: var(--bs-dark, #212529) !important;
+  opacity: 0.7;
   cursor: pointer;
   padding: 4px;
   display: flex;
@@ -61,6 +81,7 @@
   transition: all 0.2s ease;
   width: 24px;
   height: 24px;
+  z-index: 1;
 }
 
 [data-sonner-toast] [data-close-button]:hover {

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -16,6 +16,88 @@ export interface ToasterProps {
   onToastCreated?: (toastId: string | number) => void
 }
 
+export interface ToasterContainerProps {
+  toasts: ToasterProps[]
+}
+
+// Individual toast trigger component (no UI, just triggers toast)
+export const ToastTrigger = (props: ToasterProps) => {
+  const mountedRef = React.useRef(false)
+
+  useEffect(() => {
+    // Only trigger on mount, not on updates
+    if (!mountedRef.current && props.message && props.id) {
+      mountedRef.current = true
+
+      // Show toast using Sonner - Sonner handles deduplication via ID automatically
+      const duration = props.timeout || 2000
+      const showCloseButton = duration > 5000
+
+      if (typeof props.message === 'string') {
+        const toastId = toast(props.message, {
+          id: props.id,
+          unstyled: true,
+          duration,
+          closeButton: showCloseButton,
+          onDismiss: () => {
+            props.handleHide && props.handleHide()
+          },
+          onAutoClose: () => {
+            props.handleHide && props.handleHide()
+          }
+        })
+        console.log('toastId', toastId, props.id)
+      } else {
+        // For JSX elements, use toast.custom
+        const toastId = toast.custom(
+          () => (
+            <div className="remixui_sonner_toast alert alert-info bg-light">
+              {props.message}
+            </div>
+          ),
+          {
+            id: props.id,
+            duration,
+            closeButton: showCloseButton,
+            onDismiss: () => {
+              props.handleHide && props.handleHide()
+            },
+            onAutoClose: () => {
+              props.handleHide && props.handleHide()
+            }
+          }
+        )
+        console.log('toastId', toastId, props.id)
+      }
+    }
+  }, [])
+
+  return null
+}
+
+// Container component that renders the Sonner toaster and all toast triggers
+export const ToasterContainer = (props: ToasterContainerProps) => {
+  return (
+    <>
+      <SonnerToaster
+        position="top-right"
+        gap={12}
+        toastOptions={{
+          className: 'remixui_sonner_toast alert alert-info bg-light',
+          unstyled: true
+        }}
+      />
+      {props.toasts.map((toastProps) => (
+        <ToastTrigger
+          key={toastProps.id || toastProps.timestamp}
+          {...toastProps}
+        />
+      ))}
+    </>
+  )
+}
+
+// Legacy component for backward compatibility
 export const Toaster = (props: ToasterProps) => {
   useEffect(() => {
     if (props.message) {
@@ -26,6 +108,7 @@ export const Toaster = (props: ToasterProps) => {
       let toastId: string | number
 
       if (typeof props.message === 'string') {
+        
         toastId = toast(props.message, {
           id: props.id,
           unstyled: true,
@@ -38,6 +121,7 @@ export const Toaster = (props: ToasterProps) => {
             props.handleHide && props.handleHide()
           }
         })
+        console.log('toastId', toastId, props.id)
       } else {
         // For JSX elements, use toast.custom
         toastId = toast.custom(
@@ -58,6 +142,7 @@ export const Toaster = (props: ToasterProps) => {
             }
           }
         )
+        console.log('toastId', toastId, props.id)
       }
 
       // Call the callback with the toast ID so caller can dismiss it later
@@ -67,15 +152,8 @@ export const Toaster = (props: ToasterProps) => {
     }
   }, [props.message, props.timestamp])
 
-  return (
-    <SonnerToaster
-      position="top-right"
-      toastOptions={{
-        className: 'remixui_sonner_toast alert alert-info bg-light',
-        unstyled: true
-      }}
-    />
-  )
+  return <div></div>     
 }
 
+
 export default Toaster