# Mobile App Refactoring Tasks

Track progress by checking off completed items.

---

## Phase 1: Extract Shared Hooks

### 1.1 Ambient Orb Animation Hook
- [ ] Create `src/hooks/useAmbientOrbAnimation.ts`
- [ ] Extract animation logic from `app/(app)/swipe.tsx`
- [ ] Update `app/(app)/swipe.tsx` to use hook
- [ ] Update `app/(app)/chat/[id].tsx` to use hook
- [ ] Update `src/components/SwipeCard.native.tsx` to use hook
- [ ] Remove duplicate animation code from all files

### 1.2 Media Picker Hook
- [ ] Create `src/hooks/useMediaPicker.ts`
- [ ] Extract image picker logic from chat screen
- [ ] Extract video picker logic from chat screen
- [ ] Extract camera logic from chat screen
- [ ] Update chat screen to use hook

### 1.3 Typing Indicator Hook
- [ ] Create `src/hooks/useTypingIndicator.ts`
- [ ] Extract broadcast channel logic from chat
- [ ] Extract typing state management
- [ ] Update chat screen to use hook

### 1.4 Message Subscription Hook
- [ ] Create `src/hooks/useMessageSubscription.ts`
- [ ] Extract real-time subscription logic
- [ ] Extract message status update logic
- [ ] Extract optimistic update logic
- [ ] Update chat screen to use hook

---

## Phase 2: Shared UI Components

### 2.1 Decorative Separator
- [ ] Create `src/components/ui/DecorativeSeparator.tsx`
- [ ] Support diamond, dot, and line variants
- [ ] Update `app/(app)/swipe.tsx` (6+ instances)
- [ ] Update `app/(app)/chat/[id].tsx`
- [ ] Update `src/components/SwipeTutorial.tsx`
- [ ] Remove duplicate separator styles

### 2.2 Loading Overlay
- [ ] Create `src/components/ui/LoadingOverlay.tsx`
- [ ] Support spinner, shimmer, and progress variants
- [ ] Extract UploadingSkeleton from chat screen
- [ ] Update usage across app

### 2.3 Read Receipt
- [ ] Create `src/components/ui/ReadReceipt.tsx`
- [ ] Support sent, delivered, read states
- [ ] Update chat screen MessageMeta
- [ ] Remove inline receipt logic

### 2.4 Ambient Orbs Component
- [ ] Create `src/components/ui/AmbientOrbs.tsx`
- [ ] Use `useAmbientOrbAnimation` hook
- [ ] Support default, chat, premium variants
- [ ] Update swipe screen to use component
- [ ] Update chat screen to use component

---

## Phase 3: Split Zustand Store

### 3.1 Create Store Structure
- [ ] Create `src/store/` directory structure
- [ ] Create `src/store/authStore.ts`
- [ ] Create `src/store/matchStore.ts`
- [ ] Create `src/store/packsStore.ts`
- [ ] Create `src/store/messageStore.ts`
- [ ] Create `src/store/subscriptionStore.ts`

### 3.2 Migrate Stores
- [ ] Move `useAuthStore` to `authStore.ts`
- [ ] Move `useMatchStore` to `matchStore.ts`
- [ ] Move `usePacksStore` to `packsStore.ts`
- [ ] Move `useMessageStore` to `messageStore.ts`
- [ ] Move `useSubscriptionStore` to `subscriptionStore.ts`

### 3.3 Update Exports
- [ ] Update `src/store/index.ts` to re-export all stores
- [ ] Verify all imports still work
- [ ] Delete old monolithic code from index.ts

---

## Phase 4: Decompose Chat Screen

### 4.1 Create Feature Structure
- [ ] Create `src/features/chat/` directory
- [ ] Create `src/features/chat/components/` directory
- [ ] Create `src/features/chat/hooks/` directory
- [ ] Create `src/features/chat/types.ts`

### 4.2 Extract Components
- [ ] Extract `ChatHeader.tsx`
- [ ] Extract `MessageContent.tsx`
- [ ] Extract `ChatVideoPlayer.tsx`
- [ ] Extract `MessageBubble.tsx`
- [ ] Extract `TypingIndicator.tsx`
- [ ] Extract `InputBar.tsx`
- [ ] Extract `MediaMenu.tsx`
- [ ] Extract `ChatMessages.tsx`
- [ ] Extract `UploadProgress.tsx`

