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>
2026-11-01 18:19:43 +00:00 · 2026-01-07 13:24:30 +00:00
1 parent 314745c6cb
commit 693ae59321
@@ -9,9 +9,10 @@ import { Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
 import Animated, { FadeInDown, useAnimatedStyle } from "react-native-reanimated";

-import { InputBar, ChatHeader, ChatMessages } from "./components";
+import { InputBar, ChatHeader, ChatMessages, ReportMessageSheet } from "./components";
 import { useMediaUpload } from "./hooks/useMediaUpload";
 import { useMessageActions } from "./hooks/useMessageActions";
+import type { ReportReason } from "./types";

 import { supabase } from "../../lib/supabase";
 import { useAuthStore, useMessageStore } from "../../store";
@@ -42,6 +43,7 @@ export const ChatScreen: React.FC = () => {
    const [fullScreenImage, setFullScreenImage] = useState<string | null>(null);
    const [fullScreenImageLoading, setFullScreenImageLoading] = useState(true);
    const [fullScreenVideo, setFullScreenVideo] = useState<string | null>(null);
+    const [reportingMessage, setReportingMessage] = useState<Message | null>(null);

    // Ambient orb breathing animations
    const { orbStyle1, orbStyle2 } = useAmbientOrbAnimation({
@@ -75,16 +77,60 @@ export const ChatScreen: React.FC = () => {
    // E2EE encryption hook for sending messages
    const { encryptMessage, isE2EEAvailable } = useEncryptedSend();

-    // Message actions hook for deletion
-    const { showDeleteOptions } = useMessageActions({ userId: user?.id });
+    // Message actions hook for deletion and reporting
+    const { showDeleteOptions, deleteForSelf } = useMessageActions({
+        userId: user?.id,
+        onReport: (message) => setReportingMessage(message),
+    });

-    // Handle long press on message to show delete options
+    // Handle long press on message to show options
    const handleMessageLongPress = useCallback((message: Message, isMe: boolean) => {
        // Don't show options for already deleted messages
        if (message.deleted_at) return;
        showDeleteOptions(message, isMe);
    }, [showDeleteOptions]);

+    // Handle report submission
+    const handleSubmitReport = async (reason: ReportReason) => {
+        if (!reportingMessage || !user?.id) return;
+
+        try {
+            // Insert the report
+            const { error: reportError } = await supabase
+                .from('message_reports')
+                .insert({
+                    message_id: reportingMessage.id,
+                    reporter_id: user.id,
+                    reason: reason,
+                });
+
+            if (reportError) {
+                if (reportError.code === '23505') {
+                    // Unique violation - already reported
+                    Alert.alert('Already Reported', 'You have already reported this message.');
+                } else {
+                    console.error('Report error:', reportError);
+                    Alert.alert('Error', 'Failed to submit report');
+                }
+                setReportingMessage(null);
+                return;
+            }
+
+            // Also delete the message for the reporter (so they don't see it anymore)
+            await deleteForSelf(reportingMessage.id);
+
+            // Remove from local state
+            setMessages(prev => prev.filter(m => m.id !== reportingMessage.id));
+
+            Alert.alert('Report Submitted', 'Thank you for your report. We will review it shortly.');
+            setReportingMessage(null);
+        } catch (err) {
+            console.error('Report error:', err);
+            Alert.alert('Error', 'Failed to submit report');
+            setReportingMessage(null);
+        }
+    };
+
    // Track active chat to prevent notifications for current chat
    useFocusEffect(
        useCallback(() => {
@@ -436,6 +482,13 @@ export const ChatScreen: React.FC = () => {
                    )}
                </View>
            </Modal>
+
+            {/* Report Message Sheet */}
+            <ReportMessageSheet
+                visible={reportingMessage !== null}
+                onClose={() => setReportingMessage(null)}
+                onSubmit={handleSubmitReport}
+            />
        </GradientBackground>
    );
 };
@@ -0,0 +1,297 @@
+import { useState, useEffect } from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    TouchableOpacity,
+    TouchableWithoutFeedback,
+    ActivityIndicator,
+    Platform,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from "react-native-reanimated";
+import { colors, spacing, typography, radius } from "../../../theme";
+import { REPORT_REASONS, type ReportReason } from "../types";
+
+interface ReportMessageSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    onSubmit: (reason: ReportReason) => Promise<void>;
+}
+
+export function ReportMessageSheet({ visible, onClose, onSubmit }: ReportMessageSheetProps) {
+    const [selectedReason, setSelectedReason] = useState<ReportReason | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Reset state when modal closes
+    useEffect(() => {
+        if (!visible) {
+            setSelectedReason(null);
+            setIsLoading(false);
+        }
+    }, [visible]);
+
+    const handleSubmit = async () => {
+        if (!selectedReason || isLoading) return;
+
+        setIsLoading(true);
+        await onSubmit(selectedReason);
+        setIsLoading(false);
+    };
+
+    const ReasonButton = ({ reason }: { reason: typeof REPORT_REASONS[number] }) => {
+        const isSelected = selectedReason === reason.value;
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.reasonButton,
+                    isSelected && styles.reasonButtonSelected,
+                ]}
+                onPress={() => setSelectedReason(reason.value)}
+                disabled={isLoading}
+                activeOpacity={0.7}
+            >
+                <View style={styles.reasonContent}>
+                    <View style={[styles.radioOuter, isSelected && styles.radioOuterSelected]}>
+                        {isSelected && <View style={styles.radioInner} />}
+                    </View>
+                    <Text style={[styles.reasonText, isSelected && styles.reasonTextSelected]}>
+                        {reason.label}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        );
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="none"
+            onRequestClose={onClose}
+            statusBarTranslucent
+        >
+            <Animated.View style={styles.overlay} entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
+                <TouchableWithoutFeedback onPress={onClose}>
+                    <View style={styles.backdrop} />
+                </TouchableWithoutFeedback>
+
+                <Animated.View
+                    style={styles.sheetContainer}
+                    entering={SlideInDown.springify().damping(20)}
+                    exiting={SlideOutDown.duration(200)}
+                >
+                    {Platform.OS === "ios" ? (
+                        <BlurView intensity={80} tint="dark" style={styles.sheet}>
+                            <SheetContent
+                                ReasonButton={ReasonButton}
+                                selectedReason={selectedReason}
+                                isLoading={isLoading}
+                                onClose={onClose}
+                                onSubmit={handleSubmit}
+                            />
+                        </BlurView>
+                    ) : (
+                        <View style={[styles.sheet, styles.sheetAndroid]}>
+                            <SheetContent
+                                ReasonButton={ReasonButton}
+                                selectedReason={selectedReason}
+                                isLoading={isLoading}
+                                onClose={onClose}
+                                onSubmit={handleSubmit}
+                            />
+                        </View>
+                    )}
+                </Animated.View>
+            </Animated.View>
+        </Modal>
+    );
+}
+
+// Sheet content extracted for reuse between iOS blur and Android solid background
+function SheetContent({
+    ReasonButton,
+    selectedReason,
+    isLoading,
+    onClose,
+    onSubmit,
+}: {
+    ReasonButton: React.FC<{ reason: typeof REPORT_REASONS[number] }>;
+    selectedReason: ReportReason | null;
+    isLoading: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+}) {
+    return (
+        <>
+            {/* Handle */}
+            <View style={styles.handle} />
+
+            {/* Header */}
+            <View style={styles.header}>
+                <Text style={styles.headerTitle}>Report Message</Text>
+                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                    <Ionicons name="close" size={20} color={colors.textSecondary} />
+                </TouchableOpacity>
+            </View>
+
+            {/* Description */}
+            <Text style={styles.description}>
+                Why are you reporting this message?
+            </Text>
+
+            {/* Reason buttons */}
+            <View style={styles.reasonButtons}>
+                {REPORT_REASONS.map((reason) => (
+                    <ReasonButton key={reason.value} reason={reason} />
+                ))}
+            </View>
+
+            {/* Submit button */}
+            <TouchableOpacity
+                style={[
+                    styles.submitButton,
+                    !selectedReason && styles.submitButtonDisabled,
+                ]}
+                onPress={onSubmit}
+                disabled={!selectedReason || isLoading}
+                activeOpacity={0.7}
+            >
+                {isLoading ? (
+                    <ActivityIndicator color={colors.text} size="small" />
+                ) : (
+                    <Text style={styles.submitButtonText}>Submit Report</Text>
+                )}
+            </TouchableOpacity>
+
+            {/* Bottom padding for safe area */}
+            <View style={styles.bottomPadding} />
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: "flex-end",
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+    },
+    sheetContainer: {
+        maxHeight: "80%",
+    },
+    sheet: {
+        borderTopLeftRadius: radius.xl,
+        borderTopRightRadius: radius.xl,
+        overflow: "hidden",
+        paddingHorizontal: spacing.lg,
+        paddingTop: spacing.md,
+    },
+    sheetAndroid: {
+        backgroundColor: colors.backgroundLight,
+    },
+    handle: {
+        width: 40,
+        height: 4,
+        backgroundColor: "rgba(255, 255, 255, 0.3)",
+        borderRadius: 2,
+        alignSelf: "center",
+        marginBottom: spacing.md,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: spacing.md,
+    },
+    headerTitle: {
+        ...typography.title3,
+        color: colors.text,
+    },
+    closeButton: {
+        position: "absolute",
+        right: 0,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: "rgba(255, 255, 255, 0.1)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    description: {
+        ...typography.body,
+        color: colors.textSecondary,
+        textAlign: "center",
+        marginBottom: spacing.lg,
+    },
+    reasonButtons: {
+        gap: spacing.sm,
+        marginBottom: spacing.lg,
+    },
+    reasonButton: {
+        paddingVertical: spacing.md,
+        paddingHorizontal: spacing.lg,
+        borderRadius: radius.lg,
+        backgroundColor: "rgba(255, 255, 255, 0.05)",
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.1)",
+    },
+    reasonButtonSelected: {
+        backgroundColor: "rgba(231, 76, 60, 0.1)",
+        borderColor: "rgba(231, 76, 60, 0.3)",
+    },
+    reasonContent: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.md,
+    },
+    radioOuter: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        borderWidth: 2,
+        borderColor: colors.textTertiary,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    radioOuterSelected: {
+        borderColor: colors.error,
+    },
+    radioInner: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: colors.error,
+    },
+    reasonText: {
+        ...typography.body,
+        color: colors.textSecondary,
+    },
+    reasonTextSelected: {
+        color: colors.text,
+        fontWeight: "600",
+    },
+    submitButton: {
+        paddingVertical: spacing.md,
+        borderRadius: radius.lg,
+        backgroundColor: colors.error,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    submitButtonDisabled: {
+        backgroundColor: "rgba(231, 76, 60, 0.3)",
+    },
+    submitButtonText: {
+        ...typography.callout,
+        color: colors.text,
+        fontWeight: "600",
+    },
+    bottomPadding: {
+        height: Platform.OS === "ios" ? 34 : 20,
+    },
+});
@@ -15,3 +15,4 @@ export type { MessageBubbleProps } from './MessageBubble';
 export { ChatHeader } from './ChatHeader';
 export { ChatMessages } from './ChatMessages';
 export { MatchCard } from './MatchCard';
