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:
@@ -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
|
||||
Reference in New Issue
Block a user