Add image upload and edit functions

src/actions/artworks/deleteArtwork.ts

@@ -0,0 +1,67 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { s3 } from "@/lib/s3";
+import { DeleteObjectCommand } from "@aws-sdk/client-s3";
+
+export async function deleteArtwork(artworkId: string) {
+  const artwork = await prisma.artwork.findUnique({
+    where: { id: artworkId },
+    include: {
+      variants: true,
+      colors: true,
+      metadata: true,
+      tags: true,
+      categories: true,
+    },
+  });
+
+  if (!artwork) throw new Error("Artwork not found");
+
+  // Delete S3 objects
+  for (const variant of artwork.variants) {
+    try {
+      await s3.send(
+        new DeleteObjectCommand({
+          Bucket: `${process.env.BUCKET_NAME}`,
+          Key: variant.s3Key,
+        })
+      );
+    } catch (err) {
+      console.warn("Failed to delete S3 object: " + variant.s3Key + ". " + err);
+    }
+  }
+
+  // Step 1: Delete join entries
+  await prisma.artworkColor.deleteMany({ where: { artworkId } });
+
+  // Colors
+  for (const color of artwork.colors) {
+    const count = await prisma.artworkColor.count({
+      where: { colorId: color.colorId },
+    });
+    if (count === 0) {
+      await prisma.color.delete({ where: { id: color.colorId } });
+    }
+  }
+
+  // Delete variants
+  await prisma.fileVariant.deleteMany({ where: { artworkId } });
+
+  // Delete metadata
+  await prisma.artworkMetadata.deleteMany({ where: { artworkId } });
+
+  // Clean many-to-many tag/category joins
+  await prisma.artwork.update({
+    where: { id: artworkId },
+    data: {
+      tags: { set: [] },
+      categories: { set: [] },
+    },
+  });
+
+  // Finally delete the image
+  await prisma.artwork.delete({ where: { id: artworkId } });
+
+  return { success: true };
+}

src/actions/artworks/generateArtworkColors.ts

@@ -0,0 +1,149 @@
+"use server"
+
+import { prisma } from "@/lib/prisma";
+import { VibrantSwatch } from "@/types/VibrantSwatch";
+import { getImageBufferFromS3 } from "@/utils/getImageBufferFromS3";
+import { generateColorName, rgbToHex } from "@/utils/uploadHelper";
+import { converter, parse } from "culori";
+import { Vibrant } from "node-vibrant/node";
+
+const toOklab = converter("oklab");
+const A_MIN = -0.5, A_MAX = 0.5;
+const B_MIN = -0.5, B_MAX = 0.5;
+
+function clamp01(x: number) { 
+  return Math.max(0, Math.min(1, x)); 
+}
+
+function norm(x: number, lo: number, hi: number) { 
+  return clamp01((x - lo) / (hi - lo)); 
+}
+
+function hilbertIndex15(x01: number, y01: number): number {
+  let x = Math.floor(clamp01(x01) * 32767);
+  let y = Math.floor(clamp01(y01) * 32767);
+  let index = 0;
+  for (let s = 1 << 14; s > 0; s >>= 1) { // start at bit 14
+    const rx = (x & s) ? 1 : 0;
+    const ry = (y & s) ? 1 : 0;
+    index += s * s * ((3 * rx) ^ ry);
+    if (ry === 0) {
+      if (rx === 1) { x = 32767 - x; y = 32767 - y; }
+      const t = x; x = y; y = t;
+    }
+  }
+  return index >>> 0;
+}
+
+function centroidFromPaletteHexes(hexByType: Record<string, string | undefined>) {
+  // Tweak weights as you like. Biasing toward Vibrant keeps things “readable”.
+  const weights: Record<string, number> = {
+    Vibrant: 0.7,
+    Muted: 0.15,
+    DarkVibrant: 0.07,
+    DarkMuted: 0.05,
+    LightVibrant: 0.02,
+    LightMuted: 0.01,
+  };
+
+  // Ensure we have at least a vibrant color to anchor on
+  const fallbackHex =
+    hexByType["Vibrant"] ||
+    hexByType["Muted"] ||
+    hexByType["DarkVibrant"] ||
+    hexByType["DarkMuted"] ||
+    hexByType["LightVibrant"] ||
+    hexByType["LightMuted"];
+
+  let L = 0, A = 0, B = 0, W = 0;
+
+  const entries = Object.entries(weights);
+  for (const [type, w] of entries) {
+    const hex = hexByType[type] ?? fallbackHex;
+    if (!hex || w <= 0) continue;
+    const c = toOklab(parse(hex));
+    if (!c) continue;
+    L += c.l * w; A += c.a * w; B += c.b * w; W += w;
+  }
+
+  if (W === 0) {
+    // Should be rare; default to mid-gray
+    return { l: 0.5, a: 0, b: 0 };
+  }
+  return { l: L / W, a: A / W, b: B / W };
+}
+
+export async function generateArtworkColors(artworkId: string, fileKey: string, fileType?: string) {
+  const buffer = await getImageBufferFromS3(fileKey, fileType);
+  const palette = await Vibrant.from(buffer).getPalette();
+
+  const vibrantHexes = Object.entries(palette).map(([key, swatch]) => {
+    const castSwatch = swatch as VibrantSwatch | null;
+    const rgb = castSwatch?._rgb;
+    const hex = castSwatch?.hex || (rgb ? rgbToHex(rgb) : undefined);
+    return { type: key, hex };
+  });
+  
+  for (const { type, hex } of vibrantHexes) {
+    if (!hex) continue;
+
+    const [r, g, b] = hex.match(/\w\w/g)!.map((h) => parseInt(h, 16));
+    const name = generateColorName(hex);
+
+    const color = await prisma.color.upsert({
+      where: { name },
+      create: {
+        name,
+        type,
+        hex,
+        red: r,
+        green: g,
+        blue: b,
+      },
+      update: {
+        hex,
+        red: r,
+        green: g,
+        blue: b,
+      },
+    });
+
+    await prisma.artworkColor.upsert({
+      where: {
+        artworkId_type: {
+          artworkId,
+          type,
+        },
+      },
+      create: {
+        artworkId,
+        colorId: color.id,
+        type,
+      },
+      update: {
+        colorId: color.id,
+      },
+    });
+  }
+
+  // 2) Compute OKLab centroid → Hilbert sortKey (incremental-safe)
+  const hexByType: Record<string, string | undefined> = Object.fromEntries(
+    vibrantHexes.map(({ type, hex }) => [type, hex])
+  );
+
+  const { l, a, b } = centroidFromPaletteHexes(hexByType);
+  const ax = norm(a, A_MIN, A_MAX);
+  const bx = norm(b, B_MIN, B_MAX);
+  const sortKey = hilbertIndex15(ax, bx);
+
+  // 3) Store on the Image (plus optional OKLab fields)
+  await prisma.artwork.update({
+    where: { id: artworkId },
+    data: { sortKey, okLabL: l, okLabA: a, okLabB: b },
+  });
+
+  return await prisma.artworkColor.findMany({
+    where: { artworkId },
+    include: { color: true },
+  });
+}

src/actions/artworks/updateArtwork.ts

@@ -0,0 +1,81 @@
+"use server"
+
+import { prisma } from "@/lib/prisma";
+import { artworkSchema } from "@/schemas/artworks/imageSchema";
+import { z } from "zod/v4";
+
+export async function updateArtwork(
+  values: z.infer<typeof artworkSchema>, 
+  id: string
+) {
+  const validated = artworkSchema.safeParse(values);
+  // console.log(validated)
+  if (!validated.success) {
+    throw new Error("Invalid image data");
+  }
+
+  const {
+    name,
+    needsWork,
+    nsfw,
+    published,
+    setAsHeader,
+    altText,
+    description,
+    notes,
+    month,
+    year,
+    creationDate,
+    tagIds,
+    categoryIds
+  } = validated.data;
+
+  if(setAsHeader) {
+    await prisma.artwork.updateMany({
+      where: { setAsHeader: true },
+      data: { setAsHeader: false },
+    })
+  }
+  
+
+  const updatedArtwork = await prisma.artwork.update({
+    where: { id: id },
+    data: {
+      name,
+      needsWork,
+      nsfw,
+      published,
+      setAsHeader,
+      altText,
+      description,
+      notes,
+      month,
+      year,
+      creationDate
+    }
+  });
+
+  if (tagIds) {
+    await prisma.artwork.update({
+      where: { id: id },
+      data: {
+        tags: {
+          set: tagIds.map(id => ({ id }))
+        }
+      }
+    });
+  }
+
+  if (categoryIds) {
+    await prisma.artwork.update({
+      where: { id: id },
+      data: {
+        categories: {
+          set: categoryIds.map(id => ({ id }))
+        }
+      }
+    });
+  }
+
+  return updatedArtwork
+}

src/actions/uploads/createBulkImages.ts

@@ -0,0 +1,41 @@
+import { createImageFromFile } from "./createImageFromFile";
+
+type BulkResult =
+  | { ok: true; artworkId: string; name: string }
+  | { ok: false; name: string; error: string };
+
+export async function createImagesBulk(formData: FormData): Promise<BulkResult[]> {
+  const entries = formData.getAll("file");
+  const files = entries.filter((x): x is File => x instanceof File);
+
+  if (files.length === 0) {
+    throw new Error("No files received. Ensure you send FormData with key 'file'.");
+  }
+
+  const results: BulkResult[] = [];
+
+  for (const f of files) {
+    try {
+      if (!f.type.startsWith("image/")) {
+        results.push({ ok: false, name: f.name, error: "Unsupported file type" });
+        continue;
+      }
+
+      const artwork = await createImageFromFile(f);
+      if (!artwork) {
+        results.push({ ok: false, name: f.name, error: "Upload failed" });
+        continue;
+      }
+
+      results.push({ ok: true, artworkId: artwork.id, name: f.name });
+    } catch (err) {
+      results.push({
+        ok: false,
+        name: f.name,
+        error: err instanceof Error ? err.message : "Upload failed",
+      });
+    }
+  }
+
+  return results;
+}

src/actions/uploads/createImage.ts

