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,