# Mobile Plan 3 — Goal Detail + Milestones + Todos

**Goal:** Tappable goal header opens a full-screen goal-detail modal with milestones, todos, linked habits, edit/delete.

## File map

```
apps/mobile/
  app/
    goal/
      [id].tsx                 → goal detail screen
      create.tsx               → modal: create new goal
      edit/[id].tsx            → modal: edit goal
  components/
    MilestoneItem.tsx          → checkable milestone row, expandable
    TodoItem.tsx               → checkable todo row
    GoalProgressRing.tsx       → circular progress ring (react-native-svg)
    AddItemSheet.tsx           → bottom sheet for adding milestone/todo/habit
  providers/
    AppDataProvider.tsx        → MODIFY: addGoal, updateGoal, deleteGoal, addMilestone, completeMilestone, addTodo, completeTodo
  hooks/
    useGoal.ts                 → useGoal(id): goal + milestones + todos + linked habits
  lib/
    progress.ts                → computeGoalProgress(milestones, habits) → 0-100
```

## Tasks

- [ ] Add svg dependency: `npm install react-native-svg --workspace apps/mobile`
- [ ] `lib/progress.ts` — weighted: milestone-progress 60%, habit-completion-rate 40%
- [ ] `useGoal` hook returns { goal, milestones (ordered), openTodos, doneTodos, habits, progress }
- [ ] `MilestoneItem` — circle checkbox, title, optional date, expandable to show its todos
- [ ] `TodoItem` — checkbox, title, optional due date with red text if overdue
- [ ] `GoalProgressRing` — animated SVG ring filling to current progress, % in middle
- [ ] Goal detail screen layout: header (emoji + title + target date + ring) → milestones section → todos section → habits section → edit/delete buttons
- [ ] Tapping milestone checkbox → AppDataProvider.completeMilestone awards `xp_reward`, fires XP popup, checks badge unlock conditions
- [ ] Tapping todo checkbox → completeTodo same pattern
- [ ] AddItemSheet — bottom sheet w/ 3 tabs (Milestone | Todo | Habit), each w/ minimal form
- [ ] FAB on goal detail → opens AddItemSheet
- [ ] Delete confirmation modal before goal deletion (cascades milestones/todos/habits)

## Verification

- Create goal via FAB → appears in goal list and home
- Add milestone with target date → shows in goal detail
- Complete milestone → XP awarded, ring updates, badge if applicable
- Delete goal → confirmation → goal + cascaded children removed
- `npm run check` passes