tost

js/app/components/settings/settings.tsx

···
 import { useNavigation } from "@react-navigation/native";
-import { Button, Input, Text, View, zero } from "@streamplace/components";
+import {
+  Button,
+  Input,
+  Text,
+  useToast,
+  View,
+  zero,
+} from "@streamplace/components";
 import AQLink from "components/aqlink";
 import {
   createServerSettingsRecord,
···
   const defaultUrl = DEFAULT_URL;
   const [newUrl, setNewUrl] = useState("");
   const [overrideEnabled, setOverrideEnabled] = useState(false);
+  const t = useToast();
 
   // are we logged in?
   const loggedIn = useAppSelector(
···
             </>
           )}
         </View>
+        <Button onPress={() => t.show("toast")}>tost</Button>
       </View>
     </ScrollView>
   );

js/components/src/components/ui/toast.tsx

···
 import { Portal } from "@rn-primitives/portal";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
-  Animated,
   Platform,
   Pressable,
   StyleSheet,
-  Text,
   useWindowDimensions,
   View,
   ViewStyle,
 } from "react-native";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 import { useTheme } from "../../ui";
+import { Text } from "./text";
 
 type ToastConfig = {
   title: string;
···
   duration?: number;
   actionLabel?: string;
   onAction?: () => void;
+  variant?: "default" | "success" | "error" | "info";
 };
 
 type ToastState = {
···
   duration: number;
   actionLabel?: string;
   onAction?: () => void;
+  variant?: "default" | "success" | "error" | "info";
 };
 
 class ToastManager {
-  private listeners: Set<(state: ToastState | null) => void> = new Set();
-  private currentToast: ToastState | null = null;
-  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+  private listeners: Set<(state: ToastState[]) => void> = new Set();
+  private toasts: ToastState[] = [];
+  private timeoutIds: Map<string, ReturnType<typeof setTimeout>> = new Map();
+  private hoverListeners: Set<(isHovered: boolean) => void> = new Set();
+  private isHovered: boolean = false;
 
   show(config: ToastConfig) {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-
     const toast: ToastState = {
-      id: Math.random().toString(36).substr(2, 9),
+      id: Math.random().toString(36).slice(2, 12),
       open: true,
       title: config.title,
       description: config.description,
       duration: config.duration ?? 3,
       actionLabel: config.actionLabel,
       onAction: config.onAction,
+      variant: config.variant ?? "default",
     };
 
-    this.currentToast = toast;
+    this.toasts = [...this.toasts, toast];
     this.notifyListeners();
 
     if (toast.duration > 0) {
-      this.timeoutId = setTimeout(() => {
-        this.hide();
+      const timeoutId = setTimeout(() => {
+        this.hide(toast.id);
       }, toast.duration * 1000);
+      this.timeoutIds.set(toast.id, timeoutId);
     }
   }
 
-  hide() {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    }
-    this.currentToast = null;
+  getToasts() {
+    return this.toasts;
+  }
+
+  hide(id: string) {
+    this.toasts = this.toasts.map((toast) =>
+      toast.id === id ? { ...toast, open: false } : toast,
+    );
     this.notifyListeners();
+
+    const timeoutId = this.timeoutIds.get(id);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      this.timeoutIds.delete(id);
+    }
+
+    setTimeout(() => {
+      this.toasts = this.toasts.filter((toast) => toast.id !== id);
+      this.notifyListeners();
+    }, 500);
   }
 
-  subscribe(listener: (state: ToastState | null) => void) {
+  subscribe(listener: (state: ToastState[]) => void) {
     this.listeners.add(listener);
     return () => {
       this.listeners.delete(listener);
     };
   }
 
+  subscribeHover(listener: (isHovered: boolean) => void) {
+    this.hoverListeners.add(listener);
+    return () => {
+      this.hoverListeners.delete(listener);
+    };
+  }
+
+  setHovered(hovered: boolean) {
+    this.isHovered = hovered;
+    this.notifyHoverListeners();
+  }
+
   private notifyListeners() {
-    this.listeners.forEach((listener) => listener(this.currentToast));
+    this.listeners.forEach((listener) => listener(this.toasts));
+  }
+
+  private notifyHoverListeners() {
+    this.hoverListeners.forEach((listener) => listener(this.isHovered));
   }
 }
 
···
       duration?: number;
       actionLabel?: string;
       onAction?: () => void;
+      variant?: "default" | "success" | "error" | "info";
     },
   ) => {
     toastManager.show({
···
       ...options,
     });
   },
