fix(settings): merge Bébé + Bébés into single section
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>
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user