feat(dares): optional photo/audio proof of completion

The sender can require photo or audio proof when sending any dare,
catalogue or custom. The recipient captures and uploads the proof as a
new couple-scoped 'dare_proof' media kind and attaches it on submit;
the server enforces ownership, kind, couple, and MIME-type match.
The proof renders inline on the dare card for the sender to review
before confirming completion.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/mobile/src/features/dares/components/DareProofSheet.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+    ActivityIndicator, Image, Modal, Platform, Pressable, StyleSheet, Text, View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { useAudioRecorder } from "../../../hooks/useAudioRecorder";
+import { uploadMedia } from "../../../lib/mediaApi";
+import { colors, featureColors, radius, spacing, typography } from "../../../theme";
+import type { SentDare } from "../types";
+
+const ACCENT = featureColors.dares.accent;
+
+const MAX_AUDIO_SECONDS = 60;
+
+export interface DareProofSheetProps {
+    /** The active incoming dare being submitted; null closes the sheet. */
+    dare: SentDare | null;
+    onClose: () => void;
+    /** Uploads have already happened; the id is ready to attach to the submit call. */
+    onSubmit: (dareId: string, proofMediaId: string) => Promise<void> | void;
+}
+
+function imageMime(uri: string): string {
+    const ext = uri.split(".").pop()?.toLowerCase() ?? "jpg";
+    if (ext === "png") return "image/png";
+    if (ext === "webp") return "image/webp";
+    return "image/jpeg";
+}
+
+/** expo-av records .m4a on both platforms; web lands on webm. */
+function audioMime(uri: string): string {
+    const ext = uri.split(".").pop()?.toLowerCase() ?? "m4a";
+    if (ext === "webm") return "audio/webm";
+    if (ext === "wav") return "audio/wav";
+    if (ext === "mp3") return "audio/mpeg";
+    if (ext === "caf") return "audio/x-caf";
+    return "audio/mp4";
+}
+
+export function DareProofSheet({ dare, onClose, onSubmit }: DareProofSheetProps) {
+    const [photoUri, setPhotoUri] = useState<string | null>(null);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const recorder = useAudioRecorder({ maxDurationSeconds: MAX_AUDIO_SECONDS });
+    const visible = dare !== null;
+    const mode = dare?.proof_type ?? "none";
+
+    useEffect(() => {
+        if (!visible) return;
+        setPhotoUri(null);
+        setError(null);
+        setSending(false);
+        recorder.resetRecording();
+        // Reset only when a new dare opens the sheet, not on recorder identity churn.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, dare?.id]);
+
+    const pickPhoto = useCallback(async (fromCamera: boolean) => {
+        setError(null);
+        if (fromCamera) {
+            const permission = await ImagePicker.requestCameraPermissionsAsync();
+            if (!permission.granted) {
+                setError("Camera access is needed to take a proof photo.");
+                return;
+            }
+        }
+        const result = fromCamera
+            ? await ImagePicker.launchCameraAsync({ allowsEditing: false, quality: 0.7 })
+            : await ImagePicker.launchImageLibraryAsync({
+                  mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                  allowsEditing: false,
+                  quality: 0.7,
+              });
+        if (!result.canceled) setPhotoUri(result.assets[0].uri);
+    }, []);
+
+    const proofUri = mode === "photo" ? photoUri : recorder.recordingUri;
+    const canSend = proofUri !== null && !sending && recorder.state !== "recording";
+
+    const handleSend = useCallback(async () => {
+        if (!dare || !proofUri) return;
+        setSending(true);
+        setError(null);
+        try {
+            const mimeType = mode === "photo" ? imageMime(proofUri) : audioMime(proofUri);
+            const upload = await uploadMedia(proofUri, { kind: "dare_proof", mimeType });
+            await onSubmit(dare.id, upload.media.id);
+            onClose();
+        } catch {
+            setError("Could not send your proof. Check your connection and try again.");
+        } finally {
+            setSending(false);
+        }
+    }, [dare, proofUri, mode, onSubmit, onClose]);
+
+    return (
+        <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
+            <View style={styles.backdrop}>
+                <View style={styles.sheet}>
+                    <View style={styles.handle} />
+                    <View style={styles.header}>
+                        <Text style={styles.title}>
+                            {mode === "photo" ? "Photo proof" : "Audio proof"}
+                        </Text>
+                        <Pressable onPress={onClose} hitSlop={12} disabled={sending}>
+                            <Ionicons name="close" size={22} color={colors.textSecondary} />
+                        </Pressable>
+                    </View>
+
+                    <Text style={styles.subtitle}>
+                        {mode === "photo"
+                            ? "Your partner asked for a photo to prove this one."
+                            : "Your partner asked for a voice note to prove this one."}
+                    </Text>
+
+                    {mode === "photo" ? (
+                        <View style={styles.captureArea}>
+                            {photoUri ? (
+                                <Image source={{ uri: photoUri }} style={styles.preview} resizeMode="cover" />
+                            ) : (
+                                <View style={styles.placeholder}>
+                                    <Ionicons name="camera-outline" size={32} color={colors.textTertiary} />
+                                </View>
+                            )}
+                            <View style={styles.captureButtons}>
+                                {Platform.OS !== "web" ? (
+                                    <Pressable style={styles.captureButton} onPress={() => void pickPhoto(true)}>
+                                        <Ionicons name="camera" size={16} color={ACCENT} />
+                                        <Text style={styles.captureButtonText}>Take photo</Text>
+                                    </Pressable>
+                                ) : null}
+                                <Pressable style={styles.captureButton} onPress={() => void pickPhoto(false)}>
+                                    <Ionicons name="images-outline" size={16} color={ACCENT} />
+                                    <Text style={styles.captureButtonText}>
+                                        {photoUri ? "Choose another" : "Choose photo"}
+                                    </Text>
+                                </Pressable>
+                            </View>
+                        </View>
+                    ) : (
+                        <View style={styles.captureArea}>
+                            <Pressable
+                                style={[styles.recordButton, recorder.state === "recording" && styles.recordButtonActive]}
+                                onPress={() => {
+                                    if (recorder.state === "recording") void recorder.stopRecording();
+                                    else void recorder.startRecording();
+                                }}
+                                disabled={sending}
+                            >
+                                <Ionicons
+                                    name={recorder.state === "recording" ? "stop" : "mic"}
+                                    size={28}
+                                    color={recorder.state === "recording" ? colors.background : ACCENT}
+                                />
+                            </Pressable>
+                            <Text style={styles.recordStatus}>
+                                {recorder.state === "recording"
+                                    ? `Recording… ${recorder.durationSeconds}s`
+                                    : recorder.recordingUri
+                                      ? `Recorded ${recorder.durationSeconds}s — tap the mic to redo`
+                                      : `Tap to record (up to ${MAX_AUDIO_SECONDS}s)`}
+                            </Text>
+                        </View>
+                    )}
+
+                    {error ? <Text style={styles.error}>{error}</Text> : null}
+
+                    <Pressable
+                        onPress={() => void handleSend()}
+                        disabled={!canSend}
+                        style={[styles.sendButton, !canSend && styles.sendButtonDisabled]}
+                    >
+                        {sending ? (
+                            <ActivityIndicator size="small" color={colors.background} />
+                        ) : (
+                            <Text style={styles.sendButtonText}>Send proof & finish dare</Text>
+                        )}
+                    </Pressable>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", justifyContent: "flex-end" },
+    sheet: {
+        backgroundColor: colors.background,
+        borderTopLeftRadius: radius.xxl,
+        borderTopRightRadius: radius.xxl,
+        paddingHorizontal: spacing.lg,
+        paddingBottom: Platform.OS === "ios" ? spacing.xl : spacing.lg,
+    },
+    handle: {
+        width: 36, height: 4, borderRadius: radius.full,
+        backgroundColor: colors.border, alignSelf: "center", marginTop: spacing.sm,
+    },
+    header: {
+        flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+        paddingVertical: spacing.md,
+    },
+    title: { ...typography.title3, color: colors.text },
+    subtitle: { ...typography.subhead, color: colors.textSecondary, marginBottom: spacing.lg },
+    captureArea: { alignItems: "center", gap: spacing.md, marginBottom: spacing.lg },
+    preview: {
+        width: "100%", height: 220,
+        borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
+    },
+    placeholder: {
+        width: "100%", height: 220,
+        borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
+        backgroundColor: colors.backgroundLight,
+        alignItems: "center", justifyContent: "center",
+    },
+    captureButtons: { flexDirection: "row", gap: spacing.sm },
+    captureButton: {
+        flexDirection: "row", alignItems: "center", gap: spacing.xs,
+        paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
+        borderRadius: radius.full, borderWidth: 1, borderColor: ACCENT,
+    },
+    captureButtonText: { ...typography.subhead, color: ACCENT, fontWeight: "600" },
+    recordButton: {
+        width: 72, height: 72, borderRadius: radius.full,
+        borderWidth: 2, borderColor: ACCENT,
+        alignItems: "center", justifyContent: "center",
+        backgroundColor: colors.backgroundLight,
+    },
+    recordButtonActive: { backgroundColor: ACCENT },
+    recordStatus: { ...typography.footnote, color: colors.textSecondary },
+    error: { ...typography.footnote, color: colors.error, marginBottom: spacing.md },
+    sendButton: {
+        backgroundColor: ACCENT,
+        borderRadius: radius.full,
+        paddingVertical: spacing.md,
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 50,
+    },
+    sendButtonDisabled: { opacity: 0.4 },
+    sendButtonText: { ...typography.headline, color: colors.background, fontWeight: "700" },
+});