-  hide: () => toastManager.hide(),
+  hide: (id?: string) => {
+    if (id) {
+      toastManager.hide(id);
+    } else {
+      const toasts = toastManager.getToasts();
+      if (toasts.length > 0) {
+        toastManager.hide(toasts[toasts.length - 1].id);
+      }
+    }
+  },
 };
 
 export function useToast() {
-  const [toastState, setToastState] = useState<ToastState | null>(null);
+  const [toasts, setToasts] = useState<ToastState[]>([]);
 
   useEffect(() => {
-    return toastManager.subscribe(setToastState);
+    return toastManager.subscribe(setToasts);
   }, []);
 
   return {
-    toast: toastState,
+    toasts,
     ...toast,
   };
 }
 
 export function ToastProvider() {
-  const [toastState, setToastState] = useState<ToastState | null>(null);
+  const [toasts, setToasts] = useState<ToastState[]>([]);
 
   useEffect(() => {
-    return toastManager.subscribe(setToastState);
+    return toastManager.subscribe(setToasts);
   }, []);
 
-  if (!toastState?.open) return null;
-
   return (
-    <Toast
-      open={toastState.open}
-      onOpenChange={(open) => {
-        if (!open) toastManager.hide();
-      }}
-      title={toastState.title}
-      description={toastState.description}
-      actionLabel={toastState.actionLabel}
-      onAction={toastState.onAction}
-      duration={toastState.duration}
-    />
+    <>
+      {toasts
+        .slice(-4)
+        .reverse()
+        .map((toastState, index) => (
+          <Toast
+            key={toastState.id}
+            open={toastState.open}
+            onOpenChange={(open) => {
+              if (!open) toastManager.hide(toastState.id);
+            }}
+            title={toastState.title}
+            description={toastState.description}
+            actionLabel={toastState.actionLabel}
+            onAction={toastState.onAction}
+            duration={toastState.duration}
+            index={index}
+            isLatest={index === 0}
+            totalToasts={toasts.length}
+            variant={toastState.variant}
+          />
+        ))}
+    </>
   );
 }
 
 type ToastProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
   description?: string;
   actionLabel?: string;
   onAction?: () => void;
-  duration?: number; // seconds
+  duration?: number;
+  index?: number;
+  isLatest?: boolean;
+  totalToasts?: number;
+  variant?: "default" | "success" | "error" | "info";
 };
 
 export function Toast({
-  open,
-  onOpenChange,
-  title,
+  open = false,
+  onOpenChange = () => {},
+  title = "",
   description,
   actionLabel = "Action",
   onAction,
-  duration = 3,
+  duration = 60,
+  index = 0,
+  isLatest = true,
+  totalToasts = 0,
+  variant = "default",
 }: ToastProps) {
   const [seconds, setSeconds] = useState(duration);
+  const [isHovered, setIsHovered] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [height, setHeight] = useState(100);
   const insets = useSafeAreaInsets();
   const { theme } = useTheme();
-  const [fadeAnim] = useState(new Animated.Value(0));
+  const isWeb = Platform.OS === "web";
   const { width } = useWindowDimensions();
-  const isWeb = Platform.OS === "web";
   const isDesktop = isWeb && width >= 768;
 
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(100);
+  const scale = useSharedValue(1 - index * 0.05);
+
+  useEffect(() => {
+    return toastManager.subscribeHover(setIsHovered);
+  }, []);
+
+  useEffect(() => {
+    if (isHovered) {
+      // Stack vertically with proper spacing when hovered
+      const spacing = height + 20; // Height of each toast + gap
+      translateY.value = withTiming(-index * spacing, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+      scale.value = withTiming(1, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+      opacity.value = withTiming(1, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+    } else {
+      // Compact stacked view when not hovered
+      translateY.value = withTiming(index * 10, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+      scale.value = withTiming(1 - index * 0.05, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+      opacity.value = withTiming(isLatest ? 1 : 0.8, {
+        duration: 300,
+        easing: Easing.out(Easing.exp),
+      });
+    }
+  }, [isHovered, index, isLatest]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }, { scale: scale.value }],
+      zIndex: 1000 - index,
+    };
+  });
+
   const containerPosition: ViewStyle = isDesktop
     ? {
-        top: undefined,
         bottom: theme.spacing[4],
-        right: theme.spacing[4], // <-- use spacing, not 1
+        right: theme.spacing[4],
         alignItems: "flex-end",
         minWidth: 400,
         width: 400,
-        // Do NOT set left at all
       }
     : {
         bottom: insets.bottom + theme.spacing[1],
···
         right: 0,
         alignItems: "center",
         width: "100%",
-        maxWidth: undefined,
       };
 
   useEffect(() => {
-    let interval: ReturnType<typeof setInterval> | null = null;
-
-    if (open) {
-      setSeconds(duration);
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }).start();
-
-      interval = setInterval(() => {
+    if (open && !isHovered) {
+      // Start or resume the timer
+      intervalRef.current = setInterval(() => {
         setSeconds((prev) => {
           if (prev <= 1) {
-            onOpenChange(false);
-            if (interval) clearInterval(interval);
+            runOnJS(onOpenChange)(false);
+            if (intervalRef.current) clearInterval(intervalRef.current);
             return duration;
           }
           return prev - 1;
         });
       }, 1000);
     } else {
-      if (interval) clearInterval(interval);
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 150,
-        useNativeDriver: true,
-      }).start();
-      setSeconds(duration);
+      // Pause timer when hovered or not open
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    if (!open) {
+      opacity.value = withTiming(0, { duration: 150 });
+      translateY.value = withTiming(100, { duration: 150 });
     }
 
     return () => {
-      if (interval) clearInterval(interval);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     };
-    // eslint-disable-next-line
-  }, [open, duration]);
+  }, [open, isHovered]);
 