@@ -0,0 +1,203 @@
+"use server"
+
+import { fileUploadSchema } from "@/schemas/artworks/imageSchema";
+import "dotenv/config";
+import { z } from "zod/v4";
+import { createImageFromFile } from "./createImageFromFile";
+
+export async function createImage(values: z.infer<typeof fileUploadSchema>) {
+  const imageFile = values.file[0];
+  return createImageFromFile(imageFile);
+}
+
+/*
+export async function createImage(values: z.infer<typeof fileUploadSchema>) {
+  const imageFile = values.file[0];
+
+  if (!(imageFile instanceof File)) {
+    console.log("No image or invalid type");
+    return null;
+  }
+
+  const fileName = imageFile.name;
+  const fileType = imageFile.type;
+  const fileSize = imageFile.size;
+  const lastModified = new Date(imageFile.lastModified);
+
+  const fileKey = uuidv4();
+
+  const arrayBuffer = await imageFile.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+
+  const realFileType = fileType.split("/")[1];
+  const originalKey = `original/${fileKey}.${realFileType}`;
+  const modifiedKey = `modified/${fileKey}.webp`;
+  const resizedKey = `resized/${fileKey}.webp`;
+  const thumbnailKey = `thumbnail/${fileKey}.webp`;
+
+  const sharpData = sharp(buffer);
+  const metadata = await sharpData.metadata();
+  
+  //--- Original file
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: originalKey,
+      Body: buffer,
+      ContentType: "image/" + metadata.format,
+    })
+  );
+  //--- Modified file
+  const modifiedBuffer = await sharp(buffer)
+    .toFormat('webp')
+    .toBuffer()
+  const modifiedMetadata = await sharp(modifiedBuffer).metadata();
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: modifiedKey,
+      Body: modifiedBuffer,
+      ContentType: "image/" + modifiedMetadata.format,
+    })
+  );
+  //--- Resized file
+  const { width, height } = modifiedMetadata;
+  const targetSize = 400;
+  let resizeOptions;
+  if (width && height) {
+    if (height < width) {
+      resizeOptions = { height: targetSize };
+    } else {
+      resizeOptions = { width: targetSize };
+    }
+  } else {
+    resizeOptions = { height: targetSize };
+  }
+  const resizedBuffer = await sharp(modifiedBuffer)
+    .resize({ ...resizeOptions, withoutEnlargement: true })
+    .toFormat('webp')
+    .toBuffer();
+  const resizedMetadata = await sharp(resizedBuffer).metadata();
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: resizedKey,
+      Body: resizedBuffer,
+      ContentType: "image/" + resizedMetadata.format,
+    })
+  );
+  //--- Thumbnail file
+  const thumbnailTargetSize = 160;
+  let thumbnailOptions;
+  if (width && height) {
+    if (height < width) {
+      thumbnailOptions = { height: thumbnailTargetSize };
+    } else {
+      thumbnailOptions = { width: thumbnailTargetSize };
+    }
+  } else {
+    thumbnailOptions = { height: thumbnailTargetSize };
+  }
+  const thumbnailBuffer = await sharp(modifiedBuffer)
+    .resize({ ...thumbnailOptions, withoutEnlargement: true })
+    .toFormat('webp')
+    .toBuffer();
+  const thumbnailMetadata = await sharp(thumbnailBuffer).metadata();
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: thumbnailKey,
+      Body: thumbnailBuffer,
+      ContentType: "image/" + thumbnailMetadata.format,
+    })
+  );
+
+  const fileRecord = await prisma.fileData.create({
+    data: {
+      name: fileName,
+      fileKey,
+      originalFile: fileName,
+      uploadDate: lastModified,
+      fileType: realFileType,
+      fileSize: fileSize,
+    },
+  });
+
+  const artworkSlug = fileName.toLowerCase().replace(/\s+/g, "-");
+  const artworkRecord = await prisma.artwork.create({
+    data: {
+      name: fileName,
+      slug: artworkSlug,
+      creationDate: lastModified,
+      fileId: fileRecord.id,
+    },
+  });
+
+  await prisma.artworkMetadata.create({
+    data: {
+      artworkId: artworkRecord.id,
+      format: metadata.format || "unknown",
+      width: metadata.width || 0,
+      height: metadata.height || 0,
+      space: metadata.space || "unknown",
+      channels: metadata.channels || 0,
+      depth: metadata.depth || "unknown",
+      density: metadata.density ?? undefined,
+      bitsPerSample: metadata.bitsPerSample ?? undefined,
+      isProgressive: metadata.isProgressive ?? undefined,
+      isPalette: metadata.isPalette ?? undefined,
+      hasProfile: metadata.hasProfile ?? undefined,
+      hasAlpha: metadata.hasAlpha ?? undefined,
+      autoOrientW: metadata.autoOrient?.width ?? undefined,
+      autoOrientH: metadata.autoOrient?.height ?? undefined,
+    },
+  });
+
+  await prisma.fileVariant.createMany({
+    data: [
+      {
+        s3Key: originalKey,
+        type: "original",
+        height: metadata.height,
+        width: metadata.width,
+        fileExtension: metadata.format,
+        mimeType: "image/" + metadata.format,
+        sizeBytes: metadata.size,
+        artworkId: artworkRecord.id
+      },
+      {
+        s3Key: modifiedKey,
+        type: "modified",
+        height: modifiedMetadata.height,
+        width: modifiedMetadata.width,
+        fileExtension: modifiedMetadata.format,
+        mimeType: "image/" + modifiedMetadata.format,
+        sizeBytes: modifiedMetadata.size,
+        artworkId: artworkRecord.id
+      },
+      {
+        s3Key: resizedKey,
+        type: "resized",
+        height: resizedMetadata.height,
+        width: resizedMetadata.width,
+        fileExtension: resizedMetadata.format,
+        mimeType: "image/" + resizedMetadata.format,
+        sizeBytes: resizedMetadata.size,
+        artworkId: artworkRecord.id
+      },
+      {
+        s3Key: thumbnailKey,
+        type: "thumbnail",
+        height: thumbnailMetadata.height,
+        width: thumbnailMetadata.width,
+        fileExtension: thumbnailMetadata.format,
+        mimeType: "image/" + thumbnailMetadata.format,
+        sizeBytes: thumbnailMetadata.size,
+        artworkId: artworkRecord.id
+      }
+    ],
+  });
+
+  return artworkRecord
+}
+  */

src/actions/uploads/createImageFromFile.ts

@@ -0,0 +1,198 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { s3 } from "@/lib/s3";
+import { PutObjectCommand } from "@aws-sdk/client-s3";
+import "dotenv/config";
+import sharp from "sharp";
+import { v4 as uuidv4 } from "uuid";
+
+export async function createImageFromFile(imageFile: File, opts?: { originalName?: string }) {
+  if (!(imageFile instanceof File)) {
+    console.log("No image or invalid type");
+    return null;
+  }
+
+  const fileName = opts?.originalName ?? imageFile.name;
+  const fileType = imageFile.type;
+  const fileSize = imageFile.size;
+  const lastModified = new Date(imageFile.lastModified);
+
+  const fileKey = uuidv4();
+
+  const arrayBuffer = await imageFile.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+
+  const realFileType = fileType.split("/")[1];
+  const originalKey = `original/${fileKey}.${realFileType}`;
+  const modifiedKey = `modified/${fileKey}.webp`;
+  const resizedKey = `resized/${fileKey}.webp`;
+  const thumbnailKey = `thumbnail/${fileKey}.webp`;
+
+  const sharpData = sharp(buffer);
+  const metadata = await sharpData.metadata();
+
+  //--- Original file
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: originalKey,
+      Body: buffer,
+      ContentType: "image/" + metadata.format,
+    })
+  );
+
+  //--- Modified file
+  const modifiedBuffer = await sharp(buffer).toFormat("webp").toBuffer();
+  const modifiedMetadata = await sharp(modifiedBuffer).metadata();
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: modifiedKey,
+      Body: modifiedBuffer,
+      ContentType: "image/" + modifiedMetadata.format,
+    })
+  );
+
+  //--- Resized file
+  const { width, height } = modifiedMetadata;
+  const targetSize = 400;
+
+  let resizeOptions: { width?: number; height?: number };
+  if (width && height) {
+    resizeOptions = height < width ? { height: targetSize } : { width: targetSize };
+  } else {
+    resizeOptions = { height: targetSize };
+  }
+
+  const resizedBuffer = await sharp(modifiedBuffer)
+    .resize({ ...resizeOptions, withoutEnlargement: true })
+    .toFormat("webp")
+    .toBuffer();
+
+  const resizedMetadata = await sharp(resizedBuffer).metadata();
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: resizedKey,
+      Body: resizedBuffer,
+      ContentType: "image/" + resizedMetadata.format,
+    })
+  );
+
+  //--- Thumbnail file
+  const thumbnailTargetSize = 160;
+
+  let thumbnailOptions: { width?: number; height?: number };
+  if (width && height) {
+    thumbnailOptions = height < width ? { height: thumbnailTargetSize } : { width: thumbnailTargetSize };
+  } else {
+    thumbnailOptions = { height: thumbnailTargetSize };
+  }
+
+  const thumbnailBuffer = await sharp(modifiedBuffer)
+    .resize({ ...thumbnailOptions, withoutEnlargement: true })
+    .toFormat("webp")
+    .toBuffer();
+
+  const thumbnailMetadata = await sharp(thumbnailBuffer).metadata();
+
+  await s3.send(
+    new PutObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: thumbnailKey,
+      Body: thumbnailBuffer,
+      ContentType: "image/" + thumbnailMetadata.format,
+    })
+  );
+
+  const fileRecord = await prisma.fileData.create({
+    data: {
+      name: fileName,
+      fileKey,
+      originalFile: fileName,
+      uploadDate: lastModified,
+      fileType: realFileType,
+      fileSize,
+    },
+  });
+
+  const artworkSlug = fileName.toLowerCase().replace(/\s+/g, "-");
+  const artworkRecord = await prisma.artwork.create({
+    data: {
+      name: fileName,
+      slug: artworkSlug,
+      creationDate: lastModified,
+      fileId: fileRecord.id,
+    },
+  });
+
+  await prisma.artworkMetadata.create({
+    data: {
+      artworkId: artworkRecord.id,
+      format: metadata.format || "unknown",
+      width: metadata.width || 0,
+      height: metadata.height || 0,
+      space: metadata.space || "unknown",
+      channels: metadata.channels || 0,
+      depth: metadata.depth || "unknown",
+      density: metadata.density ?? undefined,
+      bitsPerSample: metadata.bitsPerSample ?? undefined,
+      isProgressive: metadata.isProgressive ?? undefined,
+      isPalette: metadata.isPalette ?? undefined,
+      hasProfile: metadata.hasProfile ?? undefined,
+      hasAlpha: metadata.hasAlpha ?? undefined,
+      autoOrientW: metadata.autoOrient?.width ?? undefined,
+      autoOrientH: metadata.autoOrient?.height ?? undefined,
+    },
+  });
+
+  await prisma.fileVariant.createMany({
+    data: [
+      {
+        s3Key: originalKey,
+        type: "original",
+        height: metadata.height,
+        width: metadata.width,
+        fileExtension: metadata.format,
+        mimeType: "image/" + metadata.format,
+        sizeBytes: metadata.size,
+        artworkId: artworkRecord.id,
+      },
+      {
+        s3Key: modifiedKey,
+        type: "modified",
+        height: modifiedMetadata.height,
+        width: modifiedMetadata.width,
+        fileExtension: modifiedMetadata.format,
+        mimeType: "image/" + modifiedMetadata.format,
+        sizeBytes: modifiedMetadata.size,
+        artworkId: artworkRecord.id,
+      },
+      {
+        s3Key: resizedKey,
+        type: "resized",
+        height: resizedMetadata.height,
+        width: resizedMetadata.width,
+        fileExtension: resizedMetadata.format,
+        mimeType: "image/" + resizedMetadata.format,
+        sizeBytes: resizedMetadata.size,
+        artworkId: artworkRecord.id,
+      },
+      {
+        s3Key: thumbnailKey,
+        type: "thumbnail",
+        height: thumbnailMetadata.height,
+        width: thumbnailMetadata.width,
+        fileExtension: thumbnailMetadata.format,
+        mimeType: "image/" + thumbnailMetadata.format,
+        sizeBytes: thumbnailMetadata.size,
+        artworkId: artworkRecord.id,
+      },
+    ],
+  });
+
+  return artworkRecord;
+}

src/app/api/artworks/page/route.ts

