jjbrunton/Sauci
1
0 Fork 0
mirror of https://github.com/jjbrunton/Sauci.git synced 2026-10-31 18:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
jjbrunton committed 2025-12-28 16:51:32 +00:00
1 parent 4d53d83769
commit 6ff5bc62f2
17 files changed
+2599 -1136
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/mobile/app/(app)/_layout.tsx
+31 -12
View File
@@ -1,7 +1,22 @@
import { Tabs, Redirect } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { View, ActivityIndicator, StyleSheet } from "react-native";
import { View, ActivityIndicator, StyleSheet, Platform } from "react-native";
import { BlurView } from "expo-blur";
import { useAuthStore, useMatchStore } from "../../src/store";
import { colors, blur } from "../../src/theme";
function TabBarBackground() {
if (Platform.OS === 'ios') {
return (
<BlurView
intensity={blur.medium}
tint="dark"
style={StyleSheet.absoluteFill}
/>
);
}
return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors.glass.backgroundLight }]} />;
}
export default function AppLayout() {
const { isAuthenticated, isLoading } = useAuthStore();
@@ -11,7 +26,7 @@ export default function AppLayout() {
if (isLoading) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#e94560" />
<ActivityIndicator size="large" color={colors.primary} />
</View>
);
}
@@ -25,19 +40,22 @@ export default function AppLayout() {
<Tabs
screenOptions={{
headerShown: false,
tabBarBackground: () => <TabBarBackground />,
tabBarStyle: {
backgroundColor: "#16213e",
borderTopColor: "#0f3460",
position: 'absolute',
backgroundColor: 'transparent',
borderTopColor: colors.glass.border,
borderTopWidth: 1,
paddingTop: 8,
paddingBottom: 8,
height: 60,
paddingBottom: Platform.OS === 'ios' ? 28 : 8,
height: Platform.OS === 'ios' ? 88 : 64,
elevation: 0,
},
tabBarActiveTintColor: "#e94560",
tabBarInactiveTintColor: "#666",
tabBarActiveTintColor: colors.primary,
tabBarInactiveTintColor: colors.textTertiary,
tabBarLabelStyle: {
fontSize: 12,
fontWeight: "500",
fontSize: 11,
fontWeight: "600",
},
}}
>
@@ -77,8 +95,9 @@ export default function AppLayout() {
),
tabBarBadge: newMatchesCount > 0 ? newMatchesCount : undefined,
tabBarBadgeStyle: {
backgroundColor: "#e94560",
backgroundColor: colors.primary,
fontSize: 10,
fontWeight: '600',
},
}}
/>
@@ -112,6 +131,6 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#1a1a2e",
backgroundColor: colors.background,
},
});
apps/mobile/app/(app)/chat/[id].tsx
+272 -214
View File
@@ -1,13 +1,18 @@
import { useState, useEffect, useRef } from "react";
import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform, Image, ActivityIndicator, Alert, AppState } from "react-native";
import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform, Image, ActivityIndicator, Alert } from "react-native";
import { useLocalSearchParams, useRouter, Stack } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { BlurView } from "expo-blur";
import { LinearGradient } from "expo-linear-gradient";
import Animated, { FadeIn, FadeInUp } from "react-native-reanimated";
import { supabase } from "../../../src/lib/supabase";
import { useAuthStore } from "../../../src/store";
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from 'expo-file-system';
import { decode } from 'base64-arraybuffer';
import { Database } from "../../../src/types/supabase";
import { GradientBackground, GlassCard } from "../../../src/components/ui";
import { colors, gradients, spacing, radius, typography, blur, shadows } from "../../../src/theme";
type Message = Database["public"]["Tables"]["messages"]["Row"];
@@ -27,7 +32,6 @@ export default function ChatScreen() {
useEffect(() => {
if (!matchId) return;
// Fetch match context (question and responses)
const fetchMatch = async () => {
const { data } = await supabase
.from("matches")
@@ -36,7 +40,6 @@ export default function ChatScreen() {
.single();
if (data) {
// Fetch responses for both users in this couple for this question
const { data: responses } = await supabase
.from("responses")
.select("*, profiles(name)")
@@ -48,9 +51,8 @@ export default function ChatScreen() {
};
fetchMatch();
// Fetch initial messages and mark as read
const fetchMessagesAndMarkRead = async () => {
const { data, error } = await supabase
const { data } = await supabase
.from("messages")
.select("*")
.eq("match_id", matchId)
@@ -59,7 +61,6 @@ export default function ChatScreen() {
if (data) {
setMessages(data);
// Identify unread messages from partner
const unreadIds = data
.filter(m => m.user_id !== user?.id && !m.read_at)
.map(m => m.id);
@@ -70,7 +71,6 @@ export default function ChatScreen() {
.update({ read_at: new Date().toISOString() })
.in("id", unreadIds);
// Optimistically update local state
setMessages(prev => prev.map(m =>
unreadIds.includes(m.id) ? { ...m, read_at: new Date().toISOString() } : m
));
@@ -80,7 +80,6 @@ export default function ChatScreen() {
fetchMessagesAndMarkRead();
// Subscribe to new messages, updates (read receipts), and typing
const channel = supabase
.channel(`chat:${matchId}`)
.on(
@@ -94,7 +93,6 @@ export default function ChatScreen() {
async (payload) => {
const newMessage = payload.new as Message;
// If receiving a message from partner, mark as read immediately since we are in the chat
if (newMessage.user_id !== user?.id) {
await supabase
.from("messages")
@@ -104,7 +102,7 @@ export default function ChatScreen() {
}
setMessages((prev) => [newMessage, ...prev]);
setPartnerTyping(false); // Stop typing indicator if they sent a message
setPartnerTyping(false);
}
)
.on(
@@ -126,7 +124,6 @@ export default function ChatScreen() {
if (payload.payload.userId !== user?.id) {
setPartnerTyping(true);
// Auto-hide typing indicator after 3s
if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
typingTimeoutRef.current = setTimeout(() => {
setPartnerTyping(false);
@@ -242,92 +239,48 @@ export default function ChatScreen() {
};
const revealMessage = async (messageId: string) => {
// Optimistic update
setMessages(prev => prev.map(m =>
m.id === messageId ? { ...m, media_viewed_at: new Date().toISOString() } : m
));
const { error } = await supabase
await supabase
.from("messages")
.update({ media_viewed_at: new Date().toISOString() })
.eq("id", messageId);
if (error) {
console.error("Failed to mark as viewed", error);
}
};
const renderMessage = ({ item }: { item: Message }) => {
const renderMessage = ({ item, index }: { item: Message; index: number }) => {
const isMe = item.user_id === user?.id;
return (
<View style={[styles.messageRow, isMe ? styles.myMessageRow : styles.theirMessageRow]}>
<View style={[styles.bubble, isMe ? styles.myBubble : styles.theirBubble]}>
{item.media_path ? (
<View>
<Image
source={{ uri: item.media_path }}
style={styles.messageImage}
blurRadius={(!isMe && !item.media_viewed_at) ? 20 : 0}
/>
{(!isMe && !item.media_viewed_at) && (
<TouchableOpacity
style={styles.revealOverlay}
activeOpacity={0.8}
onPress={() => revealMessage(item.id)}
>
<View style={styles.revealContent}>
<Ionicons name="eye-off-outline" size={32} color="#fff" />
<Text style={styles.revealText}>Tap to reveal</Text>
</View>
</TouchableOpacity>
)}
</View>
) : (
<Text style={styles.messageText}>{item.content}</Text>
)}
<View style={styles.metaContainer}>
<Text style={[styles.timestamp, isMe ? styles.myTimestamp : styles.theirTimestamp]}>
{new Date(item.created_at!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</Text>
{isMe && (
<Ionicons
name={item.read_at ? "checkmark-done-outline" : "checkmark-outline"}
size={14}
color={item.read_at ? "#4cd137" : "rgba(255,255,255,0.7)"}
style={styles.readIcon}
/>
)}
<Animated.View
entering={FadeInUp.delay(index * 30).duration(200)}
style={[styles.messageRow, isMe ? styles.myMessageRow : styles.theirMessageRow]}
>
{isMe ? (
<LinearGradient
colors={gradients.primary as [string, string]}
style={[styles.bubble, styles.myBubble]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<MessageContent item={item} isMe={isMe} revealMessage={revealMessage} />
</LinearGradient>
) : (
<View style={[styles.bubble, styles.theirBubble]}>
<MessageContent item={item} isMe={isMe} revealMessage={revealMessage} />
</View>
</View>
</View>
)}
</Animated.View>
);
};
return (
<View style={styles.container}>
<GradientBackground>
<Stack.Screen options={{
title: "Chat",
headerTitle: match?.question?.text ? () => (
<View style={styles.headerTitleContainer}>
<Text style={styles.headerTitle} numberOfLines={2}>
{match.question.text}
{match.question.partner_text ? ` & ${match.question.partner_text}` : ""}
</Text>
{match.responses && match.responses.length > 0 && (
<View style={styles.answersContainer}>
{match.responses.map((response) => (
<Text key={response.user_id} style={styles.answerText}>
{response.profiles?.name || 'You'}: {response.answer}
</Text>
))}
</View>
)}
</View>
) : "Chat",
headerStyle: { backgroundColor: "#16213e" },
headerTintColor: "#fff",
headerBackTitleVisible: false,
headerStyle: { backgroundColor: colors.backgroundLight },
headerTintColor: colors.text,
headerShadowVisible: false,
}} />
<KeyboardAvoidingView
@@ -337,21 +290,25 @@ export default function ChatScreen() {
>
{/* Sticky top bar with question and answers */}
{match?.question && (
<View style={styles.stickyTopBar}>
<Text style={styles.stickyQuestionText}>
{match.question.text}
{match.question.partner_text ? ` & ${match.question.partner_text}` : ""}
</Text>
{match.responses && match.responses.length > 0 && (
<View style={styles.stickyAnswersContainer}>
{match.responses.map((response) => (
<Text key={response.user_id} style={styles.stickyAnswerText}>
{response.user_id === user?.id ? 'You' : (response.profiles?.name || 'Partner')}: {response.answer}
</Text>
))}
</View>
)}
</View>
<GlassCard style={styles.stickyTopBar} noPadding>
<View style={styles.stickyContent}>
<Text style={styles.stickyQuestionText} numberOfLines={2}>
{match.question.text}
{match.question.partner_text ? ` & ${match.question.partner_text}` : ""}
</Text>
{match.responses && match.responses.length > 0 && (
<View style={styles.stickyAnswersContainer}>
{match.responses.map((response: any) => (
<View key={response.user_id} style={styles.answerBadge}>
<Text style={styles.stickyAnswerText}>
{response.user_id === user?.id ? 'You' : (response.profiles?.name || 'Partner')}: {response.answer}
</Text>
</View>
))}
</View>
)}
</View>
</GlassCard>
)}
<FlatList
@@ -362,59 +319,165 @@ export default function ChatScreen() {
inverted
contentContainerStyle={styles.listContent}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
ListHeaderComponent={
partnerTyping ? (
<View style={styles.typingContainer}>
<Animated.View
entering={FadeIn.duration(200)}
style={styles.typingContainer}
>
<Text style={styles.typingText}>Partner is typing...</Text>
</View>
</Animated.View>
) : null
}
/>
<View style={styles.inputContainer}>
<TouchableOpacity onPress={handlePickImage} disabled={uploading} style={styles.attachButton}>
{uploading ? (
<ActivityIndicator color="#e94560" size="small" />
) : (
<Ionicons name="image-outline" size={24} color="#e94560" />
)}
</TouchableOpacity>
<TextInput
style={styles.input}
value={inputText}
onChangeText={handleTyping}
placeholder="Type a message..."
placeholderTextColor="#666"
multiline
/>
<TouchableOpacity onPress={handleSend} disabled={!inputText.trim()} style={styles.sendButton}>
<Ionicons
name="send"
size={24}
color={inputText.trim() ? "#e94560" : "#666"}
{/* Input bar with glass effect */}
{Platform.OS === 'ios' ? (
<BlurView intensity={blur.medium} tint="dark" style={styles.inputWrapper}>
<InputBar
inputText={inputText}
uploading={uploading}
onChangeText={handleTyping}
onSend={handleSend}
onPickImage={handlePickImage}
/>
</TouchableOpacity>
</View>
</BlurView>
) : (
<View style={[styles.inputWrapper, styles.inputWrapperAndroid]}>
<InputBar
inputText={inputText}
uploading={uploading}
onChangeText={handleTyping}
onSend={handleSend}
onPickImage={handlePickImage}
/>
</View>
)}
</KeyboardAvoidingView>
</GradientBackground>
);
}
function MessageContent({
item,
isMe,
revealMessage,
}: {
item: Message;
isMe: boolean;
revealMessage: (id: string) => void;
}) {
if (item.media_path) {
return (
<View>
<Image
source={{ uri: item.media_path }}
style={styles.messageImage}
blurRadius={(!isMe && !item.media_viewed_at) ? 20 : 0}
/>
{(!isMe && !item.media_viewed_at) && (
<TouchableOpacity
style={styles.revealOverlay}
activeOpacity={0.8}
onPress={() => revealMessage(item.id)}
>
<View style={styles.revealContent}>
<Ionicons name="eye-off-outline" size={28} color={colors.text} />
<Text style={styles.revealText}>Tap to reveal</Text>
</View>
</TouchableOpacity>
)}
<MessageMeta item={item} isMe={isMe} />
</View>
);
}
return (
<>
<Text style={styles.messageText}>{item.content}</Text>
<MessageMeta item={item} isMe={isMe} />
</>
);
}
function MessageMeta({ item, isMe }: { item: Message; isMe: boolean }) {
return (
<View style={styles.metaContainer}>
<Text style={styles.timestamp}>
{new Date(item.created_at!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</Text>
{isMe && (
<Ionicons
name={item.read_at ? "checkmark-done" : "checkmark"}
size={14}
color={item.read_at ? colors.success : "rgba(255,255,255,0.6)"}
style={styles.readIcon}
/>
)}
</View>
);
}
function InputBar({
inputText,
uploading,
onChangeText,
onSend,
onPickImage,
}: {
inputText: string;
uploading: boolean;
onChangeText: (text: string) => void;
onSend: () => void;
onPickImage: () => void;
}) {
return (
<View style={styles.inputContainer}>
<TouchableOpacity onPress={onPickImage} disabled={uploading} style={styles.attachButton}>
{uploading ? (
<ActivityIndicator color={colors.primary} size="small" />
) : (
<Ionicons name="image-outline" size={24} color={colors.primary} />
)}
</TouchableOpacity>
<View style={styles.inputFieldWrapper}>
<TextInput
style={styles.input}
value={inputText}
onChangeText={onChangeText}
placeholder="Type a message..."
placeholderTextColor={colors.textTertiary}
multiline
/>
</View>
<TouchableOpacity
onPress={onSend}
disabled={!inputText.trim()}
style={[styles.sendButton, inputText.trim() && styles.sendButtonActive]}
>
<Ionicons
name="send"
size={20}
color={inputText.trim() ? colors.text : colors.textTertiary}
/>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
keyboardAvoiding: {
flex: 1,
},
listContent: {
padding: 16,
padding: spacing.md,
paddingBottom: spacing.lg,
},
messageRow: {
marginBottom: 16,
marginBottom: spacing.sm,
flexDirection: "row",
},
myMessageRow: {
@@ -424,148 +487,143 @@ const styles = StyleSheet.create({
justifyContent: "flex-start",
},
bubble: {
maxWidth: "75%",
padding: 12,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
maxWidth: "78%",
padding: spacing.md,
borderRadius: radius.xl,
...shadows.sm,
},
myBubble: {
backgroundColor: "#e94560",
borderBottomRightRadius: 4,
borderBottomRightRadius: radius.xs,
},
theirBubble: {
backgroundColor: "#16213e",
backgroundColor: colors.glass.backgroundLight,
borderWidth: 1,
borderColor: "#0f3460",
borderBottomLeftRadius: 4,
borderColor: colors.glass.border,
borderBottomLeftRadius: radius.xs,
},
messageText: {
color: "#fff",
fontSize: 16,
lineHeight: 22,
...typography.body,
color: colors.text,
},
messageImage: {
width: 200,
height: 200,
borderRadius: 12,
backgroundColor: "rgba(0,0,0,0.2)",
borderRadius: radius.md,
backgroundColor: colors.glass.background,
},
metaContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-end",
marginTop: 4,
marginTop: spacing.xs,
},
timestamp: {
fontSize: 10,
},
myTimestamp: {
color: "rgba(255, 255, 255, 0.7)",
},
theirTimestamp: {
color: "rgba(255, 255, 255, 0.4)",
...typography.caption2,
color: "rgba(255, 255, 255, 0.6)",
},
readIcon: {
marginLeft: 4,
marginLeft: spacing.xs,
},
inputWrapper: {
borderTopWidth: 1,
borderTopColor: colors.glass.border,
},
inputWrapperAndroid: {
backgroundColor: colors.glass.backgroundLight,
},
inputContainer: {
flexDirection: "row",
alignItems: "center",
padding: 12,
paddingBottom: Platform.OS === "ios" ? 34 : 12,
backgroundColor: "#16213e",
borderTopWidth: 1,
borderTopColor: "#0f3460",
alignItems: "flex-end",
padding: spacing.sm,
paddingBottom: Platform.OS === "ios" ? spacing.xl : spacing.sm,
},
attachButton: {
padding: 10,
padding: spacing.sm,
marginBottom: spacing.xs,
},
inputFieldWrapper: {
flex: 1,
backgroundColor: colors.glass.background,
borderRadius: radius.xl,
borderWidth: 1,
borderColor: colors.glass.border,
marginHorizontal: spacing.sm,
},
input: {
flex: 1,
backgroundColor: "#0f3460",
borderRadius: 24,
paddingHorizontal: 16,
paddingVertical: 10,
color: "#fff",
maxHeight: 120,
marginHorizontal: 8,
paddingHorizontal: spacing.md,
paddingVertical: spacing.sm,
color: colors.text,
fontSize: 16,
maxHeight: 100,
},
sendButton: {
padding: 10,
},
headerTitleContainer: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: colors.glass.background,
justifyContent: "center",
alignItems: "center",
maxWidth: 200,
marginBottom: spacing.xs,
},
headerTitle: {
color: "#fff",
fontWeight: "bold",
fontSize: 16,
textAlign: "center",
},
answersContainer: {
marginTop: 4,
alignItems: "center",
},
answerText: {
color: "rgba(255,255,255,0.8)",
fontSize: 12,
marginBottom: 2,
sendButtonActive: {
backgroundColor: colors.primary,
},
typingContainer: {
paddingHorizontal: 16,
paddingVertical: 8,
paddingHorizontal: spacing.md,
paddingVertical: spacing.sm,
},
typingText: {
color: "#666",
...typography.caption1,
color: colors.textTertiary,
fontStyle: "italic",
fontSize: 12,
},
revealOverlay: {
...StyleSheet.absoluteFillObject,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.3)",
borderRadius: 12,
backgroundColor: "rgba(0,0,0,0.4)",
borderRadius: radius.md,
},
revealContent: {
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.6)",
padding: 12,
borderRadius: 12,
padding: spacing.md,
borderRadius: radius.md,
},
revealText: {
color: "#fff",
fontSize: 12,
fontWeight: "bold",
marginTop: 4,
...typography.caption1,
color: colors.text,
fontWeight: "600",
marginTop: spacing.xs,
},
stickyTopBar: {
backgroundColor: "#16213e",
borderBottomWidth: 1,
borderBottomColor: "#0f3460",
padding: 16,
paddingTop: 12,
paddingBottom: 12,
marginHorizontal: spacing.md,
marginTop: spacing.sm,
marginBottom: spacing.xs,
},
stickyContent: {
padding: spacing.md,
},
stickyQuestionText: {
color: "#fff",
fontSize: 16,
fontWeight: "bold",
...typography.subhead,
color: colors.text,
fontWeight: "600",
textAlign: "center",
marginBottom: 8,
marginBottom: spacing.sm,
},
stickyAnswersContainer: {
alignItems: "center",
flexDirection: "row",
justifyContent: "center",
gap: spacing.sm,
},
answerBadge: {
backgroundColor: colors.primaryLight,
paddingHorizontal: spacing.sm,
paddingVertical: spacing.xs,
borderRadius: radius.sm,
},
stickyAnswerText: {
color: "rgba(255,255,255,0.8)",
fontSize: 14,
marginBottom: 4,
}
...typography.caption1,
color: colors.text,
},
});
apps/mobile/app/(app)/index.tsx
+209 -120
View File
@@ -1,8 +1,12 @@
import { useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform } from "react-native";
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated";
import { LinearGradient } from "expo-linear-gradient";
import { useAuthStore, useMatchStore, usePacksStore } from "../../src/store";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { GradientBackground, GlassCard, GlassButton } from "../../src/components/ui";
import { colors, gradients, spacing, radius, typography, shadows } from "../../src/theme";
export default function HomeScreen() {
const { user, partner } = useAuthStore();
@@ -17,190 +21,275 @@ export default function HomeScreen() {
const recentMatches = matches.slice(0, 3);
return (
<ScrollView style={styles.container}>
<View style={styles.header}>
<Text style={styles.greeting}>
Hey, {user?.name || "there"} 👋
</Text>
{partner && (
<Text style={styles.partnerText}>
Paired with {partner.name || partner.email || 'your partner'}
</Text>
)}
</View>
{/* Quick Stats */}
<View style={styles.statsContainer}>
<View style={styles.statCard}>
<Ionicons name="heart" size={24} color="#e94560" />
<Text style={styles.statNumber}>{matches.length}</Text>
<Text style={styles.statLabel}>Matches</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="layers" size={24} color="#e94560" />
<Text style={styles.statNumber}>{packs.length}</Text>
<Text style={styles.statLabel}>Packs</Text>
</View>
<View style={styles.statCard}>
<Ionicons name="sparkles" size={24} color="#e94560" />
<Text style={styles.statNumber}>{newMatchesCount}</Text>
<Text style={styles.statLabel}>New</Text>
</View>
</View>
{/* Start Playing CTA */}
<TouchableOpacity
style={styles.ctaCard}
onPress={() => router.push("/(app)/swipe")}
<GradientBackground>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
>
<View style={styles.ctaContent}>
<Text style={styles.ctaTitle}>Ready to explore?</Text>
<Text style={styles.ctaSubtitle}>
Swipe through questions and discover what you both enjoy
</Text>
</View>
<Ionicons name="arrow-forward" size={24} color="#fff" />
</TouchableOpacity>
{/* Recent Matches */}
{recentMatches.length > 0 && (
<View style={styles.section}>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Recent Matches</Text>
<TouchableOpacity onPress={() => router.push("/(app)/matches")}>
<Text style={styles.seeAll}>See all</Text>
</TouchableOpacity>
</View>
{recentMatches.map((match) => (
<View key={match.id} style={styles.matchItem}>
<View style={styles.matchIcon}>
<Ionicons name="heart" size={20} color="#e94560" />
</View>
<Text style={styles.matchText} numberOfLines={1}>
{(match as any).question?.text || "A new match!"}
{/* Header */}
<Animated.View
entering={FadeInDown.delay(100).duration(500)}
style={styles.header}
>
<View>
<Text style={styles.greeting}>
Hey, {user?.name || "there"}
</Text>
{partner && (
<Text style={styles.partnerText}>
Paired with {partner.name || partner.email || 'your partner'}
</Text>
{match.is_new && <View style={styles.newBadge} />}
)}
</View>
<TouchableOpacity
style={styles.profileButton}
onPress={() => router.push("/(app)/profile")}
activeOpacity={0.7}
>
<Text style={styles.profileButtonText}>
{user?.name?.[0]?.toUpperCase() || "U"}
</Text>
</TouchableOpacity>
</Animated.View>
{/* Quick Stats */}
<Animated.View
entering={FadeInDown.delay(200).duration(500)}
style={styles.statsContainer}
>
<GlassCard style={styles.statCard}>
<View style={styles.statIconContainer}>
<Ionicons name="heart" size={20} color={colors.primary} />
</View>
))}
</View>
)}
</ScrollView>
<Text style={styles.statNumber}>{matches.length}</Text>
<Text style={styles.statLabel}>Matches</Text>
</GlassCard>
<GlassCard style={styles.statCard}>
<View style={styles.statIconContainer}>
<Ionicons name="layers" size={20} color={colors.primary} />
</View>
<Text style={styles.statNumber}>{packs.length}</Text>
<Text style={styles.statLabel}>Packs</Text>
</GlassCard>
<GlassCard style={styles.statCard}>
<View style={[styles.statIconContainer, newMatchesCount > 0 && styles.statIconHighlight]}>
<Ionicons name="sparkles" size={20} color={newMatchesCount > 0 ? colors.text : colors.primary} />
</View>
<Text style={styles.statNumber}>{newMatchesCount}</Text>
<Text style={styles.statLabel}>New</Text>
</GlassCard>
</Animated.View>
{/* Start Playing CTA */}
<Animated.View entering={FadeInDown.delay(300).duration(500)}>
<TouchableOpacity
onPress={() => router.push("/(app)/swipe")}
activeOpacity={0.9}
>
<LinearGradient
colors={gradients.primary as [string, string]}
style={styles.ctaCard}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<View style={styles.ctaContent}>
<Text style={styles.ctaTitle}>Ready to explore?</Text>
<Text style={styles.ctaSubtitle}>
Swipe through questions and discover what you both enjoy
</Text>
</View>
<View style={styles.ctaIconContainer}>
<Ionicons name="arrow-forward" size={24} color={colors.text} />
</View>
</LinearGradient>
</TouchableOpacity>
</Animated.View>
{/* Recent Matches */}
{recentMatches.length > 0 && (
<Animated.View
entering={FadeInDown.delay(400).duration(500)}
style={styles.section}
>
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>Recent Matches</Text>
<TouchableOpacity onPress={() => router.push("/(app)/matches")}>
<Text style={styles.seeAll}>See all</Text>
</TouchableOpacity>
</View>
{recentMatches.map((match, index) => (
<Animated.View
key={match.id}
entering={FadeInRight.delay(450 + index * 100).duration(400)}
>
<TouchableOpacity
onPress={() => router.push(`/chat/${match.id}`)}
activeOpacity={0.7}
>
<GlassCard style={styles.matchItem}>
<View style={styles.matchIcon}>
<Ionicons name="heart" size={18} color={colors.primary} />
</View>
<Text style={styles.matchText} numberOfLines={1}>
{(match as any).question?.text || "A new match!"}
</Text>
{match.is_new && <View style={styles.newBadge} />}
</GlassCard>
</TouchableOpacity>
</Animated.View>
))}
</Animated.View>
)}
{/* Bottom spacing for tab bar */}
<View style={styles.bottomSpacer} />
</ScrollView>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
contentContainer: {
paddingBottom: Platform.OS === 'ios' ? 100 : 80,
},
header: {
paddingTop: 60,
paddingHorizontal: 24,
paddingBottom: 24,
paddingHorizontal: spacing.lg,
paddingBottom: spacing.lg,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
greeting: {
fontSize: 28,
fontWeight: "bold",
color: "#fff",
...typography.title1,
color: colors.text,
},
partnerText: {
fontSize: 14,
color: "#888",
marginTop: 4,
...typography.subhead,
color: colors.textSecondary,
marginTop: spacing.xs,
},
profileButton: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: colors.primary,
justifyContent: 'center',
alignItems: 'center',
...shadows.md,
},
profileButtonText: {
...typography.headline,
color: colors.text,
},
statsContainer: {
flexDirection: "row",
paddingHorizontal: 24,
gap: 12,
paddingHorizontal: spacing.lg,
gap: spacing.sm,
},
statCard: {
flex: 1,
backgroundColor: "#16213e",
borderRadius: 16,
padding: 16,
alignItems: "center",
borderWidth: 1,
borderColor: "#0f3460",
paddingVertical: spacing.md,
},
statIconContainer: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.sm,
},
statIconHighlight: {
backgroundColor: colors.primary,
},
statNumber: {
fontSize: 24,
fontWeight: "bold",
color: "#fff",
marginTop: 8,
...typography.title2,
color: colors.text,
},
statLabel: {
fontSize: 12,
color: "#888",
marginTop: 4,
...typography.caption1,
color: colors.textSecondary,
marginTop: spacing.xs,
},
ctaCard: {
margin: 24,
backgroundColor: "#e94560",
borderRadius: 16,
padding: 20,
margin: spacing.lg,
borderRadius: radius.xl,
padding: spacing.lg,
flexDirection: "row",
alignItems: "center",
...shadows.lg,
},
ctaContent: {
flex: 1,
},
ctaTitle: {
fontSize: 18,
fontWeight: "bold",
color: "#fff",
...typography.title3,
color: colors.text,
},
ctaSubtitle: {
fontSize: 14,
...typography.subhead,
color: "rgba(255,255,255,0.8)",
marginTop: 4,
marginTop: spacing.xs,
},
ctaIconContainer: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: "rgba(255,255,255,0.2)",
justifyContent: "center",
alignItems: "center",
marginLeft: spacing.md,
},
section: {
paddingHorizontal: 24,
marginBottom: 24,
paddingHorizontal: spacing.lg,
marginTop: spacing.sm,
},
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
marginBottom: spacing.md,
},
sectionTitle: {
fontSize: 18,
fontWeight: "600",
color: "#fff",
...typography.headline,
color: colors.text,
},
seeAll: {
color: "#e94560",
fontSize: 14,
...typography.subhead,
color: colors.primary,
},
matchItem: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#16213e",
borderRadius: 12,
padding: 16,
marginBottom: 8,
borderWidth: 1,
borderColor: "#0f3460",
marginBottom: spacing.sm,
},
matchIcon: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: "rgba(233, 69, 96, 0.2)",
width: 36,
height: 36,
borderRadius: 18,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginRight: 12,
marginRight: spacing.md,
},
matchText: {
flex: 1,
color: "#fff",
fontSize: 14,
...typography.body,
color: colors.text,
},
newBadge: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: "#e94560",
backgroundColor: colors.primary,
},
bottomSpacer: {
height: spacing.lg,
},
});
apps/mobile/app/(app)/matches.tsx
+190 -130
View File
@@ -1,27 +1,28 @@
import { View, Text, StyleSheet, FlatList, RefreshControl, TouchableOpacity } from "react-native";
import { View, Text, StyleSheet, FlatList, RefreshControl, TouchableOpacity, ActivityIndicator, Platform } from "react-native";
import { useMatchStore, useAuthStore } from "../../src/store";
import { useEffect } from "react";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated";
import { GradientBackground, GlassCard } from "../../src/components/ui";
import { colors, spacing, typography, radius } from "../../src/theme";
export default function MatchesScreen() {
const { matches, fetchMatches, markAllAsSeen } = useMatchStore();
const { user } = useAuthStore();
const router = useRouter();
useEffect(() => {
fetchMatches();
}, []);
// Mark all matches as seen when matches are loaded
useEffect(() => {
if (matches.length > 0) {
markAllAsSeen();
}
}, [matches.length]);
const router = useRouter();
const renderItem = ({ item }: { item: any }) => {
const renderItem = ({ item, index }: { item: any; index: number }) => {
const userResponse = item.responses?.find((r: any) => r.user_id === user?.id);
const partnerResponse = item.responses?.find((r: any) => r.user_id !== user?.id);
@@ -32,161 +33,220 @@ export default function MatchesScreen() {
const userTime = new Date(userResponse.created_at).getTime();
const partnerTime = new Date(partnerResponse.created_at).getTime();
// If user answered after partner, they saw the partner_text
if (userTime > partnerTime) {
userText = item.question.partner_text;
partnerText = item.question.text;
}
}
const isYesYes = item.match_type === "yes_yes";
return (
<TouchableOpacity
style={styles.matchCard}
onPress={() => router.push(`/chat/${item.id}`)}
activeOpacity={0.7}
>
<View style={styles.iconContainer}>
<Ionicons name="sparkles" size={24} color="#e94560" />
</View>
<View style={styles.content}>
<Text style={styles.questionText}>{userText}</Text>
{item.question.partner_text && (
<Text style={styles.partnerText}>Partner: {partnerText}</Text>
)}
<View style={styles.tagContainer}>
<View style={styles.tag}>
<Text style={styles.tagText}>
{item.match_type === "yes_yes" ? "Review: YES + YES" : "Review: YES + MAYBE"}
</Text>
<Animated.View entering={FadeInRight.delay(index * 50).duration(300)}>
<TouchableOpacity
onPress={() => router.push(`/chat/${item.id}`)}
activeOpacity={0.7}
>
<GlassCard style={styles.matchCard}>
<View style={styles.iconContainer}>
<Ionicons
name={isYesYes ? "heart" : "heart-half"}
size={24}
color={colors.primary}
/>
</View>
<Text style={styles.date}>
{new Date(item.created_at).toLocaleDateString()}
</Text>
</View>
</View>
</TouchableOpacity>
<View style={styles.content}>
<Text style={styles.questionText} numberOfLines={2}>
{userText}
</Text>
{item.question.partner_text && (
<Text style={styles.partnerText} numberOfLines={1}>
Partner: {partnerText}
</Text>
)}
<View style={styles.metaContainer}>
<View style={[styles.tag, isYesYes && styles.tagHighlight]}>
<Text style={[styles.tagText, isYesYes && styles.tagTextHighlight]}>
{isYesYes ? "YES + YES" : "YES + MAYBE"}
</Text>
</View>
<Text style={styles.date}>
{new Date(item.created_at).toLocaleDateString()}
</Text>
</View>
</View>
<View style={styles.chevronContainer}>
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
</View>
</GlassCard>
</TouchableOpacity>
</Animated.View>
);
};
if (!user) {
return (
<View style={styles.container}>
<GradientBackground>
<View style={styles.loadingContainer}>
<ActivityIndicator color="#e94560" />
<ActivityIndicator color={colors.primary} size="large" />
</View>
</View>
</GradientBackground>
);
}
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>Your Matches</Text>
</View>
<GradientBackground>
<View style={styles.container}>
<Animated.View
entering={FadeInDown.duration(400)}
style={styles.header}
>
<Text style={styles.title}>Your Matches</Text>
<Text style={styles.subtitle}>
{matches.length} {matches.length === 1 ? 'match' : 'matches'} found
</Text>
</Animated.View>
<FlatList
data={matches}
renderItem={renderItem}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.list}
refreshControl={
<RefreshControl refreshing={false} onRefresh={fetchMatches} tintColor="#e94560" />
}
ListEmptyComponent={
<View style={styles.emptyContainer}>
<Text style={styles.emptyText}>No matches yet. Keep swiping!</Text>
</View>
}
/>
</View>
<FlatList
data={matches}
renderItem={renderItem}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.list}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={fetchMatches}
tintColor={colors.primary}
colors={[colors.primary]}
/>
}
ListEmptyComponent={
<Animated.View
entering={FadeInDown.delay(200).duration(400)}
style={styles.emptyContainer}
>
<View style={styles.emptyIconContainer}>
<Ionicons name="heart-outline" size={48} color={colors.textTertiary} />
</View>
<Text style={styles.emptyTitle}>No matches yet</Text>
<Text style={styles.emptyText}>
Keep swiping to find things you both enjoy!
</Text>
</Animated.View>
}
/>
</View>
</GradientBackground>
);
}
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",
},
list: {
padding: 24,
},
matchCard: {
flexDirection: "row",
backgroundColor: "#16213e",
borderRadius: 16,
padding: 16,
marginBottom: 16,
borderWidth: 1,
borderColor: "#0f3460",
},
iconContainer: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: "rgba(233, 69, 96, 0.1)",
justifyContent: "center",
alignItems: "center",
marginRight: 16,
},
content: {
flex: 1,
},
questionText: {
fontSize: 16,
fontWeight: "600",
color: "#fff",
marginBottom: 8,
lineHeight: 22,
},
tagContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
tag: {
backgroundColor: "rgba(233, 69, 96, 0.2)",
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 4,
},
tagText: {
color: "#e94560",
fontSize: 12,
fontWeight: "bold",
},
date: {
color: "#666",
fontSize: 12,
},
emptyContainer: {
padding: 40,
alignItems: "center",
},
emptyText: {
color: "#666",
fontSize: 16,
},
partnerText: {
fontSize: 14,
color: "#aaa",
fontStyle: "italic",
marginBottom: 8,
},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
header: {
paddingTop: 60,
paddingHorizontal: spacing.lg,
paddingBottom: spacing.md,
},
title: {
...typography.title1,
color: colors.text,
},
subtitle: {
...typography.subhead,
color: colors.textSecondary,
marginTop: spacing.xs,
},
list: {
padding: spacing.lg,
paddingBottom: Platform.OS === 'ios' ? 120 : 100,
},
matchCard: {
flexDirection: "row",
alignItems: "center",
marginBottom: spacing.sm,
},
iconContainer: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginRight: spacing.md,
},
content: {
flex: 1,
},
questionText: {
...typography.body,
color: colors.text,
fontWeight: "600",
marginBottom: spacing.xs,
},
partnerText: {
...typography.subhead,
color: colors.textSecondary,
fontStyle: "italic",
marginBottom: spacing.sm,
},
metaContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
tag: {
backgroundColor: colors.glass.background,
paddingHorizontal: spacing.sm,
paddingVertical: spacing.xs,
borderRadius: radius.xs,
},
tagHighlight: {
backgroundColor: colors.primaryLight,
},
tagText: {
...typography.caption2,
color: colors.textSecondary,
fontWeight: "600",
},
tagTextHighlight: {
color: colors.primary,
},
date: {
...typography.caption1,
color: colors.textTertiary,
},
chevronContainer: {
marginLeft: spacing.sm,
},
emptyContainer: {
alignItems: "center",
paddingVertical: spacing.xxl,
},
emptyIconContainer: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: colors.glass.background,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.md,
},
emptyTitle: {
...typography.title3,
color: colors.text,
marginBottom: spacing.xs,
},
emptyText: {
...typography.body,
color: colors.textSecondary,
textAlign: "center",
},
});
apps/mobile/app/(app)/packs.tsx
+164 -79
View File
@@ -1,8 +1,11 @@
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Switch } from "react-native";
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Switch, RefreshControl, Platform } from "react-native";
import { usePacksStore } from "../../src/store";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useEffect } from "react";
import Animated, { FadeInDown, FadeInRight } from "react-native-reanimated";
import { GradientBackground, GlassCard } from "../../src/components/ui";
import { colors, spacing, typography, radius } from "../../src/theme";
export default function PacksScreen() {
const { packs, enabledPackIds, togglePack, isLoading, fetchPacks } = usePacksStore();
@@ -11,86 +14,132 @@ export default function PacksScreen() {
fetchPacks();
}, []);
const renderItem = ({ item }: { item: any }) => (
<View style={styles.card}>
<TouchableOpacity
style={styles.cardContent}
activeOpacity={0.7}
onPress={() => router.push(`/pack/${item.id}`)}
>
<View style={styles.iconContainer}>
<Text style={styles.emoji}>{item.icon || "📦"}</Text>
</View>
<View style={styles.content}>
<View style={styles.headerRow}>
<Text style={styles.name}>{item.name}</Text>
{item.is_premium && (
<View style={styles.badge}>
<Text style={styles.badgeText}>PRO</Text>
const enabledCount = packs.filter(p => enabledPackIds.includes(p.id)).length;
const renderItem = ({ item, index }: { item: any; index: number }) => {
const isEnabled = enabledPackIds.includes(item.id);
return (
<Animated.View entering={FadeInRight.delay(index * 50).duration(300)}>
<GlassCard style={styles.card}>
<TouchableOpacity
style={styles.cardContent}
activeOpacity={0.7}
onPress={() => router.push(`/pack/${item.id}`)}
>
<View style={[styles.iconContainer, isEnabled && styles.iconContainerActive]}>
<Text style={styles.emoji}>{item.icon || "📦"}</Text>
</View>
<View style={styles.content}>
<View style={styles.headerRow}>
<Text style={styles.name}>{item.name}</Text>
{item.is_premium && (
<View style={styles.badge}>
<Ionicons name="star" size={10} color={colors.text} />
<Text style={styles.badgeText}>PRO</Text>
</View>
)}
</View>
)}
<Text style={styles.description} numberOfLines={2}>
{item.description}
</Text>
{item.question_count && (
<Text style={styles.questionCount}>
{item.question_count} questions
</Text>
)}
</View>
</TouchableOpacity>
<View style={styles.switchContainer}>
<Switch
value={isEnabled}
onValueChange={() => togglePack(item.id)}
trackColor={{
false: colors.glass.background,
true: colors.primary,
}}
thumbColor={colors.text}
ios_backgroundColor={colors.glass.background}
/>
</View>
<Text style={styles.description} numberOfLines={2}>
{item.description}
</Text>
</View>
</TouchableOpacity>
<Switch
value={enabledPackIds.includes(item.id)}
onValueChange={() => togglePack(item.id)}
trackColor={{ false: "#767577", true: "#e94560" }}
thumbColor={"#fff"}
/>
</View>
);
</GlassCard>
</Animated.View>
);
};
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>Question Packs</Text>
</View>
<GradientBackground>
<View style={styles.container}>
<Animated.View
entering={FadeInDown.duration(400)}
style={styles.header}
>
<Text style={styles.title}>Question Packs</Text>
<Text style={styles.subtitle}>
{enabledCount} of {packs.length} packs enabled
</Text>
</Animated.View>
<FlatList
data={packs}
renderItem={renderItem}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.list}
refreshing={isLoading}
onRefresh={fetchPacks}
/>
</View>
<FlatList
data={packs}
renderItem={renderItem}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.list}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={isLoading}
onRefresh={fetchPacks}
tintColor={colors.primary}
colors={[colors.primary]}
/>
}
ListEmptyComponent={
<Animated.View
entering={FadeInDown.delay(200).duration(400)}
style={styles.emptyContainer}
>
<View style={styles.emptyIconContainer}>
<Ionicons name="layers-outline" size={48} color={colors.textTertiary} />
</View>
<Text style={styles.emptyTitle}>No packs available</Text>
<Text style={styles.emptyText}>
Check back later for new question packs!
</Text>
</Animated.View>
}
/>
</View>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
header: {
paddingTop: 60,
paddingHorizontal: 24,
paddingBottom: 24,
borderBottomWidth: 1,
borderBottomColor: "#16213e",
paddingHorizontal: spacing.lg,
paddingBottom: spacing.md,
},
title: {
fontSize: 28,
fontWeight: "bold",
color: "#fff",
...typography.title1,
color: colors.text,
},
subtitle: {
...typography.subhead,
color: colors.textSecondary,
marginTop: spacing.xs,
},
list: {
padding: 24,
padding: spacing.lg,
paddingBottom: Platform.OS === 'ios' ? 120 : 100,
},
card: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "#16213e",
borderRadius: 16,
padding: 16,
marginBottom: 16,
borderWidth: 1,
borderColor: "#0f3460",
marginBottom: spacing.sm,
},
cardContent: {
flex: 1,
@@ -98,46 +147,82 @@ const styles = StyleSheet.create({
alignItems: "center",
},
iconContainer: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: "rgba(255, 255, 255, 0.05)",
width: 52,
height: 52,
borderRadius: 26,
backgroundColor: colors.glass.background,
justifyContent: "center",
alignItems: "center",
marginRight: 16,
marginRight: spacing.md,
},
iconContainerActive: {
backgroundColor: colors.primaryLight,
},
emoji: {
fontSize: 24,
fontSize: 26,
},
content: {
flex: 1,
marginRight: 16,
marginRight: spacing.sm,
},
headerRow: {
flexDirection: "row",
alignItems: "center",
marginBottom: 4,
marginBottom: spacing.xs,
},
name: {
fontSize: 18,
fontWeight: "600",
color: "#fff",
marginRight: 8,
...typography.headline,
color: colors.text,
marginRight: spacing.sm,
},
badge: {
backgroundColor: "#e94560",
paddingHorizontal: 6,
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.primary,
paddingHorizontal: spacing.sm,
paddingVertical: 2,
borderRadius: 4,
borderRadius: radius.xs,
gap: 2,
},
badgeText: {
color: "#fff",
fontSize: 10,
fontWeight: "bold",
...typography.caption2,
color: colors.text,
fontWeight: "700",
},
description: {
fontSize: 14,
color: "#888",
...typography.subhead,
color: colors.textSecondary,
lineHeight: 20,
},
questionCount: {
...typography.caption1,
color: colors.textTertiary,
marginTop: spacing.xs,
},
switchContainer: {
paddingLeft: spacing.sm,
},
emptyContainer: {
alignItems: "center",
paddingVertical: spacing.xxl,
},
emptyIconContainer: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: colors.glass.background,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.md,
},
emptyTitle: {
...typography.title3,
color: colors.text,
marginBottom: spacing.xs,
},
emptyText: {
...typography.body,
color: colors.textSecondary,
textAlign: "center",
},
});
apps/mobile/app/(app)/profile.tsx
+222 -87
View File
@@ -1,7 +1,12 @@
import { View, Text, StyleSheet, TouchableOpacity, Alert, Image } from "react-native";
import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView, Platform } from "react-native";
import { useAuthStore } from "../../src/store";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import Animated, { FadeInDown } from "react-native-reanimated";
import { supabase } from "../../src/lib/supabase";
import { router } from "expo-router";
import { GradientBackground, GlassCard, GlassButton } from "../../src/components/ui";
import { colors, gradients, spacing, radius, typography, shadows } from "../../src/theme";
export default function ProfileScreen() {
const { user, partner, signOut, fetchCouple } = useAuthStore();
@@ -20,7 +25,7 @@ export default function ProfileScreen() {
await supabase.functions.invoke("manage-couple", {
method: "DELETE",
});
await fetchCouple(); // Refresh state
await fetchCouple();
} catch (error) {
Alert.alert("Error", "Failed to unpair");
}
@@ -30,139 +35,269 @@ export default function ProfileScreen() {
);
};
const handleSignOut = () => {
Alert.alert(
"Sign Out",
"Are you sure you want to sign out?",
[
{ text: "Cancel", style: "cancel" },
{
text: "Sign Out",
style: "destructive",
onPress: signOut,
},
]
);
};
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>Profile</Text>
</View>
<GradientBackground>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
>
{/* Header */}
<Animated.View
entering={FadeInDown.delay(100).duration(500)}
style={styles.header}
>
<Text style={styles.title}>Profile</Text>
</Animated.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>
{/* Profile Card */}
<Animated.View entering={FadeInDown.delay(200).duration(500)}>
<GlassCard style={styles.profileCard} variant="elevated">
<LinearGradient
colors={gradients.primary as [string, string]}
style={styles.avatarContainer}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<View style={styles.avatar}>
<Text style={styles.avatarText}>
{user?.name?.[0]?.toUpperCase() || "U"}
</Text>
</View>
<TouchableOpacity onPress={handleUnpair}>
<Ionicons name="trash-outline" size={20} color="#666" />
</LinearGradient>
<Text style={styles.name}>{user?.name || "User"}</Text>
<Text style={styles.email}>{user?.email}</Text>
</GlassCard>
</Animated.View>
{/* Relationship Section */}
<Animated.View entering={FadeInDown.delay(300).duration(500)}>
<Text style={styles.sectionTitle}>Relationship</Text>
<GlassCard>
{partner ? (
<View style={styles.row}>
<View style={styles.rowLeft}>
<View style={styles.rowIconContainer}>
<Ionicons name="heart" size={20} color={colors.primary} />
</View>
<View>
<Text style={styles.rowLabel}>Paired with</Text>
<Text style={styles.rowValue}>
{partner.name || partner.email || 'your partner'}
</Text>
</View>
</View>
<TouchableOpacity
onPress={handleUnpair}
style={styles.rowAction}
activeOpacity={0.7}
>
<Ionicons name="unlink-outline" size={20} color={colors.error} />
</TouchableOpacity>
</View>
) : (
<TouchableOpacity
style={styles.row}
onPress={() => router.push("/(app)/pairing")}
activeOpacity={0.7}
>
<View style={styles.rowLeft}>
<View style={[styles.rowIconContainer, styles.rowIconInactive]}>
<Ionicons name="heart-outline" size={20} color={colors.textTertiary} />
</View>
<View>
<Text style={styles.rowLabel}>Not paired yet</Text>
<Text style={styles.rowValueMuted}>Tap to connect with your partner</Text>
</View>
</View>
<Ionicons name="chevron-forward" size={20} color={colors.textTertiary} />
</TouchableOpacity>
</View>
) : (
<View style={styles.row}>
<Text style={styles.rowText}>Not paired yet</Text>
</View>
)}
</View>
)}
</GlassCard>
</Animated.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>
{/* Settings Section */}
<Animated.View entering={FadeInDown.delay(400).duration(500)}>
<Text style={styles.sectionTitle}>Account</Text>
<GlassCard noPadding>
<TouchableOpacity
style={[styles.menuRow, styles.menuRowDanger]}
onPress={handleSignOut}
activeOpacity={0.7}
>
<View style={styles.rowLeft}>
<View style={[styles.rowIconContainer, styles.rowIconDanger]}>
<Ionicons name="log-out-outline" size={20} color={colors.error} />
</View>
<Text style={styles.rowLabelDanger}>Sign Out</Text>
</View>
<Ionicons name="chevron-forward" size={20} color={colors.error} />
</TouchableOpacity>
</GlassCard>
</Animated.View>
<Text style={styles.version}>Sauci v1.0.0</Text>
</View>
</View>
{/* Version */}
<Animated.View
entering={FadeInDown.delay(500).duration(500)}
style={styles.versionContainer}
>
<Text style={styles.version}>Sauci v1.0.0</Text>
<Text style={styles.versionSub}>Made with love</Text>
</Animated.View>
{/* Bottom spacing for tab bar */}
<View style={styles.bottomSpacer} />
</ScrollView>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
contentContainer: {
paddingBottom: Platform.OS === 'ios' ? 100 : 80,
},
header: {
paddingTop: 60,
paddingHorizontal: 24,
paddingBottom: 24,
borderBottomWidth: 1,
borderBottomColor: "#16213e",
paddingHorizontal: spacing.lg,
paddingBottom: spacing.md,
},
title: {
fontSize: 28,
fontWeight: "bold",
color: "#fff",
},
content: {
padding: 24,
...typography.title1,
color: colors.text,
},
profileCard: {
marginHorizontal: spacing.lg,
alignItems: "center",
marginBottom: 40,
paddingVertical: spacing.xl,
marginBottom: spacing.lg,
},
avatarContainer: {
width: 88,
height: 88,
borderRadius: 44,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.md,
...shadows.lg,
},
avatar: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: "#e94560",
backgroundColor: colors.background,
justifyContent: "center",
alignItems: "center",
marginBottom: 16,
},
avatarText: {
fontSize: 32,
fontWeight: "bold",
color: "#fff",
color: colors.text,
},
name: {
fontSize: 24,
fontWeight: "bold",
color: "#fff",
marginBottom: 4,
...typography.title2,
color: colors.text,
marginBottom: spacing.xs,
},
email: {
fontSize: 14,
color: "#666",
...typography.subhead,
color: colors.textSecondary,
},
sectionTitle: {
fontSize: 14,
fontWeight: "600",
color: "#666",
marginBottom: 8,
marginLeft: 4,
...typography.caption1,
color: colors.textTertiary,
textTransform: "uppercase",
},
section: {
backgroundColor: "#16213e",
borderRadius: 12,
marginBottom: 24,
overflow: "hidden",
letterSpacing: 1,
marginBottom: spacing.sm,
marginLeft: spacing.lg + spacing.xs,
},
row: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 16,
borderBottomWidth: 1,
borderBottomColor: "#1a1a2e",
padding: spacing.md,
},
partnerInfo: {
rowLeft: {
flexDirection: "row",
alignItems: "center",
gap: 12,
flex: 1,
},
rowText: {
fontSize: 16,
color: "#fff",
rowIconContainer: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginRight: spacing.md,
},
rowIconInactive: {
backgroundColor: colors.glass.background,
},
rowIconDanger: {
backgroundColor: colors.errorLight,
},
rowLabel: {
...typography.subhead,
color: colors.textSecondary,
},
rowValue: {
...typography.body,
color: colors.text,
fontWeight: "600",
},
rowValueMuted: {
...typography.caption1,
color: colors.textTertiary,
},
rowLabelDanger: {
...typography.body,
color: colors.error,
fontWeight: "500",
},
rowAction: {
padding: spacing.sm,
},
menuRow: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: spacing.md,
},
menuRowDanger: {
borderRadius: radius.lg,
},
versionContainer: {
alignItems: "center",
marginTop: spacing.xl,
},
version: {
textAlign: "center",
color: "#666",
fontSize: 12,
marginTop: 24,
...typography.caption1,
color: colors.textTertiary,
},
versionSub: {
...typography.caption2,
color: colors.textTertiary,
marginTop: spacing.xs,
},
bottomSpacer: {
height: spacing.lg,
},
});
apps/mobile/app/(app)/swipe.tsx
+140 -63
View File
@@ -1,9 +1,12 @@
import { useState, useEffect } from "react";
import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
import { View, StyleSheet, Text, ActivityIndicator, Platform } from "react-native";
import { useLocalSearchParams } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import Animated, { FadeIn, FadeInUp } from "react-native-reanimated";
import { supabase } from "../../src/lib/supabase";
import SwipeCard from "../../src/components/SwipeCard";
import { GradientBackground, GlassCard, GlassButton } from "../../src/components/ui";
import { colors, spacing, typography, radius, shadows } from "../../src/theme";
export default function SwipeScreen() {
const { packId } = useLocalSearchParams();
@@ -26,11 +29,6 @@ export default function SwipeScreen() {
throw error;
}
// Smart Shuffle
// Priority:
// 1. Completion of Two-Part Match (Partner answered, is_two_part = true) -> +1.5
// 2. Partner Answered (Any) -> +0.7
// 3. New Two-Part (Get someone to start) -> +0.4
const sorted = (data || []).sort((a: any, b: any) => {
let scoreA = Math.random();
let scoreB = Math.random();
@@ -58,23 +56,18 @@ export default function SwipeScreen() {
const question = questions[currentIndex];
const answer = direction === "right" ? "yes" : direction === "left" ? "no" : "maybe";
// Optimistic update
setCurrentIndex(prev => prev + 1);
try {
// DEBUG: Check if we have a valid session
const { data: { session } } = await supabase.auth.getSession();
console.log("DEBUG - Session exists:", !!session);
console.log("DEBUG - Access token exists:", !!session?.access_token);
console.log("DEBUG - Token preview:", session?.access_token?.substring(0, 50) + "...");
const result = await supabase.functions.invoke("submit-response", {
await supabase.functions.invoke("submit-response", {
body: {
question_id: question.id,
answer,
},
});
console.log("DEBUG - Function result:", result);
} catch (error) {
console.error("Failed to submit response", error);
}
@@ -82,94 +75,178 @@ export default function SwipeScreen() {
if (isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="#e94560" />
</View>
<GradientBackground>
<View style={styles.centerContainer}>
<ActivityIndicator size="large" color={colors.primary} />
</View>
</GradientBackground>
);
}
if (currentIndex >= questions.length) {
return (
<View style={styles.container}>
<Ionicons name="checkmark-circle-outline" size={80} color="#e94560" />
<Text style={styles.emptyTitle}>All caught up!</Text>
<Text style={styles.emptySubtitle}>
Check back later for more questions or try a different pack.
</Text>
</View>
<GradientBackground showAccent>
<View style={styles.centerContainer}>
<Animated.View
entering={FadeInUp.duration(600).springify()}
style={styles.emptyContent}
>
<View style={styles.emptyIconContainer}>
<Ionicons name="checkmark-circle" size={64} color={colors.primary} />
</View>
<Text style={styles.emptyTitle}>All caught up!</Text>
<Text style={styles.emptySubtitle}>
Check back later for more questions or try a different pack.
</Text>
<GlassButton
variant="secondary"
onPress={fetchQuestions}
style={{ marginTop: spacing.lg }}
>
Refresh Questions
</GlassButton>
</Animated.View>
</View>
</GradientBackground>
);
}
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.progress}>
Question {currentIndex + 1} of {questions.length}
</Text>
</View>
<GradientBackground>
<View style={styles.container}>
{/* Header */}
<Animated.View
entering={FadeIn.duration(400)}
style={styles.header}
>
<View style={styles.progressContainer}>
<Text style={styles.progressText}>
{currentIndex + 1} of {questions.length}
</Text>
<View style={styles.progressBar}>
<Animated.View
style={[
styles.progressFill,
{ width: `${((currentIndex + 1) / questions.length) * 100}%` }
]}
/>
</View>
</View>
</Animated.View>
<View style={styles.cardContainer}>
{/* Render next card in background for smoothness */}
{questions[currentIndex + 1] && (
<View style={[styles.backgroundCard]} />
)}
{/* Card Stack */}
<View style={styles.cardContainer}>
{/* Background card (next) */}
{questions[currentIndex + 1] && (
<View style={styles.backgroundCard} />
)}
{/* Active card */}
<SwipeCard
key={questions[currentIndex].id}
question={questions[currentIndex]}
onSwipe={handleSwipe}
/>
{/* Active card */}
<SwipeCard
key={questions[currentIndex].id}
question={questions[currentIndex]}
onSwipe={handleSwipe}
/>
</View>
{/* Hint */}
<Animated.View
entering={FadeIn.delay(500).duration(400)}
style={styles.hintContainer}
>
<Text style={styles.hintText}>Swipe or tap to answer</Text>
</Animated.View>
{/* Bottom spacing for tab bar */}
<View style={styles.bottomSpacer} />
</View>
</View>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
centerContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
header: {
position: "absolute",
top: 60,
zIndex: 1,
paddingTop: 60,
paddingHorizontal: spacing.lg,
paddingBottom: spacing.md,
},
progress: {
color: "#666",
fontSize: 16,
fontWeight: "600",
progressContainer: {
alignItems: "center",
},
progressText: {
...typography.subhead,
color: colors.textSecondary,
marginBottom: spacing.sm,
},
progressBar: {
width: 120,
height: 4,
backgroundColor: colors.glass.background,
borderRadius: 2,
overflow: "hidden",
},
progressFill: {
height: "100%",
backgroundColor: colors.primary,
borderRadius: 2,
},
cardContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 40,
},
backgroundCard: {
position: "absolute",
width: "100%", // Match SwipeCard width logic
height: 500,
backgroundColor: "#16213e",
borderRadius: 24,
width: "85%",
height: 480,
backgroundColor: colors.glass.backgroundLight,
borderRadius: radius.xxl,
borderWidth: 1,
borderColor: "#0f3460",
transform: [{ scale: 0.95 }, { translateY: 10 }],
borderColor: colors.glass.border,
transform: [{ scale: 0.95 }, { translateY: 12 }],
opacity: 0.5,
...shadows.md,
},
hintContainer: {
alignItems: "center",
paddingBottom: spacing.md,
},
hintText: {
...typography.caption1,
color: colors.textTertiary,
},
emptyContent: {
alignItems: "center",
paddingHorizontal: spacing.xl,
},
emptyIconContainer: {
width: 120,
height: 120,
borderRadius: 60,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.lg,
},
emptyTitle: {
fontSize: 24,
fontWeight: "bold",
color: "#fff",
marginTop: 24,
marginBottom: 8,
...typography.title2,
color: colors.text,
marginBottom: spacing.sm,
},
emptySubtitle: {
fontSize: 16,
color: "#888",
...typography.body,
color: colors.textSecondary,
textAlign: "center",
paddingHorizontal: 40,
},
bottomSpacer: {
height: Platform.OS === 'ios' ? 100 : 80,
},
});
apps/mobile/app/(auth)/login.tsx
+332 -262
View File
@@ -2,7 +2,6 @@ import { useState } from "react";
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Alert,
@@ -12,9 +11,16 @@ import {
} from "react-native";
import { Redirect } from "expo-router";
import * as Linking from "expo-linking";
import Animated, {
FadeIn,
FadeInDown,
FadeInUp,
} from "react-native-reanimated";
import { Ionicons } from "@expo/vector-icons";
import { supabase } from "../../src/lib/supabase";
import { useAuthStore } from "../../src/store";
import { GradientBackground, GlassCard, GlassButton, GlassInput } from "../../src/components/ui";
import { colors, spacing, radius, typography } from "../../src/theme";
type AuthMode = "magic-link" | "password";
@@ -25,22 +31,32 @@ export default function LoginScreen() {
const [isMagicLinkSent, setIsMagicLinkSent] = useState(false);
const [authMode, setAuthMode] = useState<AuthMode>("magic-link");
const [isSignUp, setIsSignUp] = useState(false);
const [error, setError] = useState<string | null>(null);
const { isAuthenticated } = useAuthStore();
// Use declarative Redirect instead of imperative router.replace()
// This ensures navigation only happens after the Root Layout is mounted
const showError = (message: string) => {
setError(message);
// Also show native alert on mobile
if (Platform.OS !== 'web') {
Alert.alert("Error", message);
}
};
const clearError = () => setError(null);
if (isAuthenticated) {
return <Redirect href="/" />;
}
const handleMagicLink = async () => {
clearError();
if (!email.trim()) {
Alert.alert("Error", "Please enter your email");
showError("Please enter your email");
return;
}
setIsLoading(true);
const { error } = await supabase.auth.signInWithOtp({
const { error: authError } = await supabase.auth.signInWithOtp({
email: email.trim(),
options: {
emailRedirectTo: Linking.createURL("/(auth)/login"),
@@ -49,56 +65,66 @@ export default function LoginScreen() {
setIsLoading(false);
if (error) {
Alert.alert("Error", error.message);
if (authError) {
showError(authError.message);
} else {
setIsMagicLinkSent(true);
}
};
const handlePasswordAuth = async () => {
clearError();
if (!email.trim()) {
Alert.alert("Error", "Please enter your email");
showError("Please enter your email");
return;
}
if (!password) {
Alert.alert("Error", "Please enter your password");
showError("Please enter your password");
return;
}
if (isSignUp && password.length < 6) {
Alert.alert("Error", "Password must be at least 6 characters");
showError("Password must be at least 6 characters");
return;
}
setIsLoading(true);
if (isSignUp) {
const { error } = await supabase.auth.signUp({
const { error: signUpError } = await supabase.auth.signUp({
email: email.trim(),
password,
});
setIsLoading(false);
if (error) {
Alert.alert("Error", error.message);
if (signUpError) {
showError(signUpError.message);
} else {
Alert.alert(
"Check your email",
"We sent you a confirmation link to verify your email address.",
[{ text: "OK" }]
);
// Show success message
if (Platform.OS === 'web') {
setError(null);
Alert.alert(
"Check your email",
"We sent you a confirmation link to verify your email address."
);
} else {
Alert.alert(
"Check your email",
"We sent you a confirmation link to verify your email address.",
[{ text: "OK" }]
);
}
}
} else {
const { error } = await supabase.auth.signInWithPassword({
const { error: signInError } = await supabase.auth.signInWithPassword({
email: email.trim(),
password,
});
setIsLoading(false);
if (error) {
Alert.alert("Error", error.message);
if (signInError) {
showError(signInError.message);
}
}
};
@@ -131,290 +157,334 @@ export default function LoginScreen() {
if (isMagicLinkSent) {
return (
<View style={styles.container}>
<View style={styles.content}>
<Text style={styles.emoji}>✉️</Text>
<Text style={styles.title}>Check your email</Text>
<Text style={styles.subtitle}>
We sent a magic link to {email}
</Text>
<TouchableOpacity
style={styles.secondaryButton}
onPress={() => setIsMagicLinkSent(false)}
<GradientBackground showAccent>
<View style={styles.container}>
<Animated.View
entering={FadeInUp.duration(600).springify()}
style={styles.content}
>
<Text style={styles.secondaryButtonText}>Try a different email</Text>
</TouchableOpacity>
<View style={styles.iconContainer}>
<Ionicons name="mail" size={48} color={colors.primary} />
</View>
<Text style={styles.title}>Check your email</Text>
<Text style={styles.subtitle}>
We sent a magic link to{'\n'}
<Text style={styles.emailHighlight}>{email}</Text>
</Text>
<GlassButton
variant="ghost"
onPress={() => setIsMagicLinkSent(false)}
style={{ marginTop: spacing.lg }}
>
Try a different email
</GlassButton>
</Animated.View>
</View>
</View>
</GradientBackground>
);
}
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
<GradientBackground showAccent>
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.content}>
<Text style={styles.emoji}>💕</Text>
<Text style={styles.title}>Sauci</Text>
<Text style={styles.subtitle}>
Explore intimacy together
</Text>
{/* Auth Mode Toggle */}
<View style={styles.modeToggleContainer}>
<TouchableOpacity
style={[
styles.modeToggle,
authMode === "magic-link" && styles.modeToggleActive,
]}
onPress={() => setAuthMode("magic-link")}
<ScrollView
contentContainerStyle={styles.scrollContent}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
>
<View style={styles.content}>
{/* Logo/Brand */}
<Animated.View
entering={FadeInDown.delay(100).duration(600).springify()}
style={styles.brandContainer}
>
<Text
style={[
styles.modeToggleText,
authMode === "magic-link" && styles.modeToggleTextActive,
]}
>
Magic Link
<View style={styles.logoContainer}>
<Ionicons name="heart" size={40} color={colors.primary} />
</View>
<Text style={styles.title}>Sauci</Text>
<Text style={styles.subtitle}>
Explore intimacy together
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.modeToggle,
authMode === "password" && styles.modeToggleActive,
]}
onPress={() => setAuthMode("password")}
</Animated.View>
{/* Auth Card */}
<Animated.View
entering={FadeInDown.delay(200).duration(600).springify()}
style={styles.formContainer}
>
<Text
style={[
styles.modeToggleText,
authMode === "password" && styles.modeToggleTextActive,
]}
>
Password
</Text>
</TouchableOpacity>
</View>
<GlassCard variant="elevated">
{/* Auth Mode Toggle */}
<View style={styles.modeToggleContainer}>
<TouchableOpacity
style={[
styles.modeToggle,
authMode === "magic-link" && styles.modeToggleActive,
]}
onPress={() => setAuthMode("magic-link")}
activeOpacity={0.7}
>
<Text
style={[
styles.modeToggleText,
authMode === "magic-link" && styles.modeToggleTextActive,
]}
>
Magic Link
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.modeToggle,
authMode === "password" && styles.modeToggleActive,
]}
onPress={() => setAuthMode("password")}
activeOpacity={0.7}
>
<Text
style={[
styles.modeToggleText,
authMode === "password" && styles.modeToggleTextActive,
]}
>
Password
</Text>
</TouchableOpacity>
</View>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder="Enter your email"
placeholderTextColor="#666"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
{/* Error Message */}
{error && (
<Animated.View
entering={FadeIn.duration(200)}
style={styles.errorContainer}
>
<Ionicons name="alert-circle" size={18} color={colors.error} />
<Text style={styles.errorText}>{error}</Text>
</Animated.View>
)}
{authMode === "password" && (
<TextInput
style={styles.input}
placeholder="Enter your password"
placeholderTextColor="#666"
value={password}
onChangeText={setPassword}
secureTextEntry
autoCapitalize="none"
/>
)}
{/* Form Fields */}
<View style={styles.form}>
<GlassInput
placeholder="Enter your email"
value={email}
onChangeText={(text) => { clearError(); setEmail(text); }}
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
icon={<Ionicons name="mail-outline" size={20} color={colors.textTertiary} />}
/>
{authMode === "magic-link" ? (
<TouchableOpacity
style={[styles.button, isLoading && styles.buttonDisabled]}
onPress={handleMagicLink}
disabled={isLoading}
>
<Text style={styles.buttonText}>
{isLoading ? "Sending..." : "Continue with Magic Link"}
</Text>
</TouchableOpacity>
) : (
<>
<TouchableOpacity
style={[styles.button, isLoading && styles.buttonDisabled]}
onPress={handlePasswordAuth}
disabled={isLoading}
{authMode === "password" && (
<GlassInput
placeholder="Enter your password"
value={password}
onChangeText={(text) => { clearError(); setPassword(text); }}
secureTextEntry
autoCapitalize="none"
icon={<Ionicons name="lock-closed-outline" size={20} color={colors.textTertiary} />}
/>
)}
{authMode === "magic-link" ? (
<GlassButton
onPress={handleMagicLink}
loading={isLoading}
disabled={isLoading}
fullWidth
>
Continue with Magic Link
</GlassButton>
) : (
<>
<GlassButton
onPress={handlePasswordAuth}
loading={isLoading}
disabled={isLoading}
fullWidth
>
{isSignUp ? "Create Account" : "Sign In"}
</GlassButton>
<TouchableOpacity
style={styles.toggleSignUp}
onPress={() => setIsSignUp(!isSignUp)}
>
<Text style={styles.toggleSignUpText}>
{isSignUp
? "Already have an account? Sign In"
: "Don't have an account? Sign Up"}
</Text>
</TouchableOpacity>
</>
)}
</View>
</GlassCard>
</Animated.View>
{/* Social Sign In */}
<Animated.View
entering={FadeInDown.delay(300).duration(600).springify()}
style={styles.socialContainer}
>
<View style={styles.divider}>
<View style={styles.dividerLine} />
<Text style={styles.dividerText}>or continue with</Text>
<View style={styles.dividerLine} />
</View>
<View style={styles.socialButtons}>
<GlassButton
variant="secondary"
onPress={handleGoogleSignIn}
icon={<Ionicons name="logo-google" size={20} color={colors.text} />}
style={styles.socialButton}
>
<Text style={styles.buttonText}>
{isLoading
? isSignUp
? "Creating Account..."
: "Signing In..."
: isSignUp
? "Create Account"
: "Sign In"}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.toggleSignUp}
onPress={() => setIsSignUp(!isSignUp)}
Google
</GlassButton>
<GlassButton
variant="secondary"
onPress={handleAppleSignIn}
icon={<Ionicons name="logo-apple" size={20} color={colors.text} />}
style={styles.socialButton}
>
<Text style={styles.toggleSignUpText}>
{isSignUp
? "Already have an account? Sign In"
: "Don't have an account? Sign Up"}
</Text>
</TouchableOpacity>
</>
)}
<View style={styles.divider}>
<View style={styles.dividerLine} />
<Text style={styles.dividerText}>or</Text>
<View style={styles.dividerLine} />
</View>
<TouchableOpacity
style={styles.socialButton}
onPress={handleGoogleSignIn}
>
<Text style={styles.socialButtonText}>Continue with Google</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.socialButton}
onPress={handleAppleSignIn}
>
<Text style={styles.socialButtonText}>Continue with Apple</Text>
</TouchableOpacity>
Apple
</GlassButton>
</View>
</Animated.View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</ScrollView>
</KeyboardAvoidingView>
</GradientBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#1a1a2e",
},
content: {
flex: 1,
paddingHorizontal: 24,
paddingTop: 80,
alignItems: "center",
},
emoji: {
fontSize: 64,
marginBottom: 16,
},
title: {
fontSize: 32,
fontWeight: "bold",
color: "#fff",
marginBottom: 8,
},
subtitle: {
fontSize: 16,
color: "#888",
marginBottom: 48,
textAlign: "center",
},
form: {
width: "100%",
},
input: {
backgroundColor: "#16213e",
borderRadius: 12,
padding: 16,
fontSize: 16,
color: "#fff",
marginBottom: 16,
borderWidth: 1,
borderColor: "#0f3460",
},
button: {
backgroundColor: "#e94560",
borderRadius: 12,
padding: 16,
alignItems: "center",
},
buttonDisabled: {
opacity: 0.7,
},
buttonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600",
},
divider: {
flexDirection: "row",
alignItems: "center",
marginVertical: 24,
},
dividerLine: {
flex: 1,
height: 1,
backgroundColor: "#333",
},
dividerText: {
color: "#666",
paddingHorizontal: 16,
},
socialButton: {
backgroundColor: "#16213e",
borderRadius: 12,
padding: 16,
alignItems: "center",
marginBottom: 12,
borderWidth: 1,
borderColor: "#0f3460",
},
socialButtonText: {
color: "#fff",
fontSize: 16,
fontWeight: "500",
},
secondaryButton: {
marginTop: 24,
},
secondaryButtonText: {
color: "#e94560",
fontSize: 16,
},
scrollContent: {
flexGrow: 1,
},
content: {
flex: 1,
paddingHorizontal: spacing.lg,
paddingTop: 80,
paddingBottom: spacing.xl,
},
brandContainer: {
alignItems: "center",
marginBottom: spacing.xl,
},
logoContainer: {
width: 80,
height: 80,
borderRadius: 40,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.md,
},
title: {
...typography.largeTitle,
color: colors.text,
marginBottom: spacing.xs,
},
subtitle: {
...typography.body,
color: colors.textSecondary,
textAlign: "center",
},
emailHighlight: {
color: colors.primary,
fontWeight: "600",
},
iconContainer: {
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: colors.primaryLight,
justifyContent: "center",
alignItems: "center",
marginBottom: spacing.lg,
},
formContainer: {
marginBottom: spacing.lg,
},
modeToggleContainer: {
flexDirection: "row",
backgroundColor: "#16213e",
borderRadius: 12,
backgroundColor: colors.glass.background,
borderRadius: radius.md,
padding: 4,
marginBottom: 24,
width: "100%",
marginBottom: spacing.lg,
},
modeToggle: {
flex: 1,
paddingVertical: 12,
borderRadius: 8,
borderRadius: radius.sm,
alignItems: "center",
},
modeToggleActive: {
backgroundColor: "#e94560",
backgroundColor: colors.primary,
},
modeToggleText: {
color: "#666",
fontSize: 14,
fontWeight: "500",
...typography.subhead,
color: colors.textTertiary,
fontWeight: "600",
},
modeToggleTextActive: {
color: "#fff",
color: colors.text,
},
errorContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.errorLight,
padding: spacing.md,
borderRadius: radius.md,
marginBottom: spacing.md,
gap: spacing.sm,
},
errorText: {
...typography.subhead,
color: colors.error,
flex: 1,
},
form: {
gap: spacing.sm,
},
toggleSignUp: {
marginTop: 16,
marginTop: spacing.md,
alignItems: "center",
},
toggleSignUpText: {
color: "#e94560",
fontSize: 14,
...typography.subhead,
color: colors.primary,
},
socialContainer: {
marginTop: spacing.md,
},
divider: {
flexDirection: "row",
alignItems: "center",
marginBottom: spacing.lg,
},
dividerLine: {
flex: 1,
height: 1,
backgroundColor: colors.glass.border,
},
dividerText: {
...typography.caption1,
color: colors.textTertiary,
paddingHorizontal: spacing.md,
},
socialButtons: {
flexDirection: "row",
gap: spacing.md,
},
socialButton: {
flex: 1,
},
});