feat: add medication enrichment lookup to the medication editor

* feat: add medication enrichment lookup

* fix: avoid double unescape in enrichment sanitization

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Daniel Volz
2026-03-20 20:39:38 +01:00
committed by GitHub
parent e1b47e82b2
commit b796e03bcb
16 changed files with 3510 additions and 2 deletions
+205
View File
@@ -2068,6 +2068,211 @@ button.has-validation-error {
border-color: var(--accent);
}
.medication-enrichment-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.medication-enrichment-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 0.85rem;
border: 1px solid var(--border-primary);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-secondary) 62%, var(--bg-tertiary));
}
.medication-enrichment-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.medication-enrichment-title {
margin-bottom: 0.2rem;
}
.medication-enrichment-collapsed-hint,
.medication-enrichment-description,
.medication-enrichment-manual-hint,
.medication-enrichment-selection-summary {
margin: 0;
}
.medication-enrichment-helper-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.medication-enrichment-info {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.75rem;
border: 1px solid color-mix(in srgb, var(--info) 28%, var(--border-primary));
border-radius: 10px;
background: color-mix(in srgb, var(--accent-bg) 55%, transparent);
}
.medication-enrichment-info-title {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
}
.medication-enrichment-search-row {
display: flex;
align-items: stretch;
gap: 0.75rem;
}
.medication-enrichment-search-row button {
flex-shrink: 0;
white-space: nowrap;
}
.medication-enrichment-results {
display: grid;
gap: 0.75rem;
}
.medication-enrichment-results-footer {
display: flex;
justify-content: flex-start;
}
.medication-enrichment-result {
display: grid;
gap: 0.6rem;
padding: 0.85rem;
border: 1px solid var(--border-primary);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-secondary) 68%, var(--bg-tertiary));
}
.medication-enrichment-result.active {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-primary));
box-shadow: inset 0 0 0 1px rgba(47, 134, 246, 0.18);
}
.medication-enrichment-result-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.medication-enrichment-result-names {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.medication-enrichment-result-names strong {
font-size: 0.95rem;
word-break: break-word;
}
.medication-enrichment-result-generic {
font-size: 0.85rem;
color: var(--text-secondary);
word-break: break-word;
}
.medication-enrichment-result-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-end;
gap: 0.5rem;
}
.medication-enrichment-result-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.5rem 1rem;
margin: 0;
}
.medication-enrichment-result-meta div {
min-width: 0;
}
.medication-enrichment-result-meta dt {
margin-bottom: 0.15rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.medication-enrichment-result-meta dd {
margin: 0;
font-size: 0.85rem;
color: var(--text-primary);
word-break: break-word;
}
.medication-enrichment-followup {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
border: 1px dashed var(--border-secondary);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}
.medication-enrichment-strengths {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.medication-enrichment-strength-title {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
}
.medication-enrichment-strength-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.medication-enrichment-strength-list button {
white-space: nowrap;
}
@media (max-width: 760px) {
.medication-enrichment-header,
.medication-enrichment-result-header,
.medication-enrichment-search-row,
.medication-enrichment-helper-row {
flex-direction: column;
align-items: stretch;
}
.medication-enrichment-result-actions {
justify-content: flex-start;
}
.medication-enrichment-search-row button {
width: 100%;
}
}
.select-field.dose-unit-select:hover,
.dose-unit-select:hover {
border-color: var(--accent);