feat: add reset progress and flagged media analysis

apps/mobile/src/features/profile/ProfileScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, useWindowDimensions, Platform, ActivityIndicator, Alert } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, useWindowDimensions, Platform, Alert } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -18,7 +18,7 @@ import { clearKeys } from '../../lib/encryption';
 import { useProfileSettings, useCoupleManagement } from './hooks';
 
 // Components
-import { AppearanceSettings, CoupleStatus, NotificationSettings, PrivacySettings, DangerZone, SettingsSection, MenuItem } from './components';
+import { AppearanceSettings, CoupleStatus, NotificationSettings, PrivacySettings, DangerZone, ResetProgress, SettingsSection, MenuItem } from './components';
 
 const MAX_CONTENT_WIDTH = 500;
 const ACCENT_GRADIENT = featureColors.profile.gradient as [string, string];
@@ -36,7 +36,6 @@ export function ProfileScreen() {
         handleUnpair,
         handleDeleteRelationship,
         handleResetProgress,
-        isResettingProgress,
         handleSignOut,
         navigateToPairing
     } = useCoupleManagement();
@@ -216,38 +215,9 @@ export function ProfileScreen() {
                     />
                 </SettingsSection>
 
-                {/* Reset Progress Layout */}
+                {/* Reset Progress */}
                 {couple && (
-                    <SettingsSection title="Reset Progress" delay={500}>
-                        <View style={styles.resetContent}>
-                            <View style={styles.resetInfo}>
-                                <View style={styles.resetIconContainer}>
-                                    <Ionicons name="refresh" size={20} color={colors.warning} />
-                                </View>
-                                <View style={styles.resetTextContainer}>
-                                    <Text style={styles.resetTitle}>Start Fresh</Text>
-                                    <Text style={styles.resetDescription}>
-                                        Delete all swipes, matches, and chats while keeping your partner connection.
-                                    </Text>
-                                </View>
-                            </View>
-                            <TouchableOpacity
-                                style={[styles.resetButton, isResettingProgress && styles.resetButtonDisabled]}
-                                onPress={handleResetProgress}
-                                disabled={isResettingProgress}
-                                activeOpacity={0.7}
-                            >
-                                {isResettingProgress ? (
-                                    <ActivityIndicator size="small" color={colors.warning} />
-                                ) : (
-                                    <>
-                                        <Ionicons name="refresh-outline" size={16} color={colors.warning} />
-                                        <Text style={styles.resetButtonText}>Reset</Text>
-                                    </>
-                                )}
-                            </TouchableOpacity>
-                        </View>
-                    </SettingsSection>
+                    <ResetProgress onResetProgress={handleResetProgress} />
                 )}
 
                 {/* Debug Section */}
@@ -484,57 +454,6 @@ const styles = StyleSheet.create({
         ...typography.caption1,
         color: colors.textTertiary,
     },
-    // Reset Progress Styles
-    resetContent: {
-        gap: spacing.md,
-    },
-    resetInfo: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-    },
-    resetIconContainer: {
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: colors.warningLight,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    resetTextContainer: {
-        flex: 1,
-        marginLeft: spacing.md,
-    },
-    resetTitle: {
-        ...typography.headline,
-        color: colors.text,
-        marginBottom: spacing.xs,
-    },
-    resetDescription: {
-        ...typography.subhead,
-        color: colors.textSecondary,
-        lineHeight: 20,
-    },
-    resetButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: colors.warningLight,
-        paddingVertical: spacing.sm,
-        paddingHorizontal: spacing.md,
-        borderRadius: radius.md,
-        borderWidth: 1,
-        borderColor: 'rgba(243, 156, 18, 0.3)',
-        gap: spacing.xs,
-        alignSelf: "flex-end",
-    },
-    resetButtonDisabled: {
-        opacity: 0.5,
-    },
-    resetButtonText: {
-        ...typography.subhead,
-        color: colors.warning,
-        fontWeight: "600",
-    },
     // Version Badge
     versionContainer: {
         alignItems: "center",

apps/mobile/src/features/profile/components/DangerZone.tsx

@@ -225,6 +225,9 @@ const styles = StyleSheet.create({
         maxWidth: 400,
         padding: spacing.xl,
         backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        borderWidth: 1,
+        borderColor: colors.glass.border,
     },
     modalHeader: {
         alignItems: "center",
@@ -278,11 +281,16 @@ const styles = StyleSheet.create({
         fontWeight: "bold",
         color: colors.error,
     },
-    inputContainer: {
-        marginBottom: spacing.xl,
-    },
     confirmInput: {
+        backgroundColor: colors.glass.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.error,
+        padding: spacing.md,
+        ...typography.body,
+        color: colors.text,
         textAlign: 'center',
+        marginBottom: spacing.xl,
     },
     modalButtons: {
         flexDirection: "row",

apps/mobile/src/features/profile/components/ResetProgress.tsx

@@ -0,0 +1,362 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { BlurView } from 'expo-blur';
+import { GlassCard } from '../../../components/ui';
+import { colors, spacing, radius, typography } from '../../../theme';
+
+interface ResetProgressProps {
+    onResetProgress: () => Promise<void>;
+}
+
+export const ResetProgress: React.FC<ResetProgressProps> = ({ onResetProgress }) => {
+    const [showResetModal, setShowResetModal] = useState(false);
+    const [resetConfirmText, setResetConfirmText] = useState("");
+    const [isResetting, setIsResetting] = useState(false);
+
+    const handleReset = async () => {
+        if (resetConfirmText !== "RESET") return;
+        setIsResetting(true);
+        try {
+            await onResetProgress();
+            setShowResetModal(false);
+            setResetConfirmText("");
+        } catch (error) {
+            // Error handling relies on parent
+        } finally {
+            setIsResetting(false);
+        }
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.delay(500).duration(500)}
+                style={styles.section}
+            >
+                <Text style={styles.sectionTitle}>Reset Progress</Text>
+                <GlassCard>
+                    <View style={styles.content}>
+                        <View style={styles.info}>
+                            <View style={styles.iconContainer}>
+                                <Ionicons name="refresh" size={20} color={colors.warning} />
+                            </View>
+                            <View style={styles.textContainer}>
+                                <Text style={styles.title}>Start Fresh</Text>
+                                <Text style={styles.description}>
+                                    Delete all swipes, matches, and chats while keeping your partner connection.
+                                </Text>
+                            </View>
+                        </View>
+                        <TouchableOpacity
+                            style={styles.resetButton}
+                            onPress={() => setShowResetModal(true)}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="refresh-outline" size={16} color={colors.warning} />
+                            <Text style={styles.resetButtonText}>Reset</Text>
+                        </TouchableOpacity>
+                    </View>
+                </GlassCard>
+            </Animated.View>
+
+            <Modal
+                visible={showResetModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => !isResetting && setShowResetModal(false)}
+            >
+                <BlurView
+                    intensity={Platform.OS === 'ios' ? 20 : 0}
+                    tint="dark"
+                    style={StyleSheet.absoluteFill}
+                >
+                    <KeyboardAvoidingView
+                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                        style={styles.modalOverlay}
+                    >
+                        <View style={styles.modalContent}>
+                            <View style={styles.modalHeader}>
+                                <View style={styles.modalIconContainer}>
+                                    <Ionicons name="refresh" size={32} color={colors.warning} />
+                                </View>
+                                <Text style={styles.modalTitle}>Reset Progress?</Text>
+                            </View>
+
+                            <Text style={styles.modalDescription}>
+                                This action cannot be undone. This will permanently delete:
+                            </Text>
+
+                            <View style={styles.resetList}>
+                                <View style={styles.resetListItem}>
+                                    <Ionicons name="swap-horizontal" size={16} color={colors.warning} />
+                                    <Text style={styles.resetListText}>All your swipes</Text>
+                                </View>
+                                <View style={styles.resetListItem}>
+                                    <Ionicons name="heart" size={16} color={colors.warning} />
+                                    <Text style={styles.resetListText}>All matches</Text>
+                                </View>
+                                <View style={styles.resetListItem}>
+                                    <Ionicons name="chatbubbles" size={16} color={colors.warning} />
+                                    <Text style={styles.resetListText}>All chat messages</Text>
+                                </View>
+                            </View>
+
+                            <View style={styles.keepList}>
+                                <View style={styles.keepListItem}>
+                                    <Ionicons name="checkmark-circle" size={16} color={colors.success} />
+                                    <Text style={styles.keepListText}>Your partner connection stays</Text>
+                                </View>
+                            </View>
+
+                            <Text style={styles.confirmLabel}>
+                                Type <Text style={styles.confirmKeyword}>RESET</Text> to confirm:
+                            </Text>
+
+                            <TextInput
+                                style={styles.confirmInput}
+                                value={resetConfirmText}
+                                onChangeText={setResetConfirmText}
+                                placeholder="Type RESET"
+                                placeholderTextColor={colors.textTertiary}
+                                autoCapitalize="characters"
+                                autoCorrect={false}
+                                editable={!isResetting}
+                            />
+
+                            <View style={styles.modalButtons}>
+                                <TouchableOpacity
+                                    style={styles.cancelButton}
+                                    onPress={() => {
+                                        setShowResetModal(false);
+                                        setResetConfirmText("");
+                                    }}
+                                    disabled={isResetting}
+                                    activeOpacity={0.7}
+                                >
+                                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                                </TouchableOpacity>
+
+                                <TouchableOpacity
+                                    style={[
+                                        styles.confirmResetButton,
+                                        (resetConfirmText !== "RESET" || isResetting) && styles.confirmResetButtonDisabled,
+                                    ]}
+                                    onPress={handleReset}
+                                    disabled={resetConfirmText !== "RESET" || isResetting}
+                                    activeOpacity={0.7}
+                                >
+                                    {isResetting ? (
+                                        <ActivityIndicator size="small" color={colors.text} />
+                                    ) : (
+                                        <>
+                                            <Ionicons name="refresh" size={16} color={colors.text} />
+                                            <Text style={styles.confirmResetButtonText}>Reset</Text>
+                                        </>
+                                    )}
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </KeyboardAvoidingView>
+                </BlurView>
+            </Modal>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    section: {
+        paddingHorizontal: spacing.lg,
+        marginBottom: spacing.lg,
+    },
+    sectionTitle: {
+        ...typography.caption1,
+        fontWeight: '600',
+        letterSpacing: 2,
+        color: colors.textTertiary,
+        marginBottom: spacing.sm,
+        textTransform: 'uppercase',
+    },
+    content: {
+        gap: spacing.md,
+    },
+    info: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
+    iconContainer: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.warningLight,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    textContainer: {
+        flex: 1,
+        marginLeft: spacing.md,
+    },
+    title: {
+        ...typography.headline,
+        color: colors.text,
+        marginBottom: spacing.xs,
+    },
+    description: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        lineHeight: 20,
+    },
+    resetButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors.warningLight,
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: 'rgba(243, 156, 18, 0.3)',
+        gap: spacing.xs,
+        alignSelf: "flex-end",
+    },
+    resetButtonText: {
+        ...typography.subhead,
+        color: colors.warning,
+        fontWeight: "600",
+    },
+    // Modal styles
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: spacing.lg,
+    },
+    modalContent: {
+        width: "100%",
+        maxWidth: 400,
+        padding: spacing.xl,
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        borderWidth: 1,
+        borderColor: colors.glass.border,
+    },
+    modalHeader: {
+        alignItems: "center",
+        marginBottom: spacing.lg,
+    },
+    modalIconContainer: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        backgroundColor: colors.warningLight,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: spacing.md,
+    },
+    modalTitle: {
+        ...typography.title2,
+        color: colors.text,
+        textAlign: "center",
+    },
+    modalDescription: {
+        ...typography.body,
+        color: colors.textSecondary,
+        marginBottom: spacing.lg,
+        textAlign: "center",
+    },
+    resetList: {
+        backgroundColor: "rgba(243, 156, 18, 0.1)",
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        gap: spacing.sm,
+        marginBottom: spacing.md,
+        borderWidth: 1,
+        borderColor: 'rgba(243, 156, 18, 0.2)',
+    },
+    resetListItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    resetListText: {
+        ...typography.subhead,
+        color: colors.text,
+    },
+    keepList: {
+        backgroundColor: "rgba(46, 204, 113, 0.1)",
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        gap: spacing.sm,
+        marginBottom: spacing.xl,
+        borderWidth: 1,
+        borderColor: 'rgba(46, 204, 113, 0.2)',
+    },
+    keepListItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    keepListText: {
+        ...typography.subhead,
+        color: colors.text,
+    },
+    confirmLabel: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        marginBottom: spacing.xs,
+        textAlign: "center",
+    },
+    confirmKeyword: {
+        fontWeight: "bold",
+        color: colors.warning,
+    },
+    confirmInput: {
+        backgroundColor: colors.glass.background,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.warning,
+        padding: spacing.md,
+        ...typography.body,
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: spacing.xl,
+    },
+    modalButtons: {
+        flexDirection: "row",
+        gap: spacing.md,
+    },
+    cancelButton: {
+        flex: 1,
+        backgroundColor: colors.glass.backgroundLight,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: colors.glass.borderLight,
+    },
+    cancelButtonText: {
+        ...typography.body,
+        color: colors.textSecondary,
+        fontWeight: "600",
+    },
+    confirmResetButton: {
+        flex: 1,
+        backgroundColor: colors.warning,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: spacing.xs,
+    },
+    confirmResetButtonDisabled: {
+        opacity: 0.5,
+    },
+    confirmResetButtonText: {
+        ...typography.body,
+        color: colors.text,
+        fontWeight: "600",
+    },
+});