@@ -0,0 +1,21 @@
+// app/api/artworks/page/route.ts
+import { getArtworksPage } from "@/lib/queryArtworks";
+import { NextResponse } from "next/server";
+// import { getArtworksPage } from "@/lib/artworks/query";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+
+  const published = (searchParams.get("published") ?? "all") as
+    | "all"
+    | "published"
+    | "unpublished"
+    | "needsWork";
+
+  const cursor = searchParams.get("cursor") ?? undefined;
+  const take = Number(searchParams.get("take") ?? "48");
+
+  const data = await getArtworksPage({ published, cursor, take });
+
+  return NextResponse.json(data);
+}

src/app/api/image/[...key]/route.ts

@@ -0,0 +1,34 @@
+import { s3 } from "@/lib/s3";
+import { GetObjectCommand } from "@aws-sdk/client-s3";
+import "dotenv/config";
+
+export async function GET(req: Request, { params }: { params: { key: string[] } }) {
+  const { key } = await params;
+  const s3Key = key.join("/"); 
+
+  try {
+    const command = new GetObjectCommand({
+      Bucket: `${process.env.BUCKET_NAME}`,
+      Key: s3Key,
+    });
+
+    const response = await s3.send(command);
+
+    if (!response.Body) {
+      return new Response("No body", { status: 500 });
+    }
+
+    const contentType = response.ContentType ?? "application/octet-stream";
+
+    return new Response(response.Body as ReadableStream, {
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=3600",
+        "Content-Disposition": "inline", // use 'attachment' to force download
+      },
+    });
+  } catch (err) {
+    console.log(err)
+    return new Response("Image not found", { status: 404 });
+  }
+}

src/app/artworks/[id]/page.tsx

@@ -0,0 +1,53 @@
+import ArtworkColors from "@/components/artworks/single/ArtworkColors";
+import ArtworkVariants from "@/components/artworks/single/ArtworkVariants";
+import DeleteArtworkButton from "@/components/artworks/single/DeleteArtworkButton";
+import EditArtworkForm from "@/components/artworks/single/EditArtworkForm";
+import { prisma } from "@/lib/prisma";
+
+export default async function ArtworkSinglePage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+
+  const item = await prisma.artwork.findUnique({
+    where: { id },
+    include: {
+      // album: true,
+      // type: true,
+      file: true,
+      gallery: true,
+      metadata: true,
+      albums: true,
+      categories: true,
+      colors: { include: { color: true } },
+      // sortContexts: true,
+      tags: true,
+      variants: true
+    }
+  })
+
+  const categories = await prisma.artCategory.findMany({ orderBy: { sortIndex: "asc" } });
+  const tags = await prisma.artTag.findMany({ orderBy: { sortIndex: "asc" } });
+
+  if (!item) return <div>Artwork with this id not found</div>
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit artwork</h1>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div>
+          {item ? <EditArtworkForm artwork={item} tags={tags} categories={categories} /> : 'Artwork not found...'}
+          <div className="mt-6">
+            {item && <DeleteArtworkButton artworkId={item.id} />}
+          </div>
+          <div>
+            {item && <ArtworkVariants variants={item.variants} />}
+          </div>
+        </div>
+        <div className="space-y-6">
+          <div>
+            {item && <ArtworkColors colors={item.colors} artworkId={item.id} fileKey={item.file.fileKey} fileType={item.file.fileType || ""} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/artworks/page.tsx

@@ -0,0 +1,88 @@
+import ArtworkGallery from "@/components/artworks/ArtworkGallery";
+import FilterBar from "@/components/artworks/FilterBar";
+import { getArtworksPage } from "@/lib/queryArtworks";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function ArtworksPage({
+  searchParams
+}: {
+  searchParams?: {
+    // type?: string;
+    published?: string;
+    // groupBy?: string;
+    // year?: string;
+    // album?: string;
+    cursor?: string;
+  }
+}) {
+  const {
+    // type = "all",
+    published = "all",
+    // groupBy = "year",
+    // year,
+    // album,
+    cursor = undefined
+  } = await searchParams ?? {};
+  // const groupMode = groupBy === "album" ? "album" : "year";
+  // const groupId = groupMode === "album" ? album ?? "all" : year ?? "all";
+
+  // Filter by type
+  // if (type !== "all") {
+  //   where.typeId = type === "none" ? null : type;
+  // }
+
+  // Filter by published status
+  // if (published === "published") {
+  //   where.published = true;
+  // } else if (published === "unpublished") {
+  //   where.published = false;
+  // } else if (published === "needsWork") {
+  //   where.needsWork = true;
+  // }
+
+  // Filter by group (year or album)
+  // if (groupMode === "year" && groupId !== "all") {
+  //   where.year = parseInt(groupId);
+  // } else if (groupMode === "album" && groupId !== "all") {
+  //   where.albumId = groupId;
+  // }
+
+  const { items, nextCursor } = await getArtworksPage(
+    {
+      published,
+      cursor,
+      take: 48
+    }
+  )
+
+  return (
+    <div>
+      <div className="flex justify-between pb-4 items-end">
+        <h1 className="text-2xl font-bold mb-4">Artworks</h1>
+        <Link href="/uploads/single" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Upload new artwork
+        </Link>
+        <Link href="/uploads/bulk" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Upload many artwork
+        </Link>
+      </div>
+      <FilterBar
+        // types={types}
+        // albums={albums}
+        // years={years}
+        // currentType={type}
+        currentPublished={published}
+      // groupBy={groupMode}
+      // groupId={groupId}
+      />
+      <div className="mt-6">
+        {items.length > 0 ? (
+          <ArtworkGallery initialArtworks={items} initialCursor={nextCursor} />
+        ) : (
+          <p className="text-muted-foreground italic">No artworks found.</p>
+        )}
+      </div>
+    </div >
+  );
+}

src/app/globals.css

@@ -1,26 +1,681 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.606 0.25 292.717);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.606 0.25 292.717);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.606 0.25 292.717);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.606 0.25 292.717);
+  --brand: oklch(0.623 0.214 259.815);
+  --highlight: oklch(0.852 0.199 91.936);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.541 0.281 293.009);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.541 0.281 293.009);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.541 0.281 293.009);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.541 0.281 293.009);
+  --brand: oklch(0.707 0.165 254.624);
+  --highlight: oklch(0.852 0.199 91.936);
+}
+
+.light-zinc {
+--radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+.dark-zinc {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+.light-red {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.637 0.237 25.331);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.637 0.237 25.331);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.637 0.237 25.331);
+}
+
+.dark-red {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.637 0.237 25.331);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.637 0.237 25.331);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.637 0.237 25.331);
+}
+
+.light-rose {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.645 0.246 16.439);
+  --primary-foreground: oklch(0.969 0.015 12.422);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.645 0.246 16.439);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.645 0.246 16.439);
+  --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.645 0.246 16.439);
+}
+
+.dark-rose {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.645 0.246 16.439);
+  --primary-foreground: oklch(0.969 0.015 12.422);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.645 0.246 16.439);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.645 0.246 16.439);
+  --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.645 0.246 16.439);
+}
+
+.light-orange {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.213 47.604);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.213 47.604);
+}
+
+.dark-orange {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.646 0.222 41.116);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.646 0.222 41.116);
+}
+
+.light-green {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.723 0.219 149.579);
+  --primary-foreground: oklch(0.982 0.018 155.826);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.723 0.219 149.579);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.723 0.219 149.579);
+  --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.723 0.219 149.579);
+}
+
+.dark-green {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.696 0.17 162.48);
+  --primary-foreground: oklch(0.393 0.095 152.535);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.527 0.154 150.069);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.696 0.17 162.48);
+  --sidebar-primary-foreground: oklch(0.393 0.095 152.535);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.527 0.154 150.069);
+}
+
+.light-blue {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
+}
+
+.dark-blue {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.379 0.146 265.522);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
+}
+
+.light-yellow {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.795 0.184 86.047);
+  --primary-foreground: oklch(0.421 0.095 57.708);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.795 0.184 86.047);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.795 0.184 86.047);
+  --sidebar-primary-foreground: oklch(0.421 0.095 57.708);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.795 0.184 86.047);
+}
+
+.dark-yellow {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.795 0.184 86.047);
+  --primary-foreground: oklch(0.421 0.095 57.708);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.554 0.135 66.442);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.795 0.184 86.047);
+  --sidebar-primary-foreground: oklch(0.421 0.095 57.708);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.554 0.135 66.442);
+}
+
+.light-violet {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.606 0.25 292.717);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.606 0.25 292.717);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.606 0.25 292.717);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.606 0.25 292.717);
+}
+
+.dark-violet {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.541 0.281 293.009);
+  --primary-foreground: oklch(0.969 0.016 293.756);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.541 0.281 293.009);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.541 0.281 293.009);
+  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.541 0.281 293.009);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/layout.tsx

@@ -1,3 +1,7 @@
+import Footer from "@/components/global/Footer";
+import Header from "@/components/global/Header";
+import { ThemeProvider } from "@/components/global/ThemeProvider";
+import { Toaster } from "@/components/ui/sonner";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
@@ -13,8 +17,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Gaertan Art Admin",
+  description: "Admin page for the gaertan.art website",
 };
 
 export default function RootLayout({
@@ -23,11 +27,47 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark-violet"
+          themes={[
+            'light-zinc',
+            'light-red',
+            'light-rose',
+            'light-orange',
+            'light-green',
+            'light-blue',
+            'light-yellow',
+            'light-violet',
+            'dark-zinc',
+            'dark-red',
+            'dark-rose',
+            'dark-orange',
+            'dark-green',
+            'dark-blue',
+            'dark-yellow',
+            'dark-violet',
+          ]}
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex flex-col min-h-screen min-w-screen">
+            <header className="sticky top-0 z-50 h-14 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-4 py-2">
+              <Header />
+            </header>
+            <main className="container mx-auto px-4 py-8">
+              {children}
+            </main>
+            <footer className="mt-auto px-4 py-2 h-14 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+              <Footer />
+            </footer>
+          </div>
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,65 +1,7 @@
-import Image from "next/image";
-
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+    <div>
+      ADMIN HOME
     </div>
   );
-}
+}

src/app/uploads/bulk/page.tsx

@@ -0,0 +1,7 @@
+import UploadBulkImageForm from "@/components/uploads/UploadBulkImageForm";
+
+export default function UploadsBulkPage() {
+  return (
+    <div><UploadBulkImageForm /></div>
+  );
+}

src/app/uploads/single/page.tsx

@@ -0,0 +1,7 @@
+import UploadImageForm from "@/components/uploads/UploadImageForm";
+
+export default function UploadsSinglePage() {
+  return (
+    <div><UploadImageForm /></div>
+  );
+}

