From f6463cc4b179db1dfbd9c02d30f187597f8c97ed Mon Sep 17 00:00:00 2001 From: Andy Charlwood Date: Sat, 14 Feb 2026 20:15:11 +0000 Subject: [PATCH] feat: US-018 - Skip boot/login sequence for dev iteration --- Ralph/prd.json | 379 ++++++-------- Ralph/progress.txt | 1190 ++------------------------------------------ src/App.tsx | 2 +- 3 files changed, 201 insertions(+), 1370 deletions(-) diff --git a/Ralph/prd.json b/Ralph/prd.json index 136ae31..e9109ca 100644 --- a/Ralph/prd.json +++ b/Ralph/prd.json @@ -1,15 +1,15 @@ { - "project": "Portfolio — Dashboard Restructure & Graph Improvements", + "project": "Portfolio — Typography & Spacing Scale Rework", "branchName": "ralph/dashboard-restructure", - "description": "Restructure the dashboard into two parent sections (Patient Summary, Patient Pathway), improve constellation graph clarity, add hover-highlighting between experience/skills and graph, remove inaccurate CV data, and explore parent header typography.", + "description": "Rework the entire type scale, spatial tokens, and layout proportions so the dashboard reads comfortably on a 2560x1440 QHD display. Everything is currently undersized — body text at 13px, labels at 9-10px, sidebar details at 11px. Scale up proportionally with larger type, wider sidebar, taller topbar, and more generous spacing.", "userStories": [ { - "id": "US-001", + "id": "US-018", "title": "Skip boot/login sequence for dev iteration", - "description": "As a developer, I want to skip the boot/ECG/login animation during this feature branch so I can iterate on the dashboard quickly.", + "description": "As a developer, I want to skip the boot/ECG/login animation during this feature work so I can iterate on dashboard sizing quickly.", "acceptanceCriteria": [ "In src/App.tsx, change the initial Phase state from 'boot' to 'pmr' so the app loads directly to the dashboard", - "The boot, ECG, and login phases are still present in code — only the initial state changes", + "The boot, ECG, and login phases remain in code — only the initial state changes", "App loads directly to the dashboard layout on refresh", "Typecheck passes" ], @@ -18,278 +18,207 @@ "notes": "Temporary — final story reverts this." }, { - "id": "US-002", - "title": "Remove inaccurate CV data from consultations and constellation", - "description": "As Andy, I want only real career entries so the portfolio doesn't contain fabricated content.", + "id": "US-019", + "title": "Update global layout tokens and Card/CardHeader component", + "description": "As a viewer, I want the foundational layout dimensions and card sizing to be larger so everything downstream inherits better proportions.", "acceptanceCriteria": [ - "Remove the 'duty-pharmacist-2016' entry from src/data/consultations.ts — this role is not in References/CV_v4.md", - "Remove the corresponding role node for duty-pharmacist-2016 from src/data/constellation.ts constellationNodes array", - "Remove all links referencing duty-pharmacist-2016 from constellationLinks array", - "Remove duty-pharmacist-2016 from roleSkillMappings", - "Verify 4 roles remain in consultations.ts: interim-head-2025, deputy-head-2024, high-cost-drugs-2022, pharmacy-manager-2017", - "Verify 4 role nodes remain in constellation.ts", + "In src/index.css, update --sidebar-width from 272px to 304px", + "Update --topbar-height from 48px to 56px", + "Update --subnav-height from 36px to 42px", + "Update .dashboard-grid gap from 12px (mobile) to 14px, and 16px (tablet/desktop) to 20px", + "In src/components/Card.tsx, update Card padding from 20px to 24px", + "In Card.tsx CardHeader: title fontSize from 12px to 13px", + "CardHeader right text fontSize from 10px to 11px", + "CardHeader dot size from 8px to 9px", + "CardHeader marginBottom from 16px to 18px", "Typecheck passes" ], "priority": 2, - "passes": true, - "notes": "Check References/CV_v4.md for the accurate role list. The CV has 4 roles: Interim Head, Deputy Head, High-Cost Drugs, Pharmacy Manager (Tesco)." + "passes": false, + "notes": "These are foundational tokens — many components reference --sidebar-width, --topbar-height, --subnav-height via CSS vars, so changes propagate automatically. Card.tsx changes affect every card and subsection header in the dashboard." }, { - "id": "US-003", - "title": "Fix inaccurate timeline entries in CareerActivityTile", - "description": "As Andy, I want the career timeline to only show real certifications and remove fabricated project entries.", + "id": "US-020", + "title": "Scale TopBar and SubNav", + "description": "As a viewer, I want the TopBar and SubNav to feel substantial rather than thin strips across the top of the screen.", "acceptanceCriteria": [ - "In src/components/tiles/CareerActivityTile.tsx buildTimeline() function, remove the 'Power BI Data Analyst Associate' certification entry — not in CV", - "Remove the 'Clinical Pharmacy Diploma' certification entry — not in CV", - "Add 'NHS Leadership Academy — Mary Seacole Programme' as a certification entry with date '2018' and meta 'NHS leadership qualification'", - "Remove the 'SQL Analytics Transformation' project entry — not a standalone project in the CV", - "Remove the 'Budget Oversight' project entry — budget management is a skill, not a project", - "Add A-Levels entry: title 'A-Levels: Mathematics (A*), Chemistry (B), Politics (C)', meta 'Highworth Grammar School', date '2009–2011', type 'edu'", - "Verify remaining timeline matches CV_v4.md: 4 roles + GPhC Registration + MPharm + Mary Seacole + A-Levels", - "Typecheck passes" + "In src/components/TopBar.tsx: brand text fontSize from 13px to 15px", + "TopBar 'Remote' label fontSize from 11px to 12px", + "Search bar text fontSize from 13px to 14px", + "Search bar height from 42px to 46px", + "Ctrl+K kbd fontSize from 10px to 11px", + "Session 'A.RECRUITER' text fontSize from 12px to 13px", + "Session badge fontSize from 11px to 12px", + "Skip-to-content link fontSize from 13px to 14px", + "Home icon size from 18 to 20", + "Search icon size from 16 to 17", + "In src/components/SubNav.tsx: tab fontSize from 13px to 14px", + "SubNav minHeight from 36px to 42px (matching the updated --subnav-height)", + "Typecheck passes", + "Verify in browser using dev-browser skill" ], "priority": 3, - "passes": true, - "notes": "Reference CV at References/CV_v4.md. The role entries in the timeline reference consultations by consultationId — since duty-pharmacist-2016 was removed in US-002, also remove any timeline entry referencing it." + "passes": false, + "notes": "TopBar and SubNav heights are controlled by CSS vars updated in US-019. This story just scales the internal text and elements. The search bar min/max widths may also need slight adjustment — use judgement." }, { - "id": "US-004", - "title": "Create ParentSection component for hierarchical layout", - "description": "As a developer, I need a parent section wrapper component that visually distinguishes top-level sections from child subsections.", + "id": "US-021", + "title": "Scale Sidebar proportions", + "description": "As a viewer, I want the sidebar text and spacing to be comfortably readable rather than tiny and cramped.", "acceptanceCriteria": [ - "Create src/components/ParentSection.tsx with props: title (string), children (ReactNode), optional className", - "Parent section renders as a Card (using existing Card component) spanning full width", - "Header text is large and prominent — at minimum 2.4rem (36px at 1920px) — clearly a top-level section marker, not a small label", - "Header uses font-ui (Elvaro Grotesque) at weight 600-700", - "Header text color is pmr-text-primary (#1A2B2A)", - "No colored dot on parent headers (dots are for subsections only)", - "20px (1.333rem) padding below header before children content", - "Component accepts children which will be the subsections", - "Typecheck passes" + "In src/components/Sidebar.tsx: sidebar padding from '20px 16px' to '24px 20px'", + "Avatar size from 52px to 60px, font size from 18px to 20px", + "Name fontSize from 15px to 17px", + "Job title fontSize from 11.5px to 13px", + "Status badge fontSize from 11px to 12px, dot from 6px to 7px", + "All detail row fontSize from 11.5px to 13px (labels and values)", + "GPhC mono number fontSize from 11px to 12px", + "SectionTitle component fontSize from 10px to 11px", + "TagPill fontSize from 10.5px to 12px, padding from '3px 8px' to '4px 10px'", + "AlertFlag fontSize from 11px to 13px, padding from '7px 10px' to '8px 12px'", + "AlertFlag icon size from 14 to 16, container from 16px to 18px", + "Detail row padding from '2px 0' to '4px 0', gap from 6px to 8px", + "PersonHeader section marginBottom from 6px to 10px", + "Tags and Alerts section padding adjusted proportionally", + "Typecheck passes", + "Verify in browser using dev-browser skill" ], "priority": 4, - "passes": true, - "notes": "This is a new component — not modifying Card.tsx. ParentSection wraps Card and adds the large header treatment. Subsection headers continue to use the existing CardHeader style (12px uppercase with colored dot)." + "passes": false, + "notes": "Sidebar width is already updated via CSS var in US-019. This story handles all internal sizing. The sidebar has many repeated patterns (detail rows) — ensure consistency across all rows." }, { - "id": "US-005", - "title": "Restructure Patient Summary as parent section with Latest Results subsection", - "description": "As a visitor, I want Patient Summary to contain the profile and Latest Results as a subsection.", + "id": "US-022", + "title": "Scale PatientSummaryTile content and KPIs", + "description": "As a viewer, I want the Patient Summary to feel like the commanding hero section of the dashboard with comfortable body text and prominent KPIs.", "acceptanceCriteria": [ - "In DashboardLayout.tsx, replace the standalone PatientSummaryTile and LatestResultsTile with a single ParentSection titled 'Patient Summary'", - "Inside the ParentSection, render the profile text (from PatientSummaryTile) first", - "Remove the 4 headline metric figures (9+ Years, 1.2M, £220M, £14.6M+) that are currently in PatientSummaryTile — these are redundant with the KPIs", - "Below the profile text, render Latest Results content as a subsection with its own CardHeader-style header ('LATEST RESULTS' with teal dot)", - "KPI flip cards retain their existing click-to-detail behaviour", - "The standalone LatestResultsTile import is removed from DashboardLayout", + "In src/components/tiles/PatientSummaryTile.tsx: profile text fontSize from 13px to 15px, lineHeight from 1.6 to 1.65", + "KPI MetricCard value fontSize from 28px to 34px", + "KPI label fontSize from 12px to 14px", + "KPI sublabel fontSize from 10px to 12px", + "KPI card padding from 16px to 20px", + "KPI grid gap from 12px to 16px", + "Latest Results section marginTop from 24px to 28px", "Typecheck passes", "Verify in browser using dev-browser skill" ], "priority": 5, - "passes": true, - "notes": "The Latest Results subsection should look like a section within the parent card — use a CardHeader for 'LATEST RESULTS' and render the KPI grid below it. The parent ParentSection header 'Patient Summary' should be visually dominant." + "passes": false, + "notes": "The profile text is the largest body copy block in the dashboard — it must feel effortlessly readable. KPI values should be the most visually prominent numbers on the page." }, { - "id": "US-006", - "title": "Create Patient Pathway parent section with constellation graph", - "description": "As a visitor, I want a 'Patient Pathway' parent section that contains the constellation graph at the top.", + "id": "US-023", + "title": "Scale LastConsultationSubsection and main content padding", + "description": "As a viewer, I want career consultation details and the overall content area to match the new scale.", "acceptanceCriteria": [ - "In DashboardLayout.tsx, replace the standalone CareerActivityTile with a ParentSection titled 'Patient Pathway'", - "The constellation graph (CareerConstellation component) renders at the top of the Patient Pathway section", - "The CareerConstellation receives onRoleClick and onSkillClick handlers (same as current CareerActivityTile)", - "The standalone CareerActivityTile import is removed from DashboardLayout", + "In src/components/DashboardLayout.tsx LastConsultationSubsection: field label fontSize from 10px to 12px", + "Field value fontSize from 11.5px to 13px", + "Role title fontSize from 13.5px to 15px", + "Examination bullet fontSize from 12.5px to 14px", + "Bullet dot top offset adjusted for new line height", + "View full record button fontSize from 12px to 13px, ChevronRight size from 14 to 15", + "In DashboardLayout main content area: update className padding from 'p-4 pb-8 md:p-6 md:pb-10 lg:px-7 lg:pt-6 lg:pb-10' to 'p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12'", + "LastConsultation field gap from 16px to 20px", "Typecheck passes", "Verify in browser using dev-browser skill" ], "priority": 6, - "passes": true, - "notes": "This story just sets up the parent section with the graph. The Last Consultation, experience/skills columns, and education are added in subsequent stories." + "passes": false, + "notes": "LastConsultationSubsection is defined inline in DashboardLayout.tsx (around lines 57-232). The main content padding classes are on the element around line 369." }, { - "id": "US-007", - "title": "Move Last Consultation into Patient Pathway as subsection", - "description": "As a visitor, I want the most recent role details to appear within Patient Pathway below the graph.", + "id": "US-024", + "title": "Scale ProjectsTile and EducationSubsection", + "description": "As a viewer, I want project entries and education entries to be readable and well-spaced.", "acceptanceCriteria": [ - "Inside the Patient Pathway ParentSection (below the constellation graph), add a 'LAST CONSULTATION' subsection with green dot CardHeader", - "Render the last consultation content: date, organisation, type, band, role title, examination bullets — same content as the current LastConsultationTile", - "The standalone LastConsultationTile is removed from DashboardLayout grid", - "The LastConsultationTile.tsx file can be deleted (content is now inline in the Patient Pathway section)", + "In src/components/tiles/ProjectsTile.tsx: ProjectItem fontSize from 11.5px to 13px", + "ProjectItem padding from '10px 12px' to '12px 16px'", + "Project year label fontSize from 10px to 11px", + "Tech stack tag fontSize from 9px to 10px, padding from '2px 6px' to '3px 8px'", + "Project list gap from 8px to 10px", + "Status dot from 7px to 8px", + "In src/components/EducationSubsection.tsx: base fontSize from 12px to 13px", + "Education entry padding from '10px 12px' to '12px 16px'", + "Education title fontSize from 12.5px to 14px", + "Institution fontSize from 11px to 12px", + "Education detail fontSize from 10.5px to 12px", + "Year label fontSize from 10px to 11px", + "Education list gap from 10px to 12px", "Typecheck passes", "Verify in browser using dev-browser skill" ], "priority": 7, - "passes": true, - "notes": "Reuse the rendering logic from LastConsultationTile — either inline it or extract a shared sub-component. The important thing is it lives inside the Patient Pathway ParentSection now." + "passes": false, + "notes": "Both are list-style components with similar patterns. ProjectsTile is a standalone card, EducationSubsection is inside Patient Pathway." }, { - "id": "US-008", - "title": "Add two-column experience and skills layout in Patient Pathway", - "description": "As a visitor, I want work experience on the left and skills on the right within Patient Pathway.", + "id": "US-025", + "title": "Scale WorkExperienceSubsection and RepeatMedicationsSubsection", + "description": "As a viewer, I want work experience roles and skill entries in the two-column layout to be comfortably readable.", "acceptanceCriteria": [ - "Below the Last Consultation subsection in Patient Pathway, add a two-column CSS grid layout", - "Left column: subsection header 'WORK EXPERIENCE' (teal dot), lists all 4 roles from consultations.ts with accordion expand (one at a time)", - "Right column: subsection header 'REPEAT MEDICATIONS' (amber dot), shows categorised skills with expand — same content as CoreSkillsTile", - "Each role entry shows: role title, organisation, date range. Click to expand shows examination bullets and coded entries", - "On mobile (below md/768px), columns stack vertically: experience above skills", - "Grid gap matches the dashboard grid gap (16px / 1.067rem)", - "The standalone CoreSkillsTile is removed from DashboardLayout grid", + "In src/components/WorkExperienceSubsection.tsx: role title fontSize from 12.5px to 14px", + "Organisation fontSize from 11px to 12px", + "Duration fontSize from 10px to 11px", + "Role item header padding from '10px 12px' to '12px 14px'", + "Expanded content examination bullet fontSize from 11.5px to 13px", + "Coded entry tag fontSize from 10px to 11px, padding from '2px 6px' to '3px 8px'", + "View full record link fontSize from 11px to 12px", + "Role list gap from 8px to 10px", + "Teal dot from 8px to 9px", + "In src/components/RepeatMedicationsSubsection.tsx: skill name fontSize from 12.5px to 14px", + "Skill frequency text fontSize from 10.5px to 12px", + "Skill status badge fontSize from 10px to 11px, padding from '2px 7px' to '3px 8px'", + "Skill row padding from '8px 10px' to '10px 12px'", + "Skill icon container from 26px to 30px, icon size from 13 to 15", + "Category section label fontSize from 10px to 11px", + "Category item count fontSize from 10px to 11px", + "View all button fontSize from 11px to 12px", + "Skill row gap from 6px to 8px", "Typecheck passes", "Verify in browser using dev-browser skill" ], "priority": 8, - "passes": true, - "notes": "Reuse expansion patterns from existing CareerActivityTile and CoreSkillsTile. The two-column layout is within the Patient Pathway ParentSection card, not separate cards." + "passes": false, + "notes": "These two components sit side by side in the Patient Pathway two-column layout. Both are dense with inline style objects. The changes are mechanical — find each fontSize/padding and bump it up." }, { - "id": "US-009", - "title": "Move Education into Patient Pathway as subsection", - "description": "As a visitor, I want education entries at the bottom of Patient Pathway so all career-related info is in one place.", + "id": "US-026", + "title": "Adjust ParentSection headings for new proportions", + "description": "As a viewer, I want the parent section headings to remain visually dominant now that body text is larger.", "acceptanceCriteria": [ - "Below the two-column experience/skills grid in Patient Pathway, add an 'EDUCATION' subsection with purple dot CardHeader", - "Render education entries: MPharm, Mary Seacole Programme, A-Levels (same content as EducationTile plus A-Levels added in US-003)", - "The standalone EducationTile is removed from DashboardLayout grid", - "The EducationTile.tsx file can be deleted (content now in Patient Pathway)", + "In src/components/ParentSection.tsx: evaluate whether heading sizes still create clear hierarchy with the scaled-up body text", + "Current responsive scale: 1.375rem (22px) → 1.6rem (25.6px) → 1.8rem (28.8px) → 2.2rem (35.2px)", + "If body text at 15px makes the heading feel less dominant, bump desktop heading to 2.4rem (38.4px)", + "Heading paddingBottom may need to increase from 1.333rem to 1.5rem to maintain spacing proportion", + "Use Playwright to verify the heading-to-body ratio feels right at 2560x1440", "Typecheck passes", "Verify in browser using dev-browser skill" ], "priority": 9, - "passes": true, - "notes": "Education is the bottom-most subsection in Patient Pathway. Include A-Levels: Mathematics (A*), Chemistry (B), Politics (C) — Highworth Grammar School, 2009–2011." + "passes": false, + "notes": "This is a judgement call — the agent should look at the dashboard after all previous scaling and decide if headings need adjustment. They may be fine as-is, or may need a small bump. Use dev-browser to compare." }, { - "id": "US-010", - "title": "Clean up removed standalone tiles and verify layout", - "description": "As a developer, I need to remove orphaned tile components and verify the dashboard grid has no gaps.", + "id": "US-027", + "title": "Visual regression check across all breakpoints", + "description": "As a developer, I need to verify the scaled dashboard works at all viewport sizes without overflow or layout breaks.", "acceptanceCriteria": [ - "Delete src/components/tiles/LastConsultationTile.tsx if not already deleted", - "Delete src/components/tiles/CoreSkillsTile.tsx if not already deleted", - "Delete src/components/tiles/LatestResultsTile.tsx if not already deleted", - "Delete src/components/tiles/EducationTile.tsx if not already deleted", - "Delete src/components/tiles/CareerActivityTile.tsx if not already deleted", - "DashboardLayout grid contains only: PatientSummary ParentSection (full width) + Patient Pathway ParentSection (full width) + ProjectsTile (if it remains)", - "No broken imports or unused imports remain", - "No visual gaps in the dashboard grid", - "Typecheck passes", - "Verify in browser using dev-browser skill" - ], - "priority": 10, - "passes": true, - "notes": "ProjectsTile may remain as a standalone tile or be absorbed — check if it still makes sense as standalone. If so, keep it. The key outcome is that the deleted tiles have no remaining references." - }, - { - "id": "US-011", - "title": "Improve constellation graph visual clarity", - "description": "As a visitor, I want the graph to be clearer with better contrast, larger nodes, and an off-white background.", - "acceptanceCriteria": [ - "Graph container has an off-white background (e.g. #F5F7F6 or similar warm neutral) — can use the existing radial gradient approach but with a more visible base colour", - "Link lines use slightly thicker stroke (from 1px to 1.5-2px) and higher contrast colour (darker than current #D4E0DE at 0.3 opacity)", - "Role node radius increased from 24px to at least 30px", - "Skill node radius increased from 10px to at least 14px", - "Skill label font size increased from 9px to 10-11px for readability", - "Graph is initially scaled/zoomed so nodes fill the container at a comfortable viewing size — adjust force simulation parameters if needed (reduce charge repulsion, adjust link distance)", - "All existing interactions preserved (hover dim/highlight, click, keyboard nav)", - "Responsive height tiers still work (400/300/250px)", - "Typecheck passes", - "Verify in browser using dev-browser skill" - ], - "priority": 11, - "passes": true, - "notes": "The key issue is readability — the current graph is too sparse/faint. Larger nodes, thicker links, and stronger colours will help. The background should provide subtle contrast so the white card surface feels like the graph 'lives somewhere'." - }, - { - "id": "US-012", - "title": "Add hover-highlighting between experience/skills and constellation graph", - "description": "As a visitor, I want to hover over an experience or skill entry and see the corresponding node highlighted in the graph.", - "acceptanceCriteria": [ - "Add a highlightedNodeId state (string | null) to the Patient Pathway parent component", - "Pass highlightedNodeId as a prop to CareerConstellation", - "CareerConstellation applies its existing hover highlight logic when highlightedNodeId changes (dim non-connected nodes, brighten connected links)", - "When hovering a work experience entry, set highlightedNodeId to the corresponding consultation ID (which maps to a role node)", - "When hovering a skill entry, set highlightedNodeId to the skill ID", - "Highlight clears when mouse leaves the entry (set highlightedNodeId to null)", - "On touch devices: tap to highlight, tap elsewhere to clear", - "Highlighting feels immediate — no perceptible delay", - "Typecheck passes", - "Verify in browser using dev-browser skill" - ], - "priority": 12, - "passes": true, - "notes": "CareerConstellation already has hover logic that dims non-connected nodes. The new prop should trigger the same visual effect but from an external source. Use the existing adjacency map and opacity/stroke manipulation." - }, - { - "id": "US-013", - "title": "Update command palette data for restructured dashboard", - "description": "As a developer, I need the command palette search index to reflect the new section structure.", - "acceptanceCriteria": [ - "In src/lib/search.ts, update buildPaletteData() to reference new tile IDs (patient-summary, patient-pathway instead of old tile IDs)", - "Scroll actions target the correct data-tile-id values for the new ParentSection components", - "Skills palette items still open detail panels correctly", - "Experience items still open detail panels correctly", - "Remove any palette entries that reference deleted tiles (LastConsultation standalone, etc.)", - "Remove palette entries for deleted certifications (Power BI, Clinical Diploma) and projects (SQL Analytics Transformation, Budget Oversight)", - "Add palette entry for Mary Seacole Programme", + "Use Playwright to verify at 2560x1440 (QHD) — primary target, everything should feel commanding and well-proportioned", + "Verify at 1920x1080 (HD) — content should still be comfortable, not oversized", + "Verify at 1440x900 — should work without overflow", + "Verify at 768px width (tablet) — sidebar hidden, single column, no overflow or truncation", + "Verify at 375px width (mobile) — everything stacks, no horizontal scroll", + "No horizontal scrollbar at any tested width", + "Fix any overflow, wrapping, truncation, or spacing issues discovered during verification", + "npm run build succeeds without errors", "Typecheck passes" ], - "priority": 13, - "passes": true, - "notes": "The palette data model uses tileId for scroll targeting — these need to match the new data-tile-id attributes on ParentSection components." + "priority": 10, + "passes": false, + "notes": "Use Playwright browser_resize to test each breakpoint. Take screenshots at each size. Fix any issues found — this may involve adding responsive overrides or adjusting min-widths." }, { - "id": "US-014", - "title": "Responsive verification and fixes", - "description": "As a developer, I need to verify the restructured dashboard works at all viewport sizes.", - "acceptanceCriteria": [ - "At 375px (mobile): single column, Patient Summary and Patient Pathway stack vertically, experience/skills columns stack, graph fits container, all text wraps", - "At 768px (tablet): single column, comfortable spacing", - "At 1024px (desktop): full layout, two-column experience/skills grid visible, sidebar inline", - "At 1920px: layout visually balanced, graph nodes and labels readable", - "No horizontal scrollbar at any tested width", - "Parent section headers scale appropriately across breakpoints", - "Fix any issues discovered during verification", - "Typecheck passes", - "Verify in browser using dev-browser skill at 375px, 768px, 1024px, and 1920px widths" - ], - "priority": 14, - "passes": true, - "notes": "Use Playwright to resize browser and take snapshots at each breakpoint. Fix any overflow, wrapping, or spacing issues found." - }, - { - "id": "US-015", - "title": "Explore parent header typography options", - "description": "As a designer, I want to evaluate different font treatments for parent section headers to find the most visually striking option.", - "acceptanceCriteria": [ - "Test Patient Summary and Patient Pathway headers with Elvaro Grotesque at weights 300, 400, 500, 600, 700, 900", - "Test headers with Blumir variable font at weights 100, 300, 500, 700", - "Test at sizes from 2rem (30px) up to 3.2rem (48px)", - "Consider uppercase vs title case vs sentence case for parent headers", - "Take screenshots of at least 3 different options for comparison", - "Headers must complement the clinical/luxury aesthetic — premium and intentional, not generic", - "Select the best option based on visual hierarchy, readability, and design coherence", - "Typecheck passes", - "Verify in browser using dev-browser skill" - ], - "priority": 15, - "passes": true, - "notes": "Explored 14 options across Elvaro (300-900) and Blumir (100-700), title case vs uppercase, sizes 1.4-3rem, various tracking. Selected: Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking. Rationale: font consistency, tight tracking feels premium, slightly reduced size is more data-dense/clinical, clear hierarchy above sub-headers." - }, - { - "id": "US-016", - "title": "Apply chosen parent header typography", - "description": "As a developer, I need to apply the selected font treatment to both parent section headers.", - "acceptanceCriteria": [ - "Apply the chosen font family, weight, size, and case to the ParentSection component header", - "Both Patient Summary and Patient Pathway headers use identical treatment", - "Font scales appropriately across breakpoints (may need responsive size adjustments)", - "Headers create clear visual hierarchy — unmistakably top-level sections", - "Typecheck passes", - "Verify in browser using dev-browser skill" - ], - "priority": 16, - "passes": true, - "notes": "Applied Elvaro Grotesque 600, -0.02em tracking with responsive scale: 1.375rem (mobile) → 1.6rem (sm) → 1.8rem (md) → 2.2rem (lg). Both headers identical. Verified at 375px (22px) and 1024px+ (35.2px)." - }, - { - "id": "US-017", + "id": "US-028", "title": "Re-enable boot/login sequence", "description": "As a user, I want the full boot → ECG → login experience restored for production.", "acceptanceCriteria": [ @@ -297,11 +226,11 @@ "Boot → ECG → Login → Dashboard sequence works end to end", "No other changes to App.tsx beyond reverting the initial state", "Typecheck passes", - "Verify in browser using dev-browser skill: app starts at boot, progresses through ECG and login, arrives at restructured dashboard" + "Verify in browser using dev-browser skill: app starts at boot, progresses through ECG and login, arrives at the scaled dashboard" ], - "priority": 17, - "passes": true, - "notes": "Reverted initial phase from 'pmr' to 'boot'. Full flow verified: boot → ECG → login (credentials auto-typed) → click Log In → restructured dashboard loads with all sections." + "priority": 11, + "passes": false, + "notes": "Simple revert of US-018." } ] } diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 1720e04..4dff1d0 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -1,1168 +1,70 @@ -# Progress Log +# Progress Log — Typography & Spacing Scale Rework +# Branch: ralph/dashboard-restructure +# Started: 2026-02-14 ## Codebase Patterns ### Project Structure - Components in `src/components/`, tiles in `src/components/tiles/` -- Detail renderers in `src/components/detail/` — KPIDetail, ConsultationDetail, SkillDetail, SkillsAllDetail, EducationDetail, ProjectDetail -- Data files in `src/data/` — consultations.ts, medications.ts, problems.ts, investigations.ts, documents.ts, patient.ts, tags.ts, alerts.ts, kpis.ts, skills.ts, educationExtras.ts, constellation.ts -- Types in `src/types/pmr.ts` (PMR interfaces) and `src/types/index.ts` (Phase type) -- Hooks in `src/hooks/` — useActiveSection.ts, useFocusTrap.ts -- Contexts in `src/contexts/` — AccessibilityContext.tsx (has 1 pre-existing ESLint warning — expected), DetailPanelContext.tsx (has 1 pre-existing ESLint warning — expected) -- Lib in `src/lib/` — search.ts (fuse.js integration) +- Detail renderers in `src/components/detail/` +- Data files in `src/data/` +- Types in `src/types/pmr.ts` and `src/types/index.ts` +- Hooks in `src/hooks/`, Contexts in `src/contexts/`, Lib in `src/lib/` - Path alias: `@/` maps to `./src/` ### Phase Management - App.tsx controls phase: 'boot' -> 'ecg' -> 'login' -> 'pmr' -- Phase type defined in `src/types/index.ts` as `'boot' | 'ecg' | 'login' | 'pmr'` -- BootSequence.tsx handles terminal animation — LOCKED -- ECGAnimation.tsx handles heartbeat + letter tracing + flatline exit — LOCKED -- LoginScreen.tsx bridges to dashboard (was PMRInterface, now DashboardLayout) - -### Data Architecture (CORRECT — do not modify existing files) -- All data files are populated with accurate CV content from References/CV_v4.md -- 5 consultation entries (roles), 18 medications (skills with prescribingHistory), 11 problems (achievements), 6 investigations (projects), 5 documents (education) -- Types are properly defined in pmr.ts — Consultation, Medication, Problem, Investigation, Document, Patient, ViewId -- New types needed: Tag, Alert, KPI, SkillMedication (Task 2) - -### Lucide Icons Typing -- Use `LucideIcon` type from `lucide-react` for icon maps, NOT `React.ComponentType<{ size: number }>` — the latter causes TS errors with ForwardRefExoticComponent - -### Known Dependencies -- React 18.3.1, TypeScript, Vite -- Tailwind CSS for utility classes -- Framer Motion 11.15.0 for animations -- Lucide React 0.468.0 for icons -- fuse.js 7.0.0 (already installed) for fuzzy search +- BootSequence.tsx, ECGAnimation.tsx — LOCKED, do not modify +- LoginScreen.tsx bridges to dashboard ### Typography -- Elvaro Grotesque (`font-ui`) — primary UI font, 7 weights (300-900), loaded from Fonts/ directory -- Blumir (`font-ui-alt`) — alternative, variable font (100-700) -- Geist Mono (`font-geist`) — timestamps, data values, coded entries +- Elvaro Grotesque (`font-ui`) — primary UI font +- Blumir (`font-ui-alt`) — alternative variable font +- Geist Mono (`font-geist`) — timestamps, data values - Fira Code (`font-mono`) — boot/ECG terminal only - Do NOT use Inter, Roboto, DM Sans, or system defaults -- DM Sans in the concept HTML is a PLACEHOLDER — use Elvaro Grotesque -- Font mapping was corrected in Task 1: Elvaro = font-ui (primary), Blumir = font-ui-alt (alternative) -### Design Tokens -- Dashboard background: use `--bg-dashboard` (#F0F5F4), NOT `--bg` (#FFFFFF which is for boot/ECG) -- Three-tier shadows: `--shadow-sm` (resting), `--shadow-md` (hover/interactive), `--shadow-lg` (overlays) -- Border tiers: `--border` (#D4E0DE, structural), `--border-light` (#E4EDEB, cards) -- Accent: `--accent` (#0D6E6E teal), `--accent-hover` (#0A8080), `--accent-light` (rgba 0.08), `--accent-border` (rgba 0.18) -- Status colors each have base + light + border variants (success, amber, alert, purple) -- Tailwind: `pmr-*` prefix for all dashboard colors (e.g., `bg-pmr-bg`, `text-pmr-accent`, `border-pmr-border-light`) -- Tailwind shadows: `shadow-pmr-sm`, `shadow-pmr-md`, `shadow-pmr-lg` -- Tailwind radius: `rounded-card` (8px), `rounded-card-sm` (6px), `rounded-login` (12px) +### Design Tokens (index.css) +- --sidebar-width: 272px (target: 304px) +- --topbar-height: 48px (target: 56px) +- --subnav-height: 36px (target: 42px) +- Dashboard grid gap: 12/16px (target: 14/20px) +- Card padding: 20px (target: 24px) -### Dashboard Layout -- DashboardLayout.tsx is the main container for the pmr phase — replaces PMRInterface -- Three-zone: TopBar (fixed, z-100, 48px) + Sidebar (fixed left, 272px) + Main (scrollable card grid) -- Card grid: CSS Grid `repeat(2, 1fr)` gap 16px, responsive 1fr at ≤900px via `.dashboard-grid` class -- Entrance: three separate Framer Motion variants (topbar → sidebar → content), staggered with delays -- Sidebar: default export (`import Sidebar from './Sidebar'`), TopBar: named export (`import { TopBar } from './TopBar'`) -- Background color transition: DashboardLayout covers App.tsx's `bg-black` with `var(--bg-dashboard)` + `minHeight: 100vh` +### Known Dependencies +- React 18.3.1, TypeScript, Vite, Tailwind CSS +- Framer Motion 11.15.0, Lucide React 0.468.0, fuse.js 7.0.0 -### Tile Expansion Pattern -- Framer Motion `AnimatePresence` + `motion.div` with `initial={{ height: 0 }}`, `animate={{ height: 'auto' }}`, `exit={{ height: 0 }}` -- `overflow: hidden` on the motion.div -- `prefers-reduced-motion` checked at module scope: `const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches` -- Transition: `prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }` -- State: `expandedItemId: string | null` per tile component -- Keyboard: Enter/Space toggle, Escape collapse -- `role="button"`, `tabIndex={0}`, `aria-expanded` on clickable items -- Colored left border (2px) on expanded content panel -- CareerActivity maps activity→consultation via `consultationId`, CoreSkills maps skill→medication by name match +### Key Files for This Feature +- src/index.css — CSS custom properties, grid gap +- src/components/Card.tsx — Card padding, CardHeader sizing +- src/components/TopBar.tsx — brand, search, session text +- src/components/SubNav.tsx — tab text, height +- src/components/Sidebar.tsx — all sidebar content sizing +- src/components/tiles/PatientSummaryTile.tsx — profile text, KPI cards +- src/components/DashboardLayout.tsx — LastConsultationSubsection, main content padding +- src/components/tiles/ProjectsTile.tsx — project items, tech tags +- src/components/EducationSubsection.tsx — education entries +- src/components/WorkExperienceSubsection.tsx — role items, expanded content +- src/components/RepeatMedicationsSubsection.tsx — skill rows, category sections +- src/components/ParentSection.tsx — parent heading sizing -### Command Palette -- `CommandPalette.tsx` renders at DashboardLayout level (z-index 1000, fixed overlay) -- Triggered by Ctrl+K (global listener in DashboardLayout) or TopBar search bar click -- Data model: `PaletteItem` with `PaletteAction` union (scroll, expand, link, download) -- `buildPaletteData()` returns 24 items across 6 sections, `buildSearchIndex()` wraps fuse.js -- `groupBySection()` maintains section order: Experience → Core Skills → Active Projects → Achievements → Education → Quick Actions -- All tiles have `data-tile-id` attribute (via Card `tileId` prop) for scroll targeting -- CSS animations in index.css: `palette-overlay-in`, `palette-modal-in` with `prefers-reduced-motion` overrides -- Legacy search exports (`SearchResult`, `buildLegacySearchIndex`, `groupResultsBySection`) kept for ClinicalSidebar backward compat — remove in Task 21 - -### Visual Review -- Dev server runs on `http://localhost:5173` throughout the loop -- App has boot→ECG→login→dashboard sequence (~15s on first load) -- If browser tools fail, skip visual review and note in iteration log — don't block progress - -## Manual Intervention — 2026-02-13 -### Reason: Complete redesign — replacing CareerRecord PMR with GP System Dashboard -### Changes made: -- **IMPLEMENTATION_PLAN.md**: Completely rewritten with 21 new tasks for GP System dashboard overhaul -- **guardrails.md**: Completely rewritten for new design direction (teal palette, tile-based layout, 8px radius, new shadow system) -- **progress.txt**: This intervention entry added -- **CLAUDE.md**: Will be updated by Task 3 in the new plan (architecture, colors, components, styling) - -### Previous plan status: 15/15 tasks completed (all checked off) -### New plan: 21 tasks across 4 phases (Foundation → Core Layout → Dashboard Tiles → Interactions → Polish) - -### What's being replaced: -- `PatientBanner.tsx` → `TopBar.tsx` (white top bar with search and session info) -- `ClinicalSidebar.tsx` → `Sidebar.tsx` (light background #F7FAFA, person header, tags, alerts only) -- `PMRInterface.tsx` → `DashboardLayout.tsx` (topbar + sidebar + scrollable card grid) -- All 7 `views/*.tsx` files → Dashboard tile components in `src/components/tiles/` -- Color palette: dark sidebar (#1E293B) + NHS Blue (#005EB8) → light sidebar (#F7FAFA) + teal (#0D6E6E) -- Navigation: sidebar-nav view-switching → single scrollable dashboard with expandable tiles -- Patient banner scroll condensation → removed (no banner, just topbar) - -### What's preserved: -- Boot sequence (BootSequence.tsx) — LOCKED -- ECG animation (ECGAnimation.tsx) — LOCKED -- Login screen (LoginScreen.tsx) — unchanged -- Font setup: Elvaro Grotesque (primary UI), Blumir (alt), Geist Mono (data), Fira Code (terminal only) -- All data files in src/data/ — content unchanged, new data files added -- fuse.js dependency — reused for command palette search -- App.tsx phase management (boot → ecg → login → pmr) — pmr phase now renders DashboardLayout - -### Context for next iteration: -- The reference design is `References/GPSystemconcept.html` — READ THIS before starting any visual task -- The old PMR components STILL EXIST in the codebase. Don't delete them yet — some expand/collapse patterns and data rendering can be reused inside tile expansion (Task 16). Cleanup happens in Task 21. -- Login screen still transitions to `#1E293B` background. The new dashboard has `#F0F5F4` background. The LoginScreen.tsx may need a background color update, or the transition can be handled in DashboardLayout's entrance animation. -- The concept HTML uses DM Sans font — this is a PLACEHOLDER. Production uses Elvaro Grotesque (font-ui). Do not switch to DM Sans. -- The concept's command palette has a comprehensive data model — use it as reference for building the palette in Task 18. -- Tile interactions (expansion, KPI flip) are in Phase 3. Tiles in Phase 2 should be built as static/display-only first, with data attributes or props that Phase 3 can hook into. - -### New guardrails added: -- Accent color: teal #0D6E6E (replacing NHS Blue #005EB8 as primary interactive color) -- Border radius: 8px for cards (was 4px) -- Shadow system: three-tier (sm/md/lg) replacing single pmr shadow -- Sidebar: light background, PersonHeader + Tags + Alerts ONLY (projects, skills, education moved to tiles) -- Layout: TopBar + Sidebar + Card Grid (replacing PatientBanner + ClinicalSidebar + view switching) -- Tile ordering: Patient Summary → Latest Results + Core Skills → Last Consultation → Career Activity → Education → Projects -- Skills frequency: user-specified values (Data Analysis=twice daily, etc.) - -## Iteration Log - -### Iteration 1 — Task 1: Update design tokens and Tailwind config -**Status:** Complete -**Changes:** -- Updated `src/index.css`: Added full GP System Dashboard token set (colors, shadows, layout vars, status colors with light/border variants). Kept legacy `--pmr-*` aliases for backward compat. Updated values of legacy tokens to match new palette (e.g., `--pmr-content` → `#F0F5F4`, `--pmr-sidebar` → `#F7FAFA`, `--pmr-radius` → `8px`). -- Updated `tailwind.config.js`: New pmr color tokens (bg, surface, sidebar, accent, text-primary/secondary/tertiary, border/border-light, success, amber, alert, purple). Three-tier shadow system (pmr-sm/md/lg). Border-radius updated (card=8px, card-sm=6px, login=12px). -- **Fixed font-ui/font-ui-alt swap**: Previous iterations had Blumir as `font-ui` and Elvaro as `font-ui-alt` — this was backwards. Now corrected: Elvaro Grotesque = `font-ui` (primary), Blumir = `font-ui-alt` (alternative). No components were using these classes directly, so no breakage. -- Used `--bg-dashboard` for the dashboard background (not `--bg`) to avoid conflicting with the existing `--bg: #FFFFFF` used by boot/ECG phases. -**Learnings:** -- The `--bg` CSS var is used for boot/ECG phases (#FFFFFF). Dashboard background uses `--bg-dashboard` (#F0F5F4) to avoid collision. -- No existing components reference `font-ui` or `font-ui-alt` Tailwind classes, so the font swap was safe. -- The old shadow tokens (`pmr-hover`, `pmr-banner`) were not referenced in any component code. -**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓ -**Visual review:** Not applicable (token-only changes, no visual components yet) - -### Iteration 2 — Task 2: Create new data files and update types -**Status:** Complete -**Changes:** -- Created `src/data/profile.ts` — personal statement extracted from CV_v4.md (exact match) -- Created `src/data/tags.ts` — 5 sidebar tags with color variants (teal, amber, green) -- Created `src/data/alerts.ts` — 2 sidebar alert flags (£14.6M savings, £220M budget) with severity and lucide-react icon names -- Created `src/data/kpis.ts` — 4 KPI metrics (Budget, Savings, Years, Team Size) with values, labels, subs, color variants, and explanation text for flip cards -- Created `src/data/skills.ts` — 5 technical skills as "SkillMedication" entries with user-specified frequencies (Data Analysis="Twice daily", Python="Daily", SQL="Daily", Power BI="Once weekly", JS/TS="When required"), plus years, proficiency, category, status, and lucide-react icon names -- Updated `src/types/pmr.ts` — added 4 new interfaces: Tag, Alert, KPI, SkillMedication -**Learnings:** -- All new data files follow the established pattern: import types, export const array -- Icon names are stored as strings (lucide-react icon names) — components will dynamically import them -- Skills frequency strings are user-specified values (not standardized enum like old Medication type) -- KPI explanations are substantial text blocks for flip card backs — these will be displayed in full when users flip the cards -- All CV numbers/dates verified against CV_v4.md — £220M, £14.6M, 9+ years, team of 12, start years for skills -**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓ -**Visual review:** Not applicable (data-only changes, no visual components yet) - -### Iteration 3 — Task 4: Build TopBar component -**Status:** Complete -**Changes:** -- Created `src/components/TopBar.tsx` — fixed 48px header with three zones: - - Left: Home icon (lucide-react, 18px, accent) + "Headhunt Medical Center" (13px, 600 weight) + "Remote" version badge (11px, tertiary) - - Center: Search bar button (max-width 560px, min-width 400px, 42px height) with Search icon, placeholder text, Ctrl+K kbd badge. On click triggers `onSearchClick` prop (for command palette in Task 18). Hidden on mobile (<768px). Hover/focus border transitions to accent color with focus ring. - - Right: "Dr. A.CHARLWOOD" text (hidden on <640px) + "Active Session · [time]" pill badge (Geist Mono, accent-light bg, accent-border) -- Component uses CSS custom properties from Task 1 tokens (--surface, --border, --accent, --text-primary, --text-secondary, --text-tertiary, --bg-dashboard, --accent-light, --accent-border) -- Live time updates every 60 seconds using setInterval -- Search bar is a `