Initial commit

app/id/[code]/layout.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { getImageIdByCode, getNeighborImageIds } from "@/lib/db/queries";
+import { ImageNav } from "@/components/image/ImageNav";
+
+export default async function IdLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ code: string }>;
+}) {
+  const { code } = await params;
+  const decoded = decodeURIComponent(code);
+  const id = getImageIdByCode(decoded);
+  const neighbors = id != null ? getNeighborImageIds(id) : { 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${id != null ? `?exclude=${id}` : ""}`}
+        />
+      </div>
+      {children}
+    </div>
+  );
+}

app/id/[code]/page.tsx

@@ -0,0 +1,13 @@
+import { notFound } from "next/navigation";
+import { getImageIdByCode } from "@/lib/db/queries";
+import { ImageDetailView } from "@/components/image/ImageDetailView";
+
+export const dynamic = "force-dynamic";
+
+export default async function IdPage({ params }: { params: Promise<{ code: string }> }) {
+  const { code } = await params;
+  const decoded = decodeURIComponent(code);
+  const id = getImageIdByCode(decoded);
+  if (id == null) notFound();
+  return <ImageDetailView imageId={id} />;
+}