Add source manager and inline citing with 'sourced' badges
New /trees/[id]/sources page (list + create sources). Person-detail page now loads tree sources + citations and shows a '✓ N sourced' badge with an inline cite picker (source + page) on each event and on the person. Tree view links to Sources. Regenerated the OpenAPI client. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
This commit is contained in:
@@ -56,9 +56,14 @@ export default function TreeDetailPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Link href="/trees" className="text-sm text-[var(--muted)] hover:underline">
|
||||
← All trees
|
||||
</Link>
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/trees" className="text-sm text-[var(--muted)] hover:underline">
|
||||
← All trees
|
||||
</Link>
|
||||
<Link href={`/trees/${treeId}/sources`} className="text-sm text-bronze hover:underline">
|
||||
Sources →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
@@ -15,10 +15,11 @@ type Event = components["schemas"]["EventRead"];
|
||||
type Relationship = components["schemas"]["RelationshipRead"];
|
||||
type Qualifier = components["schemas"]["ParentChildQualifier"];
|
||||
type RelCreate = components["schemas"]["RelationshipCreate"];
|
||||
type Source = components["schemas"]["SourceRead"];
|
||||
type Citation = components["schemas"]["CitationRead"];
|
||||
type CitationCreate = components["schemas"]["CitationCreate"];
|
||||
|
||||
const fieldCls =
|
||||
"h-10 rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm";
|
||||
|
||||
const fieldCls = "h-9 rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm";
|
||||
const QUALIFIERS: Qualifier[] = ["biological", "adoptive", "step", "foster", "donor", "guardian"];
|
||||
|
||||
export default function PersonDetailPage() {
|
||||
@@ -31,6 +32,8 @@ export default function PersonDetailPage() {
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [rels, setRels] = useState<Relationship[]>([]);
|
||||
const [sources, setSources] = useState<Source[]>([]);
|
||||
const [citations, setCitations] = useState<Citation[]>([]);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const [evType, setEvType] = useState("birth");
|
||||
@@ -40,6 +43,11 @@ export default function PersonDetailPage() {
|
||||
const [relOther, setRelOther] = useState("");
|
||||
const [relQual, setRelQual] = useState<Qualifier>("biological");
|
||||
|
||||
// Inline citation form: which fact is being cited ("p" = person, `e:<id>`).
|
||||
const [citeFor, setCiteFor] = useState<string | null>(null);
|
||||
const [citeSource, setCiteSource] = useState("");
|
||||
const [citePage, setCitePage] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const p = await api.GET("/api/v1/trees/{tree_id}/persons/{person_id}", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
@@ -49,7 +57,7 @@ export default function PersonDetailPage() {
|
||||
return;
|
||||
}
|
||||
setPerson(p.data ?? null);
|
||||
const [all, ev, rl] = await Promise.all([
|
||||
const [all, ev, rl, src, cit] = await Promise.all([
|
||||
api.GET("/api/v1/trees/{tree_id}/persons", { params: { path: { tree_id: treeId } } }),
|
||||
api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/events", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
@@ -57,10 +65,14 @@ export default function PersonDetailPage() {
|
||||
api.GET("/api/v1/trees/{tree_id}/persons/{person_id}/relationships", {
|
||||
params: { path: { tree_id: treeId, person_id: personId } },
|
||||
}),
|
||||
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 } } }),
|
||||
]);
|
||||
setPeople(all.data ?? []);
|
||||
setEvents(ev.data ?? []);
|
||||
setRels(rl.data ?? []);
|
||||
setSources(src.data ?? []);
|
||||
setCitations(cit.data ?? []);
|
||||
setReady(true);
|
||||
}, [router, treeId, personId]);
|
||||
|
||||
@@ -72,12 +84,18 @@ export default function PersonDetailPage() {
|
||||
const m = new Map(people.map((p) => [p.id, p.primary_name ?? "Unnamed"]));
|
||||
return (id: string) => m.get(id) ?? "Unknown";
|
||||
}, [people]);
|
||||
const sourceName = useMemo(() => {
|
||||
const m = new Map(sources.map((s) => [s.id, s.title]));
|
||||
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");
|
||||
const siblings = rels.filter((r) => r.type === "sibling");
|
||||
const eventCites = (id: string) => citations.filter((c) => c.event_id === id);
|
||||
const personCites = citations.filter((c) => c.person_id === personId);
|
||||
|
||||
async function addEvent(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
@@ -91,7 +109,6 @@ export default function PersonDetailPage() {
|
||||
load();
|
||||
}
|
||||
}
|
||||
|
||||
async function removeEvent(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/events/{event_id}", {
|
||||
params: { path: { tree_id: treeId, event_id: id } },
|
||||
@@ -121,7 +138,6 @@ export default function PersonDetailPage() {
|
||||
load();
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRel(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/relationships/{relationship_id}", {
|
||||
params: { path: { tree_id: treeId, relationship_id: id } },
|
||||
@@ -129,9 +145,100 @@ export default function PersonDetailPage() {
|
||||
load();
|
||||
}
|
||||
|
||||
async function addCitation(target: Partial<CitationCreate>) {
|
||||
if (!citeSource) return;
|
||||
const body: CitationCreate = { source_id: citeSource, page: citePage || null, ...target };
|
||||
const { error } = await api.POST("/api/v1/trees/{tree_id}/citations", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
body,
|
||||
});
|
||||
if (!error) {
|
||||
setCiteFor(null);
|
||||
setCiteSource("");
|
||||
setCitePage("");
|
||||
load();
|
||||
}
|
||||
}
|
||||
async function removeCitation(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/citations/{citation_id}", {
|
||||
params: { path: { tree_id: treeId, citation_id: id } },
|
||||
});
|
||||
load();
|
||||
}
|
||||
|
||||
if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
|
||||
if (!person) return <p className="text-[var(--muted)]">Not found.</p>;
|
||||
|
||||
// Inline "cite" control: a badge with count, a toggle, and the picker form.
|
||||
function citeControl(key: string, target: Partial<CitationCreate>, cites: Citation[]) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
{cites.length > 0 && (
|
||||
<span
|
||||
className="rounded bg-bronze/15 px-1.5 py-0.5 text-xs text-bronze"
|
||||
title={cites.map((c) => sourceName(c.source_id)).join(", ")}
|
||||
>
|
||||
✓ {cites.length} sourced
|
||||
</span>
|
||||
)}
|
||||
{citeFor === key ? (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
addCitation(target);
|
||||
}}
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={citeSource}
|
||||
onChange={(e) => setCiteSource(e.target.value)}
|
||||
>
|
||||
<option value="">— source —</option>
|
||||
{sources.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
className={`${fieldCls} w-24`}
|
||||
placeholder="page"
|
||||
value={citePage}
|
||||
onChange={(e) => setCitePage(e.target.value)}
|
||||
/>
|
||||
<Button type="submit" size="sm">
|
||||
cite
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCiteFor(null)}
|
||||
className="text-xs text-[var(--muted)]"
|
||||
>
|
||||
cancel
|
||||
</button>
|
||||
</form>
|
||||
) : sources.length === 0 ? (
|
||||
<Link href={`/trees/${treeId}/sources`} className="text-xs text-[var(--muted)] hover:underline">
|
||||
+ add a source first
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCiteFor(key);
|
||||
setCiteSource("");
|
||||
setCitePage("");
|
||||
}}
|
||||
className="text-xs text-bronze hover:underline"
|
||||
>
|
||||
+ cite
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const relGroup = (label: string, items: Relationship[], otherId: (r: Relationship) => string) =>
|
||||
items.length > 0 && (
|
||||
<div>
|
||||
@@ -162,7 +269,10 @@ export default function PersonDetailPage() {
|
||||
← Back to tree
|
||||
</Link>
|
||||
|
||||
<h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h1 className="text-3xl font-semibold">{person.primary_name ?? "Unnamed person"}</h1>
|
||||
{citeControl("p", { person_id: personId }, personCites)}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -172,39 +282,32 @@ export default function PersonDetailPage() {
|
||||
{events.length === 0 ? (
|
||||
<p className="text-sm text-[var(--muted)]">No events yet.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
<ul className="space-y-2">
|
||||
{events.map((ev) => (
|
||||
<li key={ev.id} className="flex items-center justify-between text-sm">
|
||||
<li key={ev.id} className="flex flex-wrap items-center justify-between gap-2 text-sm">
|
||||
<span>
|
||||
<span className="font-medium capitalize">{ev.event_type}</span>
|
||||
{ev.date_value ? (
|
||||
<span className="text-[var(--muted)]"> — {ev.date_value}</span>
|
||||
) : null}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeEvent(ev.id)}
|
||||
className="text-[var(--muted)] hover:text-bronze"
|
||||
aria-label="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<span className="flex items-center gap-3">
|
||||
{citeControl(`e:${ev.id}`, { event_id: ev.id }, eventCites(ev.id))}
|
||||
<button
|
||||
onClick={() => removeEvent(ev.id)}
|
||||
className="text-[var(--muted)] hover:text-bronze"
|
||||
aria-label="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<form onSubmit={addEvent} className="flex flex-wrap gap-2">
|
||||
<Input
|
||||
className="w-36"
|
||||
placeholder="Event type"
|
||||
value={evType}
|
||||
onChange={(e) => setEvType(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
className="w-40"
|
||||
placeholder="Date (e.g. ABT 1850)"
|
||||
value={evDate}
|
||||
onChange={(e) => setEvDate(e.target.value)}
|
||||
/>
|
||||
<Input className="w-36" placeholder="Event type" value={evType} onChange={(e) => setEvType(e.target.value)} />
|
||||
<Input className="w-40" placeholder="Date (e.g. ABT 1850)" value={evDate} onChange={(e) => setEvDate(e.target.value)} />
|
||||
<Button type="submit">Add event</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
@@ -235,21 +338,13 @@ export default function PersonDetailPage() {
|
||||
) : (
|
||||
<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)}
|
||||
>
|
||||
<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>
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={relOther}
|
||||
onChange={(e) => setRelOther(e.target.value)}
|
||||
>
|
||||
<select className={fieldCls} value={relOther} onChange={(e) => setRelOther(e.target.value)}>
|
||||
<option value="">— person —</option>
|
||||
{others.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
@@ -258,11 +353,7 @@ export default function PersonDetailPage() {
|
||||
))}
|
||||
</select>
|
||||
{(relKind === "parent" || relKind === "child") && (
|
||||
<select
|
||||
className={fieldCls}
|
||||
value={relQual}
|
||||
onChange={(e) => setRelQual(e.target.value as Qualifier)}
|
||||
>
|
||||
<select className={fieldCls} value={relQual} onChange={(e) => setRelQual(e.target.value as Qualifier)}>
|
||||
{QUALIFIERS.map((q) => (
|
||||
<option key={q} value={q}>
|
||||
{q}
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { api } from "@/lib/api/client";
|
||||
import type { components } from "@/lib/api/schema";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
type Source = components["schemas"]["SourceRead"];
|
||||
|
||||
export default function SourcesPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams<{ id: string }>();
|
||||
const treeId = params.id;
|
||||
|
||||
const [sources, setSources] = useState<Source[]>([]);
|
||||
const [ready, setReady] = useState(false);
|
||||
const [title, setTitle] = useState("");
|
||||
const [repository, setRepository] = useState("");
|
||||
const [url, setUrl] = useState("");
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const { data, response } = await api.GET("/api/v1/trees/{tree_id}/sources", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
});
|
||||
if (response.status === 401) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
setSources(data ?? []);
|
||||
setReady(true);
|
||||
}, [router, treeId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
async function add(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
const { error } = await api.POST("/api/v1/trees/{tree_id}/sources", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
body: { title, repository: repository || null, url: url || null },
|
||||
});
|
||||
if (!error) {
|
||||
setTitle("");
|
||||
setRepository("");
|
||||
setUrl("");
|
||||
load();
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
await api.DELETE("/api/v1/trees/{tree_id}/sources/{source_id}", {
|
||||
params: { path: { tree_id: treeId, source_id: id } },
|
||||
});
|
||||
load();
|
||||
}
|
||||
|
||||
if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Link href={`/trees/${treeId}`} className="text-sm text-[var(--muted)] hover:underline">
|
||||
← Back to tree
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">Sources</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">New source</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={add} className="flex flex-wrap gap-2">
|
||||
<Input
|
||||
className="w-56"
|
||||
placeholder="Title (e.g. 1880 US Census)"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
className="w-40"
|
||||
placeholder="Repository"
|
||||
value={repository}
|
||||
onChange={(e) => setRepository(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
className="w-48"
|
||||
placeholder="URL"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<Button type="submit">Add source</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{sources.length === 0 ? (
|
||||
<p className="text-[var(--muted)]">No sources yet — add one above, then cite it on facts.</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{sources.map((s) => (
|
||||
<li key={s.id}>
|
||||
<Card>
|
||||
<CardContent className="flex items-start justify-between gap-3 p-4">
|
||||
<div>
|
||||
<div className="font-medium">{s.title}</div>
|
||||
<div className="text-sm text-[var(--muted)]">
|
||||
{[s.repository, s.url].filter(Boolean).join(" · ")}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => remove(s.id)}
|
||||
className="text-[var(--muted)] hover:text-bronze"
|
||||
aria-label="Remove"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user