action notifications

Author: ci-bot

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

@@ -3,6 +3,7 @@ import { Plugin } from '@remixproject/engine'
 import { LibraryProfile, MethodApi, StatusEvents } from '@remixproject/plugin-utils'
 import { AppModal } from '@remix-ui/app'
 import { AlertModal } from '@remix-ui/app'
+import { ActionNotification } from '@remix-ui/app'
 import { dispatchModalInterface } from '@remix-ui/app'
 import { Toaster, toast } from '@remix-ui/toaster'
 
@@ -13,14 +14,16 @@ interface INotificationApi {
     alert: (args: AlertModal) => void
     toast: (message: string) => number
     hideToaster: (id: number) => void
+    actionNotification: (args: ActionNotification) => void
+    hideActionNotification: (id: string) => void
   }
 }
 
 const profile: LibraryProfile<INotificationApi> = {
   name: 'notification',
   displayName: 'Notification',
   description: 'Displays notifications',
-  methods: ['modal', 'alert', 'toast', 'hideToaster']
+  methods: ['modal', 'alert', 'toast', 'hideToaster', 'actionNotification', 'hideActionNotification']
 }
 
 export class NotificationPlugin extends Plugin implements MethodApi<INotificationApi> {
@@ -53,4 +56,13 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
   async hideToaster(id: number) {
     toast.dismiss('toast-' + id)
   }
+
+  async actionNotification(data: ActionNotification) {
+    const id = data.id || `action-notif-${Date.now()}-${++this.toastId}`
+    this.dispatcher.actionNotification({ ...data, id })
+  }
+
+  async hideActionNotification(id: string) {
+    this.dispatcher.hideActionNotification(id)
+  }
 }

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

@@ -2,7 +2,7 @@ export { default as RemixApp } from './lib/remix-app/remix-app'
 export { dispatchModalContext, dispatchModalInterface, AppContext, appProviderContextType, appPlatformTypes, platformContext, onLineContext } from './lib/remix-app/context/context'
 export { ModalProvider, useDialogDispatchers } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
-export { AlertModal, AppState } from './lib/remix-app/interface/index'
+export { AlertModal, AppState, ActionNotification, ActionNotificationAction } from './lib/remix-app/interface/index'
 export { ModalTypes, AppModalCancelTypes } from './lib/remix-app/types/index'
 export { AppAction, appActionTypes } from './lib/remix-app/actions/app'
 export { AuthProvider, useAuth, Credits, AuthState } from './lib/remix-app/context/auth-context'

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

