vibefast-cli 1.1.3 → 1.2.1

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/achievement-unlocked-modal.tsx

@@ -0,0 +1,162 @@
+import { FontAwesome5 } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { Platform, Text, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Pressable } from '@/components/ui';
+
+type AchievementUnlockedModalProps = {
+  showModal: boolean;
+  unlockedAchievements: any[];
+  onClose: () => void;
+  isDarkMode: boolean;
+};
+
+export function AchievementUnlockedModal({
+  showModal,
+  unlockedAchievements,
+  onClose,
+  isDarkMode,
+}: AchievementUnlockedModalProps) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  if (!showModal || unlockedAchievements.length === 0) return null;
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(200)}
+      className="absolute inset-0 items-center justify-center"
+      style={[
+        {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          elevation: Platform.OS === 'android' ? 1000 : undefined,
+          zIndex: 9999,
+        },
+      ]}
+    >
+      <Pressable
+        className="absolute inset-0 bg-black/70"
+        onPress={onClose}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+        }}
+      />
+
+      <View
+        className="mx-auto w-screen flex-1 items-center justify-center px-4"
+        style={{ zIndex: 10000 }}
+      >
+        <Animated.View
+          entering={FadeInDown.duration(400).delay(200)}
+          className={`mx-auto w-full max-w-[90%] rounded-2xl p-5 ${
+            isDarkMode ? 'bg-neutral-800' : 'bg-white'
+          }`}
+          style={{
+            elevation: Platform.OS === 'android' ? 1001 : undefined,
+            zIndex: 10001,
+            shadowColor: '#000',
+            shadowOffset: {
+              width: 0,
+              height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+          }}
+        >
+          <View className="mb-4 items-center">
+            <Text
+              className={`mb-4 text-2xl font-bold ${
+                isDarkMode ? 'text-white' : 'text-neutral-900'
+              }`}
+            >
+              Achievement{unlockedAchievements.length > 1 ? 's' : ''} Unlocked!
+            </Text>
+
+            <View className="w-full gap-2">
+              {unlockedAchievements.map((achievement) => (
+                <Animated.View
+                  key={achievement.id}
+                  entering={FadeInDown.duration(400).delay(300)}
+                  className="mb-2 flex-row items-center rounded-xl p-3"
+                  style={{ backgroundColor: `${achievement.color}20` }}
+                >
+                  <View
+                    className="mr-3 size-12 items-center justify-center rounded-full"
+                    style={{ backgroundColor: achievement.color }}
+                  >
+                    <FontAwesome5
+                      name={achievement.icon}
+                      size={20}
+                      color="white"
+                    />
+                  </View>
+                  <View className="flex-1">
+                    <Text
+                      className={`font-bold ${
+                        isDarkMode ? 'text-white' : 'text-neutral-900'
+                      }`}
+                    >
+                      {achievement.title}
+                    </Text>
+                    <Text
+                      className={`text-sm ${
+                        isDarkMode ? 'text-neutral-300' : 'text-neutral-600'
+                      }`}
+                    >
+                      {achievement.description}
+                    </Text>
+                    <Text
+                      className="mt-1 text-sm font-medium"
+                      style={{ color: achievement.color }}
+                    >
+                      +{achievement.points} points
+                    </Text>
+                  </View>
+                </Animated.View>
+              ))}
+            </View>
+          </View>
+
+          <View className="flex-row gap-2">
+            <Pressable
+              onPress={onClose}
+              className={`flex-1 items-center rounded-xl px-6 py-4 font-semibold ${
+                isDarkMode ? 'bg-neutral-700' : 'bg-neutral-200'
+              }`}
+            >
+              <Text
+                className={`font-medium ${
+                  isDarkMode ? 'text-white' : 'text-neutral-800'
+                }`}
+              >
+                Continue
+              </Text>
+            </Pressable>
+
+            <Pressable
+              onPress={() => {
+                onClose();
+                router.navigate('/leaderboard');
+              }}
+              className="flex-1 items-center rounded-xl bg-indigo-500 px-6 py-4 font-semibold"
+            >
+              <Text className="font-medium text-white">Leaderboard</Text>
+            </Pressable>
+          </View>
+        </Animated.View>
+      </View>
+    </Animated.View>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/achievements-section.tsx

@@ -0,0 +1,44 @@
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import type { Achievement } from '../../services/analysis-service';
+import { AchievementCard } from './achievement-card';
+
+type AchievementsSectionProps = {
+  achievements: Achievement[];
+  className?: string;
+};
+
+export function AchievementsSection({
+  achievements,
+  className = '',
+}: AchievementsSectionProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  if (achievements.length === 0) {
+    return null;
+  }
+
+  return (
+    <View className={`mx-6 mb-6 ${className}`}>
+      {/* Section Title */}
+      <Text
+        className={`mb-4 text-xl font-bold ${
+          isDarkMode ? 'text-white' : 'text-neutral-900'
+        }`}
+      >
+        🏆 Achievements Earned
+      </Text>
+
+      {/* Full-width Achievements */}
+      <View className="gap-y-3">
+        {achievements.map((achievement) => (
+          <AchievementCard key={achievement.id} achievement={achievement} />
+        ))}
+      </View>
+    </View>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/advice-list.tsx

@@ -0,0 +1,42 @@
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type AdviceListProps = {
+  items: string[];
+  bulletType?: 'dot' | 'emoji';
+  bulletColor?: string;
+  emoji?: string;
+};
+
+export function AdviceList({
+  items,
+  bulletType = 'dot',
+  bulletColor = 'bg-green-500',
+  emoji = '💡',
+}: AdviceListProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <>
+      {items.map((item, index) => (
+        <View key={index} className="mb-3 flex-row">
+          {bulletType === 'dot' ? (
+            <View className={`mr-3 mt-1 size-2 rounded-full ${bulletColor}`} />
+          ) : (
+            <Text className="mr-3 text-base">{emoji}</Text>
+          )}
+          <Text
+            className={`flex-1 text-base leading-6 ${
+              isDarkMode ? 'text-neutral-300' : 'text-neutral-700'
+            }`}
+          >
+            {item}
+          </Text>
+        </View>
+      ))}
+    </>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/circular-progress.tsx

@@ -0,0 +1,233 @@
+import { useEffect } from 'react';
+import { Platform, Text, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Circle, LinearGradient, Stop } from 'react-native-svg';
+
+import { Pressable } from '@/components/ui';
+import { useResponsiveSize } from '@/lib/hooks';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type CircularProgressProps = {
+  value: number;
+  size?: number;
+  strokeWidth?: number;
+  label?: string;
+  onPress?: () => void;
+  showViewAdvice?: boolean;
+  isCard?: boolean;
+  isSubscribed?: boolean;
+  gradientColors?: {
+    high: string[];
+    medium: string[];
+    low: string[];
+  };
+};
+
+export function CircularProgress({
+  value,
+  size = 120,
+  strokeWidth = 12,
+  label,
+  onPress,
+  showViewAdvice = false,
+  isCard = true,
+  isSubscribed = true,
+  gradientColors = {
+    high: ['#4ADE80', '#22C55E'],
+    medium: ['#FBBF24', '#F59E0B'],
+    low: ['#FB7185', '#E11D48'],
+  },
+}: CircularProgressProps) {
+  const { isTablet } = useResponsiveSize();
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withTiming(value / 100, { duration: 1500 });
+  }, [value, progress]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: withSpring(1 + progress.value * 0.05) }],
+    };
+  });
+
+  const getGradientColors = (score: number) => {
+    if (score >= 70) return gradientColors.high;
+    if (score >= 50) return gradientColors.medium;
+    return gradientColors.low;
+  };
+
+  const colors = getGradientColors(value);
+  const scoreLevel = value >= 70 ? 'High' : value >= 50 ? 'Medium' : 'Low';
+
+  const handlePress = () => {
+    if (isSubscribed && onPress) {
+      onPress();
+    } else if (!isSubscribed) {
+      // Handle subscription modal if needed
+      console.log('Subscription required');
+    }
+  };
+
+  const cardStyle = isCard
+    ? {
+        borderWidth: 1.5,
+        borderColor: `${colors[0]}40`,
+        ...Platform.select({
+          ios: {
+            shadowColor: colors[0],
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 12,
+            backgroundColor: isDarkMode
+              ? 'rgba(31, 41, 55, 0.3)'
+              : 'rgba(255, 255, 255, 0.7)',
+          },
+          android: {
+            elevation: 4,
+            backgroundColor: isDarkMode
+              ? 'rgba(31, 41, 55, 0.95)'
+              : 'rgba(255, 255, 255, 0.95)',
+          },
+        }),
+      }
+    : undefined;
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      className={`${
+        isCard
+          ? `relative overflow-hidden rounded-2xl border p-4 ${
+              isDarkMode
+                ? 'border-neutral-700/80 bg-neutral-800/30 backdrop-blur-3xl'
+                : 'border-neutral-200/80 bg-white/70 backdrop-blur-3xl'
+            }`
+          : ''
+      } ${isCard ? (isTablet ? 'h-[305px]' : 'h-[255px]') : ''}`}
+      style={cardStyle}
+      enableRipple={!!onPress}
+      rippleConfig={{
+        color: isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+      }}
+    >
+      <View
+        className={`items-center ${isCard ? 'h-full justify-between' : ''}`}
+      >
+        {/* Title */}
+        {label && (
+          <Text
+            className={`${isTablet ? 'text-2xl' : 'text-lg'} -mx-2 mb-3 font-semibold leading-[1.2] ${
+              isDarkMode ? 'text-white' : 'text-neutral-900'
+            }`}
+          >
+            {label}
+          </Text>
+        )}
+
+        {/* Circular Progress */}
+        <Animated.View
+          className="mb-3 items-center justify-center"
+          style={animatedStyle}
+        >
+          <View style={{ width: size, height: size }}>
+            <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+              {/* Background Circle */}
+              <Circle
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                strokeWidth={strokeWidth}
+                stroke={isDarkMode ? '#374151' : '#d1d5db'}
+                fill="transparent"
+                opacity={isDarkMode ? 0.8 : 1}
+              />
+              {/* Progress Circle with Gradient */}
+              <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
+                <Stop offset="0" stopColor={colors[0]} />
+                <Stop offset="1" stopColor={colors[1]} />
+              </LinearGradient>
+              <Circle
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                strokeWidth={strokeWidth}
+                stroke="url(#grad)"
+                fill="transparent"
+                strokeDasharray={circumference}
+                strokeDashoffset={circumference - (value / 100) * circumference}
+                strokeLinecap="round"
+                transform={`rotate(-90, ${size / 2}, ${size / 2})`}
+              />
+            </Svg>
+            <View className="absolute inset-0 size-full items-center justify-center">
+              {/* Score Level Badge */}
+              <View
+                className="mb-2 rounded-full px-2 py-0.5"
+                style={{ backgroundColor: `${colors[0]}20` }}
+              >
+                <Text
+                  className={`${isTablet ? 'text-[10px]' : 'text-[8.8px]'}`}
+                  style={{ color: colors[0], fontWeight: '600' }}
+                >
+                  {scoreLevel}
+                </Text>
+              </View>
+              <Text
+                className={`${isTablet ? 'text-[48px]' : 'text-[40px]'} font-extrabold leading-none tracking-[0.9px] ${
+                  isDarkMode ? 'text-white' : 'text-neutral-900'
+                }`}
+              >
+                {value.toFixed(0)}
+              </Text>
+            </View>
+          </View>
+        </Animated.View>
+
+        {/* View Advice Button */}
+        {showViewAdvice && (
+          <Pressable
+            onPress={handlePress}
+            className="w-full flex-row items-center justify-center"
+            enableRipple={true}
+            rippleConfig={{
+              color: isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+              radius: 20,
+            }}
+          >
+            <Text
+              className={`${
+                isDarkMode ? 'text-neutral-400' : 'text-neutral-600'
+              } ${isTablet ? 'text-lg' : 'text-base'} mr-2`}
+            >
+              View Advice
+            </Text>
+            <View
+              className={`size-6 items-center justify-center rounded-full ${
+                isDarkMode ? 'bg-neutral-700' : 'bg-neutral-100'
+              }`}
+            >
+              <Text
+                className={`${
+                  isDarkMode ? 'text-neutral-400' : 'text-neutral-600'
+                } ${isTablet ? 'text-lg' : 'text-base'}`}
+              >
+                →
+              </Text>
+            </View>
+          </Pressable>
+        )}
+      </View>
+    </Pressable>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/content-card.tsx

