From 4825604a52cbebe6a7623bb33c22a8fba6754a9c Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Sat, 13 Jun 2026 16:16:51 +0200
Subject: [PATCH] fix(settings): move Section out of render to fix input focus
 loss

Section defined inside the component was recreated as a new type on
every keystroke, causing React to unmount/remount it and drop focus.

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

diff --git a/src/app/(app)/settings/page.tsx b/src/app/(app)/settings/page.tsx
index af02ec6..1844fd9 100644
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -2,11 +2,22 @@
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { signOut } from "next-auth/react";
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { useBaby } from "@/contexts/baby-context";
 import { getThresholds, saveThresholds, requestPermission } from "@/lib/notifications";
 import { Copy, Check, Download, LogOut, Bell, Baby, Users, ChevronRight, FileText, Plus, Mail, Send } from "lucide-react";
 
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+      <div className="px-4 py-3 border-b border-slate-100 dark:border-slate-700">
+        <h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">{title}</h2>
+      </div>
+      {children}
+    </div>
+  );
+}
+
 interface Family {
   id: string;
   name: string;
@@ -239,14 +250,6 @@ export default function SettingsPage() {
     setSavingPushover(false);
   }
 
-  const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
-    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
-      <div className="px-4 py-3 border-b border-slate-100 dark:border-slate-700">
-        <h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">{title}</h2>
-      </div>
-      {children}
-    </div>
-  );
 
   return (
     <div className="p-4 md:p-8 pb-28 md:pb-8">