fix: isolate note title input in memoized component to prevent focus leak to search field

apps/web/src/routes/_app/notes.tsx

@@ -49,6 +49,33 @@ const NoteEditor = memo(function NoteEditor({ content, onChange, placeholder = "
   );
 });
 
+// Separate component for title input to prevent focus stealing on parent re-render
+const NoteTitleInput = memo(function NoteTitleInput({ noteId, initialTitle }: { noteId: string; initialTitle: string }) {
+  const [localTitle, setLocalTitle] = useState(initialTitle);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    setLocalTitle(initialTitle);
+  }, [initialTitle, noteId]);
+
+  const handleBlur = () => {
+    if (localTitle !== initialTitle) {
+      api.patch<Note>(/notes/ + noteId, { title: localTitle }).then(() => {
+        queryClient.invalidateQueries({ queryKey: [notes] });
+      });
+    }
+  };
+
+  return (
+    <input
+      value={localTitle}
+      onChange={(e) => setLocalTitle(e.target.value)}
+      onBlur={handleBlur}
+      className=flex h-9 w-full rounded-md border-0 bg-transparent px-0 py-1 text-lg font-semibold text-base shadow-none transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50
+    />
+  );
+});
+
 function NotesPage() {
   const queryClient = useQueryClient();
   const [search, setSearch] = useState("");
@@ -109,7 +136,6 @@ function NotesPage() {
   selectedNoteRef.current = selectedNote;
 
   const handleContentChange = useCallback((html: string) => {
-    setEditorContent(html);
     if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
     saveTimerRef.current = setTimeout(() => {
       const note = selectedNoteRef.current;

fix_notes3.py

@@ -0,0 +1,64 @@
+import sys
+
+with open(sys.argv[1], 'r') as f:
+    content = f.read()
+
+# Add a memoized TitleInput component after NoteEditor
+old = '''function NotesPage() {'''
+new = '''// Memoized title input that doesn't re-render when parent re-renders
+const TitleInput = memo(function TitleInput({ note, onSave }: { note: Note | null; onSave: (id: string, title: string) => void }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.value = note?.title || '';
+    }
+  }, [note?.id]);
+
+  return (
+    <input
+      ref={inputRef}
+      key={note?.id || 'none'}
+      defaultValue={note?.title || ''}
+      onMouseDown={(e) => e.stopPropagation()}
+      onBlur={(e) => {
+        if (note && e.target.value !== note.title) {
+          onSave(note.id, e.target.value);
+        }
+      }}
+      className="flex h-9 w-full rounded-md border-0 bg-transparent px-0 py-1 text-lg font-semibold text-base shadow-none transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
+    />
+  );
+});
+
+function NotesPage() {'''
+
+content = content.replace(old, new, 1)
+
+# Replace the title input section
+old_title = '''              <input
+                key={selectedNote?.id || 'none'}
+                defaultValue={selectedNote?.title || ''}
+                onMouseDown={(e) => e.stopPropagation()}
+                onBlur={(e) => {
+                  if (selectedNote && e.target.value !== selectedNote.title) {
+                    updateMutation.mutate({ id: selectedNote.id, data: { title: e.target.value } });
+                    setSelectedNote({ ...selectedNote, title: e.target.value });
+                  }
+                }}
+                className="flex h-9 w-full rounded-md border-0 bg-transparent px-0 py-1 text-lg font-semibold text-base shadow-none transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
+              />'''
+
+new_title = '''              <TitleInput
+                note={selectedNote}
+                onSave={(id, title) => {
+                  updateMutation.mutate({ id, data: { title } });
+                  setSelectedNote({ ...selectedNote, title } as Note);
+                }}
+              />'''
+
+content = content.replace(old_title, new_title, 1)
+
+with open(sys.argv[1], 'w') as f:
+    f.write(content)
+print('Done')