Person page: server-side search; stop loading the whole tree

The person page fetched the entire tree on every open — all persons (to build a
name map + power the relative pickers) and all events (to find partnership
events). On a 2k-person tree that's a ~230KB person list + ~600KB event list per
view. Now it loads only what the page shows:

Frontend:
- The relationship & spouse pickers use the backend's fuzzy pg_trgm search
  (debounced, typo-tolerant) instead of substring-filtering a preloaded array —
  better search, and no need to preload every person. PersonCombobox gained an
  `onSearch` server mode (client `people` mode still works).
- The page drops the all-persons and all-events fetches; it resolves just this
  person's relatives' names via GET /persons?ids=..., and reads partnership
  events from the per-person events endpoint.

Backend:
- GET /trees/{id}/persons?ids=a,b,c — batch by id (privacy-filtered, names
  batched), for relative-name display.
- list_events_for_person (member path) now also returns the person's partnership
  events, so the page needn't scan every event in the tree.

Adversarial review (frontend logic + backend/privacy) found no issues. Suite 105
passing.

Signed-off-by: Justin Paul <justin@jpaul.me>

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

@@ -135,7 +135,6 @@ export default function PersonDetailPage() {
   const [evType, setEvType] = useState("birth");
   const [evTypeOther, setEvTypeOther] = useState("");
   const [evSpouse, setEvSpouse] = useState(""); // partner for a partnership event
-  const [allEvents, setAllEvents] = useState<Event[]>([]); // tree-wide, for partnership events
   const [dateQual, setDateQual] = useState("exact");
   const [dateDay, setDateDay] = useState("");
   const [dateMonth, setDateMonth] = useState("");
@@ -189,8 +188,9 @@ export default function PersonDetailPage() {
       return;
     }
     setPerson(p.data ?? null);
-    const [all, nm, mine, tr, ev, rl, src, cit, evAll, med] = await Promise.all([
-      api.GET("/api/v1/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
+    // Person-scoped fetches only — the page no longer pulls the whole tree.
+    // /persons/{id}/events now includes this person's partnership events too.
+    const [nm, mine, tr, ev, rl, src, cit, med] = await Promise.all([
       api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/names", {
         params: { path: { tree_id: treeId, person_id: personId } },
       }),
@@ -204,22 +204,49 @@ export default function PersonDetailPage() {
       }),
       api.GET("/api/v1/trees/{tree_id}/sources", { params: { path: { tree_id: treeId } } }),
       api.GET("/api/v1/trees/{tree_id}/citations", { params: { path: { tree_id: treeId } } }),
-      api.GET("/api/v1/trees/{tree_id}/events", { params: { path: { tree_id: treeId } } }),
       api.GET("/api/v1/trees/{tree_id}/media", { params: { path: { tree_id: treeId } } }),
     ]);
-    setPeople(all.data ?? []);
     setNames(nm.data ?? []);
     setMe(mine.data ?? null);
     setTree(tr.data ?? null);
     setEvents(ev.data ?? []);
-    setAllEvents(evAll.data ?? []);
     setMedia(med.data ?? []);
     setRels(rl.data ?? []);
     setSources(src.data ?? []);
     setCitations(cit.data ?? []);
+    // Resolve the names of just this person's relatives (for display), by id —
+    // not the whole tree. The relationship/spouse pickers search on demand.
+    const relList = rl.data ?? [];
+    const relatedIds = Array.from(
+      new Set(
+        relList
+          .flatMap((r) => [r.person_from_id, r.person_to_id])
+          .filter((id): id is string => !!id && id !== personId),
+      ),
+    );
+    if (relatedIds.length) {
+      const rel = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId }, query: { ids: relatedIds.join(",") } },
+      });
+      setPeople(rel.data ?? []);
+    } else {
+      setPeople([]);
+    }
     setReady(true);
   }, [router, treeId, personId]);
 
+  // Server-side fuzzy search for the relative/spouse pickers — avoids loading
+  // every person just to search.
+  const searchPeople = useCallback(
+    async (query: string) => {
+      const r = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId }, query: { q: query } },
+      });
+      return (r.data ?? []).filter((pp) => pp.id !== personId);
+    },
+    [treeId, personId],
+  );
+
   useEffect(() => {
     load();
   }, [load]);
