# Mobile Plan 7 — Polish + Web Export

**Goal:** Animations, haptics, mock notifications, splashscreen, app icon, web export config, second CF Pages project.

## File map

```
apps/mobile/
  app.json                       → MODIFY: web platform + splash + adaptive icon refresh
  metro.config.js                → MODIFY: web platforms list
  package.json                   → MODIFY: + build:web script
  components/
    XPPopup.tsx                  → MODIFY: physics-y arc with Reanimated 4 spring
    CelebrationOverlay.tsx       → MODIFY: confetti via Lottie + level-up variant
    LevelUpModal.tsx             → NEW: full-screen modal on level threshold
  lib/
    haptics.ts                   → wraps expo-haptics with no-op on web
    notifications.ts             → mock scheduling logic (logs, no real send)
  providers/
    NotificationProvider.tsx     → mock scheduler + permission stub

apps/admin/...                   → admin Plan-page documenting CF Pages config

assets/
  splash.png                     → updated brand splash
  icon.png                       → updated app icon
  adaptive-icon.png              → updated Android adaptive
  notification-icon.png          → for android notifications
```

## Tasks

### Polish

- [ ] Replace XPPopup animation w/ arc motion (Reanimated `withSpring` chained on x + y)
- [ ] CelebrationOverlay swap to Lottie confetti (install `lottie-react-native`)
- [ ] LevelUpModal triggered when level changes; auto-dismiss after 4s or tap
- [ ] Haptics on every check-in, completion, level-up, badge-unlock
- [ ] Notifications mock provider — exposes scheduleHabitReminder/cancelAll, logs only
- [ ] Splash + icon assets refreshed (Tim provides finals or uses existing orange-on-white placeholders)
- [ ] App.json: add `web` platform with `output: "static"` and `bundler: "metro"`

### Web Export

- [ ] `apps/mobile/package.json`: add `"build:web": "npx expo export --platform web --output-dir dist"`
- [ ] Root `package.json`: add `"build:web-mobile": "turbo run build --filter=@carrot/shared && cd apps/mobile && npm run build:web"`
- [ ] Web export test: `npm run build:web-mobile` succeeds, dist contains index.html + JS bundles
- [ ] Document the limitations in `apps/mobile/WEB-CAVEATS.md` (notifications no-op, haptics no-op, RN-only modules to avoid)
- [ ] Wrap touch surfaces with max-width container so desktop browser shows phone-shaped UI
- [ ] CF Pages config doc → `docs/DEPLOYMENT.md` (admin section also references it)

### CF Pages Project Setup (manual on dashboard)

- Project name: `carrot-app`
- Production branch: `main`
- Root directory: `apps/mobile`
- Build command: `cd ../.. && npm install && cd apps/mobile && npx expo export --platform web --output-dir dist`
- Build output: `dist`
- Env: `NODE_VERSION=20`

## Verification

- `npm run build:web-mobile` produces a working static site locally
- Manual local serve (`npx serve apps/mobile/dist`) opens the app
- Onboarding + Home + Progress + Squad + Profile all render in browser
- iOS/Android device build still works (no regressions)
- `npm run check` passes