vibefast-cli 1.1.5 → 1.3.0

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/trait-details.tsx

@@ -0,0 +1,172 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+
+import { AnimatedHeader, Button, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { AdviceList } from '../components/results/advice-list';
+import { ContentCard } from '../components/results/content-card';
+import { ScoreDisplay } from '../components/results/score-display';
+import { formatTraitName } from '../services/analysis-service';
+import { ShareService } from '../services/share-service';
+import {
+  getScoreLevel,
+  getTraitAdvice,
+} from '../services/trait-details-service';
+
+type TraitDetailsParams = {
+  traitKey: string;
+  score: string;
+  analysisId: string;
+  feedback?: string;
+  structuredData?: string; // JSON string of structured trait data
+};
+
+export default function TraitDetailsScreen() {
+  const router = useRouter();
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  const { traitKey, score, feedback, structuredData } =
+    useLocalSearchParams<TraitDetailsParams>();
+
+  // Safely parse score with validation
+  const traitScore = (() => {
+    const parsed = Number.parseFloat(score || '0');
+    return isNaN(parsed) ? 0 : Math.max(0, Math.min(100, parsed)); // Clamp between 0-100
+  })();
+  const traitName = formatTraitName(traitKey || '');
+
+  // Parse structured data if available
+  let parsedStructuredData:
+    | {
+        feedback?: string;
+        strengths?: string[];
+        improvements?: string[];
+      }
+    | undefined;
+
+  try {
+    if (structuredData) {
+      parsedStructuredData = JSON.parse(structuredData);
+    }
+  } catch (error) {
+    console.warn('Failed to parse structured data:', error);
+  }
+
+  const traitAdvice = getTraitAdvice(
+    traitKey || '',
+    traitScore,
+    parsedStructuredData,
+  );
+  const scoreInfo = getScoreLevel(traitScore);
+
+  const handleConsultationPress = () => {
+    // TODO: Navigate to affiliate product recommendations
+    console.log('Shop products for', traitName);
+  };
+
+  const handleSaveAdvicePress = () => {
+    // TODO: Save advice to favorites
+    console.log('Save advice for', traitName);
+  };
+
+  const handleShareTrait = () => {
+    ShareService.shareQuickSummary(traitScore, {
+      name: traitName,
+      score: traitScore,
+    });
+  };
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <AnimatedHeader
+        onBack={() => router.back()}
+        title={`${traitName} Analysis`}
+        leftIcon="arrow-back"
+        showBorder={true}
+      />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: 120 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Score Section */}
+        <View className="py-8">
+          <ScoreDisplay
+            score={traitScore}
+            scoreLevel={scoreInfo.level}
+            scoreColor={scoreInfo.color}
+            scoreDescription={scoreInfo.description}
+          />
+        </View>
+
+        {/* AI Feedback Section */}
+        {(parsedStructuredData?.feedback || feedback) && (
+          <ContentCard title="AI Analysis">
+            <Text
+              className={`text-base leading-6 ${
+                isDarkMode ? 'text-neutral-300' : 'text-neutral-700'
+              }`}
+            >
+              {parsedStructuredData?.feedback || feedback}
+            </Text>
+          </ContentCard>
+        )}
+
+        {/* Strengths Section (if available from structured data) */}
+        {parsedStructuredData?.strengths &&
+          parsedStructuredData.strengths.length > 0 && (
+            <ContentCard title="Your Strengths">
+              <AdviceList
+                items={parsedStructuredData.strengths}
+                bulletType="dot"
+                bulletColor="bg-green-500"
+              />
+            </ContentCard>
+          )}
+
+        {/* Personalized Advice */}
+        <ContentCard
+          title={
+            parsedStructuredData ? 'Improvement Areas' : 'Personalized Advice'
+          }
+        >
+          <AdviceList
+            items={traitAdvice.advice}
+            bulletType="dot"
+            bulletColor={traitAdvice.goodScore ? 'bg-green-500' : 'bg-blue-500'}
+          />
+        </ContentCard>
+
+        {/* Expert Tips */}
+        <ContentCard title="Expert Tips">
+          <AdviceList items={traitAdvice.tips} bulletType="emoji" emoji="💡" />
+        </ContentCard>
+
+        {/* Action Buttons */}
+        <View className="mx-6 mb-6 gap-y-3">
+          <Button
+            label="🛍️ Shop Recommended Products"
+            onPress={handleConsultationPress}
+            variant="default"
+          />
+
+          <Button
+            label="📤 Share This Trait"
+            onPress={handleShareTrait}
+            variant="outline"
+          />
+
+          <Button
+            label="⭐ Save This Advice"
+            onPress={handleSaveAdvicePress}
+            variant="outline"
+          />
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/use-analysis-data.ts

@@ -0,0 +1,160 @@
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+
+import { useAnalysis } from '../hooks';
+import {
+  type AnalysisScores,
+  createMockAnalysis,
+  extractScoresFromAnalysis,
+  getUnlockedAchievements,
+  type LocalAnalysis,
+  processImageUrl,
+} from '../services/analysis-service';
+
+export const useAnalysisData = () => {
+  const {
+    analysisId,
+    localImageUri: localImageUriParam,
+    localImageUris: localImageUrisParam,
+    isFirstTime,
+  } = useLocalSearchParams<{
+    analysisId: string;
+    localImageUri?: string;
+    localImageUris?: string;
+    isFirstTime?: string;
+  }>();
+
+  const {
+    analysis: remoteAnalysis,
+    isLoading: isBackendLoading,
+    error: backendError,
+  } = useAnalysis(analysisId);
+
+  const [localAnalysis, setLocalAnalysis] = useState<LocalAnalysis | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [extractedScores, setExtractedScores] = useState<AnalysisScores | null>(
+    null,
+  );
+  const [processedImageUrl, setProcessedImageUrl] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const loadAnalysisData = async () => {
+      if (!analysisId) {
+        setError('Analysis ID is missing.');
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        let analysisData: LocalAnalysis | null = null;
+
+        if (
+          remoteAnalysis &&
+          remoteAnalysis.status === 'completed' &&
+          remoteAnalysis.results
+        ) {
+          // Cast results to expected shape since it's stored as Json
+          const results = remoteAnalysis.results as {
+            overallScore?: number;
+            overallMessage?: string;
+            analysis?: string;
+            confidence?: number;
+            traitScores?: Record<
+              string,
+              {
+                score: number;
+                feedback: string;
+                strengths?: string[];
+                improvements?: string[];
+              }
+            >;
+            recommendations?: string[];
+            analysisType?: string;
+            processingTime?: number;
+          };
+          analysisData = {
+            id: analysisId,
+            localImageUri: undefined,
+            aiResults: {
+              overallScore: results.overallScore,
+              overallMessage: results.overallMessage || results.analysis,
+              confidence: results.confidence,
+              traitScores: results.traitScores,
+              recommendations: results.recommendations,
+              analysisType: results.analysisType,
+              processingTime: results.processingTime,
+            },
+          };
+        } else if (remoteAnalysis && remoteAnalysis.status === 'processing') {
+          setIsLoading(true);
+          return;
+        } else if (remoteAnalysis && remoteAnalysis.status === 'failed') {
+          setError('Analysis failed. Please try again.');
+          setIsLoading(false);
+          return;
+        } else if (!remoteAnalysis || remoteAnalysis.status === 'processing') {
+          analysisData = createMockAnalysis(analysisId);
+        }
+
+        if (analysisData) {
+          setLocalAnalysis(analysisData);
+
+          const imageUrl = processImageUrl(
+            localImageUriParam || null,
+            localImageUrisParam || null,
+            analysisData.localImageUri ?? null,
+          );
+          setProcessedImageUrl(imageUrl ?? null);
+
+          if (analysisData.aiResults) {
+            const scores = extractScoresFromAnalysis(analysisData.aiResults);
+            setExtractedScores(scores);
+
+            if (scores) {
+              const achievements = getUnlockedAchievements(scores);
+              if (achievements.length > 0 && isFirstTime) {
+                console.log('Unlocked achievements:', achievements);
+              }
+            }
+          }
+        }
+      } catch (_err) {
+        console.error('Error loading analysis:', _err);
+        setError('Failed to load analysis data.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadAnalysisData();
+  }, [
+    analysisId,
+    localImageUriParam,
+    localImageUrisParam,
+    isFirstTime,
+    remoteAnalysis,
+  ]);
+
+  useEffect(() => {
+    if (backendError) {
+      setError(backendError);
+      setIsLoading(false);
+    } else if (isBackendLoading) {
+      setIsLoading(true);
+    }
+  }, [backendError, isBackendLoading]);
+
+  return {
+    localAnalysis,
+    isLoading,
+    error,
+    extractedScores,
+    processedImageUrl,
+  };
+};

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/use-results-screen.ts

@@ -0,0 +1,151 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { formatTraitName, getTraitDetails } from '../services/analysis-service';
+import { useAnalysisData } from './use-analysis-data';
+
+export const useResultsScreen = () => {
+  const router = useRouter();
+  const { type, analysisId } = useLocalSearchParams<{
+    type: string;
+    analysisId: string;
+  }>();
+
+  const {
+    localAnalysis,
+    isLoading,
+    error,
+    extractedScores,
+    processedImageUrl,
+  } = useAnalysisData();
+
+  const [imageLoadError, setImageLoadError] = useState(false);
+  const [isSubscribed] = useState(true);
+  const [showShareModal, setShowShareModal] = useState(false);
+
+  const scrollY = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollY.value = event.contentOffset.y;
+    },
+  });
+
+  const handleBackPress = useCallback(() => {
+    if (router.canGoBack()) {
+      router.back();
+    } else {
+      router.replace('/');
+    }
+  }, [router]);
+
+  const handleImageError = useCallback(() => {
+    setImageLoadError(true);
+  }, []);
+
+  const handleTraitPress = useCallback(
+    (traitKey: string) => {
+      if (traitKey === 'overall') {
+        if (!localAnalysis?.aiResults || !extractedScores) {
+          Alert.alert('No Data', 'Overall analysis data is not available.');
+          return;
+        }
+
+        const overallMessage =
+          localAnalysis.aiResults.overallMessage ||
+          localAnalysis.aiResults.analysis ||
+          'This is your overall analysis score based on all evaluated traits.';
+
+        router.push({
+          pathname: `/analysis/${type}/trait-details` as any,
+          params: {
+            analysisId,
+            traitKey: 'overall',
+            traitName: 'Overall Score',
+            score: extractedScores.overall.toString(),
+            feedback: overallMessage,
+            strengths: JSON.stringify([]),
+            improvements: JSON.stringify([]),
+            allScores: JSON.stringify(extractedScores),
+          },
+        });
+        return;
+      }
+
+      if (!localAnalysis?.aiResults?.traitScores) {
+        Alert.alert('No Data', 'Trait details are not available.');
+        return;
+      }
+
+      const traitDetails = getTraitDetails(
+        traitKey,
+        localAnalysis.aiResults.traitScores,
+      );
+
+      if (!traitDetails) {
+        Alert.alert('No Data', 'Details for this trait are not available.');
+        return;
+      }
+
+      const formattedName = formatTraitName(traitKey);
+
+      router.push({
+        pathname: `/analysis/${type}/trait-details` as any,
+        params: {
+          analysisId,
+          traitKey,
+          traitName: formattedName,
+          score: traitDetails.score.toString(),
+          feedback: traitDetails.feedback,
+          strengths: JSON.stringify(traitDetails.strengths),
+          improvements: JSON.stringify(traitDetails.improvements),
+          allScores: JSON.stringify(extractedScores),
+        },
+      });
+    },
+    [localAnalysis, router, analysisId, extractedScores, type],
+  );
+
+  const handleNewAnalysis = useCallback(() => {
+    // Use dynamic analysis route to maintain current analysis type context
+    const path = `/analysis/${type}/camera`;
+    router.push(path);
+  }, [type, router]);
+
+  const handleShareResults = useCallback(() => {
+    if (!localAnalysis || !extractedScores) {
+      Alert.alert('No Data', 'No analysis data available to share.');
+      return;
+    }
+
+    setShowShareModal(true);
+  }, [localAnalysis, extractedScores]);
+
+  return {
+    isDarkMode: false,
+    type,
+    analysisId,
+    localAnalysis,
+    isLoading,
+    error,
+    extractedScores,
+    imageLoadError,
+    processedImageUrl,
+    isSubscribed,
+    showShareModal,
+    scrollY,
+    scale,
+    handleBackPress,
+    handleImageError,
+    handleTraitPress,
+    handleNewAnalysis,
+    handleShareResults,
+    setShowShareModal,
+    scrollHandler,
+  };
+};

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

