From f6bcf198eed67ffde52dee8b73ff8eb2c2737e26 Mon Sep 17 00:00:00 2001
From: Justin Paul <justin@jpaul.me>
Date: Sat, 6 Jun 2026 22:54:08 -0400
Subject: [PATCH] Make the people index a scalable scrollable directory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A flat wrap of every person didn't scale to imported trees. Replace it with a bounded (max-height, scrollable) searchable directory: clean name + birth–death-year rows, focus highlight, a result count, and a 200-row cap with a 'refine your search' notice so a thousand-person tree stays fast and usable.

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 | 53 ++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/frontend/app/trees/[id]/page.tsx b/frontend/app/trees/[id]/page.tsx
index e533e59..ba31b7f 100644
--- a/frontend/app/trees/[id]/page.tsx
+++ b/frontend/app/trees/[id]/page.tsx
@@ -268,6 +268,7 @@ export default function FamilyViewPage() {
   const matches = search
     ? sorted.filter((p) => (p.primary_name ?? "").toLowerCase().includes(search.toLowerCase()))
     : sorted;
+  const shown = matches.slice(0, 200); // cap DOM nodes; refine search to narrow
 
   return (
     <div className="space-y-8">
@@ -325,32 +326,44 @@ export default function FamilyViewPage() {
         </Card>
       </div>
 
-      {/* Searchable index of everyone in the tree */}
+      {/* Scrollable, searchable people directory (scales to large trees) */}
       <div className="space-y-3">
-        <div className="flex items-center justify-between gap-3">
-          <h2 className="font-serif text-base font-semibold">All people ({people.length})</h2>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="font-serif text-base font-semibold">People ({people.length})</h2>
           <Input
-            className="w-56"
-            placeholder="Search…"
+            className="w-64"
+            placeholder="Search by name…"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div className="flex flex-wrap gap-2">
-          {matches.map((p) => (
-            <button
-              key={p.id}
-              onClick={() => setFocusId(p.id)}
-              className={`rounded-full border px-3 py-1 text-sm transition-colors ${
-                p.id === focusId
-                  ? "border-bronze bg-bronze/[0.08] text-bronze"
-                  : "border-[var(--border)] hover:border-bronze/60"
-              }`}
-            >
-              {p.primary_name ?? "Unnamed"}
-            </button>
-          ))}
-        </div>
+        <Card className="overflow-hidden">
+          <div className="max-h-96 overflow-y-auto">
+            {shown.length === 0 ? (
+              <div className="px-4 py-6 text-sm text-[var(--muted)]">No matches.</div>
+            ) : (
+              shown.map((p, i) => (
+                <button
+                  key={p.id}
+                  onClick={() => setFocusId(p.id)}
+                  className={`flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm transition-colors ${
+                    i > 0 ? "border-t border-[var(--border)]" : ""
+                  } ${p.id === focusId ? "bg-bronze/[0.08]" : "hover:bg-bronze/[0.05]"}`}
+                >
+                  <span className="truncate font-medium">{p.primary_name ?? "Unnamed"}</span>
+                  <span className="shrink-0 text-xs text-[var(--muted)]">
+                    {years.get(p.id) ?? ""}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+          {matches.length > shown.length && (
+            <div className="border-t border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs text-[var(--muted)]">
+              Showing {shown.length} of {matches.length} — refine your search to narrow.
+            </div>
+          )}
+        </Card>
       </div>
     </div>
   );
-- 
2.52.0