chahinebrini b23bd6d29f feat(onboarding,protection): Duo-style flow + cooldown auto-disable fix + Family Controls live
## Duo-Style Onboarding (Foundation + alle Slides)

Self-contained Onboarding-Flow mit Lyra-Mascot ersetzt das Spotlight-POC vom
vorherigen Iteration. Slides leben unter `components/onboarding/slides/`.

- Foundation: OnboardingShell (Progress + ScrollView + sticky CTABar),
  LyraBubble (Rive-Avatar + animierte Speech-Bubble), SlideProgress, CTABar
- Slides: Welcome, Privacy (4 Versprechen), Nickname (inline + PATCH /me),
  DigaChoice (Ja/Nein-Branch), DigaCode (redeem-Endpoint + inline-Errors),
  Plan (Pro/Legend cards, monthly/yearly toggle, 2 Monate gratis, Härtefall-
  Mailto), Payment (RevenueCat-Dev-Stub bis Phase-0), Protection (activate +
  PermissionDeniedSheet-Wiring), Done (animierter Checkmark + Streak-Day-1)
- State-Machine in app/onboarding/index.tsx: 9 Slides, DiGA-Branch, Resume-
  on-launch via slideFromStep(me.onboardingStep)
- Routing-gate in (app)/_layout.tsx: step != 'done' → /onboarding
- Backend Profile.onboardingStep enum extended:
  welcome | account | plan | pre_protection | done (+ legacy nickname/block)
- Backend diga redeem: step='pre_protection' (NICHT 'done') — User muss noch
  durch Protection-Slide für NEFilter/VPN-Aktivierung
- Locale-Keys (de/en/fr/ar): onboarding.lyra.<slide>.body, .cta_primary,
  Plan-Tier-Details (3,99/7,99 €/Mo, 39,90/79,90 €/Jahr mit 2 Monaten gratis),
  Härtefall-Link, DiGA-Code-Errors, Protection-Feat-Descriptions

## Cooldown Auto-Disable Race-Fix

Bug: nach Cooldown-Ablauf bleib URL-Filter installiert (NEFilter in iOS-
Settings sichtbar als "Läuft..."). Root-cause: `/api/cooldown/status` GET
auto-resolved beim ersten expired-Hit; zweiter Call in
applyCooldownDisableIfElapsed sah cooldownEndsAt=null → bail → forceDisable
nie aufgerufen.

- useProtectionState.fetchState: lokalen next.cooldown.endsAt state nutzen
  statt redundantem API-Call. Atomarer, race-frei.
- AppState-Listener-Path unverändert (dort ist es der erste API-Call, kein
  Race).
- lib/protection.forceDisable: console.log für Debug-Visibility.

## iOS NEFilter Robust-Disable (Native)

`removeFromPreferences()` alleine ist auf iOS 18+ unzuverlässig — Settings-
UI zeigt "Läuft..." obwohl Provider beendet sein sollte. 2-Step-Pattern:

  1. loadFromPreferences
  2. isEnabled = false + saveToPreferences (stoppt Filter-Daemon)
  3. removeFromPreferences (Config-Eintrag aus Settings)

Quelle: Apple-Developer-Forums + eigene Empirie. Pattern wird auch in
PermissionDeniedSheet's resetUrlFilter genutzt (analog).

## Family Controls jetzt immer aktiv

Apple-Entitlement seit 2026-05 für ReBreak approved (TestFlight-akzeptiert).
`familyControlsEnabled: true` hart in app.config.ts (kein Env-Var-Gating mehr).
"Bald verfügbar"-Placeholder in blocker.tsx entfernt — App-Lock-Toggle ist
jetzt voll funktional auf iOS.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-17 17:48:05 +02:00
..

Rebreak Native (React Native + Expo)

Mobile App für iOS + Android. Migration von Nuxt+Capacitor → React Native+Expo. Migration-Plan: apps/rebreak/docs/react-native-migration.md

Status

