# Mobile Plan 6 — Profile Tab + Settings

**Goal:** User profile, goal list, settings, premium upsell stub.

## File map

```
apps/mobile/
  app/
    (tabs)/profile.tsx            → MODIFY: full profile screen
    profile/
      edit.tsx                    → modal: edit display name + avatar color
      premium.tsx                 → modal: Squad subscription upsell (mock)
  components/
    AvatarCircle.tsx              → initials avatar with hash-derived color
    LevelBadge.tsx                → big level number with rarity glow
    ProfileGoalCard.tsx           → goal in profile list with progress + status
    SettingsRow.tsx               → reusable row (icon, label, right-side control)
    SettingsSection.tsx           → grouped settings card
    PremiumUpsellCard.tsx         → orange CTA card "Upgrade to Squad"
  lib/
    avatar.ts                     → initialFromName, colorFromName
```

## Tasks

- [ ] `lib/avatar.ts` — deterministic color per display name (hash → palette index)
- [ ] `AvatarCircle` — 3 sizes (sm/md/lg), shows initials on top of color
- [ ] `LevelBadge` — animated level number + rarity-colored ring
- [ ] Profile screen layout:
  1. Top hero: AvatarCircle + display name + LevelBadge + XP-to-next-level bar
  2. PremiumUpsellCard (only if !isPremium)
  3. "Meine Ziele" section: ProfileGoalCard list (all statuses, sorted by status then created_at desc) + "+ Neues Ziel" card
  4. Settings: Theme | Reminders | Sprache | Streak Freezes | Daten exportieren | Datenschutz | Über
  5. Sign-out button (stub since no auth yet)
- [ ] Theme toggle row → cycles light/dark/system
- [ ] Reminder toggle row → mock toggle, no actual scheduling
- [ ] Sprache row → DE/EN switcher updating user.locale
- [ ] Premium modal: shows Solo €50/year vs Squad €80/year comparison + "Demnächst verfügbar" CTA
- [ ] Edit modal: TextInput for name, color-picker swatches for avatar
- [ ] Settings rows themed light/dark via @carrot/shared

## Verification

- Editing name updates avatar, header, all squad displays
- Theme toggle persists across app restart
- Tapping a goal card opens goal detail (Plan 3)
- `npm run check` passes