Implement band/artist management with version history

Full CRUD for bands and artists: UUID + slug URLs, dynamic link
editor, band-artist associations with roles, per-edit revision
snapshots (message + IP). Add README and CLAUDE.md.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 61 insertions, 0 deletions

diff --git a/app/routes/band-history.tsx b/app/routes/band-history.tsx
new file mode 100644
index 0000000..11e2f2f
--- /dev/null
+++ b/app/routes/band-history.tsx
@@ -0,0 +1,61 @@
+import { data, Link, useLoaderData } from "react-router";
+import type { LoaderFunctionArgs } from "react-router";
+import { getBandById, getBandRevisions } from "~/lib/db.server";
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const band = getBandById(params.uuid!);
+  if (!band) throw data("Not found", { status: 404 });
+  const revisions = getBandRevisions(band.id);
+  return { band, revisions };
+}
+
+export default function BandHistory() {
+  const { band, revisions } = useLoaderData<typeof loader>();
+  return (
+    <main className="max-w-3xl mx-auto px-4 py-8">
+      <div className="flex items-center gap-3 mb-6">
+        <Link
+          to={`/bands/of/${band.id}`}
+          className="text-gray-400 hover:text-gray-200 transition-colors"
+        >
+          ←
+        </Link>
+        <h1 className="text-xl font-semibold">{band.name} — 編集履歴</h1>
+      </div>
+
+      {revisions.length === 0 ? (
+        <p className="text-gray-400">履歴がありません。</p>
+      ) : (
+        <ol className="space-y-4">
+          {revisions.map((rev, i) => {
+            let snap: { name?: string; area?: string; links?: unknown[]; artists?: unknown[] } = {};
+            try { snap = JSON.parse(rev.snapshot); } catch { /* ignore */ }
+            return (
+              <li key={rev.id} className="bg-gray-900 rounded-lg p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-gray-100 truncate">{rev.message}</p>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {rev.created_at} · {rev.ip_address}
+                    </p>
+                  </div>
+                  {i === 0 && (
+                    <span className="text-xs text-blue-400 shrink-0">最新</span>
+                  )}
+                </div>
+                <div className="mt-3 text-xs text-gray-400 space-y-0.5">
+                  <p>名前: {snap.name ?? "—"}</p>
+                  {snap.area && <p>拠点: {snap.area}</p>}
+                  <p>
+                    リンク: {snap.links?.length ?? 0}件 / メンバー:{" "}
+                    {snap.artists?.length ?? 0}人
+                  </p>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      )}
+    </main>
+  );
+}