Update progress: Task 6 completed (PMRInterface layout + Breadcrumb)

This commit is contained in:
2026-02-13 00:40:31 +00:00
parent 8f6bfd0b5e
commit fd9dd7d00e
2 changed files with 51 additions and 1 deletions
+1 -1
View File
@@ -44,7 +44,7 @@ Also read `CLAUDE.md` for font setup instructions (Elvaro Grotesque and Blumir c
- [x] **Task 5: Rebuild ClinicalSidebar.** Read `Ralph/refs/ref-banner-sidebar.md` (Left Sidebar + Navigation sections). CV-friendly labels: Summary, Experience, Skills, Achievements, Projects, Education, Contact. 220px fixed width. Header branding, search input, navigation items with exact states (default/hover/active), separator line, footer with session info. Tablet mode: 56px icon-only. Keyboard shortcuts: Alt+1-7, arrow keys, "/" for search. URL hash routing.
- [ ] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed.
- [x] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed.
- [ ] **Task 7: Rebuild SummaryView + Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md`. Clinical Alert with spring animation entrance, acknowledge → checkmark → collapse sequence. Summary cards: Demographics (full-width key-value), Active Problems (traffic lights), Current Skills quick table, Last Consultation preview. 2-column grid desktop, single column mobile. Navigation links to other views.
+50
View File
@@ -389,3 +389,53 @@ Do NOT invoke the `/frontend-design` skill at runtime — it was pre-run and the
**Next task:** Task 6 — Rebuild PMRInterface layout + Breadcrumb
### Iteration 7 — Task 6: Rebuild PMRInterface layout + Breadcrumb
**Completed:** Task 6
**Changes made:**
- **Breadcrumb.tsx**: Created new component with Patient Record > [View] > [Expanded Item] navigation pattern
- Accepts `currentView`, `expandedItem`, `onNavigateToView`, `onCollapseItem` props
- Uses `viewLabels` record mapping ViewId to CV-friendly names (Summary, Experience, Skills, etc.)
- "Patient Record" root is clickable, navigates to summary view
- Current view is clickable when an item is expanded, collapses the expanded item
- Expanded item name (if present) appears as third breadcrumb segment
- Styling: 13px font-ui, gray-400 text for clickable items, gray-600 for current location
- ChevronRight icons (14px, gray-300) as separators
- Hover state: text-pmr-nhsblue on clickable segments
- **PMRInterface.tsx**: Integrated Breadcrumb component and updated font references
- Added Breadcrumb import
- Integrated Breadcrumb between screen reader heading and content (desktop/tablet only, not mobile)
- Breadcrumb receives `activeView`, `expandedItemId` from AccessibilityContext, navigation callbacks
- Replaced all `font-inter` references with `font-ui` (4 locations: default view placeholder, mobile search input, mobile back button)
- Added `shadow-pmr` to default view placeholder card for visual consistency
- Layout unchanged from Task 4b fix (flex h-screen overflow-hidden pattern already correct)
**Codebase patterns discovered:**
- Breadcrumb navigation pattern: root (Patient Record) → section (view label) → detail (expanded item)
- Breadcrumb should be hidden on mobile (mobile has "Back to Summary" button instead)
- `expandedItemId` from AccessibilityContext is a string (item name), needs to be wrapped in object `{ name, type }` for Breadcrumb
- ViewId mapping must be consistent across ClinicalSidebar, MobileBottomNav, PMRInterface viewLabels, and Breadcrumb viewLabels
**Quality checks:** All passed
- TypeScript: No errors
- ESLint: 1 pre-existing warning in AccessibilityContext.tsx (not our changes)
- Build: Successful, 396.39 KB bundle
**Visual review:** Completed via Playwright MCP at default viewport
- Breadcrumb renders correctly on Summary view: "Patient Record > Summary"
- Breadcrumb updates on navigation to Experience: "Patient Record > Experience"
- Styling correct: 13px font-ui (Elvaro Grotesque), gray-400 clickable text, gray-300 chevrons
- Positioned correctly above view content with mb-6 spacing
- Layout verified: fixed 220px sidebar, sticky banner, scrollable content area
- View switching instant — no animation between Summary → Experience
- Interface materialization animations work (banner → sidebar → content stagger on initial PMR load)
**Issues encountered:** None
**Design decisions:**
- Breadcrumb shows on desktop/tablet only — mobile uses "Back to Summary" button instead (simpler UX on small screens)
- "Patient Record" root always navigates to Summary (the logical "home" view)
- When an item is expanded, clicking the current view name collapses it (returns to list view)
- Used `onNavigateToView` callback pattern for breadcrumb navigation (consistent with existing PMRInterface pattern)
**Next task:** Task 7 — Rebuild SummaryView + Clinical Alert