Scaffold ReminderNotificationCard widget

epic-assignment-follow-up-reminders-ui-task-001 — Create the stateless Flutter widget for ReminderNotificationCard displayed in the Notifications tab for peer mentors. Implement the card layout showing elapsed days since last contact, assignment context summary, and the deep-link CTA button that navigates to the assignment detail screen. Apply design tokens for spacing, typography, and colour from the project token system.

high priority low complexity frontend pending frontend specialist Tier 0

Acceptance Criteria

ReminderNotificationCard is a StatelessWidget accepting typed constructor parameters: elapsedDays (int), assignmentContextSummary (String), assignmentId (String), and onNavigate (VoidCallback or similar)

The card displays elapsed days prominently (e.g., '14 days since last contact') using a typographic style that draws attention without being alarming

The assignment context summary is displayed in a secondary text style, truncated to a maximum of 2 lines with ellipsis overflow

A CTA button labeled 'View Assignment' (or equivalent English label) is present and calls the onNavigate callback when tapped

All spacing, border-radius, font sizes, and colours are sourced exclusively from the project design token system — no hardcoded values

The widget renders correctly at both minimum content (1-day elapsed, short summary) and maximum content (99+ days, full 2-line truncated summary)

The card passes WCAG 2.2 AA contrast requirements: text-on-background contrast ratio ≥ 4.5:1, CTA button contrast ≥ 3:1

Semantic labels are applied to the elapsed-days text and CTA button for screen reader accessibility (Semantics widget or semanticLabel)

The widget is exported from the notifications feature barrel file and is importable by the Notifications tab screen

Widget test: golden or structural test confirms the card renders all three sections (elapsed days, summary, CTA) without overflow errors at 375px and 414px screen widths

Technical Requirements

frameworks

Flutter

Dart

data models

Assignment (elapsedDays, contextSummary, assignmentId)

performance requirements

Widget build must complete in a single frame (< 16 ms) — no async work inside build()

No unnecessary rebuilds: widget must be const-constructible if all parameters are known at compile time

security requirements

Assignment context summary must be rendered as plain text — no HTML/markdown rendering to prevent injection

onNavigate callback must not expose raw Supabase IDs in the UI label

ui components

Card container (project AppCard or equivalent)

Elapsed days label (Text with design token typography)

Assignment summary label (Text, maxLines: 2, overflow: ellipsis)

CTA AppButton (project button component)

Execution Context

Execution Tier

Tier 0

Tier 0 - 440 tasks

View Full Execution Plan

Implementation Notes

Keep the widget purely presentational — it receives data and callbacks via constructor, making it trivially testable and reusable. Do not embed navigation logic (GoRouter calls) inside the widget; delegate navigation to the parent screen via the onNavigate callback. Apply the project's design token constants (e.g., `AppColors.textPrimary`, `AppSpacing.md`, `AppRadius.card`) throughout — do not import token values inline. Elapsed days should be formatted via a dedicated helper function (e.g., `formatElapsedDays(int days) => days == 1 ?

'1 day since last contact' : '$days days since last contact'`) placed in a shared formatting utility file. Ensure the widget file lives under `lib/features/notifications/widgets/reminder_notification_card.dart`.

Testing Requirements

Write widget tests using flutter_test: (1) renders elapsed days, summary, and CTA button given valid inputs; (2) summary text is clamped at 2 lines for long input; (3) tapping CTA invokes the onNavigate callback exactly once; (4) widget renders without overflow at 375px and 414px viewport widths (use `tester.binding.setSurfaceSize`). Optionally add a golden test to lock visual appearance. All tests must pass without a live Supabase connection.

Component

Reminder Notification Card

ui low

Epic Risks (2)

medium impact medium prob integration

The deep-link from the notification card to the assignment detail screen depends on the assignment detail route being stable and accepting an assignment ID parameter. If the routing contract is undocumented or changes during parallel development, the CTA will silently navigate to a fallback screen.

Mitigation & Contingency

Mitigation: Confirm the assignment detail route path and parameter contract with the team building or maintaining that screen before implementing the CTA. Add an integration test that asserts navigating from a mock notification card with a known assignment ID lands on the correct route.

Contingency: If the route is unstable, implement the deep-link as a late-bound string resolved from a central route registry, allowing the target route to be updated without changing the notification card.

medium impact medium prob technical

Visually distinguishing escalation cards from standard reminder cards using colour alone fails WCAG 1.4.1 (use of colour). Blindeforbundet users relying on screen readers must receive equivalent contextual information through semantics, not just visual styling.

Mitigation & Contingency

Mitigation: Use both colour and an icon/label difference to distinguish card types. Add explicit Semantics widgets with descriptive labels ('Escalation alert: peer mentor has not responded') so screen readers announce the type without visual context.

Contingency: If accessibility review flags the distinction, add a text badge ('Escalation') alongside the visual treatment as a code-change-only fix with no schema or service impact.

Quick Links

All Tasks Execution Plan