@@ -233,7 +260,6 @@ export default function PersonDetailPage() {
     return (id: string) => m.get(id) ?? "source";
   }, [sources]);
 
-  const others = people.filter((p) => p.id !== personId);
   const parents = rels.filter((r) => r.type === "parent_child" && r.person_to_id === personId);
   const children = rels.filter((r) => r.type === "parent_child" && r.person_from_id === personId);
   const partners = rels.filter((r) => r.type === "partnership");
@@ -241,22 +267,18 @@ export default function PersonDetailPage() {
   const eventCites = (id: string) => citations.filter((c) => c.event_id === id);
   const personCites = citations.filter((c) => c.person_id === personId);
 
-  // Partnership events live on the relationship and show on both partners.
+  // Partnership events live on the relationship and show on both partners; the
+  // /persons/{id}/events endpoint now returns them alongside personal events.
   const myPartnerRels = rels.filter(
     (r) => r.type === "partnership" && (r.person_from_id === personId || r.person_to_id === personId),
   );
-  const myPartnerRelIds = new Set(myPartnerRels.map((r) => r.id));
-  const relEvents = allEvents.filter(
-    (e) => e.relationship_id && myPartnerRelIds.has(e.relationship_id),
-  );
   const spouseOfRelEvent = (relId: string | null | undefined) => {
     const r = myPartnerRels.find((x) => x.id === relId);
     if (!r) return null;
     return r.person_from_id === personId ? r.person_to_id : r.person_from_id;
   };
   const isPartnershipType = (t: string) => PARTNERSHIP_EVENTS.includes(t);
-  // Personal events + this person's partnership events, shown together.
-  const shownEvents = [...events, ...relEvents];
+  const shownEvents = events;
 
   async function addEvent(e: React.FormEvent) {
     e.preventDefault();
@@ -1090,7 +1112,7 @@ export default function PersonDetailPage() {
               <label className="flex flex-col gap-1">
                 <span className="text-xs text-[var(--muted)]">Spouse / partner</span>
                 <PersonCombobox
-                  people={others}
+                  onSearch={searchPeople}
                   value={evSpouse}
                   onChange={setEvSpouse}
                   placeholder="Search for a spouse…"
@@ -1158,36 +1180,32 @@ export default function PersonDetailPage() {
             </div>
           )}
 
-          {others.length === 0 ? (
-            <p className="text-sm text-[var(--muted)]">Add more people to the tree to link them.</p>
-          ) : (
-            <form onSubmit={addRel} className="flex flex-wrap items-center gap-2">
-              <span className="text-sm text-[var(--muted)]">Add</span>
-              <select className={fieldCls} value={relKind} onChange={(e) => setRelKind(e.target.value as typeof relKind)}>
-                <option value="parent">parent</option>
-                <option value="child">child</option>
-                <option value="partner">partner</option>
-                <option value="sibling">sibling</option>
+          <form onSubmit={addRel} className="flex flex-wrap items-center gap-2">
+            <span className="text-sm text-[var(--muted)]">Add</span>
+            <select className={fieldCls} value={relKind} onChange={(e) => setRelKind(e.target.value as typeof relKind)}>
+              <option value="parent">parent</option>
+              <option value="child">child</option>
+              <option value="partner">partner</option>
+              <option value="sibling">sibling</option>
+            </select>
+            <PersonCombobox
+              onSearch={searchPeople}
+              value={relOther}
+              onChange={setRelOther}
+              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)}>
+                {QUALIFIERS.map((q) => (
+                  <option key={q} value={q}>
+                    {q}
+                  </option>
+                ))}
               </select>
-              <PersonCombobox
-                people={others}
-                value={relOther}
-                onChange={setRelOther}
-                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)}>
-                  {QUALIFIERS.map((q) => (
-                    <option key={q} value={q}>
-                      {q}
-                    </option>
-                  ))}
-                </select>
-              )}
-              <Button type="submit">Link</Button>
-            </form>
-          )}
+            )}
+            <Button type="submit">Link</Button>
+          </form>
           {relErr && <p className="text-sm text-red-600">{relErr}</p>}
         </CardContent>
       </Card>