From 22eda3040e1939830e19564a1309e75e8354a3b2 Mon Sep 17 00:00:00 2001
From: Chris <caweis@mac.com>
Date: Tue, 14 Jul 2026 06:07:59 -0400
Subject: [PATCH] feat(drug-reference): co-locate a persistent safety note with
 affirmative remedy guidance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add RemedySafetyNote at the head of every natural-remedy section — the two on
Drug Reference and the one on "When to use what" — so the "informational only,
not medical advice, seek real medical care in an emergency" framing appears with
the guidance itself, not only in the page-top banner. Replaces the terse
per-section caveat with the same amber alert language as SafetyBanner.

Addresses the upstream #1040 review request that the disclaimer be unmistakable
and present wherever affirmative self-care guidance appears, not a one-time banner.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../conditions/RemedySafetyNote.tsx           | 38 +++++++++++++++++++
 admin/inertia/pages/conditions/show.tsx       | 11 +++---
 admin/inertia/pages/drug-reference/index.tsx  | 15 ++++----
 3 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 admin/inertia/components/conditions/RemedySafetyNote.tsx

diff --git a/admin/inertia/components/conditions/RemedySafetyNote.tsx b/admin/inertia/components/conditions/RemedySafetyNote.tsx
new file mode 100644
index 0000000..6e55124
--- /dev/null
+++ b/admin/inertia/components/conditions/RemedySafetyNote.tsx
@@ -0,0 +1,38 @@
+import { IconAlertTriangle } from '@tabler/icons-react'
+
+/**
+ * Co-located safety note for AFFIRMATIVE self-care / natural-remedy guidance.
+ *
+ * Distinct from {@link SafetyBanner}, which leads a page and frames FDA
+ * label-indication *matches*. This note sits at the head of every block that
+ * offers affirmative remedy guidance (the natural-remedy sections on the Drug
+ * Reference and "When to use what" pages), so the "informational only, not
+ * medical advice, seek real care in an emergency" framing appears WITH the
+ * guidance itself — not only in a one-time banner the reader may have scrolled
+ * past. Same amber alert language as SafetyBanner so the two read as one system.
+ */
+export default function RemedySafetyNote() {
+  return (
+    <div
+      role="alert"
+      className="flex items-start gap-2.5 rounded-lg border-2 border-amber-400 bg-amber-50 px-3 py-2.5 text-xs text-amber-900"
+    >
+      <IconAlertTriangle
+        size={18}
+        className="mt-0.5 flex-shrink-0 text-amber-600"
+        aria-hidden="true"
+      />
+      <div className="space-y-1">
+        <p className="font-bold">Informational only — not medical advice.</p>
+        <p className="text-amber-800">
+          These remedies have limited or mixed evidence, are not FDA-evaluated, and are not a
+          substitute for professional care. Talk to a clinician before use.
+        </p>
+        <p className="text-amber-800">
+          In an emergency, or if symptoms are severe or worsening,{' '}
+          <strong>seek real medical care — call emergency services</strong>.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/inertia/pages/conditions/show.tsx b/admin/inertia/pages/conditions/show.tsx
index 965f167..95153b2 100644
--- a/admin/inertia/pages/conditions/show.tsx
+++ b/admin/inertia/pages/conditions/show.tsx
@@ -2,6 +2,7 @@ import { Head, Link } from '@inertiajs/react'
 import { IconArrowLeft, IconLeaf } from '@tabler/icons-react'
 import AppLayout from '~/layouts/AppLayout'
 import SafetyBanner from '~/components/conditions/SafetyBanner'
+import RemedySafetyNote from '~/components/conditions/RemedySafetyNote'
 import DrugResultRow from '~/components/drug-reference/DrugResultRow'
 import type { ConditionSummary, NaturalRemedy } from '../../../types/conditions'
 import { remedySourceName } from '../../../util/conditions'
@@ -106,11 +107,11 @@ export default function ConditionsShow({ condition, drugs, remedies, drugRowCoun
               </span>
             </div>
 
-            {/* Caveat — prominent, before the cards. */}
-            <p className="mb-3 text-xs text-desert-stone-dark bg-desert-sand/60 border border-desert-tan-lighter/60 rounded-lg px-3 py-2">
-              <strong>Complementary remedies</strong> — limited or mixed evidence, not FDA-evaluated.
-              These are not substitutes for medical treatment. Talk to a clinician before use.
-            </p>
+            {/* Safety note — co-located with the affirmative remedy guidance,
+                not just the page-top banner (upstream PR #1040 requirement). */}
+            <div className="mb-3">
+              <RemedySafetyNote />
+            </div>
 
             <div className="space-y-3">
               {remedies.map((r) => (
diff --git a/admin/inertia/pages/drug-reference/index.tsx b/admin/inertia/pages/drug-reference/index.tsx
index 2ab9ae4..5fb5ed9 100644
--- a/admin/inertia/pages/drug-reference/index.tsx
+++ b/admin/inertia/pages/drug-reference/index.tsx
@@ -5,6 +5,7 @@ import StyledButton from '~/components/StyledButton'
 import DrugResultRow from '~/components/drug-reference/DrugResultRow'
 import IngestStatus from '~/components/drug-reference/IngestStatus'
 import SafetyBanner from '~/components/conditions/SafetyBanner'
+import RemedySafetyNote from '~/components/conditions/RemedySafetyNote'
 import { IconSearch, IconFirstAidKit, IconLeaf } from '@tabler/icons-react'
 import type {
   DrugSearchResult,
@@ -668,10 +669,9 @@ export default function DrugReferenceIndex({ ingestStatus, rowCount, conditions,
                         Natural remedies
                       </span>
                     </div>
-                    <p className="px-4 py-2 text-xs text-desert-stone-dark border-b border-desert-tan-lighter/20">
-                      Complementary remedies — limited evidence, not FDA-evaluated. Talk to a
-                      clinician before use.
-                    </p>
+                    <div className="border-b border-desert-tan-lighter/20 p-3">
+                      <RemedySafetyNote />
+                    </div>
                     <div className="divide-y divide-desert-tan-lighter/30">
                       {visibleSituationRemedies.map((r) => (
                         <SituationRemedyRow key={r.slug} remedy={r} />
@@ -722,10 +722,9 @@ export default function DrugReferenceIndex({ ingestStatus, rowCount, conditions,
                     {remedyMatches.length} match{remedyMatches.length !== 1 ? 'es' : ''}
                   </span>
                 </div>
-                <p className="px-4 py-2 text-xs text-desert-stone-dark border-b border-desert-tan-lighter/20">
-                  Complementary remedies — limited evidence, not FDA-evaluated. Talk to a
-                  clinician before use.
-                </p>
+                <div className="border-b border-desert-tan-lighter/20 p-3">
+                  <RemedySafetyNote />
+                </div>
                 <div className="divide-y divide-desert-tan-lighter/30">
                   {remedyMatches.map((r) => (
                     <SituationRemedyRow key={`name-${r.slug}`} remedy={r} />