+export { ReportMessageSheet } from './ReportMessageSheet';
@@ -1,6 +1,6 @@
 /**
- * useMessageActions - Hook for message deletion actions
- * Handles "delete for self" and "delete for everyone" functionality.
+ * useMessageActions - Hook for message actions
+ * Handles "delete for self", "delete for everyone", and "report" functionality.
 */
 import { Platform, ActionSheetIOS, Alert } from 'react-native';
 import * as Haptics from 'expo-haptics';
@@ -9,9 +9,10 @@ import type { Message } from '../types';

 interface UseMessageActionsConfig {
    userId: string | undefined;
+    onReport?: (message: Message) => void;
 }

-export function useMessageActions({ userId }: UseMessageActionsConfig) {
+export function useMessageActions({ userId, onReport }: UseMessageActionsConfig) {
    /**
     * Delete a message for the current user only.
     * Message will still be visible to the partner.
@@ -46,8 +47,8 @@ export function useMessageActions({ userId }: UseMessageActionsConfig) {
    };

    /**
-     * Show delete options for a message.
-     * Author gets both options, non-author only gets "delete for me".
+     * Show options for a message.
+     * Author gets delete options, non-author gets delete for me + report.
     */
    const showDeleteOptions = (message: Message, isMe: boolean) => {
        // Don't show options for already deleted messages
@@ -57,44 +58,73 @@ export function useMessageActions({ userId }: UseMessageActionsConfig) {
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

        if (Platform.OS === 'ios') {
-            const options = ['Cancel', 'Delete for me'];
-            if (isMe) options.push('Delete for everyone');
-
-            ActionSheetIOS.showActionSheetWithOptions(
-                {
-                    options,
-                    destructiveButtonIndex: isMe ? 2 : 1,
-                    cancelButtonIndex: 0,
-                    title: 'Delete message?',
-                },
-                (buttonIndex) => {
-                    if (buttonIndex === 1) {
-                        deleteForSelf(message.id);
-                    } else if (buttonIndex === 2 && isMe) {
-                        deleteForEveryone(message.id);
+            if (isMe) {
+                // Author sees: Cancel, Delete for me, Delete for everyone
+                const options = ['Cancel', 'Delete for me', 'Delete for everyone'];
+                ActionSheetIOS.showActionSheetWithOptions(
+                    {
+                        options,
+                        destructiveButtonIndex: 2,
+                        cancelButtonIndex: 0,
+                        title: 'Delete message?',
+                    },
+                    (buttonIndex) => {
+                        if (buttonIndex === 1) {
+                            deleteForSelf(message.id);
+                        } else if (buttonIndex === 2) {
+                            deleteForEveryone(message.id);
+                        }
                    }
-                }
-            );
+                );
+            } else {
+                // Non-author sees: Cancel, Delete for me, Report
+                const options = ['Cancel', 'Delete for me', 'Report'];
+                ActionSheetIOS.showActionSheetWithOptions(
+                    {
+                        options,
+                        destructiveButtonIndex: 2,
+                        cancelButtonIndex: 0,
+                        title: 'Message options',
+                    },
+                    (buttonIndex) => {
+                        if (buttonIndex === 1) {
+                            deleteForSelf(message.id);
+                        } else if (buttonIndex === 2 && onReport) {
+                            onReport(message);
+                        }
+                    }
+                );
+            }
        } else {
            // Android fallback using Alert
-            const buttons: Array<{ text: string; style?: 'cancel' | 'default' | 'destructive'; onPress?: () => void }> = [
-                { text: 'Cancel', style: 'cancel' },
-                {
-                    text: 'Delete for me',
-                    style: 'destructive',
-                    onPress: () => deleteForSelf(message.id),
-                },
-            ];
-
            if (isMe) {
-                buttons.push({
-                    text: 'Delete for everyone',
-                    style: 'destructive',
-                    onPress: () => deleteForEveryone(message.id),
-                });
+                Alert.alert('Delete message?', undefined, [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Delete for me',
+                        style: 'destructive',
+                        onPress: () => deleteForSelf(message.id),
+                    },
+                    {
+                        text: 'Delete for everyone',
+                        style: 'destructive',
+                        onPress: () => deleteForEveryone(message.id),
+                    },
+                ]);
+            } else {
+                Alert.alert('Message options', undefined, [
+                    { text: 'Cancel', style: 'cancel' },
+                    {
+                        text: 'Delete for me',
+                        onPress: () => deleteForSelf(message.id),
+                    },
+                    {
+                        text: 'Report',
+                        style: 'destructive',
+                        onPress: () => onReport?.(message),
+                    },
+                ]);
            }
-
-            Alert.alert('Delete message?', undefined, buttons);
        }
    };

@@ -39,3 +39,13 @@ export const CHAT_COLORS = {
    ROSE: 'rgb(232, 164, 174)',
    ROSE_RGBA: 'rgba(232, 164, 174, ',
 } as const;
+
+/** Report reasons for message reporting */
+export type ReportReason = 'harassment' | 'spam' | 'inappropriate_content' | 'other';
+
+export const REPORT_REASONS: { value: ReportReason; label: string }[] = [
+    { value: 'harassment', label: 'Harassment' },
+    { value: 'spam', label: 'Spam' },
+    { value: 'inappropriate_content', label: 'Inappropriate Content' },
+    { value: 'other', label: 'Other' },
+];