feat: notifications dismiss animations (#387)

* chore: add removed field to state

* feat: add removed flag for notifications

* feat: expose dismiss prop

* fix: simplify percent calc for progress

* feat: use store types for notification

* fix: improve dismissed prop naming

* feat: add notification animations

* chore: expose dev server

* fix: fix white bg issue on terminal

* fix: adjust animation timings

Author: x1unix

web/package.json

@@ -82,7 +82,7 @@
     "workbox-streams": "^6.5.4"
   },
   "scripts": {
-    "start": "npx vite",
+    "start": "npx vite --host",
     "build": "npx vite build",
     "serve": "npx vite preview",
     "lint": "npx eslint .",

web/src/components/features/inspector/Console/Console.css

@@ -11,6 +11,11 @@
   inset: 0;
 }
 
+/** Fix white background in viewport **/
+.app-Console__xterm .xterm-screen {
+  background: var(--terminal-bg);
+}
+
 .app-Console .terminal > * {
   padding: 0 var(--terminal-padding-x);
 }

web/src/components/features/inspector/Console/Console.tsx

@@ -226,7 +226,7 @@ export const Console: React.FC<Props> = ({ fontFamily, fontSize, status, backend
   }, [terminal?.textarea, setIsFocused])
 
   return (
-    <div className="app-Console">
+    <div className="app-Console" style={{ '--terminal-bg': theme.background } as any}>
       <CopyButton hidden={!isFocused} onClick={copySelection} />
       <XTerm
         ref={xtermRef}

web/src/components/modals/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import {
   Stack,
   IconButton,
@@ -7,40 +7,20 @@ import {
   DefaultButton,
   PrimaryButton,
   useTheme,
+  MotionTimings,
 } from '@fluentui/react'
 import { FontIcon } from '@fluentui/react/lib/Icon'
+import {
+  type Notification as NotificationModel,
+  type NotificationAction,
+  NotificationType,
+} from '~/store/notifications'
 
 import './Notification.css'
 
-export enum NotificationType {
-  None = '',
-  Info = 'info',
-  Warning = 'warning',
-  Error = 'error',
-}
-
-interface ProgressState {
-  indeterminate?: boolean
-  total?: number
-  current?: number
-}
-
-interface NotificationAction {
-  label: string
-  key: string
-  primary?: boolean
-  onClick?: () => void
-}
-
-export interface NotificationProps {
-  id: number | string
-  type?: NotificationType
-  title: string
-  description?: string
-  canDismiss?: boolean
-  progress?: ProgressState
-  onClose?: () => void
-  actions?: NotificationAction[]
+export interface NotificationProps extends NotificationModel {
+  onDismiss?: (id: string) => void
+  onDismissed?: (id: string) => void
 }
 
 const iconColorPaletteMap: { [k in NotificationType]: keyof ISemanticColors } = {
@@ -57,14 +37,18 @@ const statusIconMapping: { [k in NotificationType]: string } = {
   [NotificationType.None]: 'info',
 }
 
+/**
+ * Computes current progress percentage and returns float value between 0 and 1.
+ *
+ * Returns undefined if there is no progress data available.
+ */
 const getPercentComplete = (progress: NotificationProps['progress']): number | undefined => {
   if (!progress || progress?.indeterminate) {
     return
   }
 
   const { current, total } = progress
-  const percentage = (current! * 100) / total!
-  return percentage / 100
+  return current! / total!
 }
 
 const NotificationActionButton: React.FC<Omit<NotificationAction, 'key'>> = ({ label, primary, onClick }) => {
@@ -79,12 +63,52 @@ export const Notification: React.FunctionComponent<NotificationProps> = ({
   description,
   canDismiss = true,
   type = NotificationType.Info,
-  onClose,
   actions,
+  dismissed,
+  onDismiss,
+  onDismissed,
 }) => {
+  const elementRef = useRef<HTMLDivElement | null>(null)
   const { semanticColors, fonts, ...theme } = useTheme()
+
+  useEffect(() => {
+    const { current: elem } = elementRef
+    if (!dismissed || !elem) {
+      return
+    }
+
+    // Animate element swipe out + shrink space around.
+    // Height should be extracted from JS until "calc-size" is not available.
+    const height = elem.clientHeight
+    const animation = elem.animate(
+      [
+        {
+          opacity: '1',
+          maxHeight: `${height}px`,
+          offset: 0,
+        },
+        {
+          opacity: '0.5',
+          transform: 'translate3d(120%, 0, 0)',
+          maxHeight: `${height}px`,
+          offset: 0.5,
+        },
+        {
+          opacity: '0',
+          transform: 'translate3d(120%, 0, 0)',
+          maxHeight: '0',
+          offset: 1.0,
+        },
+      ],
+      { duration: 200, fill: 'forwards', easing: MotionTimings.standard },
+    )
+
+    animation.onfinish = () => onDismissed?.(id)
+    animation.play()
+  }, [id, dismissed, elementRef, onDismissed])
   return (
     <div
+      ref={elementRef}
       className="Notification"
       data-notification-id={id}
       style={{
@@ -108,7 +132,7 @@ export const Notification: React.FunctionComponent<NotificationProps> = ({
             <IconButton
               title="Close"
               ariaLabel="Close notification"
-              onClick={onClose}
+              onClick={() => onDismiss?.(id)}
               style={{
                 color: 'inherit',
                 width: 'auto',
@@ -143,7 +167,7 @@ export const Notification: React.FunctionComponent<NotificationProps> = ({
               key={key}
               onClick={() => {
                 onClick?.()
-                onClose?.()
+                onDismiss?.(id)
               }}
             />
           ))}

web/src/components/modals/Notification/NotificationHost.tsx

@@ -1,33 +1,44 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { type StateDispatch, type State } from '~/store'
-import { type NotificationsState, newRemoveNotificationAction } from '~/store/notifications'
+import React, { useCallback } from 'react'
+import { type StateDispatch, connect } from '~/store'
+import {
+  type NotificationsState,
+  newDeleteRemovedNotificationAction,
+  newRemoveNotificationAction,
+} from '~/store/notifications'
 import { Notification } from './Notification'
 import './NotificationHost.css'
 
-interface Props {
+interface StateProps {
   notifications?: NotificationsState
-  dispatch?: StateDispatch
 }
 
+interface Props extends StateProps {
+  dispatch: StateDispatch
+}
+
+/**
+ * Component responsible for hosting and displaying notifications from store.
+ */
 const NotificationHostBase: React.FunctionComponent<Props> = ({ notifications, dispatch }) => {
+  const dismissNotification = useCallback((id: string) => dispatch(newRemoveNotificationAction(id)), [dispatch])
+  const deleteNotification = useCallback((id: string) => dispatch(newDeleteRemovedNotificationAction(id)), [dispatch])
+
   return (
     <div className="NotificationHost">
       {notifications
         ? Object.entries(notifications).map(([key, notification]) => (
             <Notification
               {...notification}
               key={key}
-              onClose={() => {
-                dispatch?.(newRemoveNotificationAction(key))
-              }}
+              onDismiss={dismissNotification}
+              onDismissed={deleteNotification}
             />
           ))
         : null}
     </div>
   )
 }
 
-export const NotificationHost = connect<Props, any, any, State>(({ notifications }) => ({ notifications }))(
+export const NotificationHost = connect<StateProps, {}>(({ notifications }) => ({ notifications }))(
   NotificationHostBase,
 )

web/src/store/notifications/actions.ts

@@ -1,12 +1,17 @@
-import { type Notification } from './state'
+import type { Notification } from './state'
 
 export enum ActionType {
   NEW_NOTIFICATION = 'NEW_NOTIFICATION',
   ADD_NOTIFICATIONS = 'ADD_NOTIFICATIONS',
   UPDATE_NOTIFICATION = 'UPDATE_NOTIFICATION',
   REMOVE_NOTIFICATION = 'REMOVE_NOTIFICATION',
+  DELETE_REMOVED_NOTIFICATION = 'DELETE_REMOVED_NOTIFICATION',
 }
 
+/**
+ * Generates a new unique notification ID.
+ * @returns
+ */
 export const newNotificationId = () => `${Date.now().toString(36)}_${Math.random().toString(36).substring(2)}`
 
 /**
@@ -20,12 +25,34 @@ export const newAddNotificationAction = (notification: Notification, updateOnly
   payload: notification,
 })
 
+/**
+ * Returns a bulk add notifications action.
+ * @param notifications List of notifications to add.
+ */
 export const newAddNotificationsAction = (notifications: Notification[]) => ({
   type: ActionType.ADD_NOTIFICATIONS,
   payload: notifications,
 })
 
+/**
+ * Returns an action to dismiss notification.
+ * @param id Notification ID
+ */
 export const newRemoveNotificationAction = (id: string) => ({
   type: ActionType.REMOVE_NOTIFICATION,
   payload: id,
 })
+
+/**
+ * Returns an action to delete notification from store.
+ *
+ * Intented to use **only by notification host** responsible for drawing notifications.
+ *
+ * Regular clients should use `newRemoveNotificationAction` instead.
+ *
+ * @param id Notification ID
+ */
+export const newDeleteRemovedNotificationAction = (id: string) => ({
+  type: ActionType.DELETE_REMOVED_NOTIFICATION,
+  payload: id,
+})

web/src/store/notifications/reducers.ts

@@ -20,7 +20,16 @@ const reducers = mapByAction<NotificationsState>(
 
       return { ...s, [payload.id]: payload }
     },
-    [ActionType.REMOVE_NOTIFICATION]: (s: NotificationsState, { payload }: Action<string>) => {
+    [ActionType.REMOVE_NOTIFICATION]: (s: NotificationsState, { payload: id }: Action<string>) => {
+      if (!s[id]) {
+        return s
+      }
+
+      const newNotifications = { ...s }
+      newNotifications[id].dismissed = true
+      return newNotifications
+    },
+    [ActionType.DELETE_REMOVED_NOTIFICATION]: (s: NotificationsState, { payload }: Action<string>) => {
       const newNotifications = { ...s }
       delete newNotifications[payload]
       return newNotifications