From 899d6e6e19ebff661a7785004358994efb54a882 Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Sat, 13 Jun 2026 16:15:04 +0200
Subject: [PATCH] =?UTF-8?q?fix(settings):=20merge=20B=C3=A9b=C3=A9=20+=20B?=
 =?UTF-8?q?=C3=A9b=C3=A9s=20into=20single=20section?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each baby row is tappable; inline edit form expands under the selected
baby. Passes baby data directly to avoid stale context on first click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(app)/settings/page.tsx | 114 ++++++++++++++------------------
 1 file changed, 51 insertions(+), 63 deletions(-)

diff --git a/src/app/(app)/settings/page.tsx b/src/app/(app)/settings/page.tsx
index aab90a0..af02ec6 100644
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -152,12 +152,13 @@ export default function SettingsPage() {
     setExportLoading(false);
   }
 
-  function startEditBaby() {
-    if (!selectedBaby) return;
+  function startEditBaby(b?: { name: string; birthDate: string; gender?: string }) {
+    const src = b ?? selectedBaby;
+    if (!src) return;
     setBabyForm({
-      name: selectedBaby.name,
-      birthDate: selectedBaby.birthDate.slice(0, 10),
-      gender: selectedBaby.gender ?? "",
+      name: src.name,
+      birthDate: src.birthDate.slice(0, 10),
+      gender: src.gender ?? "",
     });
     setEditingBaby(true);
   }
@@ -252,67 +253,54 @@ export default function SettingsPage() {
       <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">Réglages</h1>
 
       <div className="space-y-4">
-        {/* Baby info */}
-        {selectedBaby && (
-          <Section title="Bébé">
-            {editingBaby ? (
-              <form onSubmit={saveBaby} className="p-4 space-y-3">
-                <div>
-                  <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Prénom</label>
-                  <input type="text" value={babyForm.name} onChange={(e) => setBabyForm((f) => ({ ...f, name: e.target.value }))}
-                    required className={inputCls} />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Date de naissance</label>
-                  <input type="date" value={babyForm.birthDate} onChange={(e) => setBabyForm((f) => ({ ...f, birthDate: e.target.value }))}
-                    required className={inputCls} />
-                </div>
-                <div>
-                  <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Genre</label>
-                  <select value={babyForm.gender} onChange={(e) => setBabyForm((f) => ({ ...f, gender: e.target.value }))} className={inputCls}>
-                    <option value="">Non précisé</option>
-                    <option value="boy">Garçon</option>
-                    <option value="girl">Fille</option>
-                  </select>
-                </div>
-                <div className="flex gap-2">
-                  <button type="button" onClick={() => setEditingBaby(false)} className="flex-1 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-400">Annuler</button>
-                  <button type="submit" disabled={savingBaby} className="flex-1 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium">
-                    {savingBaby ? "..." : "Enregistrer"}
-                  </button>
-                </div>
-              </form>
-            ) : (
-              <button onClick={startEditBaby} className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800 transition text-left">
-                <div className="w-10 h-10 bg-indigo-50 dark:bg-indigo-950 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <Baby className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-semibold text-slate-800 dark:text-slate-100">{selectedBaby.name}</p>
-                  <p className="text-xs text-slate-500 dark:text-slate-400">
-                    {new Date(selectedBaby.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
-                  </p>
-                </div>
-                <ChevronRight className="w-4 h-4 text-slate-400 dark:text-slate-500" />
-              </button>
-            )}
-          </Section>
-        )}
-
-        {/* Add baby */}
+        {/* Babies */}
         <Section title="Bébés">
           <div className="divide-y divide-slate-100 dark:divide-slate-700">
             {family?.babies.map((b) => (
-              <div key={b.id} className="flex items-center gap-3 px-4 py-3">
-                <div className="w-8 h-8 bg-indigo-50 dark:bg-indigo-950 rounded-full flex items-center justify-center">
-                  <Baby className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-slate-700 dark:text-slate-200">{b.name}</p>
-                  <p className="text-xs text-slate-400 dark:text-slate-500">
-                    {new Date(b.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
-                  </p>
-                </div>
+              <div key={b.id}>
+                <button
+                  onClick={() => { setSelectedBabyId(b.id); startEditBaby(b); }}
+                  className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800 transition text-left"
+                >
+                  <div className="w-8 h-8 bg-indigo-50 dark:bg-indigo-950 rounded-full flex items-center justify-center flex-shrink-0">
+                    <Baby className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-slate-700 dark:text-slate-200">{b.name}</p>
+                    <p className="text-xs text-slate-400 dark:text-slate-500">
+                      {new Date(b.birthDate).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-slate-400 dark:text-slate-500" />
+                </button>
+                {editingBaby && selectedBaby?.id === b.id && (
+                  <form onSubmit={saveBaby} className="px-4 pb-4 space-y-3 bg-slate-50 dark:bg-slate-800/60 border-t border-slate-100 dark:border-slate-700 pt-3">
+                    <div>
+                      <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Prénom</label>
+                      <input type="text" value={babyForm.name} onChange={(e) => setBabyForm((f) => ({ ...f, name: e.target.value }))}
+                        required className={inputCls} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Date de naissance</label>
+                      <input type="date" value={babyForm.birthDate} onChange={(e) => setBabyForm((f) => ({ ...f, birthDate: e.target.value }))}
+                        required className={inputCls} />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Genre</label>
+                      <select value={babyForm.gender} onChange={(e) => setBabyForm((f) => ({ ...f, gender: e.target.value }))} className={inputCls}>
+                        <option value="">Non précisé</option>
+                        <option value="boy">Garçon</option>
+                        <option value="girl">Fille</option>
+                      </select>
+                    </div>
+                    <div className="flex gap-2">
+                      <button type="button" onClick={() => setEditingBaby(false)} className="flex-1 py-2 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-700">Annuler</button>
+                      <button type="submit" disabled={savingBaby} className="flex-1 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium">
+                        {savingBaby ? "..." : "Enregistrer"}
+                      </button>
+                    </div>
+                  </form>
+                )}
               </div>
             ))}
             <div className="px-4 py-3">