diff --git a/src/components/clinical-dashboard/differentials-home.tsx b/src/components/clinical-dashboard/differentials-home.tsx index 8f7e0754a..f8998a8dd 100644 --- a/src/components/clinical-dashboard/differentials-home.tsx +++ b/src/components/clinical-dashboard/differentials-home.tsx @@ -162,6 +162,20 @@ function statusTone(status: DifferentialRecord["status"]) { return "border-[color:var(--info-border)] bg-[color:var(--info-soft)] text-[color:var(--info)]"; } +/** + * The card's left urgency rail. Same status semantics as `statusTone`, reduced + * to a single solid fill so urgency is legible before any text is read. + */ +function statusRailTone(status: DifferentialRecord["status"]) { + if (status === "emergent") return "bg-[color:var(--danger-solid)]"; + if (status === "urgent") return "bg-[color:var(--warning)]"; + return "bg-[color:var(--info)]"; +} + +function openActionLabel(kind: DifferentialResult["kind"]) { + return kind === "presentation" ? "Open presentation" : "Open differential"; +} + function resultIcon(kind: DifferentialResult["kind"], slug: string) { if (kind === "presentation") return BrainCircuit; return candidateIconBySlug.find(([fragment]) => slug.includes(fragment))?.[1] ?? Stethoscope; @@ -273,11 +287,37 @@ function Chip({ children }: { children: string }) { ); } -function SelectionCheckbox({ selected, onChange, label }: { selected: boolean; onChange: () => void; label: string }) { +/** + * The compare toggle. It sits on the same card as the whole-card open link, so + * it carries its own word ("Compare"/"Added") rather than a bare tick: the two + * actions must never read as the same target. `relative z-10` keeps it above + * the card's stretched open link. + */ +function SelectionCheckbox({ + selected, + onChange, + label, + showLabel = true, +}: { + selected: boolean; + onChange: () => void; + label: string; + showLabel?: boolean; +}) { return ( ); } +/** + * Stretches the card's title link across the whole card, so anywhere that is + * not another control opens the record. It stays a pseudo-element on the single + * existing link rather than a second overlay anchor, so assistive technology + * still hears one link named by the title. + * + * The hit area is widened but the focus ring is deliberately NOT: the shared + * `:focus-visible` rule in `globals.css` is unlayered, so it wins over any + * `outline-none` utility here, and painting a second ring on the pseudo-element + * would leave two rings stacked — exactly what the "focus is singular" + * assertion in `tests/ui-smoke.spec.ts` forbids. Focus stays on the title. + */ +// The pseudo-element paints nothing, so it needs no radius of its own — and a +// `rounded-[inherit]` arbitrary value is a raw radius literal the design-system +// contract ratchet counts against this file. +const stretchedOpenLinkClass = "after:absolute after:inset-0 after:z-0 after:content-['']"; + +/** + * The visible "click here" label for the stretched card link. It is text, not a + * second anchor to the same href — duplicating the link would double every + * result in a screen-reader link list. + */ +function OpenAffordance({ + kind, + compact = false, + className, +}: { + kind: DifferentialResult["kind"]; + compact?: boolean; + className?: string; +}) { + return ( + + {compact ? "Open" : openActionLabel(kind)} + + + + + ); +} + +/** The card's left urgency rail, drawn inside the card's rounded clip. */ +function StatusRail({ status }: { status: DifferentialRecord["status"] }) { + return ( + + ); +} + function DesktopResultRow({ result, index, @@ -318,18 +417,22 @@ function DesktopResultRow({ return (
+ {index + 1} - +
{result.title} @@ -355,10 +458,15 @@ function DesktopResultRow({ {result.clinicalCues.length > 4 ? {`+${result.clinicalCues.length - 4}`} : null}
-
+
+
- {onToggle ? : } + {onToggle ? ( + + ) : ( + + )}
); } @@ -377,8 +485,9 @@ function MobileResultCard({ return (
+
{result.title} - {onToggle ? ( - - ) : ( - - )}
@@ -420,6 +527,10 @@ function MobileResultCard({ ))}
+
+ + {onToggle ? : null} +
); } @@ -497,13 +608,15 @@ function BestAnswerCard({ data-testid={compact ? "differential-best-answer" : "differential-best-match-card"} aria-label="Best differential match" className={cn( - "grid items-start gap-x-2.5 gap-y-3 rounded-lg border shadow-[var(--e1)]", + "group relative grid items-start gap-x-2.5 gap-y-3 overflow-hidden rounded-xl border shadow-[var(--e1)] transition", "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]/45", + "hover:shadow-[var(--e2)]", compact - ? "grid-cols-[minmax(0,1fr)_var(--spacing-tap)] p-3" - : "grid-cols-[2.75rem_4.25rem_minmax(0,1fr)_7rem_var(--spacing-tap)] p-3.5", + ? "grid-cols-[minmax(0,1fr)] py-3 pl-4 pr-3" + : "grid-cols-[2.75rem_4.25rem_minmax(0,1fr)_10.75rem_auto] py-3.5 pl-4 pr-3.5", )} > + {!compact ? (
{compact ? ( @@ -546,33 +656,38 @@ function BestAnswerCard({ > {best.title} - - +
+ + + {compact ? : null} +
{best.scopeLabel ? (

{best.scopeLabel}

) : null} {!compact ? ( -
+
+
) : null} - {onToggle ? ( - - ) : compact ? ( - - ) : ( - - )} - {compact ? ( -
- -
+ {!compact ? ( + onToggle ? ( + + ) : ( + + ) ) : null} -
+
+ {compact ? ( +
+ + {onToggle ? : null} +
+ ) : null} ); }