# 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 [pending]
- [ ] Review existing hooks (use-templates, use-template-detail, etc.)
- [ ] Add missing loading states where needed
- [ ] Add refresh functionality to hooks
- [ ] Ensure pagination is properly implemented
- [ ] 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 [pending]
- [ ] Home tab: Add refresh, loading states
- [ ] Video tab: Add pagination, loading, refresh
- [ ] Message tab: Add real-time updates, loading
- [ ] My Profile tab: Add refresh, loading states

### Phase 5: UI Integration - Main Screens [pending]
- [ ] Generation Record: Add pagination, refresh
- [ ] Works List: Add pagination, refresh
- [ ] Search screens: Add debounce, pagination, loading
- [ ] Template Detail: Add loading states
- [ ] Generate Video: Add progress tracking

### Phase 6: Global UI Components [pending]
- [ ] Create reusable RefreshControl component
- [ ] Create reusable LoadingState component
- [ ] Create reusable ErrorState component with retry
- [ ] 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)
