Public tree view: add generation depth controls (shared with member view)

The public tree chart was fixed at 3 ancestors / 2 descendants. Add the same Generations controls the member view has (slider + number stepper + "All" per direction), applied live around the focused person. Extracts the member page's inline DepthControl into a shared components/depth-control.tsx and uses it in both, so they stay in sync. The public chart gains anc/prog depth state + an apply effect (setAncestryDepth/ setProgenyDepth + updateTree) mirroring the member behavior. tsc clean; next build passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
2026-06-09 10:35:43 -04:00
parent 12ba0a0fb6
commit 7d6fbce87e
3 changed files with 114 additions and 64 deletions
@@ -0,0 +1,66 @@
+"use client";
+
+// Slider + number stepper + "All" toggle for one generation direction
+// (ancestors or descendants). Shared by the member and public tree views.
+export function DepthControl({
+  label,
+  icon,
+  value,
+  all,
+  onValue,
+  onAll,
+  disabled,
+}: {
+  label: string;
+  icon: string;
+  value: number;
+  all: boolean;
+  onValue: (v: number) => void;
+  onAll: (b: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div className={`flex items-center gap-2 ${disabled ? "opacity-40" : ""}`}>
+      <span className="flex w-24 items-center gap-1 text-xs text-[var(--muted)]">
+        <span aria-hidden>{icon}</span> {label}
+      </span>
+      <input
+        type="range"
+        min={0}
+        max={12}
+        step={1}
+        value={all ? 12 : value}
+        disabled={disabled || all}
+        onChange={(e) => onValue(Number(e.target.value))}
+        className="w-28 accent-bronze"
+        aria-label={`${label} generations`}
+      />
+      {all ? (
+        <span className="w-10 text-center text-sm font-medium text-bronze">All</span>
+      ) : (
+        <input
+          type="number"
+          min={0}
+          max={99}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => onValue(Math.max(0, Math.min(99, Number(e.target.value) || 0)))}
+          className="h-7 w-12 rounded-md border border-[var(--border)] bg-[var(--surface)] px-1 text-center text-sm"
+        />
+      )}
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => onAll(!all)}
+        title={`Show all ${label.toLowerCase()}`}
+        className={`rounded-md px-2 py-1 text-xs transition-colors ${
+          all
+            ? "bg-bronze text-paper"
+            : "border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)]"
+        }`}
+      >
+        All
+      </button>
+    </div>
+  );
+}