From 37ac49767e58ee58b4f84a190ca6cdde6fd12f0b Mon Sep 17 00:00:00 2001
From: Justin Paul <justin@jpaul.me>
Date: Sun, 7 Jun 2026 11:30:14 -0400
Subject: [PATCH] Make creating a person obvious; inline "create new" when
 linking relatives
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Family view gets a prominent "+ Add person" button that creates a person and
  opens their page to fill in details (previously you could only add a person
  via the empty-state form or by linking from another person).
- The person page's relationship picker (PersonCombobox) now offers
  "+ Create '<typed name>'" when the person doesn't exist yet: it creates them,
  links them in the chosen role (parent/child/partner/sibling), and jumps to
  their new page to edit — no more create-then-go-back-and-link.

Frontend only — no migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/app/trees/[id]/page.tsx              | 23 ++++++++---
 .../trees/[id]/persons/[personId]/page.tsx    | 38 ++++++++++++++-----
 frontend/components/person-combobox.tsx       | 20 +++++++++-
 3 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/frontend/app/trees/[id]/page.tsx b/frontend/app/trees/[id]/page.tsx
index 41e87e3..d5ce191 100644
--- a/frontend/app/trees/[id]/page.tsx
+++ b/frontend/app/trees/[id]/page.tsx
@@ -126,6 +126,12 @@ export default function FamilyViewPage() {
     return data?.id ?? null;
   }
 
+  // Create a new (blank) person and open their page to fill in details.
+  async function newPersonAndGo() {
+    const id = await addPerson("");
+    if (id) router.push(`/trees/${treeId}/persons/${id}`);
+  }
+
   async function createFirst(e: React.FormEvent) {
     e.preventDefault();
     if (!firstName.trim()) return;
@@ -352,12 +358,17 @@ export default function FamilyViewPage() {
     <div className="space-y-8">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <h1 className="text-2xl font-semibold">Family view</h1>
-        <Link
-          href={`/trees/${treeId}/persons/${focus.id}`}
-          className="text-sm text-bronze hover:underline"
-        >
-          Open {focus.primary_name ?? "person"} →
-        </Link>
+        <div className="flex items-center gap-3">
+          <Button size="sm" onClick={newPersonAndGo}>
+            + Add person
+          </Button>
+          <Link
+            href={`/trees/${treeId}/persons/${focus.id}`}
+            className="text-sm text-bronze hover:underline"
+          >
+            Open {focus.primary_name ?? "person"} →
+          </Link>
+        </div>
       </div>
 
       {/* Pedigree: focus → parents → grandparents, with bracket connectors */}
diff --git a/frontend/app/trees/[id]/persons/[personId]/page.tsx b/frontend/app/trees/[id]/persons/[personId]/page.tsx
index 6dc665f..9389c6b 100644
--- a/frontend/app/trees/[id]/persons/[personId]/page.tsx
+++ b/frontend/app/trees/[id]/persons/[personId]/page.tsx
@@ -342,28 +342,47 @@ export default function PersonDetailPage() {
     }
   }
 
-  async function addRel(e: React.FormEvent) {
-    e.preventDefault();
-    if (!relOther) return;
+  async function linkRelative(otherId: string): Promise<boolean> {
     let body: RelCreate;
     if (relKind === "parent") {
-      body = { type: "parent_child", person_from_id: relOther, person_to_id: personId, qualifier: relQual };
+      body = { type: "parent_child", person_from_id: otherId, person_to_id: personId, qualifier: relQual };
     } else if (relKind === "child") {
-      body = { type: "parent_child", person_from_id: personId, person_to_id: relOther, qualifier: relQual };
+      body = { type: "parent_child", person_from_id: personId, person_to_id: otherId, qualifier: relQual };
     } else if (relKind === "partner") {
-      body = { type: "partnership", person_from_id: personId, person_to_id: relOther };
+      body = { type: "partnership", person_from_id: personId, person_to_id: otherId };
     } else {
-      body = { type: "sibling", person_from_id: personId, person_to_id: relOther };
+      body = { type: "sibling", person_from_id: personId, person_to_id: otherId };
     }
     const { error } = await api.POST("/api/v1/trees/{tree_id}/relationships", {
       params: { path: { tree_id: treeId } },
       body,
     });
-    if (!error) {
+    return !error;
+  }
+
+  async function addRel(e: React.FormEvent) {
+    e.preventDefault();
+    if (!relOther) return;
+    if (await linkRelative(relOther)) {
       setRelOther("");
       load();
     }
   }
+
+  // Create a brand-new person, link them in the chosen role, then jump to their
+  // page so the user can fill in details immediately.
+  async function createRelativeAndGo(name: string) {
+    const toks = name.trim().split(/\s+/).filter(Boolean);
+    const given = toks.length > 1 ? toks.slice(0, -1).join(" ") : toks[0] ?? name.trim();
+    const surname = toks.length > 1 ? toks[toks.length - 1] : null;
+    const { data } = await api.POST("/api/v1/trees/{tree_id}/persons", {
+      params: { path: { tree_id: treeId } },
+      body: { given, surname },
+    });
+    if (!data) return;
+    await linkRelative(data.id);
+    router.push(`/trees/${treeId}/persons/${data.id}`);
+  }
   async function removeRel(id: string) {
     await api.DELETE("/api/v1/trees/{tree_id}/relationships/{relationship_id}", {
       params: { path: { tree_id: treeId, relationship_id: id } },
@@ -1096,7 +1115,8 @@ export default function PersonDetailPage() {
                 people={others}
                 value={relOther}
                 onChange={setRelOther}
-                placeholder="Search for a person…"
+                onCreate={createRelativeAndGo}
+                placeholder="Search, or type a new name…"
               />
               {(relKind === "parent" || relKind === "child") && (
                 <select className={fieldCls} value={relQual} onChange={(e) => setRelQual(e.target.value as Qualifier)}>
diff --git a/frontend/components/person-combobox.tsx b/frontend/components/person-combobox.tsx
index 0e361a8..e704dae 100644
--- a/frontend/components/person-combobox.tsx
+++ b/frontend/components/person-combobox.tsx
@@ -16,12 +16,15 @@ export function PersonCombobox({
   people,
   value,
   onChange,
+  onCreate,
   placeholder = "Search for a person…",
   className,
 }: {
   people: Person[];
   value: string;
   onChange: (id: string) => void;
+  /** When set, the dropdown offers a "Create '<typed name>'" action. */
+  onCreate?: (name: string) => void;
   placeholder?: string;
   className?: string;
 }) {
@@ -77,7 +80,7 @@ export function PersonCombobox({
           if (value) onChange(""); // typing invalidates the prior pick
         }}
       />
-      {open && matches.length > 0 && (
+      {open && (matches.length > 0 || (onCreate && query.trim())) && (
         <ul className="absolute z-30 mt-1 max-h-64 w-72 overflow-auto rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
           {matches.map((p) => (
             <li key={p.id}>
@@ -96,6 +99,21 @@ export function PersonCombobox({
               </button>
             </li>
           ))}
+          {onCreate && query.trim() && (
+            <li className={matches.length > 0 ? "border-t border-[var(--border)]" : ""}>
+              <button
+                type="button"
+                onClick={() => {
+                  const name = query.trim();
+                  setOpen(false);
+                  onCreate(name);
+                }}
+                className="block w-full px-3 py-2 text-left text-sm text-bronze hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))]"
+              >
+                + Create “{query.trim()}”
+              </button>
+            </li>
+          )}
         </ul>
       )}
     </div>
-- 
2.52.0