Enhance swipe UI and add chat date separators

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

@@ -11,8 +11,8 @@ import Animated, {
     FadeInRight,
     FadeInUp,
 } from "react-native-reanimated";
-import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
-import { useAmbientOrbAnimation } from "../../src/hooks";
+import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
+import { useAmbientOrbAnimation } from "../../src/hooks";
 import { colors, gradients, spacing, typography, radius, shadows } from "../../src/theme";
 import { MatchesTutorial } from "../../src/components/tutorials";
 import { hasSeenMatchesTutorial, markMatchesTutorialSeen } from "../../src/lib/matchesTutorialSeen";
@@ -29,11 +29,11 @@ export default function MatchesScreen() {
     const { matches, fetchMatches, markAllAsSeen } = useMatchStore();
     const { user } = useAuthStore();
     const router = useRouter();
-    const { width } = useWindowDimensions();
-    const isWideScreen = width > MAX_CONTENT_WIDTH;
-    const [showTutorial, setShowTutorial] = useState(false);
-
-    // Ambient orb breathing animations
+    const { width } = useWindowDimensions();
+    const isWideScreen = width > MAX_CONTENT_WIDTH;
+    const [showTutorial, setShowTutorial] = useState(false);
+
+    // Ambient orb breathing animations
     const { orbStyle1, orbStyle2 } = useAmbientOrbAnimation();
 
     // Check if tutorial should be shown when screen is focused or matches change
@@ -101,15 +101,15 @@ export default function MatchesScreen() {
                             start={{ x: 0, y: 0 }}
                             end={{ x: 1, y: 1 }}
                         />
-                        {/* Top silk highlight */}
-                        <LinearGradient
-                            colors={[`${ACCENT_RGBA}0.06)`, 'transparent']}
-                            style={styles.cardSilkHighlight}
-                            start={{ x: 0.5, y: 0 }}
-                            end={{ x: 0.5, y: 1 }}
-                        />
-
-                        <View style={styles.matchRow}>
+                        {/* Top silk highlight */}
+                        <LinearGradient
+                            colors={[`${ACCENT_RGBA}0.06)`, 'transparent']}
+                            style={styles.cardSilkHighlight}
+                            start={{ x: 0.5, y: 0 }}
+                            end={{ x: 0.5, y: 1 }}
+                        />
+
+                        <View style={styles.matchRow}>
                             {/* Premium icon container */}
                             <View style={[
                                 styles.iconContainerPremium,
@@ -295,13 +295,13 @@ export default function MatchesScreen() {
                 />
             </View>
 
-            {/* Matches Tutorial Overlay */}
-            {showTutorial && (
-                <MatchesTutorial onComplete={handleTutorialComplete} />
-            )}
-        </GradientBackground>
-    );
-}
+            {/* Matches Tutorial Overlay */}
+            {showTutorial && (
+                <MatchesTutorial onComplete={handleTutorialComplete} />
+            )}
+        </GradientBackground>
+    );
+}
 
 const styles = StyleSheet.create({
     container: {
@@ -387,13 +387,13 @@ const styles = StyleSheet.create({
         maxWidth: MAX_CONTENT_WIDTH,
     },
     // Premium Match Card
-    matchCardPremium: {
-        marginBottom: spacing.sm,
-        borderRadius: radius.lg,
-        overflow: 'hidden',
-        padding: spacing.md,
-    },
-    cardSilkHighlight: {
+    matchCardPremium: {
+        marginBottom: spacing.sm,
+        borderRadius: radius.lg,
+        overflow: 'hidden',
+        padding: spacing.md,
+    },
+    cardSilkHighlight: {
         position: 'absolute',
         top: 0,
         left: 0,

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

@@ -20,20 +20,22 @@ import { skipQuestion, getSkippedQuestionIds } from "../../src/lib/skippedQuesti
 import { hasSeenSwipeTutorial, markSwipeTutorialSeen } from "../../src/lib/swipeTutorialSeen";
 import { invokeWithAuthRetry } from "../../src/lib/authErrorHandler";
 // import SwipeCard from "../../src/components/SwipeCard";
-import { SwipeCardPremium as SwipeCard } from "../../src/components/swipe"; // PoC: Premium styling
-import { SwipeTutorial } from "../../src/components/tutorials";
-import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
+import { SwipeCardPremium as SwipeCard } from "../../src/components/swipe"; // PoC: Premium styling
+import { SwipeTutorial } from "../../src/components/tutorials";
+import { QuestionFeedbackModal } from "../../src/components/feedback";
+import { GradientBackground, GlassCard, GlassButton, DecorativeSeparator } from "../../src/components/ui";
 import { Events } from "../../src/lib/analytics";
 import { colors, gradients, spacing, typography, radius, shadows } from "../../src/theme";
 
 export default function SwipeScreen() {
     const { packId } = useLocalSearchParams();
-    const [questions, setQuestions] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const [showTutorial, setShowTutorial] = useState(false);
-    const [isBlocked, setIsBlocked] = useState(false);
-    const [gapInfo, setGapInfo] = useState<{ unanswered: number; threshold: number } | null>(null);
+    const [questions, setQuestions] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [showTutorial, setShowTutorial] = useState(false);
+    const [feedbackQuestion, setFeedbackQuestion] = useState<{id: string, text: string} | null>(null);
+    const [isBlocked, setIsBlocked] = useState(false);
+    const [gapInfo, setGapInfo] = useState<{ unanswered: number; threshold: number } | null>(null);
     const { enabledPackIds, fetchPacks } = usePacksStore();
     const { partner, couple } = useAuthStore();
     const hasTrackedExhausted = useRef(false);
@@ -572,13 +574,17 @@ export default function SwipeScreen() {
                         <View style={[styles.stackCard, styles.stackCardSecond]} />
                     )}
 
-                    {/* Active card */}
-                    <SwipeCard
-                        key={questions[currentIndex].id}
-                        question={questions[currentIndex]}
-                        onSwipe={handleSwipe}
-                    />
-                </View>
+                    {/* Active card */}
+                    <SwipeCard
+                        key={questions[currentIndex].id}
+                        question={questions[currentIndex]}
+                        onSwipe={handleSwipe}
+                        onReport={() => setFeedbackQuestion({
+                            id: questions[currentIndex].id,
+                            text: questions[currentIndex].text
+                        })}
+                    />
+                </View>
 
                 {/* Hint - Premium styling */}
                 <Animated.View
@@ -592,13 +598,21 @@ export default function SwipeScreen() {
                 <View style={styles.bottomSpacer} />
             </View>
 
-            {/* Tutorial Overlay */}
-            {showTutorial && (
-                <SwipeTutorial onComplete={handleTutorialComplete} />
-            )}
-        </GradientBackground>
-    );
-}
+            {/* Tutorial Overlay */}
+            {showTutorial && (
+                <SwipeTutorial onComplete={handleTutorialComplete} />
+            )}
+
+            {/* Question Feedback Modal */}
+            <QuestionFeedbackModal
+                visible={!!feedbackQuestion}
+                onClose={() => setFeedbackQuestion(null)}
+                questionId={feedbackQuestion?.id || ''}
+                questionText={feedbackQuestion?.text || ''}
+            />
+        </GradientBackground>
+    );
+}
 
 const styles = StyleSheet.create({
     container: {

apps/mobile/app/(auth)/login.tsx

@@ -781,7 +781,7 @@ const styles = StyleSheet.create({
         color: colors.primary,
     },
     forgotPassword: {
-        alignSelf: "flex-end",
+        alignSelf: "center",
         marginTop: -spacing.xs,
         marginBottom: spacing.xs,
     },