# Mobile Plan 2 — Onboarding Flow

**Goal:** First-launch flow that captures display name, primary goal, suggested habits, and seeds AppDataProvider.

**Scope boundary:** Onboarding only. No squad join, no premium upsell, no notifications permission yet (deferred to Plan 7).

## File map

```
apps/mobile/
  app/
    onboarding/
      _layout.tsx            → stack with no header
      welcome.tsx            → screen 1: logo + tagline + "Los geht's"
      name.tsx               → screen 2: name input + locale picker
      goal.tsx               → screen 3: 4 preset cards + custom option
      habits.tsx             → screen 4: 3-4 suggested habits w/ toggles + add custom
      done.tsx               → screen 5: celebration → push to (tabs)/
    _layout.tsx              → MODIFY: redirect to /onboarding/welcome if !user.onboardedAt
  lib/
    onboarding-presets.ts    → goal categories + emoji + habit suggestions + milestones
  components/
    OnboardingProgress.tsx   → 5-dot progress indicator
    GoalPresetCard.tsx       → tap-to-select goal card
    HabitSuggestionRow.tsx   → toggleable habit row with XP value
  providers/
    AppDataProvider.tsx      → MODIFY: add completeOnboarding(input) action
  types/
    onboarding.ts            → OnboardingInput type
```

## Tasks

- [ ] **1. Preset data** — write `lib/onboarding-presets.ts` exporting `GOAL_PRESETS` (4 entries: Fitter werden 🏃, Mehr lesen 📚, Weniger Stress 🧘, Eigenes Ziel ✨) each with title, emoji, suggested habits, suggested milestones (data already in dummy-app-design.md §3).
- [ ] **2. Onboarding types** — `OnboardingInput = { name: string; locale: 'de'|'en'; goalPresetId: string | 'custom'; customGoalTitle?: string; customGoalEmoji?: string; selectedHabits: HabitTemplate[] }`.
- [ ] **3. Welcome screen** — full-screen orange logo splash, tagline, single CTA.
- [ ] **4. Name screen** — `TextInput` for display name, `SegmentedControl`-style language toggle (DE/EN).
- [ ] **5. Goal screen** — 2x2 grid of `GoalPresetCard`. Selecting "Eigenes Ziel" reveals title input + emoji picker.
- [ ] **6. Habits screen** — list of 3-4 `HabitSuggestionRow` based on selected goal. Each toggleable, all pre-checked. "+ Eigener Habit" opens inline form.
- [ ] **7. Done screen** — confetti animation (Reanimated), "Los geht's" CTA → router.replace('/(tabs)').
- [ ] **8. AppDataProvider.completeOnboarding** — creates user (display name), goal, milestones, habits in storage; sets `user.onboardedAt`.
- [ ] **9. Root layout redirect** — in `app/_layout.tsx`, after AppData loads, if `!user.onboardedAt` → `router.replace('/onboarding/welcome')`.
- [ ] **10. Visual polish** — Reanimated scale-in for cards, haptic on each tap, theme-aware colors throughout.

## Verification

- Reset AsyncStorage in dev, restart app → onboarding shows.
- Complete flow → lands on Home with the chosen goal active, the habits visible, no completions yet.
- `npm run check` passes.