@@ -1,4 +1,4 @@
-import { AppModal, GenericModal } from '../interface'
+import { AppModal, GenericModal, ActionNotification } from '../interface'
 
 type ActionMap<M extends { [index: string]: any }> = {
     [Key in keyof M]: M[Key] extends undefined
@@ -17,7 +17,9 @@ export const enum modalActionTypes {
   processQueue = 'PROCESS_QUEUEU',
   handleHideModal = 'HANDLE_HIDE_MODAL',
   handleToaster = 'HANDLE_HIDE_TOAST',
-  setTemplateExplorer = 'SET_TEMPLATE_EXPLORER'
+  setTemplateExplorer = 'SET_TEMPLATE_EXPLORER',
+  setActionNotification = 'SET_ACTION_NOTIFICATION',
+  hideActionNotification = 'HIDE_ACTION_NOTIFICATION'
 }
 
 type ModalPayload = {
@@ -26,7 +28,9 @@ type ModalPayload = {
   [modalActionTypes.setToast]: { message: string | JSX.Element, timestamp: number, timeout?: number }
   [modalActionTypes.handleToaster]: any,
   [modalActionTypes.processQueue]: any,
-  [modalActionTypes.setTemplateExplorer]: GenericModal
+  [modalActionTypes.setTemplateExplorer]: GenericModal,
+  [modalActionTypes.setActionNotification]: ActionNotification,
+  [modalActionTypes.hideActionNotification]: { id: string }
 }
 
 export type ModalAction = ActionMap<ModalPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/components/modals/action-notification-bar.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef, useCallback } from 'react'
+import { ActionNotification, ActionNotificationAction } from '../../interface'
+import { useDialogDispatchers } from '../../context/provider'
+
+interface ActionNotificationBarProps {
+  notification: ActionNotification
+  onActionClick: (action: ActionNotificationAction, notificationId: string) => void
+}
+
+/**
+ * A single non-intrusive notification bar (VS Code-style).
+ * Sits at the bottom-right, shows a message with action buttons.
+ */
+const ActionNotificationBar = ({ notification, onActionClick }: ActionNotificationBarProps) => {
+  const { hideActionNotification } = useDialogDispatchers()
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (notification.timeout && notification.timeout > 0) {
+      timerRef.current = setTimeout(() => {
+        hideActionNotification(notification.id)
+      }, notification.timeout)
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [notification.id, notification.timeout])
+
+  const handleDismiss = useCallback(() => {
+    hideActionNotification(notification.id)
+  }, [notification.id])
+
+  const handleAction = useCallback((action: ActionNotificationAction) => {
+    onActionClick(action, notification.id)
+    hideActionNotification(notification.id)
+  }, [notification.id, onActionClick])
+
+  return (
+    <div className="action-notification-bar d-flex flex-column border rounded shadow-sm p-3 mb-2 bg-light"
+      style={{
+        minWidth: '360px',
+        maxWidth: '480px',
+        animation: 'slideInUp 0.25s ease-out'
+      }}
+    >
+      <div className="d-flex justify-content-between align-items-start mb-1">
+        <span className="fw-bold small text-dark">{notification.title}</span>
+        <button
+          type="button"
+          className="btn-close ms-2"
+          aria-label="Close"
+          style={{ fontSize: '0.65rem' }}
+          onClick={handleDismiss}
+        />
+      </div>
+      <div className="small text-body mb-2" style={{ lineHeight: '1.4' }}>
+        {notification.message}
+      </div>
+      {notification.actions && notification.actions.length > 0 && (
+        <div className="d-flex flex-wrap gap-1 justify-content-end">
+          {notification.actions.map((action, idx) => (
+            <button
+              key={idx}
+              className={`btn btn-sm btn-${action.variant || 'primary'}`}
+              onClick={() => handleAction(action)}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ActionNotificationBar

libs/remix-ui/app/src/lib/remix-app/components/modals/action-notification-container.tsx

@@ -0,0 +1,60 @@
+import React, { useContext, useCallback } from 'react'
+import { ActionNotificationAction } from '../../interface'
+import { useDialogs } from '../../context/provider'
+import { AppContext } from '../../context/context'
+import ActionNotificationBar from './action-notification-bar'
+
+/**
+ * Container that renders action notifications at the bottom-right of the viewport.
+ * These are non-intrusive, VS Code-style suggestion bars that don't block the UI.
+ * Actions can trigger plugin calls or direct callbacks.
+ */
+const ActionNotificationContainer = () => {
+  const { actionNotifications } = useDialogs()
+  const app = useContext(AppContext)
+
+  const handleActionClick = useCallback(async (action: ActionNotificationAction, notificationId: string) => {
+    // If there's a direct function callback, call it
+    if (action.fn) {
+      action.fn()
+      return
+    }
+    // Otherwise, make a plugin call
+    if (action.plugin && action.method && app?.appManager) {
+      try {
+        await app.appManager.call(action.plugin, action.method, ...(action.args || []))
+      } catch (err) {
+        console.error(`ActionNotification: failed to call ${action.plugin}.${action.method}`, err)
+      }
+    }
+  }, [app])
+
+  if (!actionNotifications || actionNotifications.length === 0) return null
+
+  return (
+    <div
+      className="action-notification-container"
+      style={{
+        position: 'fixed',
+        bottom: '30px',
+        right: '16px',
+        zIndex: 10000,
+        display: 'flex',
+        flexDirection: 'column-reverse',
+        pointerEvents: 'auto',
+        maxHeight: '60vh',
+        overflowY: 'auto'
+      }}
+    >
+      {actionNotifications.map((notification) => (
+        <ActionNotificationBar
+          key={notification.id}
+          notification={notification}
+          onActionClick={handleActionClick}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default ActionNotificationContainer

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

@@ -3,11 +3,11 @@ import { AppContext } from '../../context/context'
 import { useDialogDispatchers } from '../../context/provider'
 
 const DialogViewPlugin = () => {
-  const { modal, alert, toast } = useDialogDispatchers()
+  const { modal, alert, toast, actionNotification, hideActionNotification } = useDialogDispatchers()
   const app = useContext(AppContext)
 
   useEffect(() => {
-    app.modal.setDispatcher({ modal, alert, toast })
+    app.modal.setDispatcher({ modal, alert, toast, actionNotification, hideActionNotification })
   }, [])
   return <></>
 }

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

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react'
 import { useDialogDispatchers, useDialogs } from '../../context/provider'
 import { ToasterContainer } from '@remix-ui/toaster'
 import ModalWrapper from './modal-wrapper'
+import ActionNotificationContainer from './action-notification-container'
 
 const AppDialogs = () => {
   const { handleHideModal, handleToaster } = useDialogDispatchers()
@@ -22,6 +23,7 @@ const AppDialogs = () => {
     <>
       <ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper>
       <ToasterContainer toasts={toastList} />
+      <ActionNotificationContainer />
     </>
   )
 }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AlertModal, AppModal, AppState } from '../interface'
+import { AlertModal, AppModal, AppState, ActionNotification } from '../interface'
 import { ModalInitialState } from '../state/modals'
 import { AppAction } from '../actions/app'
 
@@ -30,14 +30,18 @@ export interface dispatchModalInterface {
   alert: (data: AlertModal) => void
   handleHideModal: () => void
   handleToaster: () => void
+  actionNotification: (data: ActionNotification) => void
+  hideActionNotification: (id: string) => void
 }
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => {},
   toast: (message: string | JSX.Element, timeout?: number, toastId?: number) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
-  handleToaster: () => {}
+  handleToaster: () => {},
+  actionNotification: (data: ActionNotification) => {},
+  hideActionNotification: (id: string) => {}
 })
 
 export const modalContext = React.createContext(ModalInitialState)

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

@@ -1,7 +1,7 @@
 import React, { useReducer } from 'react'
 import { useIntl, IntlShape } from 'react-intl'
 import { modalActionTypes } from '../actions/modals'
-import { AlertModal, AppModal } from '../interface'
+import { AlertModal, AppModal, ActionNotification } from '../interface'
 import { modalReducer } from '../reducer/modals'
 import { ModalInitialState } from '../state/modals'
 import { ModalTypes } from '../types'
@@ -13,7 +13,7 @@ declare global {
 }
 
 export const ModalProvider = ({ children = [], reducer = modalReducer, initialState = ModalInitialState } = {}) => {
-  const [{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }, dispatch] = useReducer(reducer, initialState)
+  const [{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer, actionNotifications }, dispatch] = useReducer(reducer, initialState)
 
   const onNextFn = async () => {
     dispatch({
@@ -84,9 +84,23 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
     })
   }
 
+  const actionNotification = (data: ActionNotification) => {
+    dispatch({
+      type: modalActionTypes.setActionNotification,
+      payload: data
+    })
+  }
+
+  const hideActionNotification = (id: string) => {
+    dispatch({
+      type: modalActionTypes.hideActionNotification,
+      payload: { id }
+    })
+  }
+
   return (
-    <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster }}>
-      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer }}>
+    <dispatchModalContext.Provider value={{ modal, toast, alert, handleHideModal, handleToaster, actionNotification, hideActionNotification }}>
+      <modalContext.Provider value={{ modals, toasters, focusModal, focusToaster, focusTemplateExplorer, actionNotifications }}>
         {children}
       </modalContext.Provider>
     </dispatchModalContext.Provider>

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

@@ -38,9 +38,36 @@ export interface AlertModal {
     message: string | JSX.Element,
 }
 
+export interface ActionNotificationAction {
+    label: string
+    /** The plugin name to call */
+    plugin?: string
+    /** The method on the plugin to call */
+    method?: string
+    /** Arguments to pass to the plugin method */
+    args?: any[]
+    /** Direct callback (used internally when called from React side) */
+    fn?: () => void
+    /** Bootstrap color variant: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'link' */
+    variant?: string
+}
+
+export interface ActionNotification {
+    id: string
+    title: string
+    message: string | JSX.Element
+    /** Action buttons to display */
+    actions: ActionNotificationAction[]
+    /** Auto-dismiss timeout in ms (0 = no auto-dismiss). Default: 0 */
+    timeout?: number
+    timestamp?: number
+    hide?: boolean
+}
+
 export interface ModalState {
     modals: AppModal[],
     toasters: {message: (string | JSX.Element), timestamp: number, timeout?: number, toastId?: number }[],
+    actionNotifications: ActionNotification[],
     focusModal: AppModal,
     focusToaster: {message: (string | JSX.Element), timestamp: number, timeout?: number, toastId?: number }
     focusTemplateExplorer: GenericModal