rework onboarding as 3-screen wizard, mask PGlite download

two intro screens explain the app purpose, third screen is the
form. remove step selector, always start at neu. dot indicators
for progress, "App wird vorbereitet" while DB loads.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 14:43:14 +01:00
parent 45bee68f52
commit 88933e9c13
2 changed files with 223 additions and 141 deletions

View File

@@ -0,0 +1,38 @@
# Onboarding Redesign (Issue #2, Sub-project 1)
## Goal
Replace the single-screen onboarding form with a 3-screen wizard that explains the app's purpose and masks the PGlite download time with static content.
## Screen flow
3 screens with dot progress indicators and a "Weiter" button. Forward-only navigation.
### Screen 1 — Was ist TherapyFinder?
Headline + 2-3 sentences: the app helps organize your path to therapy — tracking contacts, documenting rejections, preparing your Kostenerstattungsantrag.
### Screen 2 — Warum dieses Tool?
Headline + 2-3 sentences: the process is long and bureaucratic, this tool keeps track so you don't have to. Data stays on device.
### Screen 3 — Über dich
Form fields (no step selector):
- Name
- PLZ + Ort (grid, 2 columns)
- Krankenkasse (with GKV datalist autocomplete)
- "Weiter" button — creates nutzer with `aktueller_schritt = 'neu'`, navigates to `/prozess`
- Button shows "App wird vorbereitet…" if DB isn't ready yet
### PGlite masking
`getDb()` is already called on component mount. Screens 1-2 provide reading time. No changes to loading logic needed.
### Implementation
Rewrite `OnboardingForm` as a stateful wizard (`step` state: 0, 1, 2). Screens 0-1 are static JSX. Screen 2 is the form. Dot indicators at the bottom (3 dots, active one highlighted). Remove `aktueller_schritt` form field and its import of `PROZESS_SCHRITTE`.
## Files changed
- **Modify:** `src/features/onboarding/components/onboarding-form.tsx` — wizard with 3 screens