From 0ffab23b6d734fefc82bc9803a87d61910a1c87e Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sat, 14 Feb 2026 19:22:37 +0100
Subject: [PATCH] feat: add back button in medication edit header (#201)

---
 frontend/src/components/MobileEditModal.tsx |  3 +
 frontend/src/i18n/de.json                   |  1 +
 frontend/src/i18n/en.json                   |  1 +
 frontend/src/pages/MedicationsPage.tsx      | 63 +++++++++++++++------
 4 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/MobileEditModal.tsx b/frontend/src/components/MobileEditModal.tsx
index 9a8401d..69e0221 100644
--- a/frontend/src/components/MobileEditModal.tsx
+++ b/frontend/src/components/MobileEditModal.tsx
@@ -125,6 +125,9 @@ export function MobileEditModal({
 					×
 				</button>
 				<div className="edit-modal-header">
+					<button type="button" className="ghost small" onClick={onClose}>
+						← {t("common.back")}
+					</button>
 					<h2>{editingId ? t("form.editEntry") : t("form.newEntry")}</h2>
 				</div>
 				<form
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index c49a5a1..c968c99 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -397,6 +397,7 @@
     },
     "saved": "Gespeichert ✓",
     "save": "Speichern",
+    "back": "Zurück",
     "cancel": "Abbrechen",
     "close": "Schließen",
     "edit": "Bearbeiten",
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 59ab77c..22bb1be 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -397,6 +397,7 @@
     },
     "saved": "Saved ✓",
     "save": "Save",
+    "back": "Back",
     "cancel": "Cancel",
     "close": "Close",
     "edit": "Edit",
diff --git a/frontend/src/pages/MedicationsPage.tsx b/frontend/src/pages/MedicationsPage.tsx
index 3fea8b2..879b0ba 100644
--- a/frontend/src/pages/MedicationsPage.tsx
+++ b/frontend/src/pages/MedicationsPage.tsx
@@ -338,6 +338,30 @@ export function MedicationsPage() {
 		setViewMode("form");
 	}
 
+	const orderedMeds = useMemo(() => {
+		if (!editingId) {
+			return meds;
+		}
+
+		const selectedMedication = meds.find((med) => med.id === editingId);
+		if (!selectedMedication) {
+			return meds;
+		}
+
+		return [selectedMedication, ...meds.filter((med) => med.id !== editingId)];
+	}, [meds, editingId]);
+
+	const medListRef = useRef<HTMLDivElement | null>(null);
+	useEffect(() => {
+		if (viewMode !== "form" || !editingId) {
+			return;
+		}
+
+		if (medListRef.current) {
+			medListRef.current.scrollTop = 0;
+		}
+	}, [viewMode, editingId]);
+
 	return (
 		<section className={viewMode === "grid" ? "med-grid-wrapper" : "grid"}>
 			{viewMode === "grid" ? (
@@ -361,7 +385,7 @@ export function MedicationsPage() {
 						</button>
 					</div>
 					<div className="med-grid">
-						{meds.map((med) => (
+						{orderedMeds.map((med) => (
 							<div key={med.id} className="med-row">
 								<div className="med-header">
 									<div className="med-info">
@@ -461,8 +485,8 @@ export function MedicationsPage() {
 								+ {t("form.newEntry")}
 							</button>
 						</div>
-						<div className="med-list">
-							{meds.map((med) => (
+						<div className="med-list" ref={medListRef}>
+							{orderedMeds.map((med) => (
 								<div key={med.id} className={`med-row${editingId === med.id ? " editing" : ""}`}>
 									<div className="med-header">
 										<div className="med-info">
@@ -547,20 +571,25 @@ export function MedicationsPage() {
 
 					<article className="card form desktop-only">
 						<div className="card-head">
-							{editingId ? (
-								<div className="edit-header">
-									<MedicationAvatar
-										name={meds.find((m) => m.id === editingId)?.name || ""}
-										imageUrl={meds.find((m) => m.id === editingId)?.imageUrl}
-										size="md"
-									/>
-									<h2>
-										{t("form.editEntry")}: {meds.find((m) => m.id === editingId)?.name}
-									</h2>
-								</div>
-							) : (
-								<h2>{t("form.newEntry")}</h2>
-							)}
+							<div className="edit-header">
+								<button type="button" className="ghost small" onClick={handleResetForm}>
+									← {t("common.back")}
+								</button>
+								{editingId ? (
+									<>
+										<MedicationAvatar
+											name={meds.find((m) => m.id === editingId)?.name || ""}
+											imageUrl={meds.find((m) => m.id === editingId)?.imageUrl}
+											size="md"
+										/>
+										<h2>
+											{t("form.editEntry")}: {meds.find((m) => m.id === editingId)?.name}
+										</h2>
+									</>
+								) : (
+									<h2>{t("form.newEntry")}</h2>
+								)}
+							</div>
 						</div>
 						<form className="form-grid" onSubmit={saveMedication}>
 							<div className="full form-category">