Polish medication page design + fold patient-details tool by default

[BigSimmo]

Summary

Presentational upgrade of the medication detail page and prescribing search list — a disciplined "dash of colour" on the crisp‑white/teal frame — plus collapsing the patient‑details input tool by default so it no longer dominates the page. No data or logic changes.

Key lever: every MedicationRecord already carries an accent hex keyed to drug class (14 distinct colours across 328 meds) that was defined but never rendered. It's now surfaced as a decorative per‑medication identity accent.

Detail page (medication-record-page.tsx)

• Per‑class accent as a --med-accent CSS var (color‑mix softened): header left‑rail, header icon tile, subclass dot, and a section‑content left‑rail. Chrome only — never text/semantic surfaces — so contrast holds in light + dark and red/amber‑family class hues never read as safety signals (colour contract: docs/redesign/permanent-colour-direction.md).
• Detail tiles: per‑tile icons + categorical --type-* tinted chips so the four read as distinct; the "Avoid" tile now uses the full danger recipe, fixing the near‑invisible /60‑on‑soft‑token border.
• Tabs: boxed pills → accessible underline tabs (role=tablist/tab/tabpanel, aria-selected, arrow‑key nav).
• Section rows: per‑section toned icon tiles (red = contra, amber = risk, green = safe/verified, categorical for the rest).
• Sidebar: quick‑reference values promoted to heading colour (hierarchy fix); the sidebar now reflows below content on mobile instead of disappearing.
• States: skeleton LoadingPanel; EmptyState for an empty tab.
• Fixed a mobile horizontal overflow introduced by the sidebar reflow (grid constrained to grid-cols-1 / minmax(0,1fr); verified scrollWidth === innerWidth at 390px).

Prescribing search (medication-prescribing-workspace.tsx)

• Leading result icon tiles tinted with the per‑medication class accent (soft wash).

Fold (patient-profile-panel.tsx)

• New defaultOpen prop; the detail page mounts the panel collapsed (defaultOpen={false}). Considerations still render below.

Verification

• npm run lint — clean (--max-warnings 0)
• npm run typecheck — clean for changed files
• npm run test — 2301 passed (the only errors are the pre‑existing local jsdom/@testing-library gap in *.dom.test.tsx, resolved by CI's npm ci)
• prettier --check, check:type-scale, check:icon-scale, brand:check — all pass
• Chromium before/after screenshots — light, dark, mobile, detail (two drug classes) + search; mobile overflow measured and fixed
• npm run verify:ui — the repo's Chromium UI gate (recommended in CI for this styling change)

Clinical Governance Preflight

Not applicable — pure presentational change (no ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical‑output behaviour). Colour discipline preserved: semantic tones (green/amber/red) unchanged in meaning; the per‑class accent is decorative chrome only.

🤖 Generated with Claude Code

https://claude.ai/code/session_01JBemWnYhqdGXBzwJUTQAqe

---

Generated by Claude Code

Summary by CodeRabbit

• New Features

  • Added medication-specific accent colors across result rows and medication record pages.
  • Added accessible section tabs with keyboard navigation.
  • Added configurable initial open state for patient profile panels.

• UI Improvements

  • Refreshed medication detail tiles, section cards, sidebar cards, and alert styling.
  • Added clearer empty states and loading skeletons.
  • Improved visual indicators for medication details and key statistics.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 0566a6f9-f9b7-4771-9930-d819ed569868

📥 Commits

Reviewing files that changed from the base of the PR and between 1dcc4d9 and e9b43a1.

📒 Files selected for processing (3)

• src/components/clinical-dashboard/medication-prescribing-workspace.tsx
• src/components/clinical-dashboard/medication-record-page.tsx
• src/components/clinical-dashboard/patient-profile-panel.tsx

---

📝 Walkthrough

Walkthrough

Medication result rows now carry per-medication accents into tinted icons. The medication record page adds accent-aware styling, redesigned detail tiles, accessible section tabs, reusable sidebar cards, empty/loading states, and updated layout visuals. Patient profile panels support configurable initial expansion.

Changes

Medication dashboard UI

Layer / File(s)	Summary
Medication result accent flow src/components/clinical-dashboard/medication-prescribing-workspace.tsx	Medication records propagate accent into desktop and mobile result-row icons, which render tinted containers when available.
Medication record presentation foundations src/components/clinical-dashboard/medication-record-page.tsx	New tone helpers, tile decoration, keyboard-accessible section tabs, and reusable sidebar card primitives define the revised record-page presentation.
Medication record detail integration src/components/clinical-dashboard/medication-record-page.tsx	The detail page applies record accents, uses the new tiles and tabs, renders empty/loading states, and wraps sidebar content with shared cards.

Patient profile panel behavior

Layer / File(s)	Summary
Profile panel initial state src/components/clinical-dashboard/patient-profile-panel.tsx	PatientProfilePanel accepts defaultOpen and uses it to initialize expansion state when provided.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

• BigSimmo/Database#477: Overlaps the medication result-row tone and icon rendering path.
• BigSimmo/Database#517: Also modifies the medication record page container styling.
• BigSimmo/Database#523: Also changes medication section icon and rendering behavior.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/medication-alerts-database-cb8o83

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

_{Comment @coderabbitai help to get the list of available commands.}

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.