life-echo/app-ios/.cursor/plans/life_echo_mvp_client_35222af2.plan.md

name, overview, todos

name	overview	todos
Life Echo MVP Client	Build a minimal viable React Native client for "往事拾遗" (Life Echo) - a memoir creation app targeting Chinese users. The app will feature WeChat-style chat UI, e-book reading experience, and a profile page, using gluestack.io v3 components with a warm purple color scheme.	id content status setup-gluestack Install and configure gluestack-ui v3 with custom theme tokens completed id content status setup-navigation Configure tab navigation with 3 tabs and chat detail stack screen completed id content status create-chat-list Build chat list screen with header and conversation items completed id content status create-chat-detail Build full-screen chat detail with messages and input area completed id content status create-memoir Build memoir screen with TOC and chapter reading views completed id content status create-profile Build profile screen with settings sections and toggles completed id content status create-mock-data Create mock data for conversations, messages, chapters, and user profile completed

Life Echo MVP Client Development Plan

Architecture Overview

graph TD
    subgraph Navigation[App Navigation]
        Root[Root Layout]
        Root --> Tabs[Tab Navigator]
        Root --> ChatDetail[Chat Detail Screen]
        Tabs --> ChatList[聊天 - Chat List]
        Tabs --> Memoir[回忆录 - Memoir]
        Tabs --> Profile[我的 - Profile]
    end
    
    subgraph MemoirNav[Memoir Navigation]
        Memoir --> TOC[Table of Contents]
        Memoir --> ChapterReading[Chapter Reading]
    end

1. Project Setup

Install gluestack.io v3

• Install @gluestack-ui/themed and required dependencies
• Configure GluestackUIProvider in root layout

Create Theme Configuration

File: constants/theme.ts - Define color tokens following the design rules:

• deepPurple: #200028 - Primary text, titles
• slatePurple: #8C8EA3 - Secondary text, placeholders
• mediumPurple: #A177A6 - Brand color, buttons, headers
• lavender: #CEB0DA - Highlights, AI avatar background
• blushPink: #DBBABA - User avatar background
• cream: #FAF7F8 - App background
• white: #FFFFFF - Cards, chat bubbles

2. Navigation Structure

Root Layout (app/_layout.tsx)

• Stack navigator with tabs and chat detail screen
• Chat detail uses presentation: 'fullScreenModal' to hide tab bar

Tab Layout (app/(tabs)/_layout.tsx)

• 3 tabs: 聊天, 回忆录, 我的
• Custom tab bar styling with medium purple active color
• Icons: microphone/chat, book, person

3. Core Screens

Screen 1: Chat List (app/(tabs)/index.tsx)

• Header with app title "往事拾遗" and subtitle
• Medium purple header background (#A177A6)
• Conversation list item with:
  • Avatar (lavender background with book emoji)
  • Name "回忆录助手"
  • Last message preview (truncated)
  • Timestamp
• Tip card at bottom explaining the app

Screen 2: Chat Detail (app/chat/[id].tsx)

• Full-screen without tab bar
• Header: back button + "回忆录助手" + "在线" status
• Message list with:
  • AI messages: white bubble, left-aligned, lavender avatar
  • User messages: medium purple bubble, right-aligned, blush avatar
• Input area:
  • Voice/keyboard toggle button
  • Text input with placeholder "说点什么..."
  • Emoji button (placeholder)
  • More options button (photo/camera - placeholder)
  • Send button (visible when text entered)

Screen 3: Memoir (app/(tabs)/memoir.tsx)

• Tab switcher: 目录 | 正在阅读
• TOC View:
  • Book title "这一生" with subtitle
  • Update timestamp
  • Chapter list with number, title, status (已整理/待补充)
• Reading View:
  • Back to TOC button
  • Chapter number and title
  • Serif font content with proper line spacing
  • Quote blocks with lavender background
  • Floating action buttons: 导出 PDF, 分享

Screen 4: Profile (app/(tabs)/profile.tsx)

• User header: avatar, name, plan status (免费体验版)
• Section cards:
  • 套餐与付费: 升级套餐, 我的订单
  • 数据与隐私: 导出所有数据
  • 设置: 语速, 大字模式(toggle), 夜间模式(toggle)
  • 帮助: 常见问题, 反馈与客服, 关于我们

4. Shared Components

Components to Create:

• components/chat/ChatBubble.tsx - Message bubble (AI/User variants)
• components/chat/ChatInput.tsx - Input area with voice/text toggle
• components/chat/ConversationItem.tsx - Chat list item
• components/memoir/ChapterItem.tsx - TOC chapter row
• components/memoir/ChapterContent.tsx - Reading view content
• components/profile/SettingItem.tsx - Settings row with arrow/toggle
• components/profile/SectionCard.tsx - Grouped settings container
• components/ui/Avatar.tsx - Rounded avatar with background color

5. Mock Data

Create data/mockData.ts with:

• Default conversation with "回忆录助手"
• Sample chat messages (AI greeting + sample exchanges)
• Chapter list with titles and status
• Sample chapter content (童年与家庭)
• User profile data

6. Key Implementation Details

Color Usage (Strict Rules):

• NO gradients anywhere
• Header backgrounds: solid #A177A6
• App background: #FAF7F8
• Cards/bubbles: #FFFFFF
• AI bubble: white with #200028 text
• User bubble: #A177A6 with white text

Typography:

• Use Noto Sans SC for UI text
• Use Noto Serif SC for memoir content
• Primary text: #200028
• Secondary text: #8C8EA3

Safe Area Handling:

• Proper padding for iOS notch/Dynamic Island
• Bottom safe area for tab bar and input area