Implement PauseNotificationCard widget

epic-pause-status-notifications-ui-task-002 — Build the Flutter widget that renders in the coordinator's in-app notification feed. Display peer mentor name as the headline, effective date as a subtitle, optional reason as secondary body text, and a tappable quick-action link that deep-links to the peer mentor's profile screen. Use existing design tokens for typography, color, and spacing to match the notification feed visual style.

high priority low complexity frontend pending frontend specialist Tier 1

Acceptance Criteria

`PauseNotificationCard` widget file is at `lib/features/notifications/widgets/pause_notification_card.dart`

Widget is a `StatelessWidget` accepting a single `PauseNotificationCardData` parameter

Headline shows `peerMentorName` using the `titleMedium` design-token text style

Subtitle line shows `effectiveDate` formatted as `dd.MM.yyyy` (Norwegian locale convention) using the `bodySmall` text style with secondary text colour token

Reason text section is rendered only when `reasonText` is non-null and non-empty; uses `bodySmall` with tertiary text colour token; truncates to 2 lines with ellipsis overflow

Quick-action link ('View profile' or organisation-translated equivalent) triggers `GoRouter.of(context).push(data.mentorProfileDeepLinkUrl)` on tap

Quick-action link uses the `labelSmall` text style with the primary accent colour token

Widget passes WCAG 2.2 AA colour contrast check: all text/background combinations achieve at least 4.5:1 ratio

Widget is fully accessible: `Semantics` wrapper on the card sets a meaningful label combining mentor name and effective date; quick-action link has its own `Semantics` label

Widget renders correctly in both light and dark theme variants

Golden test screenshot matches approved baseline at 375 dp width

Technical Requirements

frameworks

Flutter

Dart

data models

assignment

contact

performance requirements

Widget must be stateless with no animations to ensure 60 fps scroll performance in the notification list

No async operations or BLoC subscriptions inside the widget — all data passed via constructor

security requirements

`reasonText` must be displayed as plain text — never rendered as HTML or rich text that could execute injected markup

Deep-link URL must be validated against an allowlist of internal route patterns before navigation to prevent open redirect

ui components

PauseNotificationCard (new)

AppText (existing design-token typography wrapper)

Semantics (Flutter built-in accessibility wrapper)

Execution Context

Execution Tier

Tier 1

Tier 1 - 540 tasks

Can start after Tier 0 completes

View Full Execution Plan

Implementation Notes

Do not hardcode colour values — use only design tokens from the project's `AppColors` or theme extension. Format the date using `intl` package `DateFormat('dd.MM.yyyy')` with `nb_NO` locale — confirm the locale is initialised in `main.dart`. For the deep-link URL allowlist validation, create a private `_isSafeDeepLink(String url)` helper that checks the URL begins with the app's custom scheme (e.g. `myapp://`) or an internal route path (begins with `/`).

Wrap the entire card in an `InkWell` only if the design calls for a tap-to-expand behaviour — otherwise use a plain `GestureDetector` on the quick-action link only to avoid conflicting tap targets.

Testing Requirements

Widget tests in flutter_test: (1) renders headline with correct name, (2) renders formatted date in subtitle, (3) reason text visible when non-null, (4) reason text absent from widget tree when null, (5) tap on quick-action link triggers navigation callback (use a mock GoRouter or capture navigation events), (6) reason text truncates at 2 lines when text is very long. Golden test: render widget at 375 dp width with all fields populated and compare against approved PNG baseline. Accessibility test: use `flutter_accessibility_scanner` or manual `SemanticsController` to verify labels are present.

Component

Pause Status Notification Card

ui low

Dependencies (1)

Define the Dart data model for the pause notification card, including fields for peer mentor name, effective date, optional reason text, and mentor profile deep-link URL. Ensure the model is immutable and equatable, and integrates cleanly with the existing in-app notification feed item interface. epic-pause-status-notifications-ui-task-001

Epic Risks (2)

medium impact low prob integration

The existing notification feed component may expect a specific notification model shape that does not map cleanly to the pause notification payload structure, requiring either payload transformation or feed refactoring.

Mitigation & Contingency

Mitigation: Review the notification-list-item and notification-model contracts before building the card. Design the pause-notification-card to extend or wrap the existing list item pattern rather than replacing it.

Contingency: If the feed contract is incompatible, implement a lightweight adapter that maps the pause notification payload to the feed's expected model shape, keeping the adapter isolated from the core card widget.

low impact low prob dependency

The app's existing toast/banner infrastructure may not support the auto-dismiss timeout duration or dismissal animation required for the peer mentor confirmation banner, necessitating a custom implementation that diverges from the design system.

Mitigation & Contingency

Mitigation: Audit the existing banner and toast components (in-app-notification-banner, notification-list-item) for configurable dismiss timeout before starting implementation. Prefer configuration over custom code.

Contingency: If the existing infrastructure cannot be configured, implement the banner as a thin wrapper with a custom auto-dismiss timer while reusing all visual tokens (colours, spacing, typography) from the design system to maintain consistency.

Quick Links

All Tasks Execution Plan