high priority medium complexity frontend pending frontend specialist Tier 5

Acceptance Criteria

PeerMentorDetailScreenWidget renders a CustomScrollView with SliverAppBar and SliverList as its primary scroll controller
Screen displays four distinct placeholder sections in order: (1) Profile Header, (2) Certification Alert Banner, (3) Assigned Contacts List, (4) Activity Summary Panel
Each placeholder section renders a visible container with a section title label so layout structure is verifiable before real data is wired
All spacing values are sourced exclusively from design token constants (e.g., AppSpacing.md, AppSpacing.lg) — no hardcoded pixel values
All typography styles are sourced from the app's ThemeData text theme — no inline TextStyle with hardcoded sizes or colors
Color values are sourced from design tokens or ThemeData.colorScheme — no hardcoded hex/rgba colors
Screen passes WCAG 2.2 AA contrast ratio for all visible text in both light and dark themes
Screen is scrollable end-to-end with no overflow errors on a 375×667 pt viewport (iPhone SE) and a 430×932 pt viewport (iPhone 15 Pro Max)
SliverAppBar includes a back button and the screen title 'Peer Mentor Details' (localized)
Widget does not contain any BLoC state reading logic — that is the responsibility of child section widgets wired in subsequent tasks
Pull-to-refresh (RefreshIndicator or SliverRefresh equivalent) placeholder is present wrapping the SliverList, ready for RefreshPeerMentorDetail event wiring

Technical Requirements

frameworks
Flutter
performance requirements
CustomScrollView must use a single ScrollController — no nested scrollables with conflicting scroll physics
Placeholder section widgets must be const-constructible to minimize rebuild cost
security requirements
Any mentor name or ID rendered in the scaffold must be HTML-escaped if rendered in a WebView context — not applicable for Flutter native widgets but noted for future web export
ui components
CustomScrollView
SliverAppBar
SliverList
SliverPadding
RefreshIndicator (CupertinoSliverRefreshControl or Material equivalent)
_ProfileHeaderSection (placeholder)
_CertificationAlertBannerSection (placeholder)
_AssignedContactsListSection (placeholder)
_ActivitySummaryPanelSection (placeholder)

Execution Context

Execution Tier
Tier 5

Tier 5 - 253 tasks

Can start after Tier 4 completes

Implementation Notes

Structure the file as a single public `PeerMentorDetailScreenWidget` (StatelessWidget) containing a `Scaffold` wrapping the `CustomScrollView`. Define private `_ProfileHeaderSection`, `_CertificationAlertBannerSection`, `_AssignedContactsListSection`, and `_ActivitySummaryPanelSection` widgets in the same file as unexported classes — they will be extracted to separate files in subsequent tasks when implemented. Use `SliverPadding` around each section to apply consistent horizontal/vertical padding from design tokens. The `SliverAppBar` should use `pinned: true` so the app bar stays visible on scroll, aiding navigation for users relying on VoiceOver (WCAG 2.2 success criterion 2.4.3 Focus Order).

For pull-to-refresh, use `CupertinoSliverRefreshControl` inside the CustomScrollView for consistent iOS behavior, or a platform-adaptive approach. Ensure all section wrappers have `Semantics(header: true)` so screen readers announce section boundaries — critical for Blindeforbundet users on VoiceOver.

Testing Requirements

Widget tests (flutter_test): (1) Golden test — render screen in loading state (PeerMentorDetailLoading) and assert layout matches approved golden image for 375 and 430 width viewports. (2) Overflow test — pump widget in a 375×667 constraint, assert no RenderFlex overflow errors. (3) Section presence — assert each of the 4 section title strings is findable via `find.text()`. (4) Scroll test — pumpAndSettle, then drag the CustomScrollView; assert scroll position changes without exception.

(5) Accessibility test — use `tester.ensureVisible` and `SemanticsController` to assert all interactive elements have semantic labels. (6) Theme test — render in dark mode ThemeData and assert no hardcoded-color violations via golden diff. Run accessibility audit with `flutter_test`'s `SemanticsController.checkSemantics()` to verify WCAG-level contrast.

Component
Peer Mentor Detail Screen
ui medium
Epic Risks (3)
medium impact medium prob technical

The parallel Future.wait aggregation pattern may produce race conditions or incorrect merged state when some repositories resolve significantly faster than others, particularly if the BLoC receives a RefreshDetail event while a prior fetch is still in flight.

Mitigation & Contingency

Mitigation: Implement cancellation token pattern in the aggregation service to abort in-flight fetches on new events. Add BLoC test scenarios for rapid successive refresh events to validate state consistency.

Contingency: If race conditions persist, switch to a sequential-with-timeout fetch strategy for the first release and profile the performance impact before deciding whether parallel fetch optimization is worth the complexity.

medium impact medium prob integration

Integrating PeerMentorDetailScreenWidget into the existing StatefulShellRoute navigation structure may conflict with the Contacts tab's existing route hierarchy, requiring changes to navigation-route-config that could affect other teams' features.

Mitigation & Contingency

Mitigation: Coordinate with the Contact List and Contact Detail feature teams before adding the new route. Review the existing StatefulShellRoute configuration and confirm the peer mentor detail route can be nested under the Contacts branch without path conflicts.

Contingency: If route conflicts arise, temporarily implement the peer mentor detail as a modal overlay (push route) rather than a shell route child, preserving functionality while the navigation architecture conflict is resolved.

low impact high prob dependency

The course enrollment screen that the certification alert banner links to may not yet exist or may be implemented in a separate feature epic, leaving a broken navigation tap for HLF users in the initial release.

Mitigation & Contingency

Mitigation: Check the certification management feature implementation status before finalizing Epic 4 scope. If the enrollment screen is not available, design the tap action to open the HLF course enrollment URL in an external browser as an interim solution.

Contingency: Implement the CTA as a configurable action: if the enrollment route exists in the router, push it; otherwise, launch the configured org-specific enrollment URL via url_launcher, ensuring HLF users can always take action on expired certifications.