Add message reporting and account deletion

- Add user message reporting via long press menu
- Add delete-account edge function for App Store compliance
- Update admin moderation page with AI/User tabs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -51,6 +51,7 @@ export function ProfileScreen() {
         handleDeleteRelationship,
         handleResetProgress,
         handleSignOut,
+        handleDeleteAccount,
         navigateToPairing
     } = useCoupleManagement();
 
@@ -373,9 +374,11 @@ export function ProfileScreen() {
                 )}
 
                 {/* Danger Zone */}
-                {couple && (
-                    <DangerZone onDeleteRelationship={handleDeleteRelationship} />
-                )}
+                <DangerZone
+                    onDeleteRelationship={couple ? handleDeleteRelationship : undefined}
+                    onDeleteAccount={handleDeleteAccount}
+                    hasRelationship={!!couple}
+                />
 
                 {/* Version */}
                 <Animated.View

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
+import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput, ViewStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 import { BlurView } from 'expo-blur';
@@ -7,25 +7,59 @@ import { GlassCard, GlassButton } from '../../../components/ui';
 import { colors, spacing, radius, typography } from '../../../theme';
 
 interface DangerZoneProps {
-    onDeleteRelationship: () => Promise<void>;
+    onDeleteRelationship?: () => Promise<void>;
+    onDeleteAccount: () => Promise<void>;
+    hasRelationship?: boolean;
 }
 
