Refactor profile screen and organize project structure

- Extract ProfileScreen and components to features/profile
- Move shared hooks and stores to top-level
- Add RLS policies for admin permissions
- Add RELEASING.md guide
- Update .gitignore

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { SettingsSection } from './SettingsSection';
+import { colors, featureColors, spacing, typography } from '../../../theme';
+import { Profile, Couple } from '../../../types';
+
+const ACCENT_GRADIENT = featureColors.profile.gradient as [string, string];
+
+interface CoupleStatusProps {
+    partner: Profile | null;
+    couple: Couple | null;
+    onUnpair: () => void;
+    onPairingPress: () => void;
+}
+
+export const CoupleStatus: React.FC<CoupleStatusProps> = ({
+    partner,
+    couple,
+    onUnpair,
+    onPairingPress,
+}) => {
+    return (
+        <SettingsSection title="Partner" delay={300}>
+            {partner ? (
+                <View style={styles.rowContainer}>
+                    <View style={styles.rowLeft}>
+                        <LinearGradient
+                            colors={ACCENT_GRADIENT}
+                            style={styles.partnerIconGradient}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            <Ionicons name="heart" size={20} color={colors.text} />
+                        </LinearGradient>
+                        <View style={styles.rowTextContainer}>
+                            <Text style={styles.rowValue}>
+                                {partner.name || partner.email || 'Your partner'}
+                            </Text>
+                            <Text style={styles.rowLabel}>Connected</Text>
+                        </View>
+                    </View>
+                    <TouchableOpacity
+                        onPress={onUnpair}
+                        style={styles.unlinkButton}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="unlink-outline" size={18} color={colors.textTertiary} />
+                    </TouchableOpacity>
+                </View>
+            ) : couple ? (
+                <TouchableOpacity
+                    style={styles.rowContainer}
+                    onPress={onPairingPress}
+                    activeOpacity={0.7}
+                >
+                    <View style={styles.rowLeft}>
+                        <LinearGradient
+                            colors={ACCENT_GRADIENT}
+                            style={styles.partnerIconGradient}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            <Ionicons name="hourglass-outline" size={20} color={colors.text} />
+                        </LinearGradient>
+                        <View style={styles.rowTextContainer}>
+                            <Text style={styles.rowValue}>Waiting for partner</Text>
+                            <Text style={styles.rowLabel}>Tap to view invite code</Text>
+                        </View>
+                    </View>
+                    <View style={styles.chevronContainer}>
+                        <Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
+                    </View>
+                </TouchableOpacity>
+            ) : (
+                <TouchableOpacity
+                    style={styles.rowContainer}
+                    onPress={onPairingPress}
+                    activeOpacity={0.7}
+                >
+                    <View style={styles.rowLeft}>
+                        <View style={styles.emptyPartnerIcon}>
+                            <Ionicons name="heart-outline" size={20} color={colors.textTertiary} />
+                        </View>
+                        <View style={styles.rowTextContainer}>
+                            <Text style={styles.rowValueMuted}>Not paired yet</Text>
+                            <Text style={styles.rowLabel}>Tap to connect</Text>
+                        </View>
+                    </View>
+                    <View style={styles.chevronContainer}>
+                        <Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
+                    </View>
+                </TouchableOpacity>
+            )}
+        </SettingsSection>
+    );
+};
+
+const styles = StyleSheet.create({
+    rowContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    rowLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    partnerIconGradient: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    emptyPartnerIcon: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.glass.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    rowTextContainer: {
+        marginLeft: spacing.md,
+        flex: 1,
+    },
+    rowValue: {
+        ...typography.body,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    rowValueMuted: {
+        ...typography.body,
+        fontWeight: '600',
+        color: colors.textSecondary,
+    },
+    rowLabel: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        marginTop: 2,
+    },
+    unlinkButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: colors.glass.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    chevronContainer: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: colors.glass.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

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

@@ -0,0 +1,336 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Modal, TextInput, ActivityIndicator } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { GlassCard } from '../../../components/ui';
+import { colors, spacing, radius, typography } from '../../../theme';
+
+interface DangerZoneProps {
+    onDeleteRelationship: () => Promise<void>;
+}
+
+export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship }) => {
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [deleteConfirmText, setDeleteConfirmText] = useState("");
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const handleDelete = async () => {
+        if (deleteConfirmText !== "DELETE") return;
+        setIsDeleting(true);
+        try {
+            await onDeleteRelationship();
+            setShowDeleteModal(false);
+            setDeleteConfirmText("");
+        } catch (error) {
+            // Error handling relies on parent throwing or managing its own alerts
+            // If parent throws, we stay on modal or close it?
+            // Usually parent alerts.
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    return (
+        <>
+            <Animated.View
+                entering={FadeInDown.delay(600).duration(500)}
+                style={styles.section}
+            >
+                <Text style={styles.dangerSectionTitle}>Danger Zone</Text>
+                <GlassCard style={styles.dangerCard}>
+                    <View style={styles.dangerContent}>
+                        <View style={styles.dangerInfo}>
+                            <View style={styles.dangerIconContainer}>
+                                <Ionicons name="warning" size={20} color={colors.error} />
+                            </View>
+                            <View style={styles.dangerTextContainer}>
+                                <Text style={styles.dangerTitle}>Delete All Data</Text>
+                                <Text style={styles.dangerDescription}>
+                                    Permanently delete your relationship including all matches, chats, and shared photos.
+                                </Text>
+                            </View>
+                        </View>
+                        <TouchableOpacity
+                            style={styles.dangerButton}
+                            onPress={() => setShowDeleteModal(true)}
+                            activeOpacity={0.7}
+                        >
+                            <Ionicons name="trash-outline" size={16} color={colors.error} />
+                            <Text style={styles.dangerButtonText}>Delete</Text>
+                        </TouchableOpacity>
+                    </View>
+                </GlassCard>
+            </Animated.View>
+
+            <Modal
+                visible={showDeleteModal}
+                transparent
+                animationType="fade"
+                onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
+            >
+                <View style={styles.modalOverlay}>
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <View style={styles.modalIconContainer}>
+                                <Ionicons name="warning" size={32} color={colors.error} />
+                            </View>
+                            <Text style={styles.modalTitle}>Delete All Data?</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="heart-dislike" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>Your couple connection</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="checkmark-circle" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All matches and responses</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="chatbubbles" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All chat messages</Text>
+                            </View>
+                            <View style={styles.deleteListItem}>
+                                <Ionicons name="images" size={16} color={colors.error} />
+                                <Text style={styles.deleteListText}>All shared photos</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={!isDeleting}
+                        />
+
+                        <View style={styles.modalButtons}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={() => {
+                                    setShowDeleteModal(false);
+                                    setDeleteConfirmText("");
+                                }}
+                                disabled={isDeleting}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.cancelButtonText}>Cancel</Text>
+                            </TouchableOpacity>
+
+                            <TouchableOpacity
+                                style={[
+                                    styles.confirmDeleteButton,
+                                    deleteConfirmText !== "DELETE" && styles.confirmDeleteButtonDisabled,
+                                ]}
+                                onPress={handleDelete}
+                                disabled={deleteConfirmText !== "DELETE" || isDeleting}
+                                activeOpacity={0.7}
+                            >
+                                {isDeleting ? (
+                                    <ActivityIndicator size="small" color={colors.text} />
+                                ) : (
+                                    <>
+                                        <Ionicons name="trash" size={16} color={colors.text} />
+                                        <Text style={styles.confirmDeleteButtonText}>Delete</Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    section: {
+        paddingHorizontal: spacing.lg,
+        marginBottom: spacing.lg,
+    },
+    dangerSectionTitle: {
+        ...typography.caption1,
+        color: colors.error,
+        textTransform: "uppercase",
+        letterSpacing: 1.5,
+        marginBottom: spacing.sm,
+        marginLeft: spacing.xs,
+    },
+    dangerCard: {
+        borderColor: 'rgba(231, 76, 60, 0.3)',
+        borderWidth: 1,
+    },
+    dangerContent: {
+        gap: spacing.md,
+    },
+    dangerInfo: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
+    dangerIconContainer: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.errorLight,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    dangerTextContainer: {
+        flex: 1,
+        marginLeft: spacing.md,
+    },
+    dangerTitle: {
+        ...typography.headline,
+        color: colors.text,
+        marginBottom: spacing.xs,
+    },
+    dangerDescription: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        lineHeight: 20,
+    },
+    dangerButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: colors.errorLight,
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: 'rgba(231, 76, 60, 0.3)',
+        gap: spacing.xs,
+        alignSelf: "flex-end",
+    },
+    dangerButtonText: {
+        ...typography.subhead,
+        color: colors.error,
+        fontWeight: "600",
+    },
+    // Modal styles
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: spacing.lg,
+    },
+    modalContent: {
+        backgroundColor: colors.backgroundLight,
+        borderRadius: radius.xl,
+        padding: spacing.xl,
+        width: "100%",
+        maxWidth: 400,
+        borderWidth: 1,
+        borderColor: colors.glass.border,
+    },
+    modalHeader: {
+        alignItems: "center",
+        marginBottom: spacing.lg,
+    },
+    modalIconContainer: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        backgroundColor: colors.errorLight,
+        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",
+    },
+    deleteList: {
+        backgroundColor: colors.glass.background,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+        gap: spacing.sm,
+        marginBottom: spacing.xl,
+    },
+    deleteListItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    deleteListText: {
+        ...typography.subhead,
+        color: colors.text,
+    },
+    confirmLabel: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        marginBottom: spacing.xs,
+        textAlign: "center",
+    },
+    confirmKeyword: {
+        fontWeight: "bold",
+        color: colors.error,
+    },
+    confirmInput: {
+        backgroundColor: colors.background,
+        borderRadius: radius.md,
+        padding: spacing.md,
+        color: colors.text,
+        fontSize: 16,
+        borderWidth: 1,
+        borderColor: colors.error,
+        marginBottom: spacing.xl,
+        textAlign: "center",
+    },
+    modalButtons: {
+        flexDirection: "row",
+        gap: spacing.md,
+    },
+    cancelButton: {
+        flex: 1,
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        backgroundColor: colors.glass.background,
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: colors.glass.border,
+    },
+    cancelButtonText: {
+        ...typography.body,
+        color: colors.text,
+        fontWeight: "600",
+    },
+    confirmDeleteButton: {
+        flex: 1,
+        flexDirection: "row",
+        paddingVertical: spacing.md,
+        borderRadius: radius.md,
+        backgroundColor: colors.error,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.xs,
+    },
+    confirmDeleteButtonDisabled: {
+        opacity: 0.5,
+        backgroundColor: colors.errorLight,
+    },
+    confirmDeleteButtonText: {
+        ...typography.body,
+        color: colors.text,
+        fontWeight: "600",
+    },
+});

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { colors, spacing, radius, typography, featureColors } from '../../../theme';
+
+export interface MenuItemProps {
+    /** Icon name (Ionicons) */
+    icon: string;
+    /** Main label text */
+    label: string;
+    /** Description text below label */
+    description?: string;
+    /** Action when pressed */
+    onPress: () => void;
+    /** Optional element to show on the right */
+    rightElement?: React.ReactNode;
+    /** Whether to show chevron arrow */
+    showChevron?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'danger';
+    /** Disable the item */
+    disabled?: boolean;
+}
+
+const ACCENT_GRADIENT = featureColors.profile.gradient as [string, string];
+
+/**
+ * Reusable menu item row for settings screens.
+ */
+export function MenuItem({
+    icon,
+    label,
+    description,
+    onPress,
+    rightElement,
+    showChevron = true,
+    variant = 'default',
+    disabled = false,
+}: MenuItemProps) {
+    const isDanger = variant === 'danger';
+    const iconColor = isDanger ? colors.error : colors.text;
+    const labelColor = isDanger ? colors.error : colors.text;
+
+    return (
+        <TouchableOpacity
+            style={styles.container}
+            onPress={onPress}
+            activeOpacity={0.7}
+            disabled={disabled}
+        >
+            <View style={styles.left}>
+                {isDanger ? (
+                    <View style={styles.dangerIconContainer}>
+                        <Ionicons name={icon as any} size={20} color={iconColor} />
+                    </View>
+                ) : (
+                    <LinearGradient
+                        colors={ACCENT_GRADIENT}
+                        style={styles.iconContainer}
+                        start={{ x: 0, y: 0 }}
+                        end={{ x: 1, y: 1 }}
+                    >
+                        <Ionicons name={icon as any} size={20} color={iconColor} />
+                    </LinearGradient>
+                )}
+                <View style={styles.textContainer}>
+                    <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
+                    {description && (
+                        <Text style={styles.description}>{description}</Text>
+                    )}
+                </View>
+            </View>
+            {rightElement || (showChevron && (
+                <View style={styles.chevron}>
+                    <Ionicons name="chevron-forward" size={18} color={colors.textTertiary} />
+                </View>
+            ))}
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: spacing.xs,
+    },
+    left: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: spacing.md,
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: radius.lg,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: spacing.md,
+    },
+    dangerIconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: radius.lg,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: spacing.md,
+        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    },
+    textContainer: {
+        flex: 1,
+    },
+    label: {
+        ...typography.body,
+        fontWeight: '500',
+    },
+    description: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        marginTop: 2,
+    },
+    chevron: {
+        padding: spacing.xs,
+    },
+});
+
+export default MenuItem;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { SettingsSection } from './SettingsSection';
+import { SwitchItem } from './SwitchItem';
+import { colors, spacing } from '../../../theme';
+
+interface PrivacySettingsProps {
+    showExplicit: boolean;
+    isUpdatingExplicit: boolean;
+    onExplicitToggle: (value: boolean) => void;
+    biometricAvailable: boolean;
+    biometricEnabled: boolean;
+    biometricType: string;
+    isUpdatingBiometric: boolean;
+    onBiometricToggle: (value: boolean) => void;
+}
+
+export const PrivacySettings: React.FC<PrivacySettingsProps> = ({
+    showExplicit,
+    isUpdatingExplicit,
+    onExplicitToggle,
+    biometricAvailable,
+    biometricEnabled,
+    biometricType,
+    isUpdatingBiometric,
+    onBiometricToggle,
+}) => {
+    return (
+        <SettingsSection title="Preferences" delay={375}>
+            <SwitchItem
+                icon="flame"
+                label="Spicy Content"
+                description="Show spicy question packs"
+                value={showExplicit}
+                onValueChange={onExplicitToggle}
+                disabled={isUpdatingExplicit}
+            />
+            {biometricAvailable && (
+                <>
+                    <View style={styles.divider} />
+                    <SwitchItem
+                        icon={biometricType === "Face ID" || biometricType === "Face Recognition" ? "scan-outline" : "finger-print-outline"}
+                        label={biometricType}
+                        description="Require unlock when opening app"
+                        value={biometricEnabled}
+                        onValueChange={onBiometricToggle}
+                        disabled={isUpdatingBiometric}
+                    />
+                </>
+            )}
+        </SettingsSection>
+    );
+};
+
+const styles = StyleSheet.create({
+    divider: {
+        height: 1,
+        backgroundColor: colors.glass.border,
+        marginVertical: spacing.md,
+    },
+});

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

