From 04cce8d9c291ae6e600b8c4f140d7c8a07237930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 15 May 2026 18:30:15 +0200
Subject: [PATCH] refactor(medications): mount the entry surfaces via
 ResponsiveSheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swaps the medication create/edit, intake create/edit, side-effect
log, and inventory add-pen mounts from the centred `<Dialog>` to
the shared `<ResponsiveSheet>` primitive so the same surfaces flip
to a bottom-anchored sheet on narrow viewports. The "log this
thing" mental model — measurement, mood, medication, intake,
side-effect, inventory — now lands on a consistent mobile shape.
Configuration surfaces (IntakeImport, ApiEndpoint, PhaseConfig)
stay centred per Decision G; the dialog primitive's new
`max-h-[calc(100dvh-2rem)]` default keeps them inside the viewport
on short / soft-keyboard screens without the previous per-callsite
`max-h-[90vh]` ceiling.
---
 src/app/medications/page.tsx                  | 25 +++++++------
 .../medications/SideEffectsSection.tsx        | 26 +++++--------
 .../medications/intake-history-list.tsx       | 37 ++++++++-----------
 .../medications/inventory-section.tsx         | 27 +++++---------
 4 files changed, 46 insertions(+), 69 deletions(-)

diff --git a/src/app/medications/page.tsx b/src/app/medications/page.tsx
index 373721e66..cf32e9197 100644
--- a/src/app/medications/page.tsx
+++ b/src/app/medications/page.tsx
@@ -18,6 +18,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -256,16 +257,17 @@ export default function MedicationsPage() {
         onClose={() => setImportMedId(null)}
       />
 
-      {/* Create/Edit Dialog */}
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>
-              {editingMed
-                ? t("medications.editMedication")
-                : t("medications.newMedication")}
-            </DialogTitle>
-          </DialogHeader>
+      {/* Create/Edit Sheet — bottom-sheet on `<md`, centred Dialog on `md+`. */}
+      <ResponsiveSheet
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        title={
+          editingMed
+            ? t("medications.editMedication")
+            : t("medications.newMedication")
+        }
+        className="sm:max-w-lg"
+      >
           <MedicationForm
             initial={
               editingMed
@@ -307,8 +309,7 @@ export default function MedicationsPage() {
             onSuccess={closeDialog}
             onCancel={closeDialog}
           />
-        </DialogContent>
-      </Dialog>
+      </ResponsiveSheet>
     </div>
   );
 }
diff --git a/src/components/medications/SideEffectsSection.tsx b/src/components/medications/SideEffectsSection.tsx
index c78dd6568..02905f965 100644
--- a/src/components/medications/SideEffectsSection.tsx
+++ b/src/components/medications/SideEffectsSection.tsx
@@ -5,13 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Plus, Trash2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -330,12 +324,11 @@ export function SideEffectsSection({ medicationId }: SideEffectsSectionProps) {
         </div>
       )}
 
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t("medications.sideEffects.sheetTitle")}</DialogTitle>
-          </DialogHeader>
-
+      <ResponsiveSheet
+        open={open}
+        onOpenChange={setOpen}
+        title={t("medications.sideEffects.sheetTitle")}
+      >
           <form
             onSubmit={handleSubmit}
             className="space-y-4"
@@ -463,7 +456,7 @@ export function SideEffectsSection({ medicationId }: SideEffectsSectionProps) {
               </p>
             )}
 
-            <DialogFooter className="gap-2">
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <Button
                 type="button"
                 variant="ghost"
@@ -477,10 +470,9 @@ export function SideEffectsSection({ medicationId }: SideEffectsSectionProps) {
                 )}
                 {t("medications.sideEffects.submitCta")}
               </Button>
-            </DialogFooter>
+            </div>
           </form>
-        </DialogContent>
-      </Dialog>
+      </ResponsiveSheet>
     </MedicationDetailSection>
   );
 }
diff --git a/src/components/medications/intake-history-list.tsx b/src/components/medications/intake-history-list.tsx
index c40cf9105..b237a31bf 100644
--- a/src/components/medications/intake-history-list.tsx
+++ b/src/components/medications/intake-history-list.tsx
@@ -16,12 +16,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -530,12 +525,12 @@ export function IntakeHistoryList({
         )}
       </div>
 
-      {/* Edit Dialog */}
-      <Dialog open={!!editing} onOpenChange={(open) => !open && closeEdit()}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("medications.editIntake")}</DialogTitle>
-          </DialogHeader>
+      {/* Edit Sheet */}
+      <ResponsiveSheet
+        open={!!editing}
+        onOpenChange={(open) => !open && closeEdit()}
+        title={t("medications.editIntake")}
+      >
           {editing && (
             <form onSubmit={submitEdit} className="space-y-4">
               <div className="space-y-2">
@@ -670,15 +665,14 @@ export function IntakeHistoryList({
               </AlertDialog>
             </form>
           )}
-        </DialogContent>
-      </Dialog>
+      </ResponsiveSheet>
 
-      {/* Create Dialog */}
-      <Dialog open={creating} onOpenChange={(open) => !open && closeCreate()}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("medications.newIntake")}</DialogTitle>
-          </DialogHeader>
+      {/* Create Sheet */}
+      <ResponsiveSheet
+        open={creating}
+        onOpenChange={(open) => !open && closeCreate()}
+        title={t("medications.newIntake")}
+      >
           <form onSubmit={submitCreate} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="create-scheduledFor">
@@ -745,8 +739,7 @@ export function IntakeHistoryList({
               </Button>
             </div>
           </form>
-        </DialogContent>
-      </Dialog>
+      </ResponsiveSheet>
     </>
   );
 }
diff --git a/src/components/medications/inventory-section.tsx b/src/components/medications/inventory-section.tsx
index d73614402..1f9a13130 100644
--- a/src/components/medications/inventory-section.tsx
+++ b/src/components/medications/inventory-section.tsx
@@ -5,13 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ChevronDown, Loader2, Plus, Trash2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { ResponsiveSheet } from "@/components/ui/responsive-sheet";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
@@ -430,13 +424,11 @@ export function InventorySection({
         </div>
       </details>
 
-      <Dialog open={addOpen} onOpenChange={setAddOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {t("medications.inventory.addPenTitle")}
-            </DialogTitle>
-          </DialogHeader>
+      <ResponsiveSheet
+        open={addOpen}
+        onOpenChange={setAddOpen}
+        title={t("medications.inventory.addPenTitle")}
+      >
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-1.5">
               <Label htmlFor="inv-doses-total">
@@ -500,7 +492,7 @@ export function InventorySection({
               <p className="text-destructive text-sm">{formError}</p>
             )}
 
-            <DialogFooter>
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <Button
                 type="button"
                 variant="outline"
@@ -517,10 +509,9 @@ export function InventorySection({
                 )}
                 {t("medications.inventory.save")}
               </Button>
-            </DialogFooter>
+            </div>
           </form>
-        </DialogContent>
-      </Dialog>
+      </ResponsiveSheet>
     </>
   );
 }