### 4.3 Extract Hooks
- [ ] Create `useChatMessages.ts`
- [ ] Create `useMediaUpload.ts`
- [ ] Create `useVideoCache.ts`

### 4.4 Create Main Screen
- [ ] Create `src/features/chat/ChatScreen.tsx`
- [ ] Wire up all components and hooks
- [ ] Create `src/features/chat/index.ts` exports
- [ ] Update `app/(app)/chat/[id].tsx` to use feature

### 4.5 Cleanup
- [ ] Remove old code from route file
- [ ] Verify all functionality works
- [ ] Test real-time messaging
- [ ] Test media upload/download
- [ ] Test video playback

---

## Phase 5: Decompose Profile Screen

### 5.1 Create Feature Structure
- [ ] Create `src/features/profile/` directory
- [ ] Create `src/features/profile/components/` directory
- [ ] Create `src/features/profile/hooks/` directory

### 5.2 Extract Components
- [ ] Extract `ProfileHeader.tsx`
- [ ] Extract `CoupleStatus.tsx`
- [ ] Extract `SettingsSection.tsx`
- [ ] Extract `NotificationSettings.tsx`
- [ ] Extract `PrivacySettings.tsx`
- [ ] Extract `AppearanceSettings.tsx`
- [ ] Extract `DangerZone.tsx`

### 5.3 Extract Hooks
- [ ] Create `useProfileSettings.ts`
- [ ] Create `useCoupleManagement.ts`

### 5.4 Create Main Screen
- [ ] Create `src/features/profile/ProfileScreen.tsx`
- [ ] Create `src/features/profile/index.ts` exports
- [ ] Update `app/(app)/profile.tsx` to use feature

---

## Phase 6: Component Organization

### 6.1 Reorganize Components
- [ ] Create `src/components/feedback/` directory
- [ ] Move `FeedbackModal.tsx` to feedback/
- [ ] Move `QuestionFeedbackModal.tsx` to feedback/
- [ ] Create `src/components/tutorials/` directory
- [ ] Move `SwipeTutorial.tsx` to tutorials/
- [ ] Move `MatchesTutorial.tsx` to tutorials/
- [ ] Create `src/components/paywall/` directory
- [ ] Move `Paywall.tsx` to paywall/
- [ ] Create `src/components/swipe/` directory
- [ ] Move `SwipeCard.native.tsx` to swipe/
- [ ] Move `SwipeCard.web.tsx` to swipe/
- [ ] Move `SwipeCardPremium.tsx` to swipe/

### 6.2 Update Imports
- [ ] Update all imports for moved components
- [ ] Create index.ts files for each directory
- [ ] Verify no broken imports

---

## Phase 7: Testing Infrastructure

### 7.1 Setup
- [ ] Install testing dependencies (jest, testing-library)
- [ ] Configure jest for React Native
- [ ] Create test utilities and mocks

### 7.2 Hook Tests
- [ ] Test `useAmbientOrbAnimation`
- [ ] Test `useMediaPicker`
- [ ] Test `useTypingIndicator`
- [ ] Test `useMessageSubscription`
- [ ] Test `useChatMessages`
- [ ] Test `useMediaUpload`

### 7.3 Store Tests
- [ ] Test `authStore` actions
- [ ] Test `matchStore` actions
- [ ] Test `packsStore` actions
- [ ] Test `messageStore` actions
- [ ] Test `subscriptionStore` actions

### 7.4 Component Tests
- [ ] Test `DecorativeSeparator` variants
- [ ] Test `ReadReceipt` states
- [ ] Test `InputBar` interactions
- [ ] Test `MessageBubble` rendering

---

## Progress Summary

| Phase | Status | Completion |
|-------|--------|------------|
| 1. Shared Hooks | Not Started | 0% |
| 2. Shared UI Components | Not Started | 0% |
| 3. Split Store | Not Started | 0% |
| 4. Decompose Chat | Not Started | 0% |
| 5. Decompose Profile | Not Started | 0% |
| 6. Component Organization | Not Started | 0% |
| 7. Testing | Not Started | 0% |

---

## Notes

- Each phase can be completed independently
- Test after each component extraction
- Keep original files until phase is verified
- Follow DESIGN.md for any UI changes
- Do not modify tab bar background styling