update: web toast

src/view/com/util/Toast.tsx

@@ -21,20 +21,36 @@ import {
   FontAwesomeIcon,
   type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
-
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 const TIMEOUT = 2e3
 
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+
+const TOAST_TYPE_TO_ICON: Record<ToastType, FontAwesomeProps['icon']> = {
+  default: 'check',
+  success: 'check',
+  error: 'exclamation',
+  warning: 'circle-exclamation',
+  info: 'info',
+}
+
 export function show(
   message: string,
-  icon: FontAwesomeProps['icon'] = 'check',
+  type: ToastType | FontAwesomeProps['icon'] = 'default',
 ) {
   if (process.env.NODE_ENV === 'test') {
     return
   }
+
+  const icon =
+    typeof type === 'string' && type in TOAST_TYPE_TO_ICON
+      ? TOAST_TYPE_TO_ICON[type as ToastType]
+      : (type as FontAwesomeProps['icon'])
+
   AccessibilityInfo.announceForAccessibility(message)
   const item = new RootSiblings(
     <Toast message={message} icon={icon} destroy={() => item.destroy()} />,
@@ -153,9 +169,41 @@ function Toast({
     }
   })
 
+  // Web-specific styles for better compatibility
+  const webContainerStyle = isWeb
+    ? {
+        position: 'absolute' as const,
+        top: topOffset,
+        left: 16,
+        right: 16,
+        zIndex: 9999,
+        pointerEvents: 'auto' as const,
+      }
+    : {}
+
+  const webToastStyle = isWeb
+    ? {
+        backgroundColor:
+          t.name === 'dark' ? t.palette.contrast_25 : t.palette.white,
+        shadowColor: '#000',
+        shadowOffset: {width: 0, height: 10},
+        shadowOpacity: 0.1,
+        shadowRadius: 15,
+        elevation: 10,
+        borderColor: t.palette.contrast_300,
+        borderWidth: 1,
+        borderRadius: 8,
+        minHeight: 60,
+      }
+    : {}
+
   return (
     <GestureHandlerRootView
-      style={[a.absolute, {top: topOffset, left: 16, right: 16}]}
+      style={[
+        a.absolute,
+        {top: topOffset, left: 16, right: 16},
+        isWeb && webContainerStyle,
+      ]}
       pointerEvents="box-none">
       {alive && (
         <Animated.View
@@ -171,12 +219,16 @@ function Toast({
             onAccessibilityEscape={hideAndDestroyImmediately}
             style={[
               a.flex_1,
-              t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
-              a.shadow_lg,
-              t.atoms.border_contrast_medium,
-              a.rounded_sm,
-              a.border,
-              animatedStyle,
+              isWeb
+                ? webToastStyle
+                : [
+                    t.name === 'dark' ? t.atoms.bg_contrast_25 : t.atoms.bg,
+                    a.shadow_lg,
+                    t.atoms.border_contrast_medium,
+                    a.rounded_sm,
+                    a.border,
+                  ],
+              !isWeb && animatedStyle,
             ]}>
             <GestureDetector gesture={panGesture}>
               <View style={[a.flex_1, a.px_md, a.py_lg, a.flex_row, a.gap_md]}>
@@ -200,7 +252,13 @@ function Toast({
                     style={t.atoms.text_contrast_medium}
                   />
                 </View>
-                <View style={[a.h_full, a.justify_center, a.flex_1]}>
+                <View
+                  style={[
+                    a.h_full,
+                    a.justify_center,
+                    a.flex_1,
+                    a.justify_center,
+                  ]}>
                   <Text style={a.text_md} emoji>
                     {message}
                   </Text>

src/view/com/util/Toast.web.tsx

@@ -9,12 +9,24 @@ import {
   type FontAwesomeIconStyle,
   type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 
-const DURATION = 3500
+const DURATION = 60000
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+
+const TOAST_TYPE_TO_ICON: Record<ToastType, FontAwesomeProps['icon']> = {
+  default: 'check',
+  success: 'check',
+  error: 'exclamation',
+  warning: 'circle-exclamation',
+  info: 'info',
+}
 
 interface ActiveToast {
   text: string
   icon: FontAwesomeProps['icon']
+  type: ToastType
 }
 type GlobalSetActiveToast = (_activeToast: ActiveToast | undefined) => void
 
@@ -33,16 +45,76 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
       setActiveToast(t)
     }
   })
+
+  const t = useTheme()
+
+  const TOAST_TYPE_TO_STYLES = {
+    default: {
+      backgroundColor: t.atoms.text_contrast_low.color,
+      borderColor: t.atoms.border_contrast_medium.borderColor,
+      iconColor: '#fff',
+      textColor: '#fff',
+    },
+    success: {
+      backgroundColor: '#059669',
+      borderColor: '#047857',
+      iconColor: '#fff',
+      textColor: '#fff',
+    },
+    error: {
+      backgroundColor: t.palette.negative_100,
+      borderColor: t.palette.negative_400,
+      iconColor: t.palette.negative_600,
+      textColor: t.palette.negative_600,
+    },
+    warning: {
+      backgroundColor: t.palette.negative_500,
+      borderColor: t.palette.negative_600,
+      iconColor: '#fff',
+      textColor: '#fff',
+    },
+    info: {
+      backgroundColor: t.atoms.text_contrast_low.color,
+      borderColor: t.atoms.border_contrast_medium.borderColor,
+      iconColor: '#fff',
+      textColor: '#fff',
+    },
+  }
+
+  const toastStyles = activeToast
+    ? TOAST_TYPE_TO_STYLES[activeToast.type]
+    : TOAST_TYPE_TO_STYLES.default
+
   return (
     <>
       {activeToast && (
-        <View style={styles.container}>
+        <View
+          style={[
+            styles.container,
+            {
+              backgroundColor: toastStyles.backgroundColor,
+              borderColor: toastStyles.borderColor,
+            },
+          ]}>
           <FontAwesomeIcon
             icon={activeToast.icon}
             size={20}
-            style={styles.icon as FontAwesomeIconStyle}
+            style={
+              [
+                styles.icon,
+                {color: toastStyles.iconColor},
+              ] as FontAwesomeIconStyle
+            }
           />
-          <Text style={styles.text}>{activeToast.text}</Text>
+          <Text
+            style={[
+              styles.text,
+              a.text_sm,
+              a.font_bold,
+              {color: toastStyles.textColor},
+            ]}>
+            {activeToast.text}
+          </Text>
           <Pressable
             style={styles.dismissBackdrop}
             accessibilityLabel="Dismiss"
@@ -60,11 +132,22 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
 // methods
 // =
 
-export function show(text: string, icon: FontAwesomeProps['icon'] = 'check') {
+export function show(
+  text: string,
+  type: ToastType | FontAwesomeProps['icon'] = 'default',
+) {
   if (toastTimeout) {
     clearTimeout(toastTimeout)
   }
-  globalSetActiveToast?.({text, icon})
+
+  // Determine if type is a semantic type or direct icon
+  const isSemanticType = typeof type === 'string' && type in TOAST_TYPE_TO_ICON
+  const icon = isSemanticType
+    ? TOAST_TYPE_TO_ICON[type as ToastType]
+    : (type as FontAwesomeProps['icon'])
+  const toastType = isSemanticType ? (type as ToastType) : 'default'
+
+  globalSetActiveToast?.({text, icon, type: toastType})
   toastTimeout = setTimeout(() => {
     globalSetActiveToast?.(undefined)
   }, DURATION)
@@ -82,8 +165,8 @@ const styles = StyleSheet.create({
     padding: 20,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#000c',
     borderRadius: 10,
+    borderWidth: 1,
   },
   dismissBackdrop: {
     position: 'absolute',
@@ -93,12 +176,9 @@ const styles = StyleSheet.create({
     right: 0,
   },
   icon: {
-    color: '#fff',
     flexShrink: 0,
   },
   text: {
-    color: '#fff',
-    fontSize: 18,
     marginLeft: 10,
   },
 })