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>
2026-06-06 21:56:05 -04:00
parent bd8ee9b647
commit fe9a95c60d
12 changed files with 1056 additions and 104 deletions
@@ -0,0 +1,102 @@
+"use client";
+
+import { BookText, FolderTree, Image as ImageIcon, LogOut, Users } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import { cn } from "@/lib/utils";
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const segs = pathname.split("/").filter(Boolean); // ["trees", "<id>", ...]
+  const treeId = segs[0] === "trees" && segs[1] ? segs[1] : null;
+  const [treeName, setTreeName] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!treeId) {
+      setTreeName(null);
+      return;
+    }
+    api
+      .GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } })
+      .then((r) => setTreeName(r.data?.name ?? null));
+  }, [treeId]);
+
+  async function logout() {
+    await api.POST("/api/v1/auth/logout");
+    router.push("/login");
+  }
+
+  const Item = ({
+    href,
+    label,
+    icon: Icon,
+    active,
+  }: {
+    href: string;
+    label: string;
+    icon: typeof Users;
+    active: boolean;
+  }) => (
+    <Link
+      href={href}
+      className={cn(
+        "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+        active
+          ? "bg-bronze/12 font-medium text-bronze"
+          : "text-[var(--muted)] hover:bg-bronze/[0.07] hover:text-[var(--foreground)]",
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      {label}
+    </Link>
+  );
+
+  return (
+    <nav className="flex h-full flex-col gap-1 p-4">
+      <Link href="/" className="mb-5 flex items-center px-2" aria-label="Provenance — home">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
+      </Link>
+
+      <Item href="/trees" label="Trees" icon={FolderTree} active={pathname === "/trees"} />
+
+      {treeId && (
+        <div className="mt-5 flex flex-col gap-1">
+          <div className="truncate px-3 pb-1 text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
+            {treeName ?? "Tree"}
+          </div>
+          <Item
+            href={`/trees/${treeId}`}
+            label="People"
+            icon={Users}
+            active={pathname === `/trees/${treeId}` || pathname.startsWith(`/trees/${treeId}/persons`)}
+          />
+          <Item
+            href={`/trees/${treeId}/sources`}
+            label="Sources"
+            icon={BookText}
+            active={pathname.startsWith(`/trees/${treeId}/sources`)}
+          />
+          <Item
+            href={`/trees/${treeId}/media`}
+            label="Media"
+            icon={ImageIcon}
+            active={pathname.startsWith(`/trees/${treeId}/media`)}
+          />
+        </div>
+      )}
+
+      <button
+        onClick={logout}
+        className="mt-auto flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--muted)] transition-colors hover:bg-bronze/[0.07] hover:text-bronze"
+      >
+        <LogOut className="h-4 w-4 shrink-0" />
+        Sign out
+      </button>
+    </nav>
+  );
+}