diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 67cac28..8611b6f 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -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. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 07f50cb..b6d3952 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -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 +