-  if (!open) return null;
+  useEffect(() => {
+    if (open) {
+      setSeconds(duration);
+
+      opacity.value = withTiming(isLatest ? 1 : 0.8, {
+        duration: 200,
+        easing: Easing.out(Easing.exp),
+      });
+      translateY.value = withTiming(index * 10, {
+        duration: 200,
+        easing: Easing.out(Easing.exp),
+      });
+      scale.value = withTiming(1 - index * 0.05, {
+        duration: 250,
+        easing: Easing.out(Easing.exp),
+      });
+    }
+  }, [open, duration, index]);
+
+  const variantStyles = {
+    default: {
+      backgroundColor: theme.colors.secondary,
+      borderColor: theme.colors.border,
+    },
+    success: {
+      backgroundColor: theme.colors.success,
+      borderColor: theme.colors.success,
+    },
+    error: {
+      backgroundColor: theme.colors.destructive,
+      borderColor: theme.colors.destructive,
+    },
+    info: {
+      backgroundColor: theme.colors.info,
+      borderColor: theme.colors.info,
+    },
+  };
 
   return (
-    <Portal name="toast">
+    <Portal name={`toast-${index}`}>
       <Animated.View
-        style={[styles.container, containerPosition, { opacity: fadeAnim }]}
-        pointerEvents="box-none"
+        onLayout={(l) => setHeight(l.nativeEvent.layout.height)}
+        style={[styles.container, containerPosition, animatedStyle]}
       >
-        <View
+        <Pressable
+          onHoverIn={() => isWeb && toastManager.setHovered(true)}
+          onHoverOut={() => isWeb && toastManager.setHovered(false)}
           style={[
             styles.toast,
             {
-              backgroundColor: theme.colors.secondary,
-              borderColor: theme.colors.border,
               borderRadius: theme.borderRadius.xl,
               flexDirection: "column",
               justifyContent: "space-between",
···
               padding: theme.spacing[4],
               width: isDesktop ? "100%" : "95%",
             },
+            variantStyles[variant],
           ]}
         >
           <View style={{ gap: theme.spacing[1], width: "100%" }}>
             <Text
-              style={[
-                {
-                  color: theme.colors.foreground,
-                  fontSize: 16,
-                  fontWeight: "500",
-                },
-              ]}
+              style={{
+                color: theme.colors.foreground,
+                fontSize: 16,
+                fontWeight: "500",
+              }}
             >
               {title}
             </Text>
             {description ? (
-              <Text style={[{ color: theme.colors.foreground, fontSize: 14 }]}>
+              <Text style={{ color: theme.colors.foreground, fontSize: 14 }}>
                 {description}
               </Text>
             ) : null}
           </View>
+
           <View
             style={{
               gap: theme.spacing[1],
···
               <Text style={{ color: theme.colors.foreground }}>Close</Text>
             </Pressable>
           </View>
-        </View>
+        </Pressable>
       </Animated.View>
     </Portal>
   );

js/components/src/lib/theme/theme.tsx

···
     warning: string;
     warningForeground: string;
 
+    // Info colors
+    info: string;
+    infoForeground: string;
+
     // Border and input colors
     border: string;
     input: string;
···
     warning:
       Platform.OS === "ios" ? colors.ios.systemOrange : colors.warning[500],
     warningForeground: colors.white,
+
+    info: Platform.OS === "ios" ? colors.ios.systemTeal : colors.teal[500],
+    infoForeground: isDark ? palette[50] : palette[900],
 
     border: isDark ? palette[500] + "30" : palette[200] + "30",
     input: isDark ? palette[800] : palette[200],