timeout and toastid

Author: ci-bot

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

@@ -4,28 +4,31 @@ import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-ut
 import { AppModal } from '@remix-ui/app'
 import { AlertModal } from '@remix-ui/app'
 import { dispatchModalInterface } from '@remix-ui/app'
+import { Toaster, toast } from '@remix-ui/toaster'
 
 interface INotificationApi {
   events: StatusEvents
   methods: {
     modal: (args: AppModal) => void
     alert: (args: AlertModal) => void
     toast: (message: string) => void
-
+    hideToaster: (id: number) => void
   }
 }
 
 const profile: LibraryProfile<INotificationApi> = {
   name: 'notification',
   displayName: 'Notification',
   description: 'Displays notifications',
-  methods: ['modal', 'alert', 'toast']
+  methods: ['modal', 'alert', 'toast', 'hideToaster']
 }
 
 export class NotificationPlugin extends Plugin implements MethodApi<INotificationApi> {
   dispatcher: dispatchModalInterface
+  toastId: number
   constructor() {
     super(profile)
+    this.toastId = 0
   }
 
   setDispatcher(dispatcher: dispatchModalInterface) {
@@ -40,7 +43,12 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
     return this.dispatcher.alert(args)
   }
 
-  async toast(message: string | JSX.Element) {
-    this.dispatcher.toast(message)
+  async toast(message: string | JSX.Element, timeout?: number) {
+    this.toastId++
+    return this.dispatcher.toast(message, timeout, this.toastId)
+  }
+
+  async hideToaster(id: number) {
+    toast.dismiss(id)
   }
 }

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -23,7 +23,7 @@ export const enum modalActionTypes {
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
-  [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number }
+  [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number, timeout?: number }
   [modalActionTypes.handleToaster]: any,
   [modalActionTypes.processQueue]: any,
   [modalActionTypes.setTemplateExplorer]: GenericModal

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

@@ -10,7 +10,7 @@ const AppDialogs = () => {
   return (
     <>
       <ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper>
-      <Toaster message={focusToaster.message} timestamp={focusToaster.timestamp} handleHide={handleToaster} />
+      <Toaster message={focusToaster.message} id={focusToaster.toastId} timeout={focusToaster.timeout} timestamp={focusToaster.timestamp} handleHide={handleToaster} />
     </>
   )
 }

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

@@ -26,15 +26,15 @@ export const platformContext = React.createContext<appPlatformTypes>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
-  toast: (message: string | JSX.Element) => void
+  toast: (message: string | JSX.Element, timeout?: number, toastId?: number) => void
   alert: (data: AlertModal) => void
   handleHideModal: () => void
   handleToaster: () => void
 }
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => {},
-  toast: (message: string | JSX.Element) => {},
+  toast: (message: string | JSX.Element, timeout?: number, toastId?: number) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}

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

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

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -40,9 +40,9 @@ export interface AlertModal {
 
 export interface ModalState {
     modals: AppModal[],
-    toasters: {message: (string | JSX.Element), timestamp: number }[],
+    toasters: {message: (string | JSX.Element), timestamp: number, timeout?: number, toastId?: number }[],
     focusModal: AppModal,
-    focusToaster: {message: (string | JSX.Element), timestamp: number },
+    focusToaster: {message: (string | JSX.Element), timestamp: number, timeout?: number, toastId?: number }
     focusTemplateExplorer: GenericModal
 }
 

libs/remix-ui/app/src/lib/remix-app/state/modals.ts

@@ -17,7 +17,7 @@ export const ModalInitialState: ModalState = {
     cancelFn: () => { },
     showCancelIcon: false
   },
-  focusToaster: { message: '', timestamp: 0 },
+  focusToaster: { message: '', timestamp: 0, timeout: 2000 },
   focusTemplateExplorer: {
     id: '',
     hide: true,

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

@@ -42,3 +42,45 @@
   border: 0px solid var(--bs-secondary, #6c757d) !important;
   font-weight: 700 !important;
 }
+
+/* Close button styling */
+[data-sonner-toast] [data-close-button] {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: transparent !important;
+  border: none;
+  color: var(--bs-info-text-emphasis, #212529) !important;
+  opacity: 0.5;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  width: 24px;
+  height: 24px;
+}
+
+[data-sonner-toast] [data-close-button]:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.05) !important;
+  transform: scale(1.1);
+}
+
+[data-sonner-toast] [data-close-button] svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Dark theme close button */
+[data-sonner-toast][data-theme="dark"] [data-close-button],
+.dark [data-sonner-toast] [data-close-button] {
+  color: var(--bs-light, #f8f9fa) !important;
+}
+
+[data-sonner-toast][data-theme="dark"] [data-close-button]:hover,
+.dark [data-sonner-toast] [data-close-button]:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}

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

@@ -3,23 +3,31 @@ import {Toaster as SonnerToaster, toast} from 'sonner'
 
 import './toaster.css'
 
+// Export toast so callers can use toast.dismiss(id)
+export {toast}
+
 /* eslint-disable-next-line */
 export interface ToasterProps {
   message: string | JSX.Element
-  timeOut?: number
+  timeout?: number
   handleHide?: () => void
   timestamp?: number
+  id?: string | number
+  onToastCreated?: (toastId: string | number) => void
 }
 
 export const Toaster = (props: ToasterProps) => {
   useEffect(() => {
     if (props.message) {
       // Show toast using Sonner
-      const duration = props.timeOut || 120000
+      const duration = props.timeout || 2000
       const showCloseButton = duration > 5000
 
+      let toastId: string | number
+
       if (typeof props.message === 'string') {
-        toast(props.message, {
+        toastId = toast(props.message, {
+          id: props.id,
           unstyled: true,
           duration,
           closeButton: showCloseButton,
@@ -32,13 +40,14 @@ export const Toaster = (props: ToasterProps) => {
         })
       } else {
         // For JSX elements, use toast.custom
-        toast.custom(
+        toastId = toast.custom(
           () => (
             <div className="remixui_sonner_toast alert alert-info bg-light">
               {props.message}
             </div>
           ),
           {
+            id: props.id,
             duration,
             closeButton: showCloseButton,
             onDismiss: () => {
@@ -50,6 +59,11 @@ export const Toaster = (props: ToasterProps) => {
           }
         )
       }
+
+      // Call the callback with the toast ID so caller can dismiss it later
+      if (props.onToastCreated) {
+        props.onToastCreated(toastId)
+      }
     }
   }, [props.message, props.timestamp])