-export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship }) => {
-    const [showDeleteModal, setShowDeleteModal] = useState(false);
+export const DangerZone: React.FC<DangerZoneProps> = ({
+    onDeleteRelationship,
+    onDeleteAccount,
+    hasRelationship = false
+}) => {
+    const [showDeleteRelationshipModal, setShowDeleteRelationshipModal] = useState(false);
+    const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
     const [deleteConfirmText, setDeleteConfirmText] = useState("");
-    const [isDeleting, setIsDeleting] = useState(false);
+    const [isDeletingRelationship, setIsDeletingRelationship] = useState(false);
+    const [isDeletingAccount, setIsDeletingAccount] = useState(false);
 
-    const handleDelete = async () => {
-        if (deleteConfirmText !== "DELETE") return;
-        setIsDeleting(true);
+    const handleDeleteRelationship = async () => {
+        if (deleteConfirmText !== "DELETE" || !onDeleteRelationship) return;
+        setIsDeletingRelationship(true);
         try {
             await onDeleteRelationship();
-            setShowDeleteModal(false);
+            setShowDeleteRelationshipModal(false);
             setDeleteConfirmText("");
         } catch (error) {
             // Error handling relies on parent throwing or managing its own alerts
         } finally {
-            setIsDeleting(false);
+            setIsDeletingRelationship(false);
+        }
+    };
+
+    const handleDeleteAccount = async () => {
+        if (deleteConfirmText !== "DELETE") return;
+        setIsDeletingAccount(true);
+        try {
+            await onDeleteAccount();
+            // No need to close modal - user will be signed out
+        } catch (error) {
+            // Error handling relies on parent throwing or managing its own alerts
+            setIsDeletingAccount(false);
+        }
+    };
+
+    const closeRelationshipModal = () => {
+        if (!isDeletingRelationship) {
+            setShowDeleteRelationshipModal(false);
+            setDeleteConfirmText("");
+        }
+    };
+
+    const closeAccountModal = () => {
+        if (!isDeletingAccount) {
+            setShowDeleteAccountModal(false);
+            setDeleteConfirmText("");
         }
     };
 
@@ -36,23 +70,53 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                 style={styles.section}
             >
                 <Text style={styles.dangerSectionTitle}>Danger Zone</Text>
-                <GlassCard style={styles.dangerCard}>
+
+                {/* Delete Relationship - only show if in a relationship */}
+                {hasRelationship && onDeleteRelationship && (
+                    <GlassCard style={styles.dangerCard}>
+                        <View style={styles.dangerContent}>
+                            <View style={styles.dangerInfo}>
+                                <View style={styles.dangerIconContainer}>
+                                    <Ionicons name="heart-dislike" size={20} color={colors.error} />
+                                </View>
+                                <View style={styles.dangerTextContainer}>
+                                    <Text style={styles.dangerTitle}>Delete Relationship Data</Text>
+                                    <Text style={styles.dangerDescription}>
+                                        Delete your relationship including all matches, chats, and shared photos. Your account will remain.
+                                    </Text>
+                                </View>
+                            </View>
+                            <GlassButton
+                                variant="danger"
+                                size="sm"
+                                onPress={() => setShowDeleteRelationshipModal(true)}
+                                icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
+                                style={styles.dangerButton}
+                            >
+                                Delete
+                            </GlassButton>
+                        </View>
+                    </GlassCard>
+                )}
+
+                {/* Delete Account - always show */}
+                <GlassCard style={hasRelationship ? StyleSheet.flatten([styles.dangerCard, styles.dangerCardSpacing]) as ViewStyle : styles.dangerCard}>
                     <View style={styles.dangerContent}>
                         <View style={styles.dangerInfo}>
                             <View style={styles.dangerIconContainer}>
-                                <Ionicons name="warning" size={20} color={colors.error} />
+                                <Ionicons name="person-remove" size={20} color={colors.error} />
                             </View>
                             <View style={styles.dangerTextContainer}>
-                                <Text style={styles.dangerTitle}>Delete All Data</Text>
+                                <Text style={styles.dangerTitle}>Delete Account</Text>
                                 <Text style={styles.dangerDescription}>
-                                    Permanently delete your relationship including all matches, chats, and shared photos.
+                                    Permanently delete your account and all associated data. This cannot be undone.
                                 </Text>
                             </View>
                         </View>
                         <GlassButton
                             variant="danger"
                             size="sm"
-                            onPress={() => setShowDeleteModal(true)}
+                            onPress={() => setShowDeleteAccountModal(true)}
                             icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
                             style={styles.dangerButton}
                         >
@@ -62,27 +126,28 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                 </GlassCard>
             </Animated.View>
 
+            {/* Delete Relationship Modal */}
             <Modal
-                visible={showDeleteModal}
+                visible={showDeleteRelationshipModal}
                 transparent
                 animationType="fade"
-                onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
+                onRequestClose={closeRelationshipModal}
             >
-                <BlurView 
-                    intensity={Platform.OS === 'ios' ? 20 : 0} 
-                    tint="dark" 
+                <BlurView
+                    intensity={Platform.OS === 'ios' ? 20 : 0}
+                    tint="dark"
                     style={StyleSheet.absoluteFill}
                 >
-                    <KeyboardAvoidingView 
+                    <KeyboardAvoidingView
                         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                         style={styles.modalOverlay}
                     >
                         <View style={styles.modalContent}>
                             <View style={styles.modalHeader}>
                                 <View style={styles.modalIconContainer}>
-                                    <Ionicons name="warning" size={32} color={colors.error} />
+                                    <Ionicons name="heart-dislike" size={32} color={colors.error} />
                                 </View>
-                                <Text style={styles.modalTitle}>Delete All Data?</Text>
+                                <Text style={styles.modalTitle}>Delete Relationship Data?</Text>
                             </View>
 
                             <Text style={styles.modalDescription}>
@@ -120,17 +185,14 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                                 placeholderTextColor={colors.textTertiary}
                                 autoCapitalize="characters"
                                 autoCorrect={false}
-                                editable={!isDeleting}
+                                editable={!isDeletingRelationship}
                             />
 
                             <View style={styles.modalButtons}>
                                 <TouchableOpacity
                                     style={styles.cancelButton}
-                                    onPress={() => {
-                                        setShowDeleteModal(false);
-                                        setDeleteConfirmText("");
-                                    }}
-                                    disabled={isDeleting}
+                                    onPress={closeRelationshipModal}
+                                    disabled={isDeletingRelationship}
                                     activeOpacity={0.7}
                                 >
                                     <Text style={styles.cancelButtonText}>Cancel</Text>
@@ -139,13 +201,13 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                                 <TouchableOpacity
                                     style={[
                                         styles.deleteButton,
-                                        (deleteConfirmText !== "DELETE" || isDeleting) && styles.deleteButtonDisabled,
+                                        (deleteConfirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
                                     ]}
-                                    onPress={handleDelete}
-                                    disabled={deleteConfirmText !== "DELETE" || isDeleting}
+                                    onPress={handleDeleteRelationship}
+                                    disabled={deleteConfirmText !== "DELETE" || isDeletingRelationship}
                                     activeOpacity={0.7}
                                 >
-                                    {isDeleting ? (
+                                    {isDeletingRelationship ? (
                                         <ActivityIndicator size="small" color={colors.text} />
                                     ) : (
                                         <>
@@ -159,6 +221,110 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                     </KeyboardAvoidingView>
                 </BlurView>
             </Modal>
+
+            {/* Delete Account Modal */}
+            <Modal
+                visible={showDeleteAccountModal}
+                transparent
+                animationType="fade"
+                onRequestClose={closeAccountModal}
+            >
+                <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="person-remove" size={32} color={colors.error} />
+                                </View>
+                                <Text style={styles.modalTitle}>Delete Account?</Text>
+                            </View>
+
+                            <Text style={styles.modalDescription}>
+                                This action cannot be undone. This will permanently delete:
+                            </Text>
+
+                            <View style={styles.deleteList}>
+                                <View style={styles.deleteListItem}>
+                                    <Ionicons name="person" size={16} color={colors.error} />
+                                    <Text style={styles.deleteListText}>Your account and profile</Text>
+                                </View>
+                                {hasRelationship && (
+                                    <>
+                                        <View style={styles.deleteListItem}>
+                                            <Ionicons name="heart-dislike" size={16} color={colors.error} />
+                                            <Text style={styles.deleteListText}>Your relationship data</Text>
+                                        </View>
+                                        <View style={styles.deleteListItem}>
+                                            <Ionicons name="chatbubbles" size={16} color={colors.error} />
+                                            <Text style={styles.deleteListText}>All chat messages and photos</Text>
+                                        </View>
+                                    </>
+                                )}
+                                <View style={styles.deleteListItem}>
+                                    <Ionicons name="key" size={16} color={colors.error} />
+                                    <Text style={styles.deleteListText}>Your encryption keys</Text>
+                                </View>
+                                <View style={styles.deleteListItem}>
+                                    <Ionicons name="cloud-offline" size={16} color={colors.error} />
+                                    <Text style={styles.deleteListText}>All cloud-stored data</Text>
+                                </View>
+                            </View>
+
+                            <Text style={styles.confirmLabel}>
+                                Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
+                            </Text>
+
+                            <TextInput
+                                style={styles.confirmInput}
+                                value={deleteConfirmText}
+                                onChangeText={setDeleteConfirmText}
+                                placeholder="Type DELETE"
+                                placeholderTextColor={colors.textTertiary}
+                                autoCapitalize="characters"
+                                autoCorrect={false}
+                                editable={!isDeletingAccount}
+                            />
+
+                            <View style={styles.modalButtons}>
+                                <TouchableOpacity
+                                    style={styles.cancelButton}
+                                    onPress={closeAccountModal}
+                                    disabled={isDeletingAccount}
+                                    activeOpacity={0.7}
+                                >
+                                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                                </TouchableOpacity>
+
+                                <TouchableOpacity
+                                    style={[
+                                        styles.deleteButton,
+                                        (deleteConfirmText !== "DELETE" || isDeletingAccount) && styles.deleteButtonDisabled,
+                                    ]}
+                                    onPress={handleDeleteAccount}
+                                    disabled={deleteConfirmText !== "DELETE" || isDeletingAccount}
+                                    activeOpacity={0.7}
+                                >
+                                    {isDeletingAccount ? (
+                                        <ActivityIndicator size="small" color={colors.text} />
+                                    ) : (
+                                        <>
+                                            <Ionicons name="trash" size={16} color={colors.text} />
+                                            <Text style={styles.deleteButtonText}>Delete Account</Text>
+                                        </>
+                                    )}
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </KeyboardAvoidingView>
+                </BlurView>
+            </Modal>
         </>
     );
 };
@@ -180,6 +346,9 @@ const styles = StyleSheet.create({
         borderColor: 'rgba(231, 76, 60, 0.3)',
         borderWidth: 1,
     },
+    dangerCardSpacing: {
+        marginTop: spacing.md,
+    },
     dangerContent: {
         gap: spacing.md,
     },

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

@@ -4,6 +4,7 @@ import { useRouter } from 'expo-router';
 import { useAuthStore, useMatchStore, useMessageStore, usePacksStore } from '../../../store';
 import { supabase } from '../../../lib/supabase';
 import { Events } from '../../../lib/analytics';
+import { clearKeys } from '../../../lib/encryption';
 
 export function useCoupleManagement() {
     const router = useRouter();
@@ -13,6 +14,7 @@ export function useCoupleManagement() {
     const { clearPacks } = usePacksStore();
 
     const [isResettingProgress, setIsResettingProgress] = useState(false);
+    const [isDeletingAccount, setIsDeletingAccount] = useState(false);
 
     const handleUnpair = async () => {
         Alert.alert(
@@ -99,16 +101,46 @@ export function useCoupleManagement() {
         );
     };
 
+    const handleDeleteAccount = async () => {
+        setIsDeletingAccount(true);
+        try {
+            const { error } = await supabase.functions.invoke("delete-account", {
+                method: "DELETE",
+            });
+
+            if (error) throw error;
+
+            // Clear all local data
+            clearMatches();
+            clearMessages();
+            clearPacks();
+            await clearKeys();
+
+            Events.accountDeleted();
+
+            // Sign out the user (this will redirect to login)
+            await signOut();
+        } catch (error) {
+            console.error("Delete account error:", error);
+            Alert.alert("Error", "Failed to delete account. Please try again.");
+            throw error;
+        } finally {
+            setIsDeletingAccount(false);
+        }
+    };
+
     const navigateToPairing = () => {
         router.push("/(app)/pairing");
     };
 
     return {
         isResettingProgress,
+        isDeletingAccount,
         handleUnpair,
         handleDeleteRelationship,
         handleResetProgress,
         handleSignOut,
+        handleDeleteAccount,
         navigateToPairing,
     };
 }