Mobile Build Prompt: 03 - Profile Screen (The Soul Journal)

Goal

Design the Profile Screen ("The Soul Journal")—a private, secure, and intimate sanctuary for the user's historical mystical journey.

Design Constraints (Refer to Master Design Guide)

• Theme: OLED Noir (#000000) base with Ethereal Glaze accents (Dusk Blue, Sage).
• Philosophy: "Privacy-First Ritual"—clear UI signaling that data is secure and local.
• Aesthetic: "Anti-AI"—high-quality grain overlay on containers, avoiding perfect linear aesthetics.
• Haptic: "Tactile Privacy"—subtle feedback for toggles and buttons (Haptic Impact Light).

Implementation Tasks

1. Layout & Components

• Top Section: User profile + "Soul Stats" (e.g., "Energy Accumulated," "Ritual Consistency").
• Soul Journey Timeline: A vertical line representation of reading history with scroll-triggered node animations.
• PrivacyShieldWidget: A prominent UI signal (icon + text) indicating "Local-Only Data" status.

2. Interaction & Haptics

• Haptic: HapticEngine.trigger('TICK') (Light) for all menu toggles, button taps, and history expansion.
• Physics: Smooth, vertical list scroll with react-native-reanimated entry transitions for historical items.

3. Visual Polish

• Persistent grain overlay on container.
• Ethereal Glaze accents (Dusk Blue) for primary actions.
• Parallax-driven layering for the header image to add depth.

Technical Specs

• Layout: FlashList for the history timeline.
• Visuals: react-native-reanimated (scroll-linked animations for timeline nodes).
• Theme: OLED Noir (#000000).

Prompt for AI Developer

"Build the ProfileScreen.tsx.

1. Layout: Top section with profile/stats (Energy/Consistency), middle with SoulJourneyTimeline, bottom with settings list.
2. Theme: OLED-black base (#000000). Use 'Ethereal Glaze' accents (Dusk Blue) for buttons and indicators.
3. Components:
   • SoulJourneyTimeline: Implement using FlashList with scroll-linked node reveal animations (use useAnimatedStyle for opacity/scale).
   • PrivacyShieldWidget: A clean, minimal UI block signaling that all reading data is stored locally.
4. Haptics: All interactions (toggles, buttons) trigger HapticEngine.trigger('TICK').
5. Aesthetic: Apply a consistent grain overlay across the screen.
6. Privacy: Ensure the interface reflects the 'Anti-AI' aesthetic—avoid perfectly clean, sterilized layouts; use hand-drawn icons or textures."