Add an interactive Tree view (pan/zoom genealogy chart)

Researched how FamilySearch/Geni/MyHeritage lay out trees (switchable pedigree/portrait/fan, an interactive canvas with pan/zoom + click-to-recenter, gender colors, birth-death years) and built a real Tree page on the MIT d3 library family-chart instead of a flat list. Ancestors + descendants around a focus person, click any card to recenter, drag to pan, scroll to zoom — scales to large imported trees. Tree is now the first per-tree sidebar item and the default when opening a tree; People keeps the searchable directory + add/edit.

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

frontend/components/app-sidebar.tsx

@@ -7,6 +7,7 @@ import {
   FolderTree,
   Image as ImageIcon,
   LogOut,
+  Network,
   Users,
 } from "lucide-react";
 import Link from "next/link";
@@ -77,6 +78,12 @@ export function AppSidebar() {
           <div className="truncate px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
             {treeName ?? "Tree"}
           </div>
+          <Item
+            href={`/trees/${treeId}/tree`}
+            label="Tree"
+            icon={Network}
+            active={pathname.startsWith(`/trees/${treeId}/tree`)}
+          />
           <Item
             href={`/trees/${treeId}`}
             label="People"