🏠 Overview › ✅ Implementation Tasks ›✅ epic-scenario-based-follow-up-prompts-scheduler-and-ui-task-008

Implement Scenario Prompt Detail Bottom Sheet shell

epic-scenario-based-follow-up-prompts-scheduler-and-ui-task-008 — Create the ScenarioPromptDetailBottomSheet Flutter widget as a modal bottom sheet following Design System v3. Include sections for full scenario description, triggering activity summary, wellbeing flags (rendered as colored badge chips), and action buttons for 'Start Follow-up' and 'Dismiss'. No inline styles.

high priority medium complexity frontend pending frontend specialist Tier 6

Acceptance Criteria

ScenarioPromptDetailBottomSheet renders as a modal bottom sheet using showModalBottomSheet with isScrollControlled: true and DraggableScrollableSheet for flexible height
Sheet displays the full scenario description in a scrollable text area using Design System v3 typography tokens (no inline styles)
Triggering activity summary section shows placeholder UI (peer mentor name, activity date, duration) with correct layout — data wiring handled in task-009
Wellbeing flags are rendered as colored badge chips using the unified entity color system from styles.css equivalents in Flutter design tokens
Each wellbeing flag badge chip uses a distinct accent color consistent with Design System v3 (no hardcoded hex values — use design tokens)
'Start Follow-up' primary action button uses AppButton widget with correct variant and is wired to a no-op callback placeholder
'Dismiss' secondary action button uses AppButton widget with correct variant and is wired to a no-op callback placeholder
Bottom sheet handle/drag indicator is present at the top of the sheet
Sheet is accessible: all interactive elements have semantic labels, VoiceOver/TalkBack announces section headings and button actions
No inline style declarations anywhere in the widget file — all styling via design tokens or theme
Widget accepts a ScenarioPrompt model as required constructor parameter
Sheet dismisses correctly when user swipes down or taps outside the sheet area
Widget renders correctly at minimum font scale (1.0x) and large font scale (1.4x) without overflow

Technical Requirements

frameworks
Flutter
Riverpod
data models
activity
assignment
performance requirements
Bottom sheet open animation completes within 300ms
Widget tree depth kept shallow — avoid unnecessary nesting that causes layout jank
No synchronous blocking calls in build() method
security requirements
Wellbeing flag data treated as sensitive PII — do not log flag values to console in production builds
Sheet content must not be accessible to screenshots on Android (FLAG_SECURE consideration if wellbeing data displayed)
ui components
DraggableScrollableSheet
AppButton (primary variant for Start Follow-up)
AppButton (secondary/text variant for Dismiss)
Badge chip widget using design tokens for wellbeing flags
SliverList or Column with scroll for content sections
Section heading Text widgets with Design System v3 typography

Execution Context

Execution Tier
Tier 6

Tier 6 - 158 tasks

Can start after Tier 5 completes

Implementation Notes

Use showModalBottomSheet with builder returning a DraggableScrollableSheet (initialChildSize: 0.6, minChildSize: 0.4, maxChildSize: 0.92) to allow natural expansion. Define a ScenarioPromptDetailBottomSheet as a StatelessWidget accepting ScenarioPrompt prompt, VoidCallback onStartFollowUp, and VoidCallback onDismiss. Wellbeing flags should be rendered in a Wrap widget with spacing so they flow naturally across multiple lines. Use the existing AppButton widget — do NOT create new button styles.

For badge chips, create a WellbeingFlagChip widget that reads color from design tokens keyed by flag type. Keep the widget as a pure shell now — data fetching is intentionally deferred to task-009 to avoid coupling. Follow the existing bottom sheet pattern used elsewhere in the codebase (check modal navigation helpers). Ensure the drag handle is a Container with fixed dimensions from spacing tokens.

Testing Requirements

Write widget tests using flutter_test. Test 1: Sheet renders with correct structure (handle, description section, activity summary section, wellbeing flags section, two action buttons). Test 2: All wellbeing flag badges render when ScenarioPrompt contains multiple flags. Test 3: Sheet renders with zero wellbeing flags without errors.

Test 4: 'Start Follow-up' button tap triggers the onStartFollowUp callback. Test 5: 'Dismiss' button tap triggers the onDismiss callback. Test 6: Verify no inline style overrides via a custom lint or code review check. Accessibility golden test for large font scale (1.4x).

Aim for 90%+ widget coverage on this file.

Component
Scenario Prompt Detail Bottom Sheet
ui medium
Dependencies (1)
Create the ScenarioPromptNotificationCard Flutter widget with Design System v3 dark-mode styling. The card must render in the notifications tab list, display scenario title, triggering activity summary snippet, a timestamp badge, and a primary CTA button. Use only CSS classes from styles.css — no inline styles. epic-scenario-based-follow-up-prompts-scheduler-and-ui-task-006
Epic Risks (2)
high impact medium prob technical

If the scheduler runs concurrently (e.g., two overlapping cron invocations due to edge function retry), duplicate prompts could be dispatched before the first run's history records are committed, breaking the deduplication guarantee.

Mitigation & Contingency

Mitigation: Use a Postgres advisory lock or unique constraint on (user_id, scenario_id, activity_ref) in the prompt history table to make concurrent writes idempotent; design the scheduler to check history inside a transaction.

Contingency: If concurrency issues persist in production, add a distributed lock via Supabase Edge Function concurrency limit (max_instances=1) for the evaluation function as a hard guard.

medium impact medium prob scope

Coordinators may find scenario configuration unclear if trigger conditions are expressed as raw JSON or technical terminology, leading to misconfiguration and irrelevant prompts being sent to peer mentors.

Mitigation & Contingency

Mitigation: Design the ScenarioConfigurationScreen to display human-readable descriptions of each template's trigger condition (e.g., 'Send 3 days after first contact if wellbeing concern was flagged') rather than raw rule properties; validate with an HLF coordinator in a design review before implementation.

Contingency: If coordinators still misconfigure rules after launch, add a preview mode that shows a simulated prompt based on a test activity before the rule is enabled.

Quick Links
All Tasks Execution Plan