Add dashboard onboarding banners (P4.1)
All checks were successful
Deploy / deploy (push) Successful in 2m29s
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user