Initial commit

apps/mobile/app/(app)/profile.tsx

@@ -0,0 +1,168 @@
+import { View, Text, StyleSheet, TouchableOpacity, Alert, Image } from "react-native";
+import { useAuthStore } from "../../src/store";
+import { Ionicons } from "@expo/vector-icons";
+import { supabase } from "../../src/lib/supabase";
+
+export default function ProfileScreen() {
+    const { user, partner, signOut, fetchCouple } = useAuthStore();
+
+    const handleUnpair = async () => {
+        Alert.alert(
+            "Unpair Partner",
+            "Are you sure you want to unpair? This cannot be undone.",
+            [
+                { text: "Cancel", style: "cancel" },
+                {
+                    text: "Unpair",
+                    style: "destructive",
+                    onPress: async () => {
+                        try {
+                            await supabase.functions.invoke("manage-couple", {
+                                method: "DELETE",
+                            });
+                            await fetchCouple(); // Refresh state
+                        } catch (error) {
+                            Alert.alert("Error", "Failed to unpair");
+                        }
+                    },
+                },
+            ]
+        );
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Text style={styles.title}>Profile</Text>
+            </View>
+
+            <View style={styles.content}>
+                <View style={styles.profileCard}>
+                    <View style={styles.avatar}>
+                        <Text style={styles.avatarText}>
+                            {user?.name?.[0]?.toUpperCase() || "U"}
+                        </Text>
+                    </View>
+                    <Text style={styles.name}>{user?.name || "User"}</Text>
+                    <Text style={styles.email}>{user?.email}</Text>
+                </View>
+
+                <Text style={styles.sectionTitle}>Relationship</Text>
+                <View style={styles.section}>
+                    {partner ? (
+                        <View style={styles.row}>
+                            <View style={styles.partnerInfo}>
+                                <Ionicons name="heart" size={24} color="#e94560" />
+                                <Text style={styles.rowText}>Paired with {partner.name || partner.email || 'your partner'}</Text>
+                            </View>
+                            <TouchableOpacity onPress={handleUnpair}>
+                                <Ionicons name="trash-outline" size={20} color="#666" />
+                            </TouchableOpacity>
+                        </View>
+                    ) : (
+                        <View style={styles.row}>
+                            <Text style={styles.rowText}>Not paired yet</Text>
+                        </View>
+                    )}
+                </View>
+
+                <Text style={styles.sectionTitle}>Settings</Text>
+                <View style={styles.section}>
+                    <TouchableOpacity style={styles.row} onPress={signOut}>
+                        <Text style={[styles.rowText, { color: "#ff4444" }]}>Sign Out</Text>
+                        <Ionicons name="log-out-outline" size={20} color="#ff4444" />
+                    </TouchableOpacity>
+                </View>
+
+                <Text style={styles.version}>Sauci v1.0.0</Text>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#1a1a2e",
+    },
+    header: {
+        paddingTop: 60,
+        paddingHorizontal: 24,
+        paddingBottom: 24,
+        borderBottomWidth: 1,
+        borderBottomColor: "#16213e",
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: "bold",
+        color: "#fff",
+    },
+    content: {
+        padding: 24,
+    },
+    profileCard: {
+        alignItems: "center",
+        marginBottom: 40,
+    },
+    avatar: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        backgroundColor: "#e94560",
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: 16,
+    },
+    avatarText: {
+        fontSize: 32,
+        fontWeight: "bold",
+        color: "#fff",
+    },
+    name: {
+        fontSize: 24,
+        fontWeight: "bold",
+        color: "#fff",
+        marginBottom: 4,
+    },
+    email: {
+        fontSize: 14,
+        color: "#666",
+    },
+    sectionTitle: {
+        fontSize: 14,
+        fontWeight: "600",
+        color: "#666",
+        marginBottom: 8,
+        marginLeft: 4,
+        textTransform: "uppercase",
+    },
+    section: {
+        backgroundColor: "#16213e",
+        borderRadius: 12,
+        marginBottom: 24,
+        overflow: "hidden",
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: "#1a1a2e",
+    },
+    partnerInfo: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+    },
+    rowText: {
+        fontSize: 16,
+        color: "#fff",
+    },
+    version: {
+        textAlign: "center",
+        color: "#666",
+        fontSize: 12,
+        marginTop: 24,
+    },
+});