apps/mobile/src/features/profile/components/index.ts

@@ -8,6 +8,7 @@ export type { NotificationSettingsProps } from './NotificationSettings';
 export { CoupleStatus } from './CoupleStatus';
 export { PrivacySettings } from './PrivacySettings';
 export { DangerZone } from './DangerZone';
+export { ResetProgress } from './ResetProgress';
 
 export { SettingsSection } from './SettingsSection';
 export type { SettingsSectionProps } from './SettingsSection';

apps/mobile/src/features/profile/hooks/useCoupleManagement.ts

@@ -66,37 +66,22 @@ export function useCoupleManagement() {
     };
 
     const handleResetProgress = async () => {
-        Alert.alert(
-            "Reset Progress",
-            "This will delete all your swipes, matches, and chat messages. You'll stay connected with your partner and can start fresh. This cannot be undone.",
-            [
-                { text: "Cancel", style: "cancel" },
-                {
-                    text: "Reset",
-                    style: "destructive",
-                    onPress: async () => {
-                        setIsResettingProgress(true);
-                        try {
-                            const { error } = await supabase.functions.invoke("reset-couple-progress", {
-                                method: "DELETE",
-                            });
+        try {
+            const { error } = await supabase.functions.invoke("reset-couple-progress", {
+                method: "DELETE",
+            });
 
-                            if (error) throw error;
+            if (error) throw error;
 
-                            // Clear local stores
-                            clearMatches();
-                            clearMessages();
+            // Clear local stores
+            clearMatches();
+            clearMessages();
 
-                            Alert.alert("Success", "Your progress has been reset. You can now start swiping again!");
-                        } catch (error) {
-                            Alert.alert("Error", "Failed to reset progress. Please try again.");
-                        } finally {
-                            setIsResettingProgress(false);
-                        }
-                    },
-                },
-            ]
-        );
+            Alert.alert("Success", "Your progress has been reset. You can now start swiping again!");
+        } catch (error) {
+            Alert.alert("Error", "Failed to reset progress. Please try again.");
+            throw error;
+        }
     };
 
     const handleSignOut = () => {