Phase 1 — Foundation Skeleton (2026-05-02)

  • Verzeichnisstruktur
  • package.json mit Expo SDK 53 + RN 0.76 (New Architecture)
  • app.config.ts (Expo, Bundle-ID org.rebreak.app)
  • Expo Router Skeleton
  • NativeWind Setup (Tailwind für RN)
  • Metro Config (pnpm Monorepo aware)
  • Supabase Client + API Wrapper
  • pnpm install — vom User auszuführen
  • expo prebuild — generiert ios/ + android/ Bare-Projekte
  • Native Module Imports (NEFilter, VpnService, A11y) — Phase 5+

Setup

# vom Monorepo-Root:
pnpm install

# Native-Projekte generieren (lokal, nicht committed)
cd apps/rebreak-native
pnpm prebuild

# Run
pnpm ios       # iOS Simulator
pnpm android   # Android Emulator

Stack

Bereich Lib
Framework React Native 0.76 (New Architecture) + Expo SDK 53
Routing Expo Router (file-based)
State Zustand
Server State TanStack Query (React Query)
Styling NativeWind 4 (Tailwind)
Forms React Hook Form + Valibot
i18n react-i18next
Auth @supabase/supabase-js + AsyncStorage
Animation react-native-reanimated, lottie-react-native
Storage react-native-mmkv (fast key-value)

Verzeichnisstruktur

apps/rebreak-native/
├── app/                  # Expo Router (file-based routes)
│   ├── _layout.tsx       # Root Stack
│   ├── index.tsx         # Landing (auth oder app entscheiden)
│   ├── (auth)/           # Auth-Flow (signin, signup, forgot-password)
│   └── (app)/            # Authenticated App (tabs)
├── components/           # Reusable UI Components
├── hooks/                # Custom React Hooks
├── stores/               # Zustand Stores
├── lib/                  # Supabase Client, API Wrapper, Utils
│   ├── supabase.ts
│   └── api.ts
├── locales/              # de.json, en.json
├── modules/              # Custom Expo Native Modules
│   ├── rebreak-ios-filter/        # NEFilter + Tunnel (Phase 5)
│   ├── rebreak-android-blocker/   # VpnService + DnsFilter (Phase 6)
│   └── rebreak-android-a11y/      # AccessibilityService (Phase 6)
├── plugins/              # Expo Config Plugins
└── assets/               # Icons, Splashscreens, Fonts

Wichtige Konfiguration

Datei Zweck
app.config.ts Expo App-Config (Bundle-ID, Permissions, Plugins)
metro.config.js Monorepo-aware Metro (Symlinks, Workspace-Folders)
babel.config.js NativeWind Preset + Reanimated Plugin
tailwind.config.js Tailwind Config — Brand-Colors aus apps/rebreak/ syncen
global.css NativeWind Tailwind-Imports

Native Module Strategie

Bestehender Native-Code aus apps/rebreak/ios/ + apps/rebreak/android/ wird in Expo Native Modules gewrappt — ohne neu zu schreiben.

iOS — modules/rebreak-ios-filter/

Wrapped:

  • RebreakURLFilter (NEFilterDataProvider) → blockt bet365 etc.
  • RebreakTunnel (NEPacketTunnelProvider) → DNS-Filter

Android — modules/rebreak-android-blocker/

Wrapped:

  • RebreakVpnService (Kotlin) → VpnService DNS-Filter
  • DnsFilter + HashList + DomainHasher

Android — modules/rebreak-android-a11y/

Wrapped:

  • RebreakAccessibilityService → Detection von Gambling-Apps

⚠️ Wichtige Hinweise

  • Schutz-Stack bleibt 1:1 erhalten — Swift- und Kotlin-Code wandert unverändert in modules/.
  • Backend bleibt in apps/rebreak/server/ — RN ruft die gleichen Endpoints.
  • Alte Capacitor-App bleibt deployed bis RN-App im Store ist.
  • Kein Auto-Commit — User entscheidet wann committet wird.

Phasen-Tracker

Siehe Migration-Plan für Details: apps/rebreak/docs/react-native-migration.md