---
name: Life Echo MVP Client
overview: 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.
todos:
  - id: setup-gluestack
    content: Install and configure gluestack-ui v3 with custom theme tokens
    status: completed
  - id: setup-navigation
    content: Configure tab navigation with 3 tabs and chat detail stack screen
    status: completed
  - id: create-chat-list
    content: Build chat list screen with header and conversation items
    status: completed
  - id: create-chat-detail
    content: Build full-screen chat detail with messages and input area
    status: completed
  - id: create-memoir
    content: Build memoir screen with TOC and chapter reading views
    status: completed
  - id: create-profile
    content: Build profile screen with settings sections and toggles
    status: completed
  - id: create-mock-data
    content: Create mock data for conversations, messages, chapters, and user profile
    status: completed
---

# Life Echo MVP Client Development Plan

## Architecture Overview

```mermaid
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