@@ -0,0 +1,263 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, ActivityIndicator } from 'react-native';
+import { Image } from 'expo-image';
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { GlassCard } from '../../../components/ui';
+import { colors, featureColors, spacing, typography } from '../../../theme';
+import { Profile } from '../../../types';
+
+const ACCENT_GRADIENT = featureColors.profile.gradient as [string, string];
+
+interface ProfileHeaderProps {
+    user: Profile | null;
+    isUploadingAvatar: boolean;
+    isEditingName: boolean;
+    newName: string;
+    isUpdatingName: boolean;
+    onAvatarPress: () => void;
+    onNewNameChange: (text: string) => void;
+    onUpdateName: () => void;
+    onCancelEditName: () => void;
+    onStartEditingName: () => void;
+}
+
+export const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+    user,
+    isUploadingAvatar,
+    isEditingName,
+    newName,
+    isUpdatingName,
+    onAvatarPress,
+    onNewNameChange,
+    onUpdateName,
+    onCancelEditName,
+    onStartEditingName,
+}) => {
+    return (
+        <Animated.View
+            entering={FadeInDown.delay(200).duration(500)}
+            style={styles.profileSection}
+        >
+            <GlassCard variant="elevated">
+                <View style={styles.profileContent}>
+                    <TouchableOpacity
+                        onPress={onAvatarPress}
+                        disabled={isUploadingAvatar}
+                        activeOpacity={0.7}
+                        style={styles.avatarTouchable}
+                    >
+                        <LinearGradient
+                            colors={ACCENT_GRADIENT}
+                            style={styles.avatarGradient}
+                            start={{ x: 0, y: 0 }}
+                            end={{ x: 1, y: 1 }}
+                        >
+                            {user?.avatar_url ? (
+                                <Image
+                                    source={{ uri: user.avatar_url }}
+                                    style={styles.avatarImage}
+                                    cachePolicy="disk"
+                                    transition={200}
+                                />
+                            ) : (
+                                <View style={styles.avatarInner}>
+                                    <Text style={styles.avatarText}>
+                                        {user?.name?.[0]?.toUpperCase() || "U"}
+                                    </Text>
+                                </View>
+                            )}
+                        </LinearGradient>
+                        {isUploadingAvatar ? (
+                            <View style={styles.avatarOverlay}>
+                                <ActivityIndicator size="large" color={colors.text} />
+                            </View>
+                        ) : (
+                            <View style={styles.avatarEditBadge}>
+                                <Ionicons name="camera" size={14} color={colors.text} />
+                            </View>
+                        )}
+                    </TouchableOpacity>
+                    <View style={styles.profileInfo}>
+                        {isEditingName ? (
+                            <View style={styles.editNameContainer}>
+                                <TextInput
+                                    style={styles.nameInput}
+                                    value={newName}
+                                    onChangeText={onNewNameChange}
+                                    placeholder="Enter your name"
+                                    placeholderTextColor={colors.textTertiary}
+                                    autoFocus
+                                    editable={!isUpdatingName}
+                                    onSubmitEditing={onUpdateName}
+                                    returnKeyType="done"
+                                />
+                                <View style={styles.editNameButtons}>
+                                    <TouchableOpacity
+                                        style={styles.cancelEditButton}
+                                        onPress={onCancelEditName}
+                                        disabled={isUpdatingName}
+                                        activeOpacity={0.7}
+                                    >
+                                        <Ionicons name="close" size={20} color={colors.textSecondary} />
+                                    </TouchableOpacity>
+                                    <TouchableOpacity
+                                        style={styles.saveEditButton}
+                                        onPress={onUpdateName}
+                                        disabled={isUpdatingName}
+                                        activeOpacity={0.7}
+                                    >
+                                        {isUpdatingName ? (
+                                            <ActivityIndicator size="small" color={colors.text} />
+                                        ) : (
+                                            <Ionicons name="checkmark" size={20} color={colors.text} />
+                                        )}
+                                    </TouchableOpacity>
+                                </View>
+                            </View>
+                        ) : (
+                            <TouchableOpacity
+                                style={styles.nameContainer}
+                                onPress={onStartEditingName}
+                                activeOpacity={0.7}
+                            >
+                                <Text style={styles.name}>{user?.name || "User"}</Text>
+                                <View style={styles.editNameIcon}>
+                                    <Ionicons name="pencil" size={14} color={colors.textTertiary} />
+                                </View>
+                            </TouchableOpacity>
+                        )}
+                        <Text style={styles.email}>{user?.email}</Text>
+                    </View>
+                </View>
+            </GlassCard>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    profileSection: {
+        marginBottom: spacing.xl,
+    },
+    profileContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatarTouchable: {
+        marginRight: spacing.md,
+    },
+    avatarGradient: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        padding: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: featureColors.profile.accent,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    avatarImage: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 40,
+        backgroundColor: colors.background,
+    },
+    avatarInner: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 40,
+        backgroundColor: colors.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    avatarText: {
+        ...typography.title1,
+        fontSize: 32,
+        color: colors.text,
+    },
+    avatarOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 40,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    avatarEditBadge: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        backgroundColor: colors.surfaceSolid,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 2,
+        borderColor: colors.background,
+    },
+    profileInfo: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    nameContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: spacing.xs,
+    },
+    name: {
+        ...typography.title2,
+        color: colors.text,
+        marginRight: spacing.xs,
+    },
+    editNameIcon: {
+        padding: 4,
+    },
+    email: {
+        ...typography.body,
+        color: colors.textSecondary,
+        fontSize: 14,
+    },
+    editNameContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    nameInput: {
+        ...typography.title2,
+        color: colors.text,
+        flex: 1,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        marginRight: spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: featureColors.profile.accent,
+    },
+    editNameButtons: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    saveEditButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: featureColors.profile.accent,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: spacing.xs,
+    },
+    cancelEditButton: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: colors.glass.highlight,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { GlassCard } from '../../../components/ui';
+import { colors, typography, spacing } from '../../../theme';
+
+export interface SettingsSectionProps {
+    /** Section title displayed above the card */
+    title: string;
+    /** Animation delay in ms */
+    delay?: number;
+    /** Content to render inside the card */
+    children: React.ReactNode;
+}
+
+/**
+ * Reusable settings section with title and glass card container.
+ */
+export function SettingsSection({ title, delay = 200, children }: SettingsSectionProps) {
+    return (
+        <Animated.View
+            entering={FadeInDown.delay(delay).duration(500)}
+            style={styles.container}
+        >
+            <Text style={styles.title}>{title}</Text>
+            <GlassCard>
+                {children}
+            </GlassCard>
+        </Animated.View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: spacing.lg,
+    },
+    title: {
+        ...typography.caption1,
+        fontWeight: '600',
+        letterSpacing: 2,
+        color: colors.textTertiary,
+        marginBottom: spacing.sm,
+        textTransform: 'uppercase',
+    },
+});
+
+export default SettingsSection;

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { View, Text, Switch, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Ionicons } from '@expo/vector-icons';
+import { colors, spacing, radius, typography, featureColors } from '../../../theme';
+
+export interface SwitchItemProps {
+    /** Icon name (Ionicons) */
+    icon: string;
+    /** Main label text */
+    label: string;
+    /** Description text below label */
+    description: string;
+    /** Switch value */
+    value: boolean;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Callback when value changes */
+    onValueChange: (value: boolean) => void;
+}
+
+const ACCENT_GRADIENT = featureColors.profile.gradient as [string, string];
+const ACCENT_COLOR = featureColors.profile.accent;
+
+/**
+ * Reusable toggle switch row for settings screens.
+ */
+export function SwitchItem({
+    icon,
+    label,
+    description,
+    value,
+    disabled = false,
+    onValueChange,
+}: SwitchItemProps) {
+    return (
+        <View style={styles.container}>
+            <View style={styles.left}>
+                <LinearGradient
+                    colors={ACCENT_GRADIENT}
+                    style={styles.iconContainer}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 1 }}
+                >
+                    <Ionicons name={icon as any} size={20} color={colors.text} />
+                </LinearGradient>
+                <View style={styles.textContainer}>
+                    <Text style={styles.label}>{label}</Text>
+                    <Text style={styles.description}>{description}</Text>
+                </View>
+            </View>
+            <Switch
+                value={value}
+                onValueChange={onValueChange}
+                disabled={disabled}
+                trackColor={{ false: colors.glass.border, true: colors.secondaryLight }}
+                thumbColor={value ? ACCENT_COLOR : colors.textTertiary}
+                ios_backgroundColor={colors.glass.border}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: spacing.xs,
+    },
+    left: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: spacing.md,
+    },
+    iconContainer: {
+        width: 40,
+        height: 40,
+        borderRadius: radius.lg,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: spacing.md,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    label: {
+        ...typography.body,
+        fontWeight: '500',
+        color: colors.text,
+    },
+    description: {
+        ...typography.caption1,
+        color: colors.textSecondary,
+        marginTop: 2,
+    },
+});
+
+export default SwitchItem;

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

@@ -0,0 +1,12 @@
+// Profile feature components
+export { ProfileHeader } from './ProfileHeader';
+export { CoupleStatus } from './CoupleStatus';
+export { PrivacySettings } from './PrivacySettings';
+export { DangerZone } from './DangerZone';
+
+export { SettingsSection } from './SettingsSection';
+export type { SettingsSectionProps } from './SettingsSection';
+export { SwitchItem } from './SwitchItem';
+export type { SwitchItemProps } from './SwitchItem';
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';