vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/screens/habit-tracker.tsx

@@ -0,0 +1,1160 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+import { Stack } from 'expo-router';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Alert,
+  Dimensions,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeInDown,
+  FadeInUp,
+  FadeOut,
+  interpolate,
+  LinearTransition,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { AddHabitModal } from '../components/add-habit-modal';
+import {
+  HEATMAP_COLORS,
+  MOCK_HABITS,
+  STREAK_COLORS,
+  type Habit,
+} from '../constants';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const SWIPE_THRESHOLD = SCREEN_WIDTH * 0.25;
+
+function FireAnimation({
+  size = 24,
+  isActive = true,
+  delay = 0,
+}: {
+  size?: number;
+  isActive?: boolean;
+  delay?: number;
+}) {
+  const flame1 = useSharedValue(0);
+  const flame2 = useSharedValue(0);
+  const flame3 = useSharedValue(0);
+
+  React.useEffect(() => {
+    if (isActive) {
+      flame1.value = withDelay(
+        delay,
+        withRepeat(
+          withSequence(
+            withTiming(1, { duration: 400, easing: Easing.inOut(Easing.ease) }),
+            withTiming(0, { duration: 400, easing: Easing.inOut(Easing.ease) }),
+          ),
+          -1,
+          true,
+        ),
+      );
+      flame2.value = withDelay(
+        delay + 150,
+        withRepeat(
+          withSequence(
+            withTiming(1, { duration: 350, easing: Easing.inOut(Easing.ease) }),
+            withTiming(0, { duration: 350, easing: Easing.inOut(Easing.ease) }),
+          ),
+          -1,
+          true,
+        ),
+      );
+      flame3.value = withDelay(
+        delay + 300,
+        withRepeat(
+          withSequence(
+            withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) }),
+            withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) }),
+          ),
+          -1,
+          true,
+        ),
+      );
+    }
+  }, [isActive, delay, flame1, flame2, flame3]);
+
+  const flameStyle1 = useAnimatedStyle(() => {
+    'worklet';
+    const translateY = interpolate(flame1.value, [0, 1], [0, -3]);
+    const scale = interpolate(flame1.value, [0, 1], [1, 1.1]);
+    return {
+      transform: [{ translateY }, { scale }] as ViewStyle['transform'],
+      opacity: interpolate(flame1.value, [0, 1], [0.8, 1]),
+    };
+  });
+
+  const flameStyle2 = useAnimatedStyle(() => {
+    'worklet';
+    const translateY = interpolate(flame2.value, [0, 1], [0, -4]);
+    const scale = interpolate(flame2.value, [0, 1], [0.9, 1.05]);
+    return {
+      transform: [{ translateY }, { scale }] as ViewStyle['transform'],
+      opacity: interpolate(flame2.value, [0, 1], [0.6, 0.9]),
+    };
+  });
+
+  const flameStyle3 = useAnimatedStyle(() => {
+    'worklet';
+    const translateY = interpolate(flame3.value, [0, 1], [0, -2]);
+    const scale = interpolate(flame3.value, [0, 1], [0.85, 1]);
+    return {
+      transform: [{ translateY }, { scale }] as ViewStyle['transform'],
+      opacity: interpolate(flame3.value, [0, 1], [0.5, 0.8]),
+    };
+  });
+
+  if (!isActive) {
+    return (
+      <View style={styles.fireContainer}>
+        <Ionicons
+          name="snow-outline"
+          size={size * 0.7}
+          color={STREAK_COLORS.cold}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.fireContainer, { width: size, height: size }]}>
+      <Animated.View style={[styles.flameAbsolute, flameStyle3 as ViewStyle]}>
+        <Ionicons
+          name="flame"
+          size={size * 0.5}
+          color={STREAK_COLORS.fire[2]}
+        />
+      </Animated.View>
+      <Animated.View style={[styles.flameAbsolute, flameStyle2 as ViewStyle]}>
+        <Ionicons
+          name="flame"
+          size={size * 0.7}
+          color={STREAK_COLORS.fire[1]}
+        />
+      </Animated.View>
+      <Animated.View style={[styles.flameAbsolute, flameStyle1 as ViewStyle]}>
+        <Ionicons
+          name="flame"
+          size={size * 0.9}
+          color={STREAK_COLORS.fire[0]}
+        />
+      </Animated.View>
+    </View>
+  );
+}
+
+function ConfettiParticle({
+  x,
+  color,
+  delay: particleDelay,
+}: {
+  x: number;
+  color: string;
+  delay: number;
+}) {
+  const translateY = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const rotate = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  React.useEffect(() => {
+    translateY.value = withDelay(
+      particleDelay,
+      withTiming(-80, { duration: 800, easing: Easing.out(Easing.cubic) }),
+    );
+    translateX.value = withDelay(
+      particleDelay,
+      withTiming((Math.random() - 0.5) * 60, { duration: 800 }),
+    );
+    rotate.value = withDelay(
+      particleDelay,
+      withTiming(360 * (Math.random() > 0.5 ? 1 : -1), { duration: 800 }),
+    );
+    opacity.value = withDelay(
+      particleDelay + 400,
+      withTiming(0, { duration: 400 }),
+    );
+  }, [particleDelay, opacity, rotate, translateX, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+    const tX = translateX.value + x;
+    const tY = translateY.value;
+    const rot = `${rotate.value}deg`;
+    return {
+      transform: [
+        { translateX: tX },
+        { translateY: tY },
+        { rotate: rot },
+      ] as ViewStyle['transform'],
+      opacity: opacity.value,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.confettiParticle,
+        { backgroundColor: color },
+        animatedStyle as ViewStyle,
+      ]}
+    />
+  );
+}
+
+function CheckmarkAnimation({
+  isChecked,
+  color,
+}: {
+  isChecked: boolean;
+  color: string;
+}) {
+  const scale = useSharedValue(isChecked ? 1 : 0);
+  const circleScale = useSharedValue(1);
+  const [showConfetti, setShowConfetti] = useState(false);
+
+  React.useEffect(() => {
+    if (isChecked) {
+      circleScale.value = withSequence(
+        withTiming(0.9, { duration: 100 }),
+        withSpring(1.1, { damping: 10, stiffness: 200 }),
+        withSpring(1, { damping: 15 }),
+      );
+      scale.value = withDelay(
+        100,
+        withSpring(1, { damping: 12, stiffness: 180 }),
+      );
+      setShowConfetti(true);
+      setTimeout(() => setShowConfetti(false), 1000);
+    } else {
+      scale.value = withTiming(0, { duration: 150 });
+    }
+  }, [isChecked, scale, circleScale]);
+
+  const checkStyle = useAnimatedStyle<ViewStyle>(() => {
+    'worklet';
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
+  const containerStyle = useAnimatedStyle<ViewStyle>(() => {
+    'worklet';
+    return {
+      transform: [{ scale: circleScale.value }],
+    };
+  });
+
+  const confettiColors = [
+    '#FF6B6B',
+    '#4ECDC4',
+    '#FFE66D',
+    '#A78BFA',
+    '#22C55E',
+  ];
+
+  return (
+    <View style={styles.checkmarkContainer}>
+      {showConfetti && (
+        <View style={styles.confettiContainer}>
+          {confettiColors.map((c, i) => (
+            <ConfettiParticle
+              key={i}
+              x={(i - 2) * 10}
+              color={c}
+              delay={i * 50}
+            />
+          ))}
+        </View>
+      )}
+      <Animated.View
+        style={[
+          styles.checkmarkBox,
+          {
+            backgroundColor: isChecked ? color : 'transparent',
+            borderWidth: isChecked ? 0 : 2,
+            borderColor: color + '40',
+          },
+          containerStyle as ViewStyle,
+        ]}
+      >
+        {isChecked ? (
+          <Animated.View style={checkStyle as ViewStyle}>
+            <Ionicons name="checkmark" size={26} color="white" />
+          </Animated.View>
+        ) : (
+          <View style={[styles.emptyCircle, { borderColor: color + '60' }]} />
+        )}
+      </Animated.View>
+    </View>
+  );
+}
+
+function HeatmapCell({
+  intensity,
+  isDark,
+  dayIndex,
+  isToday,
+  onPress,
+}: {
+  intensity: number;
+  isDark: boolean;
+  dayIndex: number;
+  isToday: boolean;
+  onPress: () => void;
+}) {
+  const colors = isDark ? HEATMAP_COLORS.dark : HEATMAP_COLORS.light;
+  const scale = useSharedValue(1);
+
+  const getColor = (level: number) => {
+    switch (level) {
+      case 0:
+        return colors.empty;
+      case 1:
+        return colors.level1;
+      case 2:
+        return colors.level2;
+      case 3:
+        return colors.level3;
+      case 4:
+        return colors.level4;
+      default:
+        return colors.empty;
+    }
+  };
+
+  const handlePress = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    scale.value = withSequence(
+      withSpring(0.8, { damping: 10 }),
+      withSpring(1, { damping: 8 }),
+    );
+    onPress();
+  };
+
+  const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
+    'worklet';
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
+  return (
+    <Pressable onPress={handlePress}>
+      <Animated.View
+        entering={FadeIn.delay(dayIndex * 15)}
+        style={[
+          styles.heatmapCell,
+          {
+            backgroundColor: getColor(intensity),
+            borderWidth: isToday ? 2 : 0,
+            borderColor: isToday ? (isDark ? '#FFF' : '#000') : 'transparent',
+          },
+          animatedStyle as ViewStyle,
+        ]}
+      />
+    </Pressable>
+  );
+}
+
+function WeekNavigator({
+  currentWeekOffset,
+  onPrevious,
+  onNext,
+  isDark,
+}: {
+  currentWeekOffset: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  isDark: boolean;
+}) {
+  const theme = useThemeConfig();
+
+  const getWeekLabel = () => {
+    if (currentWeekOffset === 0) return 'This Week';
+    if (currentWeekOffset === -1) return 'Last Week';
+    return `${Math.abs(currentWeekOffset)} weeks ago`;
+  };
+
+  return (
+    <Animated.View entering={FadeInUp.delay(200)} style={styles.weekNavigator}>
+      <TouchableOpacity
+        onPress={onPrevious}
+        style={[
+          styles.navButton,
+          {
+            backgroundColor: isDark
+              ? 'rgba(255,255,255,0.1)'
+              : 'rgba(0,0,0,0.05)',
+          },
+        ]}
+      >
+        <Ionicons
+          name="chevron-back"
+          size={20}
+          color={theme.colors.foreground}
+        />
+      </TouchableOpacity>
+
+      <Text style={[styles.weekLabel, { color: theme.colors.foreground }]}>
+        {getWeekLabel()}
+      </Text>
+
+      <TouchableOpacity
+        onPress={onNext}
+        disabled={currentWeekOffset >= 0}
+        style={[
+          styles.navButton,
+          {
+            backgroundColor: isDark
+              ? 'rgba(255,255,255,0.1)'
+              : 'rgba(0,0,0,0.05)',
+            opacity: currentWeekOffset >= 0 ? 0.4 : 1,
+          },
+        ]}
+      >
+        <Ionicons
+          name="chevron-forward"
+          size={20}
+          color={theme.colors.foreground}
+        />
+      </TouchableOpacity>
+    </Animated.View>
+  );
+}
+
+function StatsSummary({
+  habits,
+  isDark,
+}: {
+  habits: Habit[];
+  isDark: boolean;
+}) {
+  const theme = useThemeConfig();
+
+  const stats = useMemo(() => {
+    const totalCompletions = habits.reduce(
+      (acc, h) => acc + h.weeklyData.filter(Boolean).length,
+      0,
+    );
+    const totalPossible = habits.length * 7;
+    const completionRate = habits.length
+      ? Math.round((totalCompletions / totalPossible) * 100)
+      : 0;
+    const bestStreak = habits.length
+      ? Math.max(...habits.map((h) => h.bestStreak))
+      : 0;
+    const currentStreakTotal = habits.reduce((acc, h) => acc + h.streak, 0);
+
+    return { completionRate, bestStreak, currentStreakTotal };
+  }, [habits]);
+
+  const statItems = [
+    {
+      label: 'Completion',
+      value: `${stats.completionRate}%`,
+      icon: 'pie-chart',
+      color: '#22C55E',
+    },
+    {
+      label: 'Best Streak',
+      value: `${stats.bestStreak}`,
+      icon: 'trophy',
+      color: '#F59E0B',
+    },
+    {
+      label: 'Active Days',
+      value: `${stats.currentStreakTotal}`,
+      icon: 'flame',
+      color: '#EF4444',
+    },
+  ];
+
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(100).springify()}
+      style={styles.statsContainer}
+    >
+      {statItems.map((stat, index) => (
+        <Animated.View
+          key={stat.label}
+          entering={FadeInUp.delay(200 + index * 100)}
+          style={[styles.statCardWrapper]}
+        >
+          <BlurView
+            intensity={isDark ? 20 : 40}
+            tint={isDark ? 'dark' : 'light'}
+            style={styles.statCardGlass}
+          >
+            <View
+              style={[styles.statIcon, { backgroundColor: stat.color + '20' }]}
+            >
+              <Ionicons name={stat.icon as any} size={20} color={stat.color} />
+            </View>
+            <Text
+              style={[styles.statValue, { color: theme.colors.foreground }]}
+            >
+              {stat.value}
+            </Text>
+            <Text
+              style={[
+                styles.statLabel,
+                { color: theme.colors.mutedForeground },
+              ]}
+            >
+              {stat.label}
+            </Text>
+          </BlurView>
+        </Animated.View>
+      ))}
+    </Animated.View>
+  );
+}
+
+function HabitCard({
+  habit,
+  index,
+  isDark,
+  onToggle,
+  onDelete,
+}: {
+  habit: Habit;
+  index: number;
+  isDark: boolean;
+  onToggle: (id: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  const theme = useThemeConfig();
+  const isCompletedToday = habit.weeklyData[habit.weeklyData.length - 1];
+  const days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+  const handleToggle = useCallback(() => {
+    Haptics.impactAsync(
+      isCompletedToday
+        ? Haptics.ImpactFeedbackStyle.Light
+        : Haptics.ImpactFeedbackStyle.Heavy,
+    );
+    onToggle(habit.id);
+  }, [habit.id, isCompletedToday, onToggle]);
+
+  const handleLongPress = useCallback(() => {
+    Haptics.selectionAsync();
+    Alert.alert(
+      'Delete Habit',
+      `Are you sure you want to delete "${habit.title}"?`,
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => onDelete(habit.id),
+        },
+      ],
+    );
+  }, [habit, onDelete]);
+
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(index * 80).springify()}
+      exiting={FadeOut}
+      layout={LinearTransition.springify()}
+      style={styles.habitCardWrapper}
+    >
+      <BlurView
+        intensity={isDark ? 25 : 60}
+        tint={isDark ? 'dark' : 'light'}
+        style={styles.habitCardGlass}
+      >
+        <View style={styles.habitHeader}>
+          <Pressable
+            onPress={handleToggle}
+            onLongPress={handleLongPress}
+            style={styles.habitInfo}
+          >
+            <CheckmarkAnimation
+              isChecked={isCompletedToday}
+              color={habit.color}
+            />
+            <View style={styles.habitDetails}>
+              <Text
+                style={[styles.habitTitle, { color: theme.colors.foreground }]}
+              >
+                {habit.title}
+              </Text>
+              <View style={styles.streakRow}>
+                <FireAnimation
+                  size={20}
+                  isActive={habit.streak > 0}
+                  delay={index * 100}
+                />
+                <Text
+                  style={[
+                    styles.streakText,
+                    {
+                      color:
+                        habit.streak > 0
+                          ? STREAK_COLORS.fire[0]
+                          : theme.colors.mutedForeground,
+                    },
+                  ]}
+                >
+                  {habit.streak} day streak
+                </Text>
+              </View>
+            </View>
+          </Pressable>
+
+          <TouchableOpacity onPress={handleLongPress} style={styles.menuButton}>
+            <Ionicons
+              name="ellipsis-vertical"
+              size={20}
+              color={theme.colors.mutedForeground}
+            />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.weeklyGrid}>
+          {days.map((day, i) => {
+            const isCompleted = habit.weeklyData[i];
+            const isToday = i === days.length - 1;
+
+            return (
+              <Animated.View
+                key={i}
+                entering={FadeIn.delay(300 + i * 50)}
+                style={styles.dayColumn}
+              >
+                <Text
+                  style={[
+                    styles.dayLabel,
+                    { color: theme.colors.mutedForeground },
+                  ]}
+                >
+                  {day}
+                </Text>
+                <View
+                  style={[
+                    styles.dayCell,
+                    {
+                      backgroundColor: isCompleted
+                        ? habit.color
+                        : isDark
+                          ? 'rgba(255,255,255,0.05)'
+                          : 'rgba(0,0,0,0.05)',
+                      borderWidth: isToday ? 2 : 0,
+                      borderColor: isToday
+                        ? isDark
+                          ? '#FFF'
+                          : '#000'
+                        : 'transparent',
+                      opacity: isCompleted ? 1 : 0.4,
+                    },
+                  ]}
+                >
+                  {isCompleted && (
+                    <Ionicons name="checkmark" size={18} color="white" />
+                  )}
+                </View>
+              </Animated.View>
+            );
+          })}
+        </View>
+
+        <View
+          style={[
+            styles.miniStats,
+            {
+              borderTopColor: isDark
+                ? 'rgba(255,255,255,0.1)'
+                : 'rgba(0,0,0,0.1)',
+            },
+          ]}
+        >
+          <View style={styles.miniStatItem}>
+            <Ionicons
+              name="trophy-outline"
+              size={14}
+              color={theme.colors.mutedForeground}
+            />
+            <Text
+              style={[
+                styles.miniStatText,
+                { color: theme.colors.mutedForeground },
+              ]}
+            >
+              Best: {habit.bestStreak} days
+            </Text>
+          </View>
+          <View style={styles.miniStatItem}>
+            <Ionicons
+              name="calendar-outline"
+              size={14}
+              color={theme.colors.mutedForeground}
+            />
+            <Text
+              style={[
+                styles.miniStatText,
+                { color: theme.colors.mutedForeground },
+              ]}
+            >
+              {habit.weeklyData.filter(Boolean).length}/7 this week
+            </Text>
+          </View>
+        </View>
+      </BlurView>
+    </Animated.View>
+  );
+}
+
+function ContributionGraph({
+  habits,
+  isDark,
+}: {
+  habits: Habit[];
+  isDark: boolean;
+}) {
+  const theme = useThemeConfig();
+
+  const monthlyData = useMemo(() => {
+    const combined: number[] = [];
+    for (let i = 0; i < 35; i++) {
+      const total = habits.reduce((acc, h) => acc + (h.monthlyData[i] || 0), 0);
+      const avg = habits.length
+        ? Math.min(4, Math.round(total / habits.length))
+        : 0;
+      combined.push(avg);
+    }
+    return combined;
+  }, [habits]);
+
+  const weeks = useMemo(() => {
+    const result: number[][] = [];
+    for (let w = 0; w < 5; w++) {
+      result.push(monthlyData.slice(w * 7, (w + 1) * 7));
+    }
+    return result;
+  }, [monthlyData]);
+
+  const heatmapColors = isDark ? HEATMAP_COLORS.dark : HEATMAP_COLORS.light;
+  const legendColors = [
+    heatmapColors.empty,
+    heatmapColors.level1,
+    heatmapColors.level2,
+    heatmapColors.level3,
+    heatmapColors.level4,
+  ];
+
+  return (
+    <Animated.View
+      entering={FadeInUp.delay(400)}
+      style={styles.contributionCardWrapper}
+    >
+      <BlurView
+        intensity={isDark ? 20 : 50}
+        tint={isDark ? 'dark' : 'light'}
+        style={styles.contributionCardGlass}
+      >
+        <View style={styles.contributionHeader}>
+          <Ionicons
+            name="grid-outline"
+            size={20}
+            color={theme.colors.foreground}
+          />
+          <Text
+            style={[
+              styles.contributionTitle,
+              { color: theme.colors.foreground },
+            ]}
+          >
+            Activity Overview
+          </Text>
+        </View>
+
+        <View style={styles.heatmapGrid}>
+          {weeks.map((week, weekIndex) => (
+            <View key={weekIndex} style={styles.heatmapWeek}>
+              {week.map((intensity, dayIndex) => (
+                <HeatmapCell
+                  key={`${weekIndex}-${dayIndex}`}
+                  intensity={intensity}
+                  isDark={isDark}
+                  dayIndex={weekIndex * 7 + dayIndex}
+                  isToday={weekIndex === 4 && dayIndex === 6}
+                  onPress={() => {}}
+                />
+              ))}
+            </View>
+          ))}
+        </View>
+
+        <View style={styles.legend}>
+          <Text
+            style={[styles.legendText, { color: theme.colors.mutedForeground }]}
+          >
+            Less
+          </Text>
+          {legendColors.map((color, idx) => (
+            <View
+              key={idx}
+              style={[styles.legendCell, { backgroundColor: color }]}
+            />
+          ))}
+          <Text
+            style={[styles.legendText, { color: theme.colors.mutedForeground }]}
+          >
+            More
+          </Text>
+        </View>
+      </BlurView>
+    </Animated.View>
+  );
+}
+
+export default function HabitTracker() {
+  const theme = useThemeConfig();
+  const isDark = theme.dark;
+
+  const [habits, setHabits] = useState<Habit[]>(MOCK_HABITS);
+  const [weekOffset, setWeekOffset] = useState(0);
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  const translateX = useSharedValue(0);
+
+  const handleToggleHabit = useCallback((id: string) => {
+    setHabits((prev) =>
+      prev.map((h) => {
+        if (h.id === id) {
+          const newWeeklyData = [...h.weeklyData];
+          const todayIndex = newWeeklyData.length - 1;
+          const wasCompleted = newWeeklyData[todayIndex];
+          newWeeklyData[todayIndex] = !wasCompleted;
+
+          return {
+            ...h,
+            weeklyData: newWeeklyData,
+            streak: !wasCompleted ? h.streak + 1 : Math.max(0, h.streak - 1),
+            bestStreak: !wasCompleted
+              ? Math.max(h.bestStreak, h.streak + 1)
+              : h.bestStreak,
+          };
+        }
+        return h;
+      }),
+    );
+  }, []);
+
+  const handleAddHabit = useCallback(
+    (newHabitData: { title: string; icon: string; color: string }) => {
+      const newHabit: Habit = {
+        id: Date.now().toString(),
+        title: newHabitData.title,
+        icon: newHabitData.icon,
+        color: newHabitData.color,
+        streak: 0,
+        bestStreak: 0,
+        weeklyData: [false, false, false, false, false, false, false],
+        monthlyData: Array(35).fill(0),
+      };
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      setHabits((prev) => [newHabit, ...prev]);
+    },
+    [],
+  );
+
+  const handleDeleteHabit = useCallback((id: string) => {
+    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+    setHabits((prev) => prev.filter((h) => h.id !== id));
+  }, []);
+
+  const handlePreviousWeek = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    setWeekOffset((prev) => prev - 1);
+  }, []);
+
+  const handleNextWeek = useCallback(() => {
+    if (weekOffset < 0) {
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      setWeekOffset((prev) => prev + 1);
+    }
+  }, [weekOffset]);
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-20, 20])
+    .onUpdate((e) => {
+      translateX.value = e.translationX;
+    })
+    .onEnd((e) => {
+      if (e.translationX > SWIPE_THRESHOLD) {
+        runOnJS(handlePreviousWeek)();
+      } else if (e.translationX < -SWIPE_THRESHOLD && weekOffset < 0) {
+        runOnJS(handleNextWeek)();
+      }
+      translateX.value = withSpring(0, { damping: 20 });
+    });
+
+  const animatedContentStyle = useAnimatedStyle<ViewStyle>(() => {
+    'worklet';
+    return {
+      transform: [{ translateX: translateX.value * 0.3 }],
+    };
+  });
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <FocusAwareStatusBar />
+      <Stack.Screen options={{ headerShown: false }} />
+
+      <Animated.View entering={FadeInDown.duration(600)} style={styles.header}>
+        <View style={styles.headerContent}>
+          <View>
+            <Text style={[styles.title, { color: theme.colors.foreground }]}>
+              My Habits
+            </Text>
+            <View style={styles.subtitleRow}>
+              <FireAnimation size={24} isActive={true} />
+              <Text
+                style={[
+                  styles.subtitle,
+                  { color: theme.colors.mutedForeground },
+                ]}
+              >
+                Keep the streak alive!
+              </Text>
+            </View>
+          </View>
+
+          <TouchableOpacity
+            onPress={() => {
+              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+              setShowAddModal(true);
+            }}
+            style={[
+              styles.addButton,
+              {
+                backgroundColor: isDark
+                  ? 'rgba(255,255,255,0.1)'
+                  : 'rgba(0,0,0,0.05)',
+              },
+            ]}
+          >
+            <Ionicons name="add" size={28} color={theme.colors.foreground} />
+          </TouchableOpacity>
+        </View>
+      </Animated.View>
+
+      <GestureDetector gesture={panGesture}>
+        <Animated.View
+          style={[styles.contentWrapper, animatedContentStyle as ViewStyle]}
+        >
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+          >
+            <StatsSummary habits={habits} isDark={isDark} />
+            <WeekNavigator
+              currentWeekOffset={weekOffset}
+              onPrevious={handlePreviousWeek}
+              onNext={handleNextWeek}
+              isDark={isDark}
+            />
+
+            {habits.map((habit, index) => (
+              <HabitCard
+                key={habit.id}
+                habit={habit}
+                index={index}
+                isDark={isDark}
+                onToggle={handleToggleHabit}
+                onDelete={handleDeleteHabit}
+              />
+            ))}
+
+            <ContributionGraph habits={habits} isDark={isDark} />
+          </ScrollView>
+        </Animated.View>
+      </GestureDetector>
+
+      <AddHabitModal
+        visible={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        onAdd={handleAddHabit}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: { paddingHorizontal: 24, paddingTop: 56, paddingBottom: 16 },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title: { fontSize: 30, fontWeight: '900', marginBottom: 4 },
+  subtitleRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  subtitle: { fontWeight: '600' },
+  addButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentWrapper: { flex: 1 },
+  scrollView: { flex: 1, paddingHorizontal: 24 },
+  scrollContent: { paddingBottom: 100 },
+
+  fireContainer: { alignItems: 'center', justifyContent: 'center' },
+  flameAbsolute: { position: 'absolute' },
+
+  confettiParticle: {
+    position: 'absolute',
+    width: 8,
+    height: 8,
+    borderRadius: 2,
+  },
+
+  checkmarkContainer: { alignItems: 'center', justifyContent: 'center' },
+  confettiContainer: { position: 'absolute', top: 0 },
+  checkmarkBox: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyCircle: { width: 18, height: 18, borderRadius: 9, borderWidth: 2 },
+
+  heatmapCell: { width: 14, height: 14, borderRadius: 3, margin: 1.5 },
+
+  weekNavigator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    paddingHorizontal: 8,
+  },
+  navButton: { padding: 8, borderRadius: 12 },
+  weekLabel: { fontSize: 16, fontWeight: '600' },
+
+  statsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24,
+    paddingHorizontal: 4,
+  },
+  statCardWrapper: {
+    flex: 1,
+    marginHorizontal: 4,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  statCardGlass: { padding: 16, alignItems: 'center' },
+  statIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 8,
+  },
+  statValue: { fontSize: 20, fontWeight: '900' },
+  statLabel: { fontSize: 12, fontWeight: '500', marginTop: 4 },
+
+  habitCardWrapper: { marginBottom: 20, borderRadius: 24, overflow: 'hidden' },
+  habitCardGlass: { padding: 20 },
+  habitHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  habitInfo: { flexDirection: 'row', alignItems: 'center', gap: 12, flex: 1 },
+  habitDetails: { flex: 1 },
+  habitTitle: { fontSize: 18, fontWeight: '700' },
+  streakRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 4,
+  },
+  streakText: { fontSize: 14, fontWeight: '600' },
+  menuButton: { padding: 8 },
+
+  weeklyGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
+  dayColumn: { alignItems: 'center', flex: 1 },
+  dayLabel: { fontSize: 10, fontWeight: '700', marginBottom: 8 },
+  dayCell: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  miniStats: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+  },
+  miniStatItem: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  miniStatText: { fontSize: 12, fontWeight: '500' },
+
+  contributionCardWrapper: {
+    marginBottom: 24,
+    borderRadius: 24,
+    overflow: 'hidden',
+  },
+  contributionCardGlass: { padding: 20 },
+  contributionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 16,
+  },
+  contributionTitle: { fontSize: 16, fontWeight: '700' },
+  heatmapGrid: { flexDirection: 'row', justifyContent: 'center' },
+  heatmapWeek: { marginHorizontal: 2 },
+  legend: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginTop: 16,
+    gap: 4,
+  },
+  legendText: { fontSize: 10 },
+  legendCell: { width: 12, height: 12, borderRadius: 2 },
+});