managarten/picture/apps/mobile/components/GenerationToast.tsx

import { useEffect, useState } from 'react';
import { View, Animated, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Text } from '~/components/Text';
import { useTheme } from '~/contexts/ThemeContext';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface GenerationToastProps {
  message: string;
  duration?: number; // ms
  onDismiss?: () => void;
}

export function GenerationToast({ message, duration = 3000, onDismiss }: GenerationToastProps) {
  const { theme } = useTheme();
  const insets = useSafeAreaInsets();
  const [slideAnim] = useState(new Animated.Value(400)); // Start off-screen (right)

  useEffect(() => {
    // Slide in
    Animated.spring(slideAnim, {
      toValue: 0,
      useNativeDriver: true,
      tension: 50,
      friction: 8,
    }).start();

    // Auto dismiss after duration
    const timer = setTimeout(() => {
      handleDismiss();
    }, duration);

    return () => clearTimeout(timer);
  }, []);

  const handleDismiss = () => {
    // Slide out
    Animated.timing(slideAnim, {
      toValue: 400,
      duration: 200,
      useNativeDriver: true,
    }).start(() => {
      onDismiss?.();
    });
  };

  return (
    <Animated.View
      style={{
        position: 'absolute',
        top: insets.top + 60, // Below header
        right: 16,
        zIndex: 9999,
        transform: [{ translateX: slideAnim }],
      }}
    >
      <Pressable onPress={handleDismiss}>
        <View
          style={{
            backgroundColor: theme.colors.success,
            borderRadius: 12,
            padding: 12,
            paddingHorizontal: 16,
            flexDirection: 'row',
            alignItems: 'center',
            gap: 8,
            ...theme.shadows.md,
            minWidth: 200,
          }}
        >
          <Ionicons name="checkmark-circle" size={20} color="#fff" />
          <Text
            variant="body"
            weight="semibold"
            style={{ color: '#fff', flex: 1 }}
          >
            {message}
          </Text>
        </View>
      </Pressable>
    </Animated.View>
  );
}