Initial commit

app/image/[id]/layout.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { getNeighborImageIds } from "@/lib/db/queries";
+import { ImageNav } from "@/components/image/ImageNav";
+
+export default async function ImageLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const numId = Number(id);
+  const neighbors = Number.isFinite(numId)
+    ? getNeighborImageIds(numId)
+    : { prev: null, next: null };
+
+  return (
+    <div className="max-w-[1600px] mx-auto px-6 pt-6">
+      <div className="flex items-center justify-between mb-4">
+        <Link href="/" className="inline-flex items-center gap-1 text-sm text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]">
+          <ArrowLeft className="w-4 h-4" /> Back to library
+        </Link>
+        <ImageNav
+          prev={neighbors.prev}
+          next={neighbors.next}
+          randomEndpoint={`/image/random?exclude=${numId}`}
+        />
+      </div>
+      {children}
+    </div>
+  );
+}

app/image/[id]/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="pb-6">
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(380px,460px)] gap-6">
+        <div className="aspect-[3/4] glass rounded-2xl animate-pulse" />
+        <aside className="space-y-4">
+          <div className="glass rounded-2xl p-4 h-28 animate-pulse" />
+          <div className="glass rounded-2xl p-4 h-32 animate-pulse" />
+          <div className="grid grid-cols-3 gap-2">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="glass rounded-lg h-14 animate-pulse" />
+            ))}
+          </div>
+        </aside>
+      </div>
+      <div className="glass rounded-2xl mt-6 h-40 animate-pulse" />
+    </div>
+  );
+}

app/image/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { notFound } from "next/navigation";
+import { ImageDetailView } from "@/components/image/ImageDetailView";
+import { getImageDetail } from "@/lib/db/queries";
+
+export const dynamic = "force-dynamic";
+
+export default async function ImagePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const numId = Number(id);
+  if (!Number.isFinite(numId)) notFound();
+  if (!getImageDetail(numId)) notFound();
+  return <ImageDetailView imageId={numId} />;
+}