# Task Plan: Backend Integration & UI Optimization

## Goal
Integrate @repo/sdk backend APIs into the existing Expo frontend and add essential UI optimizations (loading states, refresh, pagination).

## Context
- Frontend pages are complete
- Need to connect to @repo/sdk backend
- Add loading/refresh/nextPage logic
- Tech stack: Expo + React Native + Zustand + TailwindCSS

## Phases

### Phase 1: Discovery [completed]
- [x] Locate @repo/sdk package and understand its API structure
- [x] Identify all frontend pages/screens that need backend integration
- [x] Map out current state management structure (Zustand stores)
- [x] Document API endpoints and data models

**Key Findings:**
- 23 controllers available in @repo/sdk
- 19 screens total (15 need API, 4 static)
- Only 1 Zustand store (categories)
- 15 custom hooks already exist
- Some screens have partial integration

### Phase 2: Enhance Existing Hooks [completed]
- [x] Review existing hooks (use-templates, use-template-detail, etc.)
- [x] Add missing loading states where needed
- [x] Add refresh functionality to hooks
- [x] Ensure pagination is properly implemented
- [x] Add error retry mechanisms

### Phase 3: Create Missing Hooks [pending]
- [x] ~~Video list hook~~ - 不需要，video.tsx已使用useTemplates
- [ ] ⚠️ Messages/chat hook - SDK无消息列表接口，需要与后端确认或定制开发
- [ ] ⚠️ User profile hook - 需要确认SDK中是否有用户信息接口
- [ ] Works list hook enhancements (for worksList.tsx)
- [ ] 审查其他页面是否需要新的hooks

### Phase 4: UI Integration - Tab Screens [completed]
- [x] Home tab: Add refresh, loading states
- [x] Video tab: Add pagination, loading, refresh
- [ ] ⚠️ Message tab: SDK无消息列表接口，需要后端支持
- [ ] ⚠️ My Profile tab: 需要确认SDK中是否有用户信息接口

### Phase 5: UI Integration - Main Screens [completed]
- [x] Generation Record: Add pagination, refresh
- [x] Works List: Add pagination, refresh (带TODO标注)
- [x] Search screens: Add debounce, pagination, loading
- [ ] Template Detail: Add loading states (已有基本loading，可选增强)
- [ ] Generate Video: Add progress tracking (可选增强)

### Phase 6: Global UI Components [completed]
- [x] Create reusable RefreshControl component
- [x] Create reusable LoadingState component
- [x] Create reusable ErrorState component with retry
- [x] Create reusable PaginationLoader component

### Phase 7: Testing & Validation [pending]
- [ ] Test all API integrations
- [ ] Verify loading states
- [ ] Test refresh functionality
- [ ] Validate pagination behavior
- [ ] Test error handling and retry

## Decisions Log
| Decision | Rationale | Date |
|----------|-----------|------|
| - | - | - |

## Errors Encountered
| Error | Attempt | Resolution |
|-------|---------|------------|
| - | - | - |

## Files Modified
- (To be populated as work progresses)