Edit UI for people and life events; existing-person picker in family view

Person detail: an Edit form for name + gender + living status + privacy, and inline edit of each life event (type + structured date). Family view: the add-relative buttons now search existing people (link the real person) or create new — preventing duplicate spouses/parents — and adding a child to someone with one spouse links both parents.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>

frontend/app/trees/[id]/page.tsx

@@ -122,23 +122,42 @@ export default function FamilyViewPage() {
     load();
   }
 
+  async function postRel(body: components["schemas"]["RelationshipCreate"]) {
+    await api.POST("/api/v1/trees/{tree_id}/relationships", {
+      params: { path: { tree_id: treeId } },
+      body,
+    });
+  }
+
+  // Create the relationship(s) connecting an (existing or new) person to anchor.
+  async function createLink(kind: AddKind, anchor: string, personId: string) {
+    if (kind === "parent") {
+      await postRel({ type: "parent_child", person_from_id: personId, person_to_id: anchor, qualifier: "biological" });
+    } else if (kind === "partner") {
+      await postRel({ type: "partnership", person_from_id: anchor, person_to_id: personId });
+    } else {
+      // child: link to anchor, and to anchor's spouse too (so both parents show)
+      await postRel({ type: "parent_child", person_from_id: anchor, person_to_id: personId, qualifier: "biological" });
+      const partners = partnersOf(anchor);
+      if (partners.length === 1) {
+        await postRel({ type: "parent_child", person_from_id: partners[0], person_to_id: personId, qualifier: "biological" });
+      }
+    }
+  }
+
+  async function linkExisting(personId: string) {
+    if (!adding) return;
+    await createLink(adding.kind, adding.anchor, personId);
+    setAdding(null);
+    setAddName("");
+    load();
+  }
+
   async function submitAdd(e: React.FormEvent) {
     e.preventDefault();
     if (!adding || !addName.trim()) return;
     const newId = await addPerson(addName);
-    if (newId) {
-      const { kind, anchor } = adding;
-      const body =
-        kind === "parent"
-          ? { type: "parent_child" as const, person_from_id: newId, person_to_id: anchor, qualifier: "biological" as const }
-          : kind === "child"
-            ? { type: "parent_child" as const, person_from_id: anchor, person_to_id: newId, qualifier: "biological" as const }
-            : { type: "partnership" as const, person_from_id: anchor, person_to_id: newId };
-      await api.POST("/api/v1/trees/{tree_id}/relationships", {
-        params: { path: { tree_id: treeId } },
-        body,
-      });
-    }
+    if (newId) await createLink(adding.kind, adding.anchor, newId);
     setAdding(null);
     setAddName("");
     load();
@@ -210,26 +229,45 @@ export default function FamilyViewPage() {
     label: string;
   }) =>
     adding?.key === formKey ? (
-      <form onSubmit={submitAdd} className="flex w-44 flex-col gap-1">
+      <form onSubmit={submitAdd} className="flex w-56 flex-col gap-1">
         <Input
           autoFocus
           className="h-9"
-          placeholder="Full name"
+          placeholder="Search existing or type a new name"
           value={addName}
           onChange={(e) => setAddName(e.target.value)}
         />
-        <div className="flex gap-1">
-          <Button type="submit" size="sm">
-            Add
-          </Button>
-          <button
-            type="button"
-            onClick={() => setAdding(null)}
-            className="text-xs text-[var(--muted)]"
-          >
-            cancel
-          </button>
-        </div>
+        {addName.trim() && (
+          <div className="overflow-hidden rounded-md border border-[var(--border)] bg-[var(--surface)] text-sm">
+            {people
+              .filter(
+                (p) =>
+                  p.id !== anchor &&
+                  (p.primary_name ?? "").toLowerCase().includes(addName.trim().toLowerCase()),
+              )
+              .slice(0, 6)
+              .map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  onClick={() => linkExisting(p.id)}
+                  className="flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left hover:bg-bronze/[0.07]"
+                >
+                  <span className="truncate">{p.primary_name ?? "Unnamed"}</span>
+                  <span className="shrink-0 text-xs text-[var(--muted)]">{years.get(p.id) ?? ""}</span>
+                </button>
+              ))}
+            <button
+              type="submit"
+              className="flex w-full items-center gap-1 border-t border-[var(--border)] px-2 py-1.5 text-left text-bronze hover:bg-bronze/[0.07]"
+            >
+              + Create new “{addName.trim()}”
+            </button>
+          </div>
+        )}
+        <button type="button" onClick={() => setAdding(null)} className="text-xs text-[var(--muted)]">
+          cancel
+        </button>
       </form>
     ) : (
       <button