Add dashboard onboarding banners (P4.1)
All checks were successful
Deploy / deploy (push) Successful in 2m29s

Implement OnboardingBanner component that prompts new users to complete
setup with contextual banners for:
- Garmin connection (links to /settings/garmin)
- Period date (button with callback for date picker)
- Notification time (links to /settings)

Banners display at the top of the dashboard when setup is incomplete,
with icons and styled action buttons. Each banner uses role="alert"
for accessibility.

- Add OnboardingBanner component (16 tests)
- Integrate into dashboard page (5 new tests, 28 total)
- Update UserData interface to include garminConnected, notificationTime
- Test count: 770 tests across 43 files

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-11 21:38:16 +00:00
parent f69e1fd614
commit 2bfd93589b
5 changed files with 494 additions and 11 deletions

View File

@@ -4,7 +4,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
## Current State Summary
### Overall Status: 749 tests passing across 42 test files
### Overall Status: 770 tests passing across 43 test files
### Library Implementation
| File | Status | Gap Analysis |
@@ -72,6 +72,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
| `OverrideToggles` | **COMPLETE** | Toggle buttons with callbacks |
| `DayCell` | **COMPLETE** | Phase-colored day with click handler |
| `MiniCalendar` | **COMPLETE** | Compact calendar widget with phase colors, navigation, legend (23 tests) |
| `OnboardingBanner` | **COMPLETE** | Setup prompts for new users with icons and action buttons, 16 tests |
| `MonthView` | **COMPLETE** | Calendar grid with DayCell integration, navigation controls, phase legend |
### Test Coverage
@@ -90,7 +91,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
| `src/app/api/today/route.test.ts` | **EXISTS** - 22 tests (daily snapshot, auth, decision, overrides, phases, nutrition, biometrics) |
| `src/app/api/overrides/route.test.ts` | **EXISTS** - 14 tests (POST/DELETE overrides, auth, validation, type checks) |
| `src/app/login/page.test.tsx` | **EXISTS** - 14 tests (form rendering, auth flow, error handling, validation) |
| `src/app/page.test.tsx` | **EXISTS** - 23 tests (data fetching, component rendering, override toggles, error handling) |
| `src/app/page.test.tsx` | **EXISTS** - 28 tests (data fetching, component rendering, override toggles, error handling) |
| `src/lib/nutrition.test.ts` | **EXISTS** - 17 tests (seed cycling, carb ranges, keto guidance by phase) |
| `src/lib/email.test.ts` | **EXISTS** - 24 tests (email content, subject lines, formatting, token expiration warnings) |
| `src/lib/ics.test.ts` | **EXISTS** - 23 tests (ICS format validation, 90-day event generation, timezone handling) |
@@ -115,6 +116,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
| `src/components/dashboard/nutrition-panel.test.tsx` | **EXISTS** - 12 tests (seeds, carbs, keto guidance) |
| `src/components/dashboard/override-toggles.test.tsx` | **EXISTS** - 18 tests (toggle states, callbacks, styling) |
| `src/components/dashboard/mini-calendar.test.tsx` | **EXISTS** - 23 tests (calendar grid, phase colors, navigation, legend) |
| `src/components/dashboard/onboarding-banner.test.tsx` | **EXISTS** - 16 tests (setup prompts, icons, action buttons, interactions, dismissal) |
| `src/components/calendar/day-cell.test.tsx` | **EXISTS** - 23 tests (phase coloring, today highlighting, click handling) |
| `src/app/plan/page.test.tsx` | **EXISTS** - 16 tests (loading states, error handling, phase display, exercise reference, rebounding techniques) |
| E2E tests | **AUTHORIZED SKIP** - Per specs/testing.md |
@@ -709,17 +711,19 @@ Testing, error handling, and refinements.
Enhancements from spec requirements that improve user experience.
### P4.1: Dashboard Onboarding Banners
- [ ] Show setup prompts for missing configuration
### P4.1: Dashboard Onboarding Banners ✅ COMPLETE
- [x] Show setup prompts for missing configuration
- **Spec Reference:** specs/dashboard.md mentions onboarding banners
- **Features Needed:**
- Banner when Garmin not connected
- Banner when period date not set
- Banner when notification time not configured
- Dismissible after user completes setup
- **Implementation Details:**
- `OnboardingBanner` component created at `src/components/dashboard/onboarding-banner.tsx`
- Tests at `src/components/dashboard/onboarding-banner.test.tsx` - 16 tests
- Dashboard integration at `src/app/page.tsx` - 5 new tests added to page.test.tsx (28 total)
- Features: Garmin connection banner, period date banner with callback, notification time banner
- Banners render at top of dashboard when setup incomplete
- **Files:**
- `src/app/page.tsx` - Add conditional banner rendering
- `src/components/dashboard/onboarding-banner.tsx` - New component
- `src/app/page.tsx` - Added conditional banner rendering at top of dashboard
- `src/components/dashboard/onboarding-banner.tsx` - New component with icons, action buttons, styling
- `src/components/dashboard/onboarding-banner.test.tsx` - 16 tests covering rendering, interactions, dismissal
- **Why:** Helps new users complete setup for full functionality
### P4.2: Accessibility Improvements