Rebuild the UI as an app shell: left sidebar, media gallery, structured events
Replaces the centered single-column of full-width cards with a proper application layout: a persistent left sidebar (Trees, and per-tree People/Sources/Media, with the tree name and sign-out) and a constrained content column. Marketing landing and auth pages are split out (own header/footer; centered auth with the logo). Adds a Media gallery (upload + image thumbnails / file tiles, served via the backend content endpoint). Events are no longer free-text: a curated event-type list (+ custom) and a structured date (qualifier + day/month/year) that composes a proper genealogical date. 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:
@@ -22,6 +22,17 @@ type CitationCreate = components["schemas"]["CitationCreate"];
|
||||
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"];
|
||||
|
||||
// Curated genealogical event vocabulary (with an escape hatch).
|
||||
const EVENT_TYPES = [
|
||||
"birth", "death", "marriage", "divorce", "engagement", "baptism", "burial",
|
||||
"residence", "census", "immigration", "emigration", "occupation", "education",
|
||||
"military service", "naturalization", "other",
|
||||
];
|
||||
const MONTHS = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
const GED_MON = ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
|
||||
const DATE_QUALS: Record<string, string> = { exact: "", about: "ABT", before: "BEF", after: "AFT" };
|
||||
const pad = (n: number, len: number) => String(n).padStart(len, "0");
|
||||
|
||||
export default function PersonDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams<{ id: string; personId: string }>();
|
||||
@@ -37,7 +48,11 @@ export default function PersonDetailPage() {
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
const [evType, setEvType] = useState("birth");
|
||||
const [evDate, setEvDate] = useState("");
|
||||
const [evTypeOther, setEvTypeOther] = useState("");
|
||||
const [dateQual, setDateQual] = useState("exact");
|
||||
const [dateDay, setDateDay] = useState("");
|
||||
const [dateMonth, setDateMonth] = useState("");
|
||||
const [dateYear, setDateYear] = useState("");
|
||||
|
||||
const [relKind, setRelKind] = useState<"parent" | "child" | "partner" | "sibling">("parent");
|
||||
const [relOther, setRelOther] = useState("");
|
||||
@@ -97,15 +112,40 @@ export default function PersonDetailPage() {
|
||||
const eventCites = (id: string) => citations.filter((c) => c.event_id === id);
|
||||
const personCites = citations.filter((c) => c.person_id === personId);
|
||||
|
||||
function buildDate() {
|
||||
const year = dateYear.trim();
|
||||
if (!year || Number.isNaN(Number(year))) {
|
||||
return { date_value: null, date_start: null, date_precision: null };
|
||||
}
|
||||
const m = dateMonth ? Number(dateMonth) : null;
|
||||
const d = dateDay.trim() ? Number(dateDay) : null;
|
||||
const parts: string[] = [];
|
||||
if (d && m) parts.push(String(d));
|
||||
if (m) parts.push(GED_MON[m]);
|
||||
parts.push(year);
|
||||
const prefix = DATE_QUALS[dateQual];
|
||||
return {
|
||||
date_value: (prefix ? `${prefix} ` : "") + parts.join(" "),
|
||||
date_start: `${pad(Number(year), 4)}-${pad(m ?? 1, 2)}-${pad(d ?? 1, 2)}`,
|
||||
date_precision: dateQual,
|
||||
};
|
||||
}
|
||||
|
||||
async function addEvent(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!evType.trim()) return;
|
||||
const event_type = evType === "other" ? evTypeOther.trim() : evType;
|
||||
if (!event_type) return;
|
||||
const { date_value, date_start, date_precision } = buildDate();
|
||||
const { error } = await api.POST("/api/v1/trees/{tree_id}/events", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
body: { event_type: evType, person_id: personId, date_value: evDate || null },
|
||||
body: { event_type, person_id: personId, date_value, date_start, date_precision },
|
||||
});
|
||||
if (!error) {
|
||||
setEvDate("");
|
||||
setDateDay("");
|
||||
setDateMonth("");
|
||||
setDateYear("");
|
||||
setDateQual("exact");
|
||||
setEvTypeOther("");
|
||||
load();
|
||||
}
|
||||
}
|
||||
@@ -305,9 +345,68 @@ export default function PersonDetailPage() {
|
||||
))}
|
||||
</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)} />
|
||||
<form onSubmit={addEvent} className="flex flex-wrap items-end gap-2">
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">Event</span>
|
||||
<select
|
||||
className={`${fieldCls} capitalize`}
|
||||
value={evType}
|
||||
onChange={(e) => setEvType(e.target.value)}
|
||||
>
|
||||
{EVENT_TYPES.map((t) => (
|
||||
<option key={t} value={t} className="capitalize">
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{evType === "other" && (
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">Type</span>
|
||||
<Input
|
||||
className="h-9 w-36"
|
||||
placeholder="Custom"
|
||||
value={evTypeOther}
|
||||
onChange={(e) => setEvTypeOther(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">When</span>
|
||||
<select className={fieldCls} value={dateQual} onChange={(e) => setDateQual(e.target.value)}>
|
||||
<option value="exact">on</option>
|
||||
<option value="about">about</option>
|
||||
<option value="before">before</option>
|
||||
<option value="after">after</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">Day</span>
|
||||
<input
|
||||
className={`${fieldCls} w-14`}
|
||||
inputMode="numeric"
|
||||
placeholder="—"
|
||||
value={dateDay}
|
||||
onChange={(e) => setDateDay(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">Month</span>
|
||||
<select className={fieldCls} value={dateMonth} onChange={(e) => setDateMonth(e.target.value)}>
|
||||
<option value="">—</option>
|
||||
{MONTHS.map((m, i) => (i > 0 ? <option key={i} value={i}>{m}</option> : null))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
<span className="text-xs text-[var(--muted)]">Year</span>
|
||||
<input
|
||||
className={`${fieldCls} w-20`}
|
||||
inputMode="numeric"
|
||||
placeholder="YYYY"
|
||||
value={dateYear}
|
||||
onChange={(e) => setDateYear(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<Button type="submit">Add event</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user