src/components/artworks/ArtworkGallery.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+// import { PortfolioImage } from "@/generated/prisma";
+import { cn } from "@/lib/utils";
+import { ArtworkWithRelations } from "@/types/Artwork";
+import Image from "next/image";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { Button } from "../ui/button";
+
+export default function ArtworkGallery({
+  initialArtworks,
+  initialCursor,
+}: {
+  initialArtworks: ArtworkWithRelations[];
+  initialCursor: string | null;
+}) {
+  const searchParams = useSearchParams();
+  const published = searchParams.get("published") ?? "all";
+
+  const [artworks, setArtworks] = useState(initialArtworks);
+  const [cursor, setCursor] = useState<string | null>(initialCursor);
+  const [loading, setLoading] = useState(false);
+
+  const loadMore = async () => {
+    if (!cursor || loading) return;
+    setLoading(true);
+
+    try {
+      const qs = new URLSearchParams();
+      qs.set("published", published);
+      qs.set("cursor", cursor);
+      qs.set("take", "48");
+
+      const res = await fetch(`/api/artworks/page?${qs.toString()}`, {
+        method: "GET",
+        cache: "no-store",
+      });
+
+      if (!res.ok) throw new Error("Failed to load more artworks");
+
+      const data: { items: ArtworkWithRelations[]; nextCursor: string | null } =
+        await res.json();
+
+      setArtworks((prev) => [...prev, ...data.items]);
+      setCursor(data.nextCursor);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <div
+        className="flex flex-wrap gap-4"
+      >
+        {artworks.map((artwork) => (
+          <div key={artwork.id} style={{ width: 200, height: 200 }}>
+            <Link href={`/artworks/${artwork.id}`}>
+              <div
+                className={cn(
+                  "overflow-hidden transition-all duration-100",
+                  "w-full h-full",
+                  "hover:border-2 border-transparent"
+                )}
+                style={{
+                  '--tw-border-opacity': 1,
+                } as React.CSSProperties}
+              >
+                <div
+                  className={cn(
+                    "relative w-full h-full"
+                  )}
+                >
+                  <Image
+                    src={`/api/image/thumbnail/${artwork.file.fileKey}.webp`}
+                    alt={artwork.altText ?? artwork.name ?? "Image"}
+                    fill
+                    className={cn("object-cover"
+                    )}
+                    loading="lazy"
+                  />
+                </div>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+      {cursor ? (
+        <div className="flex justify-center">
+          <Button onClick={loadMore} disabled={loading}>
+            {loading ? "Loading..." : "Load more"}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/artworks/FilterBar.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+// import { PortfolioAlbum, PortfolioType } from "@/generated/prisma";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+// import BackfillButton from "./BackfillButton";
+
+type FilterBarProps = {
+  // types: PortfolioType[];
+  // albums: PortfolioAlbum[];
+  // years: number[];
+  // currentType: string;
+  currentPublished: string;
+  // groupBy: "year" | "album";
+  // groupId: string;
+};
+
+export default function FilterBar({
+  // types,
+  // albums,
+  // years,
+  // currentType,
+  currentPublished,
+  // groupBy,
+  // groupId,
+}: FilterBarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams);
+
+  const setFilter = (key: string, value: string) => {
+    if (value !== "all") {
+      params.set(key, value);
+    } else {
+      params.delete(key);
+    }
+
+    // Reset groupId when switching groupBy
+    // if (key === "groupBy") {
+    //   params.delete("year");
+    //   params.delete("album");
+    // }
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  const sortHref = `${pathname}/sort?${params.toString()}`;
+
+  const sortByColor = () => {
+    params.set("sortBy", "color");
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <div>
+      <div className="flex gap-6 pb-6">
+        {/* GroupBy Toggle */}
+        {/* <div className="flex gap-2 items-center flex-wrap">
+          <span className="text-sm font-medium text-muted-foreground">Group by:</span>
+          <FilterButton
+            active={groupBy === "year"}
+            label="Year"
+            onClick={() => setFilter("groupBy", "year")}
+          />
+          <FilterButton
+            active={groupBy === "album"}
+            label="Album"
+            onClick={() => setFilter("groupBy", "album")}
+          />
+        </div> */}
+        {/* Type Filter */}
+        {/* <div className="flex gap-2 items-center flex-wrap">
+          <span className="text-sm font-medium text-muted-foreground">Type:</span>
+          <FilterButton
+            active={currentType === "all"}
+            label="All"
+            onClick={() => setFilter("type", "all")}
+          />
+          {types.map((type) => (
+            <FilterButton
+              key={type.id}
+              active={currentType === type.id}
+              label={type.name}
+              onClick={() => setFilter("type", type.id)}
+            />
+          ))}
+          <FilterButton
+            active={currentType === "none"}
+            label="No Type"
+            onClick={() => setFilter("type", "none")}
+          />
+        </div> */}
+
+        {/* Published Filter */}
+        <div className="flex gap-2 items-center flex-wrap">
+          <span className="text-sm font-medium text-muted-foreground">Status:</span>
+          <FilterButton
+            active={currentPublished === "all"}
+            label="All"
+            onClick={() => setFilter("published", "all")}
+          />
+          <FilterButton
+            active={currentPublished === "published"}
+            label="Published"
+            onClick={() => setFilter("published", "published")}
+          />
+          <FilterButton
+            active={currentPublished === "unpublished"}
+            label="Unpublished"
+            onClick={() => setFilter("published", "unpublished")}
+          />
+          <FilterButton
+            active={currentPublished === "needsWork"}
+            label="Needs work"
+            onClick={() => setFilter("published", "needsWork")}
+          />
+        </div>
+      </div>
+      <div className="flex gap-6 border-b pb-6">
+        {/* Subnavigation for Year or Album */}
+        {/* <div className="flex gap-2 items-center flex-wrap">
+          <span className="text-sm font-medium text-muted-foreground">
+            {groupBy === "year" ? "Year:" : "Album:"}
+          </span>
+          <FilterButton
+            active={groupId === "all"}
+            label="All"
+            onClick={() => setFilter(groupBy, "all")}
+          />
+          {groupBy === "year" &&
+            years.map((year) => (
+              <FilterButton
+                key={year}
+                active={groupId === String(year)}
+                label={String(year)}
+                onClick={() => setFilter("year", String(year))}
+              />
+            ))}
+          {groupBy === "album" &&
+            albums.map((album) => (
+              <FilterButton
+                key={album.id}
+                active={groupId === album.id}
+                label={album.name}
+                onClick={() => setFilter("album", album.id)}
+              />
+            ))}
+        </div> */}
+      </div>
+    </div>
+
+  );
+}
+
+function FilterButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-3 py-1 rounded text-sm border transition ${active
+        ? "bg-primary text-white border-primary"
+        : "bg-muted text-muted-foreground hover:bg-muted/70 border-muted"
+        }`}
+    >
+      {label}
+    </button>
+  );
+}

src/components/artworks/single/ArtworkColors.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { generateArtworkColors } from "@/actions/artworks/generateArtworkColors";
+// import { generateImageColors } from "@/actions/portfolio/images/generateImageColors";
+import { Button } from "@/components/ui/button";
+import { ArtworkColor, Color } from "@/generated/prisma/client";
+// import { Color, ImageColor } from "@/generated/prisma";
+import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+type ColorWithItems = ArtworkColor & {
+  color: Color
+};
+
+export default function ArtworkColors({ colors: initialColors, artworkId, fileKey, fileType }: { colors: ColorWithItems[], artworkId: string, fileKey: string, fileType?: string }) {
+  const [colors, setColors] = useState(initialColors);
+  const [isPending, startTransition] = useTransition();
+
+  const handleGenerate = () => {
+    startTransition(async () => {
+      try {
+        const newColors = await generateArtworkColors(artworkId, fileKey, fileType);
+        setColors(newColors);
+        toast.success("Colors extracted successfully");
+      } catch (err) {
+        toast.error("Failed to extract colors");
+        console.error(err);
+      }
+    });
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="font-semibold text-lg">Artwork Colors</h2>
+        <Button size="sm" onClick={handleGenerate} disabled={isPending}>
+          {isPending ? "Extracting..." : "Generate Palette"}
+        </Button>
+      </div >
+      <div className="flex flex-wrap gap-2">
+        {colors.map((item) => (
+          <div
+            key={`${item.artworkId}-${item.type}`}
+            className="w-10 h-10 rounded"
+            style={{ backgroundColor: item.color?.hex ?? "#000000" }}
+            title={`${item.type} – ${item.color?.hex}`}
+          ></div>
+        ))}
+      </div>
+    </>
+  );
+}

src/components/artworks/single/ArtworkVariants.tsx

@@ -0,0 +1,23 @@
+// import { ImageVariant } from "@/generated/prisma";
+// import { formatFileSize } from "@/utils/formatFileSize";
+import { FileVariant } from "@/generated/prisma/client";
+import { formatFileSize } from "@/utils/formatFileSize";
+import NextImage from "next/image";
+
+export default function ArtworkVariants({ variants }: { variants: FileVariant[] }) {
+  return (
+    <>
+      <h2 className="font-semibold text-lg mb-2">Variants</h2>
+      <div>
+        {variants.map((variant) => (
+          <div key={variant.id}>
+            <div className="text-sm mb-1">{variant.type} | {variant.width}x{variant.height}px | {variant.sizeBytes ? formatFileSize(variant.sizeBytes) : "-"}</div>
+            {variant.s3Key && (
+              <NextImage src={`/api/image/${variant.s3Key}`} alt={variant.s3Key} width={variant.width} height={variant.height} className="rounded shadow max-w-md" />
+            )}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/components/artworks/single/DeleteArtworkButton.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { deleteArtwork } from "@/actions/artworks/deleteArtwork";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+
+export default function DeleteArtworkButton({ artworkId }: { artworkId: string }) {
+  const router = useRouter();
+
+  async function handleDelete() {
+    if (confirm("Are you sure you want to delete this artwork? This action is irreversible.")) {
+      const result = await deleteArtwork(artworkId);
+      if (result?.success) {
+        router.push("/artworks");
+      } else {
+        alert("Failed to delete artwork.");
+      }
+    }
+  }
+
+  return (
+    <Button variant="destructive" onClick={handleDelete}>
+      Delete Artwork
+    </Button>
+  );
+}

src/components/artworks/single/EditArtworkForm.tsx

@@ -0,0 +1,425 @@
+"use client"
+
+import { updateArtwork } from "@/actions/artworks/updateArtwork";
+// import { updateImage } from "@/actions/portfolio/images/updateImage";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import MultipleSelector from "@/components/ui/multiselect";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { ArtCategory, ArtTag } from "@/generated/prisma/client";
+// import { Color, ImageColor, ImageMetadata, ImageVariant, PortfolioAlbum, PortfolioCategory, PortfolioImage, PortfolioSortContext, PortfolioTag, PortfolioType } from "@/generated/prisma";
+import { cn } from "@/lib/utils";
+import { artworkSchema } from "@/schemas/artworks/imageSchema";
+// import { imageSchema } from "@/schemas/portfolio/imageSchema";
+import { ArtworkWithRelations } from "@/types/Artwork";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod/v4";
+
+export default function EditArtworkForm({ artwork, categories, tags }:
+  {
+    artwork: ArtworkWithRelations,
+    categories: ArtCategory[]
+    tags: ArtTag[]
+  }) {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof artworkSchema>>({
+    resolver: zodResolver(artworkSchema),
+    defaultValues: {
+      name: artwork.name,
+      needsWork: artwork.needsWork ?? true,
+      nsfw: artwork.nsfw ?? false,
+      published: artwork.published ?? false,
+      setAsHeader: artwork.setAsHeader ?? false,
+
+      altText: artwork.altText || "",
+      description: artwork.description || "",
+      notes: artwork.notes || "",
+      month: artwork.month || undefined,
+      year: artwork.year || undefined,
+      creationDate: artwork.creationDate ? new Date(artwork.creationDate) : undefined,
+
+      // albumId: image.albumId ?? undefined,
+      // typeId: image.typeId ?? undefined,
+      metadataId: artwork.metadata?.id ?? undefined,
+      categoryIds: artwork.categories?.map(cat => cat.id) ?? [],
+      colorIds: artwork.colors?.map(color => color.id) ?? [],
+      // sortContextIds: image.sortContexts?.map(sortContext => sortContext.id) ?? [],
+      tagIds: artwork.tags?.map(tag => tag.id) ?? [],
+      variantIds: artwork.variants?.map(variant => variant.id) ?? [],
+    }
+  })
+
+  async function onSubmit(values: z.infer<typeof artworkSchema>) {
+    const updatedArtwork = await updateArtwork(values, artwork.id)
+    if (updatedArtwork) {
+      toast.success("Artwork updated")
+      router.push(`/artworks`)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          {/* String */}
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Image name</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="The public display name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="altText"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alt Text</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="Alt for this image" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <Textarea {...field} placeholder="A descriptive text to the image" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Number */}
+          <FormField
+            control={form.control}
+            name="month"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Creation Month</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="number"
+                    value={field.value ?? ''}
+                    onChange={(e) =>
+                      field.onChange(e.target.value === '' ? undefined : +e.target.value)
+                    }
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="year"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Creation Year</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="number"
+                    value={field.value ?? ''}
+                    onChange={(e) =>
+                      field.onChange(e.target.value === '' ? undefined : +e.target.value)
+                    }
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Date  */}
+          <FormField
+            control={form.control}
+            name="creationDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col gap-1">
+                <FormLabel>Creation Date</FormLabel>
+                <div className="flex items-center gap-2">
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          className={cn(
+                            "pl-3 text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value ? format(field.value, "PPP") : "Pick a date"}
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={(date) => {
+                          field.onChange(date)
+                        }}
+                        initialFocus
+                        fromYear={1990}
+                        toYear={2030}
+                        captionLayout="dropdown"
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* Select */}
+          {/* <FormField
+            control={form.control}
+            name="albumId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Album</FormLabel>
+                <Select
+                  onValueChange={(value) => field.onChange(value === "" ? undefined : value)}
+                  value={field.value ?? ""}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select an album" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {albums.map((album) => (
+                      <SelectItem key={album.id} value={album.id}>
+                        {album.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          {/* <FormField
+            control={form.control}
+            name="typeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Art Type</FormLabel>
+                <Select
+                  onValueChange={(value) => field.onChange(value === "" ? undefined : value)}
+                  value={field.value ?? ""}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select an art type" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {types.map((type) => (
+                      <SelectItem key={type.id} value={type.id}>
+                        {type.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          <FormField
+            control={form.control}
+            name="tagIds"
+            render={({ field }) => {
+              const selectedOptions = tags
+                .filter(tag => field.value?.includes(tag.id))
+                .map(tag => ({ label: tag.name, value: tag.id }));
+              return (
+                <FormItem>
+                  <FormLabel>Tags</FormLabel>
+                  <FormControl>
+                    <MultipleSelector
+                      defaultOptions={tags.map(tag => ({
+                        label: tag.name,
+                        value: tag.id,
+                      }))}
+                      placeholder="Select tags"
+                      hidePlaceholderWhenSelected
+                      selectFirstItem
+                      value={selectedOptions}
+                      onChange={(options) => {
+                        const ids = options.map(option => option.value);
+                        field.onChange(ids);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )
+            }}
+          />
+          <FormField
+            control={form.control}
+            name="categoryIds"
+            render={({ field }) => {
+              const selectedOptions = categories
+                .filter(cat => field.value?.includes(cat.id))
+                .map(cat => ({ label: cat.name, value: cat.id }));
+              return (
+                <FormItem>
+                  <FormLabel>Categories</FormLabel>
+                  <FormControl>
+                    <MultipleSelector
+                      defaultOptions={categories.map(cat => ({
+                        label: cat.name,
+                        value: cat.id,
+                      }))}
+                      placeholder="Select categories"
+                      hidePlaceholderWhenSelected
+                      selectFirstItem
+                      value={selectedOptions}
+                      onChange={(options) => {
+                        const ids = options.map(option => option.value);
+                        field.onChange(ids);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )
+            }}
+          />
+          {/* Boolean */}
+          <FormField
+            control={form.control}
+            name="needsWork"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Needs some work</FormLabel>
+                  <FormDescription></FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="nsfw"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>NSFW</FormLabel>
+                  <FormDescription>This image contains sensitive or adult content.</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="published"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Publish</FormLabel>
+                  <FormDescription>Will this image be published.</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="setAsHeader"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Set as header image</FormLabel>
+                  <FormDescription>Will be the main banner image. Choose a fitting one.</FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          {/* Read only */}
+          {/* <FormField
+            control={form.control}
+            name="fileKey"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Image Key</FormLabel>
+                <FormControl><Input {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="originalFile"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Original file</FormLabel>
+                <FormControl><Input {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="fileType"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Filetype</FormLabel>
+                <FormControl><Input {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="fileSize"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>FileSize</FormLabel>
+                <FormControl><Input type="number" {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          <div className="flex flex-col gap-4">
+            <Button type="submit">Submit</Button>
+            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+          </div>
+        </form>
+      </Form>
+    </div >
+  );
+}

src/components/global/Footer.tsx

@@ -0,0 +1,5 @@
+export default function Footer() {
+  return (
+    <div>Footer</div>
+  );
+}

src/components/global/Header.tsx

@@ -0,0 +1,18 @@
+// import { auth } from "@/auth";
+// import { SignInOutButton } from "../auth/SignInOutButton";
+import ModeToggle from "./ModeToggle";
+import TopNav from "./TopNav";
+
+export default async function Header() {
+  // const session = await auth()
+
+  return (
+    <div className="flex items-center justify-between">
+      <TopNav />
+      <div className="flex items-center justify-between gap-4">
+        {/* <SignInOutButton session={session} /> */}
+        <ModeToggle />
+      </div>
+    </div>
+  );
+}

src/components/global/ModeToggle.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+
+const modes = ["light", "dark"] as const
+const accents = ["zinc", "red", "rose", "orange", "green", "blue", "yellow", "violet"] as const
+
+const modeIcons = {
+  light: <Sun className="h-4 w-4" />,
+  dark: <Moon className="h-4 w-4" />,
+}
+
+export default function ModeToggle() {
+  const { setTheme, theme } = useTheme()
+  const [mode, setMode] = useState("dark")
+  const [accent, setAccent] = useState("violet")
+
+  useEffect(() => {
+    const parts = theme?.split("-")
+    if (parts?.length === 2) {
+      setMode(parts[0])
+      setAccent(parts[1])
+    }
+  }, [theme])
+
+  function updateTheme(newMode: string, newAccent: string) {
+    const fullTheme = `${newMode}-${newAccent}`
+    setTheme(fullTheme)
+  }
+
+  const accentColorMap: Record<string, string> = {
+    zinc: "text-zinc-600",
+    red: "text-red-600",
+    rose: "text-rose-600",
+    orange: "text-orange-600",
+    green: "text-green-600",
+    blue: "text-blue-600",
+    yellow: "text-yellow-600",
+    violet: "text-violet-600",
+  }
+
+  return (
+    <div className="flex gap-4 items-center">
+      <Select
+        value={mode}
+        onValueChange={(value) => {
+          setMode(value)
+          updateTheme(value, accent)
+        }}
+      >
+        <SelectTrigger className="w-17.5">
+          <SelectValue
+            placeholder="Mode"
+            className="flex items-center gap-2"
+          />
+        </SelectTrigger>
+        <SelectContent>
+          {modes.map((m) => (
+            <SelectItem key={m} value={m}>
+              <span className="flex items-center gap-2">
+                {modeIcons[m]}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={accent}
+        onValueChange={(value) => {
+          setAccent(value)
+          updateTheme(mode, value)
+        }}
+      >
+        <SelectTrigger className="w-30">
+          <SelectValue placeholder="Accent" />
+        </SelectTrigger>
+        <SelectContent>
+          {accents.map((a) => (
+            <SelectItem key={a} value={a} className={cn(accentColorMap[a])}>
+              {a.charAt(0).toUpperCase() + a.slice(1)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

src/components/global/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

src/components/global/TopNav.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import Link from "next/link";
+
+const uploadItems = [
+  {
+    title: "Single Image",
+    href: "/uploads/single",
+  },
+  {
+    title: "Multiple Images",
+    href: "/uploads/bulk",
+  },
+]
+
+// const portfolioItems = [
+//   {
+//     title: "Images",
+//     href: "/portfolio/images",
+//   },
+//   {
+//     title: "Types",
+//     href: "/portfolio/types",
+//   },
+//   {
+//     title: "Albums",
+//     href: "/portfolio/albums",
+//   },
+//   {
+//     title: "Categories",
+//     href: "/portfolio/categories",
+//   },
+//   {
+//     title: "Tags",
+//     href: "/portfolio/tags",
+//   },
+// ]
+
+export default function TopNav() {
+  return (
+    <NavigationMenu viewport={false}>
+      <NavigationMenuList>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/">Home</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Upload</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-50 gap-4">
+              {uploadItems.map((item) => (
+                <li key={item.title}>
+                  <NavigationMenuLink asChild>
+                    <Link href={item.href}>
+                      <div className="text-sm leading-none font-medium">{item.title}</div>
+                      <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/artworks">Artworks</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+
+        {/* <NavigationMenuItem>
+          <NavigationMenuTrigger>Portfolio</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-75 gap-4">
+              {portfolioItems.map((item) => (
+                <li key={item.title}>
+                  <NavigationMenuLink asChild>
+                    <Link href={item.href}>
+                      <div className="text-sm leading-none font-medium">{item.title}</div>
+                      <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Commissions</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-75 gap-4">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/commissions/types">
+                    <div className="text-sm leading-none font-medium">Types</div>
+                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                    </p>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/commissions/board">
+                    <div className="text-sm leading-none font-medium">Board</div>
+                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                    </p>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/items/commissions/tos">ToS</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem> */}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent,
+  DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger
+}
+

src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/multiselect.tsx

@@ -0,0 +1,608 @@
+'use client';
+
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { forwardRef, useEffect } from 'react';
+
+import { Badge } from '@/components/ui/badge';
+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+
+export interface Option {
+  value: string;
+  label: string;
+  disable?: boolean;
+  /** fixed option that can't be removed. */
+  fixed?: boolean;
+  /** Group the options by providing key. */
+  [key: string]: string | boolean | undefined;
+}
+interface GroupOption {
+  [key: string]: Option[];
+}
+
+interface MultipleSelectorProps {
+  value?: Option[];
+  defaultOptions?: Option[];
+  /** manually controlled options */
+  options?: Option[];
+  placeholder?: string;
+  /** Loading component. */
+  loadingIndicator?: React.ReactNode;
+  /** Empty component. */
+  emptyIndicator?: React.ReactNode;
+  /** Debounce time for async search. Only work with `onSearch`. */
+  delay?: number;
+  /**
+   * Only work with `onSearch` prop. Trigger search when `onFocus`.
+   * For example, when user click on the input, it will trigger the search to get initial options.
+   **/
+  triggerSearchOnFocus?: boolean;
+  /** async search */
+  onSearch?: (value: string) => Promise<Option[]>;
+  /**
+   * sync search. This search will not showing loadingIndicator.
+   * The rest props are the same as async search.
+   * i.e.: creatable, groupBy, delay.
+   **/
+  onSearchSync?: (value: string) => Option[];
+  onChange?: (options: Option[]) => void;
+  /** Limit the maximum number of selected options. */
+  maxSelected?: number;
+  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+  onMaxSelected?: (maxLimit: number) => void;
+  /** Hide the placeholder when there are options selected. */
+  hidePlaceholderWhenSelected?: boolean;
+  disabled?: boolean;
+  /** Group the options base on provided key. */
+  groupBy?: string;
+  className?: string;
+  badgeClassName?: string;
+  /**
+   * First item selected is a default behavior by cmdk. That is why the default is true.
+   * This is a workaround solution by add a dummy item.
+   *
+   * @reference: https://github.com/pacocoursey/cmdk/issues/171
+   */
+  selectFirstItem?: boolean;
+  /** Allow user to create option when there is no option matched. */
+  creatable?: boolean;
+  /** Props of `Command` */
+  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;
+  /** Props of `CommandInput` */
+  inputProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
+    'value' | 'placeholder' | 'disabled'
+  >;
+  /** hide the clear all button. */
+  hideClearAllButton?: boolean;
+}
+
+export interface MultipleSelectorRef {
+  selectedValue: Option[];
+  input: HTMLInputElement;
+  focus: () => void;
+  reset: () => void;
+}
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+function transToGroupOption(options: Option[], groupBy?: string) {
+  if (options.length === 0) {
+    return {};
+  }
+  if (!groupBy) {
+    return {
+      '': options,
+    };
+  }
+
+  const groupOption: GroupOption = {};
+  options.forEach((option) => {
+    const key = (option[groupBy] as string) || '';
+    if (!groupOption[key]) {
+      groupOption[key] = [];
+    }
+    groupOption[key].push(option);
+  });
+  return groupOption;
+}
+
+function removePickedOption(groupOption: GroupOption, picked: Option[]) {
+  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
+
+  for (const [key, value] of Object.entries(cloneOption)) {
+    cloneOption[key] = value.filter((val) => !picked.find((p) => p.value === val.value));
+  }
+  return cloneOption;
+}
+
+function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
+  for (const [, value] of Object.entries(groupOption)) {
+    if (value.some((option) => targetOption.find((p) => p.value === option.value))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.
+ * So we create one and copy the `Empty` implementation from `cmdk`.
+ *
+ * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
+ **/
+const CommandEmpty = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, forwardedRef) => {
+  const render = useCommandState((state) => state.filtered.count === 0);
+
+  if (!render) return null;
+
+  return (
+    <div
+      ref={forwardedRef}
+      className={cn('py-6 text-center text-sm', className)}
+      cmdk-empty=""
+      role="presentation"
+      {...props}
+    />
+  );
+});
+
+CommandEmpty.displayName = 'CommandEmpty';
+
+const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder,
+      defaultOptions: arrayDefaultOptions = [],
+      options: arrayOptions,
+      delay,
+      onSearch,
+      onSearchSync,
+      loadingIndicator,
+      emptyIndicator,
+      maxSelected = Number.MAX_SAFE_INTEGER,
+      onMaxSelected,
+      hidePlaceholderWhenSelected,
+      disabled,
+      groupBy,
+      className,
+      badgeClassName,
+      selectFirstItem = true,
+      creatable = false,
+      triggerSearchOnFocus = false,
+      commandProps,
+      inputProps,
+      hideClearAllButton = false,
+    }: MultipleSelectorProps,
+    ref: React.Ref<MultipleSelectorRef>,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [open, setOpen] = React.useState(false);
+    const [onScrollbar, setOnScrollbar] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this
+
+    const [selected, setSelected] = React.useState<Option[]>(value || []);
+    const [options, setOptions] = React.useState<GroupOption>(
+      transToGroupOption(arrayDefaultOptions, groupBy),
+    );
+    const [inputValue, setInputValue] = React.useState('');
+    const debouncedSearchTerm = useDebounce(inputValue, delay || 500);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        selectedValue: [...selected],
+        input: inputRef.current as HTMLInputElement,
+        focus: () => inputRef?.current?.focus(),
+        reset: () => setSelected([]),
+      }),
+      [selected],
+    );
+
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+        inputRef.current.blur();
+      }
+    };
+
+    const handleUnselect = React.useCallback(
+      (option: Option) => {
+        const newOptions = selected.filter((s) => s.value !== option.value);
+        setSelected(newOptions);
+        onChange?.(newOptions);
+      },
+      [onChange, selected],
+    );
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const input = inputRef.current;
+        if (input) {
+          if (e.key === 'Delete' || e.key === 'Backspace') {
+            if (input.value === '' && selected.length > 0) {
+              const lastSelectOption = selected[selected.length - 1];
+              // If there is a last item and it is not fixed, we can remove it.
+              if (lastSelectOption && !lastSelectOption.fixed) {
+                handleUnselect(lastSelectOption);
+              }
+            }
+          }
+          // This is not a default behavior of the <input /> field
+          if (e.key === 'Escape') {
+            input.blur();
+          }
+        }
+      },
+      [handleUnselect, selected],
+    );
+
+    useEffect(() => {
+      if (open) {
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('touchend', handleClickOutside);
+      } else {
+        document.removeEventListener('mousedown', handleClickOutside);
+        document.removeEventListener('touchend', handleClickOutside);
+      }
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        document.removeEventListener('touchend', handleClickOutside);
+      };
+    }, [open]);
+
+    useEffect(() => {
+      if (value) {
+        setSelected(value);
+      }
+    }, [value]);
+
+    useEffect(() => {
+      /** If `onSearch` is provided, do not trigger options updated. */
+      if (!arrayOptions || onSearch) {
+        return;
+      }
+      const newOption = transToGroupOption(arrayOptions || [], groupBy);
+      if (JSON.stringify(newOption) !== JSON.stringify(options)) {
+        setOptions(newOption);
+      }
+    }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);
+
+    useEffect(() => {
+      /** sync search */
+
+      const doSearchSync = () => {
+        const res = onSearchSync?.(debouncedSearchTerm);
+        setOptions(transToGroupOption(res || [], groupBy));
+      };
+
+      const exec = async () => {
+        if (!onSearchSync || !open) return;
+
+        if (triggerSearchOnFocus) {
+          doSearchSync();
+        }
+
+        if (debouncedSearchTerm) {
+          doSearchSync();
+        }
+      };
+
+      void exec();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+
+    useEffect(() => {
+      /** async search */
+
+      const doSearch = async () => {
+        setIsLoading(true);
+        const res = await onSearch?.(debouncedSearchTerm);
+        setOptions(transToGroupOption(res || [], groupBy));
+        setIsLoading(false);
+      };
+
+      const exec = async () => {
+        if (!onSearch || !open) return;
+
+        if (triggerSearchOnFocus) {
+          await doSearch();
+        }
+
+        if (debouncedSearchTerm) {
+          await doSearch();
+        }
+      };
+
+      void exec();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+
+    const CreatableItem = () => {
+      if (!creatable) return undefined;
+      if (
+        isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
+        selected.find((s) => s.value === inputValue)
+      ) {
+        return undefined;
+      }
+
+      const Item = (
+        <CommandItem
+          value={inputValue}
+          className="cursor-pointer"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onSelect={(value: string) => {
+            if (selected.length >= maxSelected) {
+              onMaxSelected?.(selected.length);
+              return;
+            }
+            setInputValue('');
+            const newOptions = [...selected, { value, label: value }];
+            setSelected(newOptions);
+            onChange?.(newOptions);
+          }}
+        >
+          {`Create "${inputValue}"`}
+        </CommandItem>
+      );
+
+      // For normal creatable
+      if (!onSearch && inputValue.length > 0) {
+        return Item;
+      }
+
+      // For async search creatable. avoid showing creatable item before loading at first.
+      if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+        return Item;
+      }
+
+      return undefined;
+    };
+
+    const EmptyItem = React.useCallback(() => {
+      if (!emptyIndicator) return undefined;
+
+      // For async search that showing emptyIndicator
+      if (onSearch && !creatable && Object.keys(options).length === 0) {
+        return (
+          <CommandItem value="-" disabled>
+            {emptyIndicator}
+          </CommandItem>
+        );
+      }
+
+      return <CommandEmpty>{emptyIndicator}</CommandEmpty>;
+    }, [creatable, emptyIndicator, onSearch, options]);
+
+    const selectables = React.useMemo<GroupOption>(
+      () => removePickedOption(options, selected),
+      [options, selected],
+    );
+
+    /** Avoid Creatable Selector freezing or lagging when paste a long string. */
+    const commandFilter = React.useCallback(() => {
+      if (commandProps?.filter) {
+        return commandProps.filter;
+      }
+
+      if (creatable) {
+        return (value: string, search: string) => {
+          return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+        };
+      }
+      // Using default filter in `cmdk`. We don't have to provide it.
+      return undefined;
+    }, [creatable, commandProps?.filter]);
+
+    return (
+      <Command
+        ref={dropdownRef}
+        {...commandProps}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          commandProps?.onKeyDown?.(e);
+        }}
+        className={cn('h-auto overflow-visible bg-transparent', commandProps?.className)}
+        shouldFilter={
+          commandProps?.shouldFilter !== undefined ? commandProps.shouldFilter : !onSearch
+        } // When onSearch is provided, we don't want to filter the options. You can still override it.
+        filter={commandFilter()}
+      >
+        <div
+          className={cn(
+            'min-h-10 rounded-md border border-input text-base ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 md:text-sm',
+            {
+              'px-3 py-2': selected.length !== 0,
+              'cursor-text': !disabled && selected.length !== 0,
+            },
+            className,
+          )}
+          onClick={() => {
+            if (disabled) return;
+            inputRef?.current?.focus();
+          }}
+        >
+          <div className="relative flex flex-wrap gap-1">
+            {selected.map((option) => {
+              return (
+                <Badge
+                  key={option.value}
+                  className={cn(
+                    'data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground',
+                    'data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground',
+                    badgeClassName,
+                  )}
+                  data-fixed={option.fixed}
+                  data-disabled={disabled || undefined}
+                >
+                  {option.label}
+                  <button
+                    type="button"
+                    className={cn(
+                      'ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                      (disabled || option.fixed) && 'hidden',
+                    )}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleUnselect(option);
+                      }
+                    }}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={() => handleUnselect(option)}
+                  >
+                    <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                  </button>
+                </Badge>
+              );
+            })}
+            {/* Avoid having the "Search" Icon */}
+            <CommandPrimitive.Input
+              {...inputProps}
+              ref={inputRef}
+              value={inputValue}
+              disabled={disabled}
+              onValueChange={(value) => {
+                setInputValue(value);
+                inputProps?.onValueChange?.(value);
+              }}
+              onBlur={(event) => {
+                if (!onScrollbar) {
+                  setOpen(false);
+                }
+                inputProps?.onBlur?.(event);
+              }}
+              onFocus={(event) => {
+                setOpen(true);
+                inputProps?.onFocus?.(event);
+              }}
+              placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
+              className={cn(
+                'flex-1 bg-transparent outline-none placeholder:text-muted-foreground',
+                {
+                  'w-full': hidePlaceholderWhenSelected,
+                  'px-3 py-2': selected.length === 0,
+                  'ml-1': selected.length !== 0,
+                },
+                inputProps?.className,
+              )}
+            />
+            <button
+              type="button"
+              onClick={() => {
+                setSelected(selected.filter((s) => s.fixed));
+                onChange?.(selected.filter((s) => s.fixed));
+              }}
+              className={cn(
+                'absolute ltr:right-0 rtl:left-0 h-6 w-6 p-0',
+                (hideClearAllButton ||
+                  disabled ||
+                  selected.length < 1 ||
+                  selected.filter((s) => s.fixed).length === selected.length) &&
+                'hidden',
+              )}
+            >
+              <X />
+            </button>
+          </div>
+        </div>
+        <div className="relative">
+          {open && (
+            <CommandList
+              className="absolute top-1 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in"
+              onMouseLeave={() => {
+                setOnScrollbar(false);
+              }}
+              onMouseEnter={() => {
+                setOnScrollbar(true);
+              }}
+              onMouseUp={() => {
+                inputRef?.current?.focus();
+              }}
+            >
+              {isLoading ? (
+                <>{loadingIndicator}</>
+              ) : (
+                <>
+                  {EmptyItem()}
+                  {CreatableItem()}
+                  {!selectFirstItem && <CommandItem value="-" className="hidden" />}
+                  {Object.entries(selectables).map(([key, dropdowns]) => (
+                    <CommandGroup key={key} heading={key} className="h-full overflow-auto">
+                      <>
+                        {dropdowns.map((option) => {
+                          return (
+                            <CommandItem
+                              key={option.value}
+                              value={option.label}
+                              disabled={option.disable}
+                              onMouseDown={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                              }}
+                              onSelect={() => {
+                                if (selected.length >= maxSelected) {
+                                  onMaxSelected?.(selected.length);
+                                  return;
+                                }
+                                setInputValue('');
+                                const newOptions = [...selected, option];
+                                setSelected(newOptions);
+                                onChange?.(newOptions);
+                              }}
+                              className={cn(
+                                'cursor-pointer',
+                                option.disable && 'cursor-default text-muted-foreground',
+                              )}
+                            >
+                              {option.label}
+                            </CommandItem>
+                          );
+                        })}
+                      </>
+                    </CommandGroup>
+                  ))}
+                </>
+              )}
+            </CommandList>
+          )}
+        </div>
+      </Command>
+    );
+  },
+);
+
+MultipleSelector.displayName = 'MultipleSelector';
+export default MultipleSelector;

src/components/ui/navigation-menu.tsx

@@ -0,0 +1,161 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-1px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow md:w-(--radix-navigation-menu-viewport-width)",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport
+}
+

src/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/select.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+}
+

src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

src/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/components/uploads/UploadBulkImageForm.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { createImagesBulk } from "@/actions/uploads/createBulkImages";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { fileUploadSchema } from "@/schemas/artworks/imageSchema"; // keep your existing schema
+import { zodResolver } from "@hookform/resolvers/zod";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod/v4";
+
+type UploadStatus = "queued" | "uploading" | "done" | "error";
+
+type UploadItem = {
+  id: string; // clientId
+  file: File;
+  previewUrl: string;
+  status: UploadStatus;
+  progress: number; // 0..100 (simulated)
+  artworkId?: string;
+  error?: string;
+};
+
+type BulkResult =
+  | { ok: true; artworkId: string; name: string }
+  | { ok: false; name: string; error: string };
+
+function extFromName(name: string) {
+  const idx = name.lastIndexOf(".");
+  if (idx === -1) return "";
+  return name.slice(idx).toLowerCase(); // includes dot
+}
+
+function stripExt(name: string) {
+  const idx = name.lastIndexOf(".");
+  if (idx === -1) return name;
+  return name.slice(0, idx);
+}
+
+export default function UploadImagesBulkForm() {
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof fileUploadSchema>>({
+    resolver: zodResolver(fileUploadSchema),
+    defaultValues: { file: undefined },
+  });
+
+  const [items, setItems] = useState<UploadItem[]>([]);
+  const intervalsRef = useRef<Map<string, number>>(new Map());
+
+  const isBusy = useMemo(() => items.some((i) => i.status === "uploading"), [items]);
+
+  useEffect(() => {
+    return () => {
+      // cleanup object urls
+      for (const it of items) URL.revokeObjectURL(it.previewUrl);
+      // cleanup intervals
+      for (const id of intervalsRef.current.values()) window.clearInterval(id);
+      intervalsRef.current.clear();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const startSimProgress = (id: string) => {
+    // climb slowly to 90% while server action runs; snap to 100% at end
+    const intervalId = window.setInterval(() => {
+      setItems((prev) =>
+        prev.map((it) => {
+          if (it.id !== id) return it;
+          if (it.status !== "uploading") return it;
+          const next = Math.min(90, it.progress + Math.random() * 7 + 1);
+          return { ...it, progress: next };
+        })
+      );
+    }, 250);
+
+    intervalsRef.current.set(id, intervalId);
+  };
+
+  const stopSimProgress = (id: string) => {
+    const intervalId = intervalsRef.current.get(id);
+    if (intervalId) window.clearInterval(intervalId);
+    intervalsRef.current.delete(id);
+  };
+
+  const resetAll = () => {
+    setItems((prev) => {
+      for (const it of prev) URL.revokeObjectURL(it.previewUrl);
+      return [];
+    });
+    for (const intervalId of intervalsRef.current.values()) window.clearInterval(intervalId);
+    intervalsRef.current.clear();
+    form.reset();
+  };
+
+  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    const next: UploadItem[] = Array.from(files).map((file) => ({
+      id: crypto.randomUUID(),
+      file,
+      previewUrl: URL.createObjectURL(file),
+      status: "queued",
+      progress: 0,
+    }));
+
+    // Replace queue (you can change this to append if you prefer)
+    setItems((prev) => {
+      for (const it of prev) URL.revokeObjectURL(it.previewUrl);
+      return next;
+    });
+
+    form.setValue("file", files, { shouldValidate: true });
+  };
+
+  async function onSubmit(values: z.infer<typeof fileUploadSchema>) {
+    const files = Array.from(values.file ?? []);
+    if (files.length === 0 || items.length === 0) return;
+
+    // Build FormData with a stable clientId that survives transport by embedding it into the filename.
+    // This lets us map server results back to each preview item reliably, even for duplicate filenames.
+    const fd = new FormData();
+    const clientIdToOriginalName = new Map<string, string>();
+
+    for (const it of items) {
+      const encodedOriginal = encodeURIComponent(it.file.name);
+      fd.append("file", it.file, `${it.id}__${encodedOriginal}`);
+      clientIdToOriginalName.set(it.id, it.file.name);
+    }
+
+    // UI: mark uploading and start simulated progress for each
+    setItems((prev) => prev.map((it) => ({ ...it, status: "uploading", progress: Math.max(it.progress, 5) })));
+    for (const it of items) startSimProgress(it.id);
+
+    try {
+      const results = (await createImagesBulk(fd)) as BulkResult[];
+
+      // stop progress intervals
+      for (const it of items) stopSimProgress(it.id);
+
+      // Results matching strategy (least brittle):
+      // Our bulk action returns { name } = f.name which is now "<clientId>__<encodedOriginalName>".
+      // Parse clientId from result.name, map back to item by id.
+      const byClientId = new Map<string, BulkResult>();
+      for (const r of results) {
+        const [clientId] = r.name.split("__", 1);
+        if (clientId) byClientId.set(clientId, r);
+      }
+
+      setItems((prev) =>
+        prev.map((it) => {
+          const r = byClientId.get(it.id);
+          if (!r) {
+            return { ...it, status: "error", progress: 100, error: "No result returned" };
+          }
+          if (r.ok) {
+            return { ...it, status: "done", progress: 100, artworkId: r.artworkId };
+          }
+          return { ...it, status: "error", progress: 100, error: r.error };
+        })
+      );
+
+      const okCount = results.filter((r) => r.ok).length;
+      const failCount = results.length - okCount;
+
+      if (okCount > 0) toast.success(`Uploaded ${okCount} image(s)`);
+      if (failCount > 0) toast.error(`${failCount} image(s) failed`);
+    } catch (err) {
+      for (const it of items) stopSimProgress(it.id);
+
+      setItems((prev) =>
+        prev.map((it) =>
+          it.status === "uploading" ? { ...it, status: "error", progress: 100, error: "Upload failed" } : it
+        )
+      );
+
+      toast.error(err instanceof Error ? err.message : "Upload failed");
+    }
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="file"
+            render={() => (
+              <FormItem>
+                <FormLabel>Choose images to upload</FormLabel>
+                <FormControl>
+                  <Input type="file" accept="image/*" multiple onChange={onFileChange} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-4">
+            <Button type="submit" disabled={items.length === 0 || isBusy}>
+              {isBusy ? "Uploading..." : "Submit"}
+            </Button>
+            <Button type="button" variant="secondary" disabled={isBusy} onClick={() => router.back()}>
+              Cancel
+            </Button>
+            <Button type="button" variant="outline" disabled={isBusy} onClick={resetAll}>
+              Reset
+            </Button>
+          </div>
+        </form>
+      </Form>
+
+      {items.length > 0 ? (
+        <div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((it) => (
+            <div key={it.id} className="rounded-lg border p-3">
+              <div className="relative aspect-square w-full overflow-hidden rounded-md">
+                <Image src={it.previewUrl} alt={it.file.name} fill className="object-cover" />
+              </div>
+
+              <div className="mt-2 flex items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-medium">{it.file.name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    {it.status === "queued" && "Queued"}
+                    {it.status === "uploading" && "Uploading / Processing"}
+                    {it.status === "done" && "Done"}
+                    {it.status === "error" && "Error"}
+                  </div>
+                </div>
+
+                {it.status === "done" && it.artworkId ? (
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => router.push(`/portfolio/images/${it.artworkId}`)}
+                  >
+                    Open
+                  </Button>
+                ) : null}
+              </div>
+
+              <div className="mt-2">
+                <div className="h-2 w-full rounded bg-muted">
+                  <div className="h-2 rounded bg-primary transition-all" style={{ width: `${it.progress}%` }} />
+                </div>
+
+                {it.status === "error" && it.error ? (
+                  <div className="mt-2 text-xs text-destructive">{it.error}</div>
+                ) : null}
+
+                {it.status === "done" && it.artworkId ? (
+                  <div className="mt-2 text-xs text-muted-foreground">
+                    Artwork ID: <span className="font-mono">{it.artworkId}</span>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}

src/components/uploads/UploadImageForm.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { createImage } from "@/actions/uploads/createImage";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { fileUploadSchema } from "@/schemas/artworks/imageSchema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod/v4";
+
+export default function UploadImageForm() {
+  const router = useRouter();
+  const [preview, setPreview] = useState<string | null>(null);
+
+  const form = useForm<z.infer<typeof fileUploadSchema>>({
+    resolver: zodResolver(fileUploadSchema),
+    defaultValues: {
+      file: undefined
+    },
+  })
+
+  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      if (typeof reader.result === 'string') {
+        setPreview(reader.result as string);
+      }
+    };
+    reader.readAsDataURL(file);
+    form.setValue("file", files);
+  };
+
+  async function onSubmit(values: z.infer<typeof fileUploadSchema>) {
+    const image = await createImage(values)
+    if (image) {
+      toast.success("Image created")
+      router.push(`/portfolio/images/${image.id}`)
+    }
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="file"
+            render={() => (
+              <FormItem>
+                <FormLabel>Choose image to upload</FormLabel>
+                <FormControl>
+                  <Input
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => onFileChange(e)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <div className="flex gap-4">
+            <Button type="submit">Submit</Button>
+            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+          </div>
+        </form>
+      </Form>
+      <div className="flex justify-center p-4">
+        {
+          preview ?
+            <Image
+              src={preview}
+              alt="Preview"
+              width={200}
+              height={200}
+            />
+            :
+            null
+        }
+      </div>
+    </>
+  );
+}

src/lib/prisma.ts

@@ -0,0 +1,10 @@
+import { PrismaPg } from '@prisma/adapter-pg';
+import "dotenv/config";
+import { PrismaClient } from '../generated/prisma/client';
+
+const connectionString = `${process.env.DATABASE_URL}`
+
+const adapter = new PrismaPg({ connectionString })
+const prisma = new PrismaClient({ adapter })
+
+export { prisma };

src/lib/queryArtworks.ts

@@ -0,0 +1,43 @@
+// src/lib/artworks/query.ts
+import { Prisma } from "@/generated/prisma/client";
+import { prisma } from "@/lib/prisma";
+
+export type ArtworkListParams = {
+  published?: string;
+  take?: number;
+  cursor?: string; // artwork.id of the last item from previous page
+};
+
+export async function getArtworksPage(params: ArtworkListParams) {
+  const { published = "all", take = 48, cursor } = params;
+
+  const where: Prisma.ArtworkWhereInput = {};
+
+  if (published === "published") where.published = true;
+  else if (published === "unpublished") where.published = false;
+  else if (published === "needsWork") where.needsWork = true;
+
+  const artworks = await prisma.artwork.findMany({
+    where,
+    include: {
+      file: true,
+      variants: true,
+      metadata: true,
+    },
+    orderBy: [{ createdAt: "desc" }, { id: "asc" }],
+    take: take + 1, // fetch one extra to know if there is a next page
+    ...(cursor
+      ? {
+          cursor: { id: cursor },
+          skip: 1, // skip the cursor item itself
+        }
+      : {}),
+  });
+
+  const hasMore = artworks.length > take;
+  const pageItems = hasMore ? artworks.slice(0, take) : artworks;
+
+  const nextCursor = hasMore ? pageItems[pageItems.length - 1]?.id : null;
+
+  return { items: pageItems, nextCursor };
+}

src/lib/s3.ts

@@ -0,0 +1,22 @@
+import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import "dotenv/config";
+
+export const s3 = new S3Client({
+  region: "us-east-1",
+  endpoint: `${process.env.S3_ENDPOINT}`,
+  forcePathStyle: true,
+  credentials: {
+    accessKeyId: `${process.env.S3_ACCESSKEY}`,
+    secretAccessKey: `${process.env.S3_SECRET}`,
+  },
+});
+
+export async function getSignedImageUrl(key: string, expiresInSec = 3600) {
+  const command = new GetObjectCommand({
+    Bucket: `${process.env.BUCKET_NAME}`,
+    Key: key,
+  });
+
+  return getSignedUrl(s3, command, { expiresIn: expiresInSec });
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/schemas/artworks/albumSchema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod/v4"
+
+export const albumSchema = z.object({
+  name: z.string().min(3, "Name is required. Min 3 characters."),
+  slug: z.string().min(3, "Slug is required. Min 3 characters.").regex(/^[a-z]+$/, "Only lowercase letters are allowed (no numbers, spaces, or uppercase)"),
+  description: z.string().optional(),
+})
+
+export type albumSchema = z.infer<typeof albumSchema>

src/schemas/artworks/categorySchema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod/v4"
+
+export const categorySchema = z.object({
+  name: z.string().min(3, "Name is required. Min 3 characters."),
+  slug: z.string().min(3, "Slug is required. Min 3 characters.").regex(/^[a-z]+$/, "Only lowercase letters are allowed (no numbers, spaces, or uppercase)"),
+  description: z.string().optional(),
+})
+
+export type categorySchema = z.infer<typeof categorySchema>

src/schemas/artworks/imageSchema.ts

@@ -0,0 +1,47 @@
+import { z } from "zod/v4";
+
+export const fileUploadSchema = z.object({
+  file: z
+    .custom<FileList>()
+    .refine((files) => files instanceof FileList && files.length > 0, {
+      message: "Image file is required",
+    }),
+})
+
+const isFileList = (v: unknown): v is FileList =>
+  typeof FileList !== "undefined" && v instanceof FileList;
+
+export const fileBulkUploadSchema = z.object({
+  file: z
+    .custom<FileList>((v) => isFileList(v), "Please choose one or more files")
+    .refine((files) => files.length > 0, {
+      message: "At least one image file is required",
+    }),
+})
+
+export const artworkSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  needsWork: z.boolean(),
+  nsfw: z.boolean(),
+  published: z.boolean(),
+  setAsHeader: z.boolean(),
+  
+  altText: z.string().optional(),
+  description: z.string().optional(),
+  notes: z.string().optional(),
+  month: z.number().optional(),
+  year: z.number().optional(),
+  creationDate: z.date().optional(),
+
+  // fileId: z.string(),
+  // albumId: z.string().optional(),
+  // typeId: z.string().optional(),
+
+  metadataId: z.string().optional(),
+
+  categoryIds: z.array(z.string()).optional(),
+  colorIds: z.array(z.string()).optional(),
+  // sortContextIds: z.array(z.string()).optional(),
+  tagIds: z.array(z.string()).optional(),
+  variantIds: z.array(z.string()).optional(),
+})

src/schemas/artworks/tagSchema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod/v4"
+
+export const tagSchema = z.object({
+  name: z.string().min(3, "Name is required. Min 3 characters."),
+  slug: z.string().min(3, "Slug is required. Min 3 characters.").regex(/^[a-z]+$/, "Only lowercase letters are allowed (no numbers, spaces, or uppercase)"),
+  description: z.string().optional(),
+})
+
+export type tagSchema = z.infer<typeof tagSchema>
+

src/schemas/artworks/typeSchema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod/v4"
+
+export const typeSchema = z.object({
+  name: z.string().min(3, "Name is required. Min 3 characters."),
+  slug: z.string().min(3, "Slug is required. Min 3 characters.").regex(/^[a-z]+$/, "Only lowercase letters are allowed (no numbers, spaces, or uppercase)"),
+  description: z.string().optional(),
+})
+
+export type typeSchema = z.infer<typeof typeSchema>

src/types/Artwork.ts

@@ -0,0 +1,14 @@
+import { Prisma } from "@/generated/prisma/client";
+
+export type ArtworkWithRelations = Prisma.ArtworkGetPayload<{
+  include: {
+    file: true;
+    gallery: true;
+    metadata: true;
+    albums: true;
+    categories: true;
+    colors: true;
+    tags: true;
+    variants: true;
+  };
+}>;

src/types/VibrantSwatch.ts

@@ -0,0 +1,4 @@
+export type VibrantSwatch = {
+  _rgb: [number, number, number];
+  hex?: string;
+};

src/utils/formatFileSize.ts

@@ -0,0 +1,9 @@
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb.toFixed(1)} MB`;
+  const gb = mb / 1024;
+  return `${gb.toFixed(2)} GB`;
+}

src/utils/getImageBufferFromS3.ts

@@ -0,0 +1,22 @@
+import { s3 } from "@/lib/s3";
+import { GetObjectCommand } from "@aws-sdk/client-s3";
+import { Readable } from "stream";
+
+export async function getImageBufferFromS3(fileKey: string, fileType?: string): Promise<Buffer> {
+  // const type = fileType ? fileType.split("/")[1] : "webp";
+  
+  const command = new GetObjectCommand({
+    Bucket: "gaertan",
+    Key: `original/${fileKey}.${fileType}`,
+  });
+
+  const response = await s3.send(command);
+  const stream = response.Body as Readable;
+
+  const chunks: Uint8Array[] = [];
+  for await (const chunk of stream) {
+    chunks.push(chunk);
+  }
+
+  return Buffer.concat(chunks);
+}

src/utils/uploadHelper.ts

@@ -0,0 +1,96 @@
+import crypto from 'crypto';
+
+// export function generatePaletteName(tones: Tone[]): string {
+//   const hexString = tones.map(t => t.hex.toLowerCase()).join('');
+//   const hash = crypto.createHash('sha256').update(hexString).digest('hex');
+//   return `palette-${hash.slice(0, 8)}`;
+// }
+
+export function generateColorName(hex: string): string {
+  const hash = crypto.createHash("sha256").update(hex.toLowerCase()).digest("hex");
+  return `color-${hash.slice(0, 8)}`;
+}
+
+// export function generateExtractColorName(hex: string, hue?: number, sat?: number, area?: number): string {
+//   const data = `${hex.toLowerCase()}-${hue ?? 0}-${sat ?? 0}-${area ?? 0}`;
+//   const hash = crypto.createHash("sha256").update(data).digest("hex");
+//   return `extract-${hash.slice(0, 8)}`;
+// }
+
+export function rgbToHex(rgb: number[]): string {
+  return `#${rgb
+    .map((val) => Math.round(val).toString(16).padStart(2, "0"))
+    .join("")}`;
+}
+
+export function argbToHex(argb: number): string {
+  return `#${argb.toString(16).slice(2).padStart(6, "0")}`;
+}
+  
+// export function extractPaletteTones(
+//   palette: TonalPalette, tones: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+// ) {
+//   return tones.map((t) => ({
+//     tone: t,
+//     hex: argbToHex(palette.tone(t)),
+//   }));
+// }
+
+// export async function upsertPalettes(tones: Tone[], imageId: string, type: string) {
+//   const paletteName = generatePaletteName(tones);
+
+//   const existingPalette = await prisma.colorPalette.findFirst({
+//     where: { name: paletteName },
+//     include: { items: true },
+//   });
+
+//   // 
+//   const palette = existingPalette ?? await prisma.colorPalette.create({
+//     data: {
+//       name: paletteName,
+//       items: {
+//         create: tones.map(tone => ({
+//           tone: tone.tone,
+//           hex: tone.hex,
+//         }))
+//       }
+//     }
+//   });
+
+//   await prisma.imagePalette.upsert({
+//     where: {
+//       imageId_type: {
+//         imageId,
+//         type,
+//       }
+//     },
+//     update: {
+//       paletteId: palette.id
+//     },
+//     create: {
+//       imageId,
+//       paletteId: palette.id,
+//       type,
+//     }
+//   });
+
+
+//   // const newPalette = await prisma.colorPalette.create({
+//   //   data: {
+//   //     name: paletteName,
+//   //     type: type,
+//   //     items: {
+//   //       create: tones.map(t => ({
+//   //         tone: t.tone,
+//   //         hex: t.hex,
+//   //       })),
+//   //     },
+//   //     images: {
+//   //       connect: { id: imageId },
+//   //     },
+//   //   },
+//   //   include: { items: true },
+//   // });
+
+//   return palette;
+// }