Add E2EE unit tests and improve mobile UI

- Add comprehensive tests for encryption/decryption logic
- Improve error messages for encrypted chat
- Update profile danger zone UI with blur effect
- Refactor typing indicator hook

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

@@ -254,22 +254,17 @@ export function ProfileScreen() {
                 {__DEV__ && (
                     <SettingsSection title="Debug" delay={550}>
                         <MenuItem
-                            icon="refresh"
+                            icon="refresh-outline"
                             label="Reset Swipe Tutorial"
                             description="Show the tutorial again"
                             onPress={async () => {
                                 await resetSwipeTutorial();
                                 Alert.alert("Success", "Swipe tutorial has been reset.");
                             }}
-                            variant="danger"
-                        // Using danger just for yellow/warning color simulation via props? No, MenuItem uses error color for danger.
-                        // I'll stick to default and standard styling or custom if needed. 
-                        // The original used warning color (yellow). 
-                        // I will use default for now.
                         />
                         <View style={styles.preferencesDivider} />
                         <MenuItem
-                            icon="heart"
+                            icon="heart-outline"
                             label="Reset Matches Tutorial"
                             description="Show the tutorial again"
                             onPress={async () => {
@@ -319,7 +314,6 @@ export function ProfileScreen() {
                                     ]
                                 );
                             }}
-                            variant="danger"
                         />
                     </SettingsSection>
                 )}

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

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Modal, TextInput, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Animated, { FadeInDown } from 'react-native-reanimated';
-import { GlassCard } from '../../../components/ui';
+import { BlurView } from 'expo-blur';
+import { GlassCard, GlassButton } from '../../../components/ui';
 import { colors, spacing, radius, typography } from '../../../theme';
 
 interface DangerZoneProps {
@@ -23,8 +24,6 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
             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);
         }
@@ -50,14 +49,15 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                                 </Text>
                             </View>
                         </View>
-                        <TouchableOpacity
-                            style={styles.dangerButton}
+                        <GlassButton
+                            variant="danger"
+                            size="sm"
                             onPress={() => setShowDeleteModal(true)}
-                            activeOpacity={0.7}
+                            icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
+                            style={styles.dangerButton}
                         >
-                            <Ionicons name="trash-outline" size={16} color={colors.error} />
-                            <Text style={styles.dangerButtonText}>Delete</Text>
-                        </TouchableOpacity>
+                            Delete
+                        </GlassButton>
                     </View>
                 </GlassCard>
             </Animated.View>
@@ -68,87 +68,96 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
                 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} />
+                <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="warning" size={32} color={colors.error} />
+                                </View>
+                                <Text style={styles.modalTitle}>Delete All Data?</Text>
                             </View>
-                            <Text style={styles.modalTitle}>Delete All Data?</Text>
-                        </View>
 
-                        <Text style={styles.modalDescription}>
-                            This action cannot be undone. This will permanently delete:
-                        </Text>
+                            <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 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>
-                            <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>
+
+                            <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.deleteButton,
+                                        (deleteConfirmText !== "DELETE" || isDeleting) && styles.deleteButtonDisabled,
+                                    ]}
+                                    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.deleteButtonText}>Delete</Text>
+                                        </>
+                                    )}
+                                </TouchableOpacity>
                             </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>
+                    </KeyboardAvoidingView>
+                </BlurView>
             </Modal>
         </>
     );
@@ -201,39 +210,21 @@ const styles = StyleSheet.create({
         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)",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
         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,
+        padding: spacing.xl,
+        backgroundColor: colors.backgroundLight,
     },
     modalHeader: {
         alignItems: "center",
@@ -260,11 +251,13 @@ const styles = StyleSheet.create({
         textAlign: "center",
     },
     deleteList: {
-        backgroundColor: colors.glass.background,
+        backgroundColor: "rgba(231, 76, 60, 0.1)",
         borderRadius: radius.lg,
         padding: spacing.md,
         gap: spacing.sm,
         marginBottom: spacing.xl,
+        borderWidth: 1,
+        borderColor: 'rgba(231, 76, 60, 0.2)',
     },
     deleteListItem: {
         flexDirection: "row",
@@ -285,16 +278,11 @@ const styles = StyleSheet.create({
         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,
+    inputContainer: {
         marginBottom: spacing.xl,
-        textAlign: "center",
+    },
+    confirmInput: {
+        textAlign: 'center',
     },
     modalButtons: {
         flexDirection: "row",
@@ -302,33 +290,32 @@ const styles = StyleSheet.create({
     },
     cancelButton: {
         flex: 1,
+        backgroundColor: colors.glass.backgroundLight,
         paddingVertical: spacing.md,
         borderRadius: radius.md,
-        backgroundColor: colors.glass.background,
         alignItems: "center",
         borderWidth: 1,
-        borderColor: colors.glass.border,
+        borderColor: colors.glass.borderLight,
     },
     cancelButtonText: {
         ...typography.body,
-        color: colors.text,
+        color: colors.textSecondary,
         fontWeight: "600",
     },
-    confirmDeleteButton: {
+    deleteButton: {
         flex: 1,
-        flexDirection: "row",
+        backgroundColor: colors.error,
         paddingVertical: spacing.md,
         borderRadius: radius.md,
-        backgroundColor: colors.error,
         alignItems: "center",
+        flexDirection: "row",
         justifyContent: "center",
         gap: spacing.xs,
     },
-    confirmDeleteButtonDisabled: {
+    deleteButtonDisabled: {
         opacity: 0.5,
-        backgroundColor: colors.errorLight,
     },
-    confirmDeleteButtonText: {
+    deleteButtonText: {
         ...typography.body,
         color: colors.text,
         fontWeight: "600",

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

@@ -139,6 +139,7 @@ export const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 const styles = StyleSheet.create({
     profileSection: {
         marginBottom: spacing.xl,
+        paddingHorizontal: spacing.lg,
     },
     profileContent: {
         flexDirection: 'row',

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

@@ -33,6 +33,7 @@ export function SettingsSection({ title, delay = 200, children }: SettingsSectio
 const styles = StyleSheet.create({
     container: {
         marginBottom: spacing.lg,
+        paddingHorizontal: spacing.lg,
     },
     title: {
         ...typography.caption1,