Prompt 02: Journal Tab (History & Reflection)

Goal

Build the Journal screen for the MysticX Expo mobile app. This tab is the user's "spiritual ledger", displaying their reading history, daily streaks, and spiritual stats in a serene, organized manner.

Design Constraints (From Master Guide)

• Visuals: "OLED Noir" (#000000 base, #121212 for card backgrounds).
• Typography: Dual-typography system. Use Playfair Display or Cormorant Garamond for section headers ("Your Journey", "Recent Readings"). Use Inter for timestamps, stats, and utility text.
• Pacing: "Slow UI" philosophy. Lists should scroll smoothly without aggressive bouncing. Use calm whitespace and avoid dense data grids.

Requirements

1. Component: JournalTabView.
2. Top Section (Spiritual Stats):
   • Display key metrics: Total Readings, Cards Drawn, Current Streak.
   • Visual Gamification: Instead of a plain number for the streak, use a glowing "Aura" ring or subtle particle effect (using react-native-reanimated) that intensifies based on the streak count.
3. Middle Section (Filters):
   • A segmented control or pill-based filter to switch between "All Readings", "Daily", and "Spreads".
   • Active state: Antique Gold (#c5a059) text with a frosted glass background (expo-blur).
4. List Section (Reading History):
   • A vertical FlashList of past readings.
   • Each item card should display: Spread Name (Serif), Question preview (Sans-Serif), Timestamp, and Reader Avatar/Name.
   • Implement a subtle parallax effect on scroll for the list items to give a sense of depth.

Implementation Guidance

• Use @shopify/flash-list for the reading history to ensure 60fps scrolling even with hundreds of past readings.
• Haptics: Trigger expo-haptics impactAsync(ImpactFeedbackStyle.Light) when switching filter tabs.
• Empty State: If the user has no readings, display an "Empathy UI" empty state: A beautifully illustrated, dim, empty card spread with a gentle call-to-action ("The cards await your questions...").