@@ -0,0 +1,38 @@
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type ContentCardProps = {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function ContentCard({
+  title,
+  children,
+  className = '',
+}: ContentCardProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <View className={`mx-6 mb-6 ${className}`}>
+      <View
+        className={`rounded-2xl p-4 shadow-sm ${
+          isDarkMode ? 'bg-neutral-800' : 'bg-white'
+        }`}
+      >
+        <Text
+          className={`mb-4 text-lg font-semibold ${
+            isDarkMode ? 'text-white' : 'text-neutral-900'
+          }`}
+        >
+          {title}
+        </Text>
+        {children}
+      </View>
+    </View>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/error-state.tsx

@@ -0,0 +1,42 @@
+import { Ionicons } from '@expo/vector-icons';
+import { memo } from 'react';
+import { View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type ErrorStateProps = {
+  error: string;
+  onRetry: () => void;
+};
+
+export const ErrorState = memo(function ErrorState({
+  error,
+  onRetry,
+}: ErrorStateProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <View
+      className={`flex-1 items-center justify-center px-6 ${isDarkMode ? 'bg-neutral-900' : 'bg-neutral-50'}`}
+    >
+      <Ionicons
+        name="alert-circle-outline"
+        size={48}
+        color={isDarkMode ? '#F87171' : '#EF4444'}
+      />
+      <Text
+        className={`mt-4 text-center text-lg ${isDarkMode ? 'text-white' : 'text-neutral-900'}`}
+      >
+        {error}
+      </Text>
+      <Pressable
+        className="mt-8 rounded-xl bg-primary-600 px-8 py-3"
+        onPress={onRetry}
+      >
+        <Text className="text-base font-semibold text-white">Go Back</Text>
+      </Pressable>
+    </View>
+  );
+});

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/index.ts

@@ -0,0 +1,9 @@
+export { AdviceList } from './advice-list';
+export { CircularProgress } from './circular-progress';
+export { ContentCard } from './content-card';
+export { ErrorState } from './error-state';
+export { LoadingState } from './loading-state';
+export { ProfileImage } from './profile-image';
+export { ResultsHeader } from './results-header';
+export { ScoreDisplay } from './score-display';
+export { TraitsGrid } from './traits-grid';

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/loading-state.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export const LoadingState = memo(function LoadingState() {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <View
+      className={`flex-1 items-center justify-center ${isDarkMode ? 'bg-neutral-900' : 'bg-neutral-50'}`}
+    >
+      <ActivityIndicator
+        size="large"
+        color={isDarkMode ? '#60A5FA' : '#3B82F6'}
+      />
+      <Text
+        className={`mt-4 ${isDarkMode ? 'text-white' : 'text-neutral-900'}`}
+      >
+        Loading analysis...
+      </Text>
+    </View>
+  );
+});

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/components/results/profile-image.tsx

@@ -0,0 +1,60 @@
+import { Image } from 'expo-image';
+import { memo } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useResponsiveSize } from '@/lib/hooks';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type ProfileImageProps = {
+  imageUrl: string | null;
+  hasError: boolean;
+  onError: () => void;
+};
+
+export const ProfileImage = memo(function ProfileImage({
+  imageUrl,
+  hasError,
+  onError,
+}: ProfileImageProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+  const { isTablet } = useResponsiveSize();
+  const size = isTablet ? 200 : 150;
+
+  return (
+    <View className="mb-4 mt-16 items-center justify-center">
+      <View
+        className={`relative overflow-hidden rounded-full border ${isDarkMode ? 'border-white/10' : 'border-black/10'}`}
+        style={{ width: size, height: size, borderWidth: 1 }}
+      >
+        {imageUrl && !hasError ? (
+          <Image
+            source={{ uri: imageUrl }}
+            style={{ width: '100%', height: '100%', borderRadius: size / 2 }}
+            contentFit="cover"
+            onError={onError}
+            transition={200}
+          />
+        ) : (
+          <View
+            className={`size-full items-center justify-center rounded-full ${isDarkMode ? 'bg-neutral-700' : 'bg-neutral-200'}`}
+          >
+            {hasError ? (
+              <Text
+                className={`px-2 text-center text-sm ${isDarkMode ? 'text-neutral-300' : 'text-neutral-500'}`}
+              >
+                Unable to load image
+              </Text>
+            ) : (
+              <ActivityIndicator
+                size="large"
+                color={isDarkMode ? '#60A5FA' : '#3B82F6'}
+              />
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+});