Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BigSimmo merged 1 commit into from
Jul 14, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions src/components/clinical-dashboard/medication-prescribing-workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -73,6 +73,8 @@ type MedicationResult = {
type MedicationRow = {
result: MedicationResult;
badges: ClinicalBadgeItem[];
/** Per-medication (drug-class) identity accent hex, for a subtle icon tint. */
accent?: string;
};

type MedicationResultFilter = "best" | "indication" | "safety" | "monitoring";
Expand DownExpand Up@@ -298,8 +300,25 @@ function FilterStrip({
);
}

function ResultToneIcon({ result}: { result: MedicationResult }) {
function ResultToneIcon({ result, accent }: { result: MedicationResult; accent?: string }) {
const tone = result.tone === "teal" ? "teal" : result.tone === "blue" ? "blue" : "slate";
if (accent) {
// Decorative per-medication (class) accent tint; a soft wash + border keeps
// it legible in light and dark without carrying semantic meaning.
return (
<span
aria-hidden="true"
style={{
background: `color-mix(in srgb, ${accent} 12%, var(--surface))`,
borderColor: `color-mix(in srgb, ${accent} 34%, var(--surface))`,
color: accent,
}}
className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border shadow-[var(--shadow-inset)]"
>
<Pill className="h-[54%] w-[54%]" aria-hidden="true" />
</span>
);
}
return <IconTile icon={Pill} tone={tone} className="h-9 w-9" />;
}

Expand DownExpand Up@@ -382,14 +401,15 @@ function MedicationResults({
const governance = catalog.data?.governance;
const toRow = (result: MedicationResult, medication?: MedicationRecord): MedicationRow => {
const badges = medication ? medicationIdentityBadges(medication, governance?.[medication.slug]) : [];
const accent = medication?.accent;
// Prepend a per-patient alert badge so the highest-severity consideration
// surfaces first in the row's badge cluster (priority-sorted by tone).
if (medication && !profileEmpty) {
const alerts = evaluatePatientAlerts(medication, profile);
const alertBadge = considerationSummaryBadge(alerts.considerations.length, alerts.highestTone);
if (alertBadge) return { result, badges: [alertBadge, ...badges] };
if (alertBadge) return { result, badges: [alertBadge, ...badges], accent };
}
return { result, badges };
return { result, badges, accent };
};
const sourceRows =
catalog.data?.matches?.map((match) => toRow(match.result, match.medication)) ??
Expand DownExpand Up@@ -510,7 +530,7 @@ function MedicationResults({
const rowContent = (
<>
<div className="flex min-w-0 items-center gap-2.5">
<ResultToneIcon result={result} />
<ResultToneIcon result={result} accent={row.accent} />
<div className="min-w-0">
<span className="block break-words text-base-minus font-semibold text-[color:var(--text-heading)]">
<HighlightedName text={result.name} term={query} />
Expand DownExpand Up@@ -590,7 +610,7 @@ function MedicationResults({
);
const cardContent = (
<div className="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-start gap-2.5">
<ResultToneIcon result={result} />
<ResultToneIcon result={result} accent={row.accent} />
<div className="min-w-0 space-y-1.5">
<div className="min-w-0">
<p className="line-clamp-2 break-words text-base-minus font-semibold leading-5 text-[color:var(--text-heading)]">
Expand Down
Loading