@@ -0,0 +1,77 @@
+import { FontAwesome5 } from '@expo/vector-icons';
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useResponsiveSize } from '@/lib/hooks';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type AchievementBadgeProps = {
+  title: string;
+  icon: string;
+  color: string;
+  unlocked: boolean;
+};
+
+export function AchievementBadge({
+  title,
+  icon,
+  color,
+  unlocked,
+}: AchievementBadgeProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+  const scale = useSharedValue(1);
+  const { isTablet } = useResponsiveSize();
+  useEffect(() => {
+    if (unlocked) {
+      scale.value = withSequence(
+        withTiming(1.2, { duration: 300 }),
+        withTiming(1, { duration: 300 }),
+      );
+    }
+  }, [unlocked, scale]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
+  return (
+    <Animated.View className="items-center" style={animatedStyle}>
+      <View
+        className={`${isTablet ? 'size-16' : 'size-11'} items-center justify-center rounded-full ${
+          unlocked ? 'shadow-lg' : 'opacity-40'
+        }`}
+        style={{
+          backgroundColor: unlocked ? color : '#9ca3af',
+          shadowColor: unlocked ? color : 'transparent',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 6,
+        }}
+      >
+        <FontAwesome5 name={icon} size={isTablet ? 26 : 16} color="white" />
+        {/* {!unlocked && (
+          <View className="absolute inset-0 items-center justify-center backdrop-blur-sm">
+            <FontAwesome5 name="lock" size={16} color="white" />
+          </View>
+        )} */}
+      </View>
+      <Text
+        className={`${isTablet ? 'text-lg' : 'text-[12.5px]'} mt-1 font-semibold ${
+          isDarkMode ? 'text-neutral-300' : 'text-neutral-600'
+        }`}
+        style={unlocked ? { color } : undefined}
+      >
+        {title}
+      </Text>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { Ionicons } from '@expo/vector-icons';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import type { Achievement } from '../../services/analysis-service';
+
+type AchievementCardProps = {
+  achievement: Achievement;
+  className?: string;
+};
+
+export function AchievementCard({
+  achievement,
+  className = '',
+}: AchievementCardProps) {
+  const theme = useThemeConfig();
+  const isDarkMode = theme.dark;
+
+  return (
+    <View
+      className={`flex-row items-center rounded-xl p-3 ${
+        isDarkMode ? 'bg-neutral-700/50' : 'bg-neutral-50'
+      } ${className}`}
+      style={{
+        borderLeftWidth: 3,
+        borderLeftColor: achievement.color,
+      }}
+    >
+      {/* Achievement Icon */}
+      <View
+        className="mr-3 size-10 items-center justify-center rounded-full"
+        style={{ backgroundColor: `${achievement.color}20` }}
+      >
+        <Ionicons
+          name={achievement.icon as keyof typeof Ionicons.glyphMap}
+          size={20}
+          color={achievement.color}
+        />
+      </View>
+
+      {/* Achievement Details */}
+      <View className="flex-1">
+        <Text
+          className={`font-semibold ${
+            isDarkMode ? 'text-white' : 'text-neutral-900'
+          }`}
+        >
+          {achievement.title}
+        </Text>
+        <Text
+          className={`text-sm ${
+            isDarkMode ? 'text-neutral-400' : 'text-neutral-600'
+          }`}
+        >
+          {achievement.description}
+        </Text>
+      </View>
+
+      {/* Points Badge */}
+      <View
+        className="rounded-full px-2 py-1"
+        style={{ backgroundColor: `${achievement.color}15` }}
+      >
+        <Text
+          className="text-xs font-medium"
+          style={{ color: achievement.color }}
+        >
+          +{achievement.points}
+        </Text>
+      </View>
+    </View>
+  );
+}