Add tags to commssion types and custom types. Add button for example images to cards

Dockerfile.dev

@@ -18,6 +18,12 @@ RUN bunx prisma generate
 
 # Uncomment the following line in case you want to disable telemetry during the build.
 ENV NEXT_TELEMETRY_DISABLED=1
+ARG GIT_SHA=unknown
+ARG APP_VERSION=0.0.0
+ARG DEPLOY_ENV=production
+ENV NEXT_PUBLIC_GIT_SHA=$GIT_SHA \
+    NEXT_PUBLIC_APP_VERSION=$APP_VERSION \
+    NEXT_PUBLIC_DEPLOY_ENV=$DEPLOY_ENV
 ARG DATABASE_URL
 ENV DATABASE_URL=$DATABASE_URL
 
@@ -33,6 +39,12 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production \
     PORT=3000 \
     HOSTNAME="0.0.0.0"
+ARG GIT_SHA=unknown
+ARG APP_VERSION=0.0.0
+ARG DEPLOY_ENV=production
+ENV NEXT_PUBLIC_GIT_SHA=$GIT_SHA \
+    NEXT_PUBLIC_APP_VERSION=$APP_VERSION \
+    NEXT_PUBLIC_DEPLOY_ENV=$DEPLOY_ENV
 
 RUN groupadd --system --gid 1001 nodejs && \
     useradd --system --uid 1001 --no-log-init -g nodejs nextjs

Dockerfile.prod

@@ -14,7 +14,6 @@ FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-# RUN bunx prisma migrate deploy
 RUN bunx prisma generate
 
 # Uncomment the following line in case you want to disable telemetry during the build.

prisma/schema.prisma

@@ -53,7 +53,7 @@ model Artwork {
   albums     Album[]
   categories ArtCategory[]
   colors     ArtworkColor[]
-  tags       ArtTag[]
+  tags       Tag[]          @relation("ArtworkTags")
   variants   FileVariant[]
 
   @@index([colorStatus])
@@ -101,43 +101,7 @@ model ArtCategory {
   description String?
 
   artworks Artwork[]
-  tags     ArtTag[]
-}
-
-model ArtTag {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  sortIndex Int      @default(0)
-
-  name             String  @unique
-  slug             String  @unique
-  isParent         Boolean @default(false)
-  showOnAnimalPage Boolean @default(false)
-
-  description String?
-
-  aliases    ArtTagAlias[]
-  artworks   Artwork[]
-  categories ArtCategory[]
-
-  parentId String?
-  parent   ArtTag?  @relation("TagHierarchy", fields: [parentId], references: [id], onDelete: SetNull)
-  children ArtTag[] @relation("TagHierarchy")
-}
-
-model ArtTagAlias {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  alias String @unique
-
-  tagId String
-  tag   ArtTag @relation(fields: [tagId], references: [id], onDelete: Cascade)
-
-  @@unique([tagId, alias])
-  @@index([alias])
+  tagLinks TagCategory[]
 }
 
 model Color {
@@ -248,6 +212,72 @@ model FileVariant {
   @@unique([artworkId, type])
 }
 
+model Tag {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  sortIndex Int      @default(0)
+
+  name      String  @unique
+  slug      String  @unique
+  isVisible Boolean @default(true)
+
+  description String?
+
+  aliases               TagAlias[]
+  categoryLinks         TagCategory[]
+  categoryParents       TagCategory[]          @relation("TagCategoryParent")
+  artworks              Artwork[]              @relation("ArtworkTags")
+  commissionTypes       CommissionType[]       @relation("CommissionTypeTags")
+  commissionCustomCards CommissionCustomCard[] @relation("CommissionCustomCardTags")
+  miniatures            Miniature[]            @relation("MiniatureTags")
+}
+
+model TagAlias {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  alias String @unique
+
+  tagId String
+  tag   Tag    @relation(fields: [tagId], references: [id], onDelete: Cascade)
+
+  @@unique([tagId, alias])
+  @@index([alias])
+}
+
+model TagCategory {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  tagId      String
+  categoryId String
+
+  isParent         Boolean @default(false)
+  showOnAnimalPage Boolean @default(false)
+  parentTagId      String?
+
+  tag       Tag         @relation(fields: [tagId], references: [id], onDelete: Cascade)
+  category  ArtCategory @relation(fields: [categoryId], references: [id], onDelete: Cascade)
+  parentTag Tag?        @relation("TagCategoryParent", fields: [parentTagId], references: [id], onDelete: SetNull)
+
+  @@unique([tagId, categoryId])
+  @@index([categoryId])
+  @@index([tagId])
+  @@index([parentTagId])
+  @@index([categoryId, parentTagId])
+}
+
+model Miniature {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  tags Tag[] @relation("MiniatureTags")
+}
+
 model Commission {
   id        String   @id @default(cuid())
   createdAt DateTime @default(now())
@@ -265,6 +295,8 @@ model CommissionType {
 
   description String?
 
+  tags Tag[] @relation("CommissionTypeTags")
+
   options      CommissionTypeOption[]
   extras       CommissionTypeExtra[]
   customInputs CommissionTypeCustomInput[]
@@ -284,6 +316,7 @@ model CommissionCustomCard {
   isVisible         Boolean @default(true)
   isSpecialOffer    Boolean @default(false)
 
+  tags     Tag[]                        @relation("CommissionCustomCardTags")
   options  CommissionCustomCardOption[]
   extras   CommissionCustomCardExtra[]
   requests CommissionRequest[]

src/actions/portfolio/getTaggedArtworksPage.ts

@@ -0,0 +1,173 @@
+"use server";
+
+import type { Prisma } from "@/generated/prisma/browser";
+import { prisma } from "@/lib/prisma";
+
+export type Cursor = {
+  afterSortKey: number | null;
+  afterId: string;
+} | null;
+
+export type TaggedArtworkItem = {
+  id: string;
+  name: string;
+  altText: string | null;
+  sortKey: number | null;
+  year: number | null;
+  fileKey: string;
+  thumbW: number;
+  thumbH: number;
+  dominantHex: string;
+};
+
+type VariantPick = { type: string; width: number; height: number };
+function pickVariant(variants: VariantPick[], type: string) {
+  return variants.find((v) => v.type === type) ?? null;
+}
+
+export async function getTaggedArtworksPage(args: {
+  take?: number;
+  cursor?: Cursor;
+  tagSlugs: string[];
+  onlyPublished?: boolean;
+}): Promise<{
+  items: TaggedArtworkItem[];
+  nextCursor: Cursor;
+  total: number;
+}> {
+  const { take = 60, cursor = null, tagSlugs, onlyPublished = true } = args;
+
+  const filteredSlugs = tagSlugs.map((s) => s.trim()).filter(Boolean);
+  if (filteredSlugs.length === 0) {
+    return { items: [], nextCursor: null, total: 0 };
+  }
+
+  const baseWhere: Prisma.ArtworkWhereInput = {
+    ...(onlyPublished ? { published: true } : {}),
+    tags: { some: { slug: { in: filteredSlugs } } },
+    variants: { some: { type: "thumbnail" } },
+  };
+
+  const total = await prisma.artwork.count({ where: baseWhere });
+
+  const select = {
+    id: true,
+    name: true,
+    altText: true,
+    year: true,
+    sortKey: true,
+    file: { select: { fileKey: true } },
+    variants: {
+      where: { type: "thumbnail" },
+      select: { type: true, width: true, height: true },
+      take: 1,
+    },
+    colors: {
+      where: { type: "Vibrant" },
+      select: { color: { select: { hex: true } } },
+      take: 1,
+    },
+  } satisfies Prisma.ArtworkSelect;
+
+  type ArtworkRow = Prisma.ArtworkGetPayload<{ select: typeof select }>;
+
+  const mapRow = (r: ArtworkRow): TaggedArtworkItem | null => {
+    const thumb = pickVariant(r.variants, "thumbnail");
+    if (!thumb?.width || !thumb?.height) return null;
+
+    return {
+      id: r.id,
+      name: r.name,
+      altText: r.altText ?? null,
+      sortKey: r.sortKey ?? null,
+      year: r.year ?? null,
+      fileKey: r.file.fileKey,
+      thumbW: thumb.width,
+      thumbH: thumb.height,
+      dominantHex: r.colors[0]?.color?.hex ?? "#999999",
+    };
+  };
+
+  let items: TaggedArtworkItem[] = [];
+  let nextCursor: Cursor = null;
+
+  const inNullSegment = cursor?.afterSortKey === null;
+
+  if (!inNullSegment) {
+    const whereA: Prisma.ArtworkWhereInput = {
+      AND: [baseWhere, { sortKey: { not: null } }],
+    };
+
+    if (cursor?.afterSortKey != null) {
+      const sk = Number(cursor.afterSortKey);
+      whereA.OR = [
+        { sortKey: { gt: sk } },
+        { AND: [{ sortKey: sk }, { id: { gt: cursor.afterId } }] },
+      ];
+    }
+
+    const rowsA = await prisma.artwork.findMany({
+      where: whereA,
+      orderBy: [{ sortKey: "asc" }, { id: "asc" }],
+      take: Math.min(take, 200),
+      select,
+    });
+
+    items = rowsA.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+
+    if (items.length >= take) {
+      const last = items.at(-1);
+      if (!last || last.sortKey == null) {
+        return { items, nextCursor: null, total };
+      }
+      nextCursor = { afterSortKey: last.sortKey, afterId: last.id };
+      return { items, nextCursor, total };
+    }
+
+    const remaining = take - items.length;
+
+    const whereB: Prisma.ArtworkWhereInput = {
+      AND: [baseWhere, { sortKey: null }],
+    };
+
+    const rowsB = await prisma.artwork.findMany({
+      where: whereB,
+      orderBy: [{ id: "asc" }],
+      take: Math.min(remaining, 200),
+      select,
+    });
+
+    const more = rowsB.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+    items = items.concat(more);
+
+    const last = items[items.length - 1];
+    nextCursor =
+      items.length < take || !last
+        ? null
+        : { afterSortKey: last.sortKey ?? null, afterId: last.id };
+
+    return { items, nextCursor, total };
+  }
+
+  const whereB: Prisma.ArtworkWhereInput = {
+    AND: [baseWhere, { sortKey: null }],
+    ...(cursor ? { id: { gt: cursor.afterId } } : {}),
+  };
+
+  const rowsB = await prisma.artwork.findMany({
+    where: whereB,
+    orderBy: [{ id: "asc" }],
+    take: Math.min(take, 200),
+    select,
+  });
+
+  items = rowsB.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+
+  const last = items[items.length - 1];
+  nextCursor =
+    items.length < take || !last
+      ? null
+      : { afterSortKey: null, afterId: last.id };
+
+  return { items, nextCursor, total };
+}

src/app/(normal)/artworks/animalstudies/index/page.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
 
 import {
@@ -30,14 +30,22 @@ function sortArtworks(a: SimpleArtwork, b: SimpleArtwork) {
 }
 
 export default async function AnimalListPage() {
-  const tags = await prisma.artTag.findMany({
-    where: { showOnAnimalPage: true },
+  const tags = await prisma.tag.findMany({
+    where: {
+      isVisible: true,
+      categoryLinks: {
+        some: { category: { name: "Animal Studies" }, showOnAnimalPage: true },
+      },
+    },
     select: {
       id: true,
       name: true,
       slug: true,
       sortIndex: true,
-      parentId: true,
+      categoryLinks: {
+        where: { category: { name: "Animal Studies" } },
+        select: { parentTagId: true },
+      },
       artworks: {
         where: {
           published: true,
@@ -50,10 +58,15 @@ export default async function AnimalListPage() {
     orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
   });
 
-  const byId = new Map(tags.map((t) => [t.id, t]));
-  const childrenByParentId = new Map<string, typeof tags>();
+  const tagsWithParents = tags.map((t) => ({
+    ...t,
+    parentId: t.categoryLinks[0]?.parentTagId ?? null,
+  }));
 
-  for (const t of tags) {
+  const byId = new Map(tagsWithParents.map((t) => [t.id, t]));
+  const childrenByParentId = new Map<string, typeof tagsWithParents>();
+
+  for (const t of tagsWithParents) {
     if (!t.parentId) continue;
     const arr = childrenByParentId.get(t.parentId) ?? [];
     arr.push(t);
@@ -64,12 +77,12 @@ export default async function AnimalListPage() {
     childrenByParentId.set(pid, arr.slice().sort(sortBySortIndexName));
   }
 
-  const parents = tags
+  const parents = tagsWithParents
     .filter((t) => t.parentId === null)
     .slice()
     .sort(sortBySortIndexName);
 
-  const orphans = tags
+  const orphans = tagsWithParents
     .filter((t) => t.parentId !== null && !byId.has(t.parentId))
     .slice()
     .sort(sortBySortIndexName);
@@ -82,16 +95,17 @@ export default async function AnimalListPage() {
     }
 
     return (
-      <ul className="space-y-1.5">
+      <ul className="space-y-1">
         {list.map((a) => (
           <li key={a.id}>
             <Link
               href={`/artworks/single/${a.id}?from=animal-index`}
               className="
-  inline-flex items-center gap-2
-  rounded-md px-2 py-1
+  group flex w-full items-center gap-2
+  rounded-md px-2 py-1.5
   text-sm font-medium
-  hover:bg-muted
+  hover:bg-muted/60
+  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 "
             >
               <span
@@ -102,7 +116,7 @@ export default async function AnimalListPage() {
             group-hover:translate-x-0.5
           "
               >
-                →
+                <ChevronRightIcon className="h-4 w-4" />
               </span>
 
               <span className="leading-snug">{a.name}</span>
@@ -149,7 +163,7 @@ export default async function AnimalListPage() {
         </div>
       </header>
 
-      <div className="space-y-6">
+      <div className="space-y-6 sm:space-y-4">
         <Card>
           <CardHeader className="space-y-1">
             <CardTitle className="text-base">
@@ -177,15 +191,17 @@ export default async function AnimalListPage() {
                   const isStandalone = children.length === 0;
 
                   return (
-                    <AccordionItem key={p.id} value={p.id} className="border-b">
+                    <AccordionItem key={p.id} value={p.id} className="py-1 sm:py-1">
                       <AccordionTrigger
                         className="
-                          py-4
+                          py-4 sm:py-3
                           rounded-md px-2 -mx-2
+                          bg-hover text-hover-foreground dark:bg-hover dark:text-hover-foreground
                           transition-colors
-                          hover:bg-muted/60
+                          hover:bg-hover/80 dark:hover:bg-hover/80
+                          font-semibold
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-                          data-[state=open]:bg-muted/40
+                          data-[state=open]:bg-muted/90 dark:data-[state=open]:bg-muted/90
                         "
                       >
                         <div className="flex w-full items-center justify-between pr-2">
@@ -211,41 +227,44 @@ export default async function AnimalListPage() {
                         </div>
                       </AccordionTrigger>
 
-                      <AccordionContent className="pb-5">
+                      <AccordionContent className="pb-4 sm:pb-4">
                         {isStandalone ? (
-                          <div className="rounded-md border p-4">
-                            <div className="mb-3 flex items-center justify-between">
-                              <div className="text-sm font-medium">Artworks</div>
+                          <div className="space-y-2">
+                            <div className="flex items-center justify-between text-sm font-medium">
+                              <span>Artworks</span>
                               <Badge variant="outline">{p.artworks.length}</Badge>
                             </div>
+                            <div>
                               <ArtworkList items={p.artworks} />
                             </div>
+                          </div>
                         ) : (
-                          <div className="space-y-4">
+                          <div className="space-y-4 sm:space-y-3">
                             {p.artworks.length > 0 ? (
                               <>
-                                <div className="rounded-md border p-4">
-                                  <div className="mb-3 flex items-center justify-between">
-                                    <div className="text-sm font-medium">{/* Directly tagged */}</div>
+                                <div className="space-y-2">
+                                  <div className="flex items-center justify-between text-sm font-medium">
+                                    <span>Direct artworks</span>
                                     <Badge variant="outline">{p.artworks.length}</Badge>
                                   </div>
+                                  <div>
                                     <ArtworkList items={p.artworks} />
                                   </div>
+                                </div>
 
                                 <Separator />
                               </>
                             ) : null}
 
-                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                            <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                               {children.map((c) => (
-                                <div key={c.id} className="rounded-md border p-4">
-                                  <div className="mb-3 flex items-center justify-between">
+                                <div key={c.id} className="space-y-2 pt-3">
+                                  <div className="flex items-center justify-between text-sm font-medium">
                                     <div className="min-w-0">
-                                      <div className="truncate text-sm font-medium">{c.name}</div>
+                                      <div className="truncate">{c.name}</div>
                                     </div>
                                     <Badge variant="outline">{c.artworks.length}</Badge>
                                   </div>
-
                                   <ArtworkList items={c.artworks} />
                                 </div>
                               ))}
@@ -269,12 +288,12 @@ export default async function AnimalListPage() {
                 Tags whose parent is not visible (or not configured for the animal page).
               </p> */}
             </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <CardContent className="space-y-4 sm:space-y-2">
+              <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                 {orphans.map((t) => (
-                  <div key={t.id} className="rounded-md border p-4">
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="truncate text-sm font-medium">{t.name}</div>
+                  <div key={t.id} className="space-y-2 pt-3">
+                    <div className="flex items-center justify-between text-sm font-medium">
+                      <div className="truncate">{t.name}</div>
                       <Badge variant="outline">{t.artworks.length}</Badge>
                     </div>
                     <ArtworkList items={t.artworks} />

src/app/(normal)/artworks/animalstudies/page.tsx

@@ -17,17 +17,28 @@ function parseTagsParam(tags: string | string[] | undefined): string[] {
 function expandSelectedWithChildren(
   selectedSlugs: string[],
   tagsForFilter: Array<{
+    id: string;
     slug: string;
-    children: Array<{ slug: string }>;
+    parentId: string | null;
   }>,
 ) {
   const bySlug = new Map(tagsForFilter.map((t) => [t.slug, t]));
+  const childrenByParentId = new Map<string, typeof tagsForFilter>();
+
+  for (const t of tagsForFilter) {
+    if (!t.parentId) continue;
+    const arr = childrenByParentId.get(t.parentId) ?? [];
+    arr.push(t);
+    childrenByParentId.set(t.parentId, arr);
+  }
+
   const out = new Set(selectedSlugs);
 
   for (const slug of selectedSlugs) {
     const t = bySlug.get(slug);
     if (!t) continue;
-    for (const c of t.children ?? []) out.add(c.slug);
+    const children = childrenByParentId.get(t.id) ?? [];
+    for (const c of children) out.add(c.slug);
   }
 
   return Array.from(out);
@@ -41,24 +52,31 @@ export default async function AnimalStudiesPage({
   const { tags } = await searchParams;
 
   const selectedTagSlugs = parseTagsParam(tags);
-  const tagsForFilter = await prisma.artTag.findMany({
-    where: { showOnAnimalPage: true },
+  const tagLinks = await prisma.tagCategory.findMany({
+    where: {
+      showOnAnimalPage: true,
+      category: { name: "Animal Studies" },
+      tag: { isVisible: true },
+    },
     select: {
-      id: true,
-      name: true,
-      slug: true,
-      sortIndex: true,
-      parentId: true,
-      parent: { select: { id: true, name: true, slug: true, sortIndex: true } },
-      children: {
-        where: { showOnAnimalPage: true },
-        select: { id: true, name: true, slug: true, sortIndex: true, parentId: true },
-        orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+      parentTagId: true,
+      tag: {
+        select: { id: true, name: true, slug: true, sortIndex: true },
       },
     },
-    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+    orderBy: [{ tag: { sortIndex: "asc" } }, { tag: { name: "asc" } }],
   });
 
+  const tagsForFilter = tagLinks.map((link) => ({
+    id: link.tag.id,
+    name: link.tag.name,
+    slug: link.tag.slug,
+    sortIndex: link.tag.sortIndex,
+    parentId: link.parentTagId,
+    parent: null,
+    children: [],
+  }));
+
   const expandedTagSlugs = expandSelectedWithChildren(selectedTagSlugs, tagsForFilter);
 
   return (

src/app/(normal)/artworks/single/[id]/page.tsx

@@ -8,7 +8,12 @@ import { PlayCircle } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
-export default async function SingleArtworkPage({ params }: { params: { id: string }; searchParams: Record<string, string | string[] | undefined>; }) {
+export default async function SingleArtworkPage({
+  params,
+}: {
+  params: { id: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
   const { id } = await params;
   const artwork = await prisma.artwork.findUnique({
     where: {
@@ -24,34 +29,44 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
       tags: true,
       variants: true,
       timelapse: { where: { enabled: true } },
-    }
-  })
+    },
+  });
 
-  if (!artwork) return <div>Artwork with this ID could not be found</div>
+  if (!artwork) return <div>Artwork with this ID could not be found</div>;
 
-  const { width, height } = artwork.variants.find((v) => v.type === "resized") ?? { width: 0, height: 0 }
+  const { width, height } = artwork.variants.find(
+    (v) => v.type === "resized",
+  ) ?? { width: 0, height: 0 };
 
   const colors =
-    artwork.colors?.map((c) => c.color?.hex).filter((hex): hex is string => Boolean(hex)) ?? []
+    artwork.colors
+      ?.map((c) => c.color?.hex)
+      .filter((hex): hex is string => Boolean(hex)) ?? [];
 
   const gradientColors = colors.length
     ? colors.join(", ")
-    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
-
+    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)";
 
   return (
-    <div className="px-8 py-4">
+    <div className="px-4 sm:px-8 py-4">
       <div className="relative w-full min-h-10 flex items-center mb-4">
-        <div className="z-10"><ContextBackButton /></div>
+        <div className="z-10 hidden sm:block">
+          <ContextBackButton />
+        </div>
         {artwork.name ? (
-          <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-center">
-            <div className="pointer-events-auto"><h1 className="text-2xl font-bold mb-4 py-4">{artwork.name}</h1></div>
+          <div className="w-full text-center sm:pointer-events-none sm:absolute sm:left-1/2 sm:-translate-x-1/2">
+            <div className="sm:pointer-events-auto">
+              <h1 className="text-xl sm:text-2xl font-bold mb-2 sm:mb-4 py-2 sm:py-4 px-2 sm:px-0 wrap-break-word">
+                {artwork.name}
+              </h1>
+            </div>
           </div>
         ) : null}
       </div>
       <div className="flex flex-col items-center gap-4">
         <div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
-          <div className="relative w-full bg-muted items-center justify-center"
+          <div
+            className="relative w-full bg-muted items-center justify-center"
             style={{ aspectRatio: "4 / 3" }}
           >
             <Link href={`/raw/${artwork.id}`}>
@@ -94,6 +109,9 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
             tags={artwork.tags}
           />
         </div>
+        <div className="w-full flex justify-center sm:hidden">
+          <ContextBackButton className="mx-auto flex justify-center" />
+        </div>
       </div>
     </div>
   );

src/app/(normal)/artworks/tagged/page.tsx

@@ -0,0 +1,48 @@
+import TaggedGallery from "@/components/portfolio/TaggedGallery";
+import { prisma } from "@/lib/prisma";
+
+function parseTagsParam(tags: string | string[] | undefined): string[] {
+  if (!tags) return [];
+  const raw = Array.isArray(tags) ? tags.join(",") : tags;
+  return raw
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+export default async function TaggedPortfolioPage({
+  searchParams,
+}: {
+  searchParams: { tags?: string | string[] };
+}) {
+  const { tags } = await searchParams;
+  const selectedTagSlugs = parseTagsParam(tags);
+
+  const tagsSelected = selectedTagSlugs.length
+    ? await prisma.tag.findMany({
+      where: { slug: { in: selectedTagSlugs } },
+      select: { id: true, name: true, slug: true },
+      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+    })
+    : [];
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            {tagsSelected.length ? (
+              <div className="flex flex-wrap gap-2">
+                List of artworks tagged with:
+                {tagsSelected.map((t) => (
+                  <span key={t.name.toLowerCase()}> {t.name.toLowerCase()}</span>
+                ))}
+              </div>
+            ) : "No tags selected"}
+          </h1>
+        </div>
+      </header>
+      <TaggedGallery tagSlugs={selectedTagSlugs} />
+    </div>
+  );
+}

src/app/(normal)/commissions/page.tsx

@@ -19,7 +19,11 @@ export default async function CommissionsPage() {
       include: {
         options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
         extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
-        customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
+        customInputs: {
+          include: { customInput: true },
+          orderBy: { sortIndex: "asc" },
+        },
+        tags: true,
       },
       orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
     }),
@@ -28,6 +32,7 @@ export default async function CommissionsPage() {
       include: {
         options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
         extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
+        tags: true,
       },
       orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
     }),
@@ -49,7 +54,7 @@ export default async function CommissionsPage() {
           {guidelines?.exampleImageUrl ? (
             <Dialog>
               <DialogTrigger asChild>
-                <Button variant="secondary">View example</Button>
+                <Button variant="secondary">View type example</Button>
               </DialogTrigger>
               <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
                 <DialogHeader className="sr-only">
@@ -80,7 +85,10 @@ export default async function CommissionsPage() {
         <CommissionGuidelines />
       </div>
       <hr />
-      <h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
+      <h2
+        id="commission-request-form"
+        className="text-2xl font-semibold scroll-mt-24"
+      >
         Request a Commission
       </h2>
       <CommissionOrderForm types={commissions} customCards={customCards} />

src/app/(normal)/commissions/status/page.tsx

@@ -2,9 +2,12 @@ import { Badge } from "@/components/ui/badge";
 import { prisma } from "@/lib/prisma";
 
 const statusStyles: Record<string, string> = {
-  ACCEPTED: "bg-sky-500/15 text-sky-300 border-sky-500/30",
-  INPROGRESS: "bg-amber-500/15 text-amber-300 border-amber-500/30",
-  COMPLETED: "bg-emerald-500/15 text-emerald-300 border-emerald-500/30",
+  ACCEPTED:
+    "bg-sky-500/20 text-sky-700 border-sky-500/40 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-500/30",
+  INPROGRESS:
+    "bg-amber-500/20 text-amber-700 border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30",
+  COMPLETED:
+    "bg-emerald-500/20 text-emerald-700 border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30",
 };
 
 const statusLabels: Record<string, string> = {

src/app/globals.css

@@ -105,6 +105,8 @@
   --border: oklch(0.3289 0.0092 268.3843);
   --input: oklch(0.3289 0.0092 268.3843);
   --ring: oklch(0.6132 0.2294 291.7437);
+  --hover: oklch(0.34 0.02 270);
+  --hover-foreground: var(--foreground);
   --chart-1: oklch(0.8003 0.1821 151.7110);
   --chart-2: oklch(0.6132 0.2294 291.7437);
   --chart-3: oklch(0.8077 0.1035 19.5706);

src/components/artworks/ContextBackButton.tsx

@@ -10,7 +10,7 @@ const FROM_TO_PATH: Record<string, string> = {
   "animal-index": "/artworks/animalstudies/index"
 };
 
-export function ContextBackButton() {
+export function ContextBackButton({ className }: { className?: string }) {
   const router = useRouter();
   const sp = useSearchParams();
   const from = sp.get("from") ?? "";
@@ -19,7 +19,7 @@ export function ContextBackButton() {
   if (!target) return null;
 
   return (
-    <div className="w-full max-w-xl">
+    <div className={["w-full max-w-xl", className].filter(Boolean).join(" ")}>
       <Link
         href={target}
         className={[

src/components/commissions/CommissionCard.tsx

@@ -1,52 +1,43 @@
-"use client"
+"use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import type { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client"
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type {
+  CommissionExtra,
+  CommissionOption,
+  CommissionType,
+  CommissionTypeExtra,
+  CommissionTypeOption,
+  Tag,
+} from "@/generated/prisma/client";
+import Link from "next/link";
 
 type CommissionTypeWithItems = CommissionType & {
   options: (CommissionTypeOption & {
-    option: CommissionOption | null
-  })[]
+    option: CommissionOption | null;
+  })[];
   extras: (CommissionTypeExtra & {
-    extra: CommissionExtra | null
-  })[]
-}
-
-export function CommissionCard({ commission }: { commission: CommissionTypeWithItems }) {
-  // const [open, setOpen] = useState(false)
+    extra: CommissionExtra | null;
+  })[];
+  tags: Tag[];
+};
 
+export function CommissionCard({
+  commission,
+}: {
+  commission: CommissionTypeWithItems;
+}) {
   return (
     <div className="flex flex-col h-full">
       <Card className="flex flex-col flex-1">
         <CardHeader>
           <CardTitle className="text-xl font-bold">{commission.name}</CardTitle>
-          <p className="text-muted-foreground text-sm">{commission.description}</p>
+          <p className="text-muted-foreground text-sm">
+            {commission.description}
+          </p>
         </CardHeader>
 
-        <CardContent className="flex flex-col justify-start gap-4">
-          {/* {examples && examples.length > 0 && (
-            <Collapsible open={open} onOpenChange={setOpen}>
-              <CollapsibleTrigger className="text-sm underline text-muted-foreground">
-                {open ? "Hide Examples" : "See Examples"}
-              </CollapsibleTrigger>
-              <CollapsibleContent asChild>
-                <div className="overflow-hidden transition-all data-[state=closed]:max-h-0 data-[state=open]:max-h-[300px]">
-                  <div className="flex gap-2 mt-2 overflow-x-auto">
-                    {examples.map((src, idx) => (
-                      <Image
-                        key={src + idx}
-                        src={src}
-                        width={100}
-                        height={100}
-                        alt={`${type.name} example ${idx + 1}`}
-                        className="h-24 w-auto rounded border"
-                      />
-                    ))}
-                  </div>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          )} */}
+        <CardContent className="flex flex-col flex-1 justify-start gap-4">
           <div>
             <h4 className="font-semibold">Options</h4>
             <ul className="pl-4 list-disc">
@@ -66,7 +57,9 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
           </div>
 
           <div>
-            {commission.extras.length > 0 && <h4 className="font-semibold">Extras</h4>}
+            {commission.extras.length > 0 && (
+              <h4 className="font-semibold">Extras</h4>
+            )}
             <ul className="pl-4 list-disc">
               {commission.extras.map((extra) => (
                 <li key={extra.id}>
@@ -82,16 +75,21 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
               ))}
             </ul>
           </div>
-
-          {/* <div className="flex flex-wrap gap-2">
-            {commission.extras.map((extra) => (
-              <Badge variant="outline" key={extra.id}>
-                {extra.extra?.name}
-              </Badge>
-            ))}
-          </div> */}
         </CardContent>
+        {commission.tags.length > 0 ? (
+          <div className="mt-auto px-6 pb-6">
+            <Link
+              href={`/portfolio/tagged?tags=${encodeURIComponent(
+                commission.tags.map((t) => t.slug).join(","),
+              )}`}
+            >
+              <Button variant="secondary" className="w-full">
+                View example artworks
+              </Button>
+            </Link>
+          </div>
+        ) : null}
       </Card>
     </div>
-  )
+  );
 }

src/components/commissions/CommissionCustomCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
@@ -8,8 +9,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import type { Tag } from "@/generated/prisma/client";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import Link from "next/link";
 
 type CustomCardOption = {
   id: string;
@@ -33,6 +36,7 @@ export type CommissionCustomCardWithItems = {
   description: string | null;
   referenceImageUrl: string | null;
   isSpecialOffer: boolean;
+  tags: Tag[];
   options: CustomCardOption[];
   extras: CustomCardExtra[];
 };
@@ -50,7 +54,7 @@ export function CommissionCustomCard({
             "flex flex-col h-full relative shadow-sm",
             card.isSpecialOffer
               ? "border-2 border-primary/50"
-              : "border-border"
+              : "border-border",
           )}
         >
           {card.isSpecialOffer ? (
@@ -143,6 +147,19 @@ export function CommissionCustomCard({
               </ul>
             </div>
           </CardContent>
+          {card.tags.length > 0 ? (
+            <div className="mt-auto px-6 pb-6">
+              <Link
+                href={`/portfolio/tagged?tags=${encodeURIComponent(
+                  card.tags.map((t) => t.slug).join(","),
+                )}`}
+              >
+                <Button variant="secondary" className="w-full">
+                  View example artworks
+                </Button>
+              </Link>
+            </div>
+          ) : null}
         </Card>
       </div>
     </div>

src/components/gallery/JustifiedGallery.tsx

@@ -44,6 +44,10 @@ type Props = {
   maxRowItems?: number; // desktop
   maxRowItemsMobile?: number; // <640px
   gap?: number; // px
+  gapNarrow?: number; // px for narrower containers
+  gapNarrowMaxWidth?: number; // px breakpoint for gapNarrow
+  gapBreakpoints?: Array<{ maxWidth: number; gap: number }>;
+  debug?: boolean;
   className?: string;
 };
 
@@ -84,11 +88,33 @@ export default function JustifiedGallery({
   maxRowItems = 5,
   maxRowItemsMobile = 3,
   gap = 12,
+  gapNarrow,
+  gapNarrowMaxWidth = 720,
+  gapBreakpoints,
+  debug = false,
   className,
 }: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
   const [containerWidth, setContainerWidth] = useState(0);
+  const effectiveGap = (() => {
+    if (gapBreakpoints && containerWidth > 0) {
+      const sorted = [...gapBreakpoints].sort((a, b) => a.maxWidth - b.maxWidth);
+      for (const bp of sorted) {
+        if (containerWidth <= bp.maxWidth) return bp.gap;
+      }
+    }
+
+    if (
+      gapNarrow != null &&
+      containerWidth > 0 &&
+      containerWidth <= gapNarrowMaxWidth
+    ) {
+      return gapNarrow;
+    }
+
+    return gap;
+  })();
 
   // Measure container width (responsive)
   useEffect(() => {
@@ -125,7 +151,12 @@ export default function JustifiedGallery({
 
     const isMobile = containerWidth < 640;
     const targetH = isMobile ? targetRowHeightMobile : targetRowHeight;
-    const maxItems = isMobile ? maxRowItemsMobile : maxRowItems;
+    const maxItems = (() => {
+      if (containerWidth < 480) return Math.min(2, maxRowItemsMobile);
+      if (containerWidth < 720) return Math.min(3, maxRowItems);
+      if (containerWidth < 1024) return Math.min(4, maxRowItems);
+      return maxRowItems;
+    })();
 
     const rowTiles: RowTile[][] = [];
     let current: Array<{ item: JustifiedGalleryItem; aspect: number }> = [];
@@ -136,7 +167,7 @@ export default function JustifiedGallery({
     const flush = () => {
       if (current.length === 0) return;
 
-      const gaps = gap * (current.length - 1);
+      const gaps = effectiveGap * (current.length - 1);
       const widthWithoutGaps = Math.max(0, available - gaps);
 
       // Compute row height so it exactly fills the row width.
@@ -155,21 +186,64 @@ export default function JustifiedGallery({
       aspectSum = 0;
     };
 
-    for (const it of items) {
+    const workingItems = items.slice();
+
+    for (let i = 0; i < workingItems.length; i += 1) {
+      const it = workingItems[i];
       const a = aspectOf(it);
 
       current.push({ item: it, aspect: a });
       aspectSum += a;
 
       // Estimate the row width if we were to keep targetH
-      const estimatedWidth = aspectSum * targetH + gap * (current.length - 1);
+      const estimatedWidth =
+        aspectSum * targetH + effectiveGap * (current.length - 1);
 
       // If we've filled the row (or reached max items) and have at least 2 tiles, flush.
       if (
         (estimatedWidth >= available || current.length >= maxItems) &&
         current.length > 1
       ) {
+        const gaps = effectiveGap * (current.length - 1);
+        const widthWithoutGaps = Math.max(0, available - gaps);
+        const computedH = widthWithoutGaps / aspectSum;
+
+        // If the row would be shorter than maxRowHeight, reduce items and flush.
+        if (computedH < maxRowHeight && current.length > 1) {
+          const last = current.pop();
+          if (last) {
+            aspectSum -= last.aspect;
+          }
+
+          const limit = widthWithoutGaps / maxRowHeight;
+          let swapped = false;
+
+          for (let look = 1; look <= 2; look += 1) {
+            const idx = i + look;
+            if (idx >= workingItems.length) break;
+            const candidate = workingItems[idx];
+            const candidateAspect = aspectOf(candidate);
+
+            if (aspectSum + candidateAspect <= limit) {
+              workingItems[idx] = last?.item ?? candidate;
+              current.push({ item: candidate, aspect: candidateAspect });
+              aspectSum += candidateAspect;
+              swapped = true;
+              break;
+            }
+          }
+
           flush();
+          if (!swapped && last) {
+            current = [last];
+            aspectSum = last.aspect;
+          } else {
+            current = [];
+            aspectSum = 0;
+          }
+        } else {
+          flush();
+        }
       }
     }
 
@@ -178,7 +252,7 @@ export default function JustifiedGallery({
   }, [
     items,
     containerWidth,
-    gap,
+    effectiveGap,
     targetRowHeight,
     targetRowHeightMobile,
     maxRowHeight,
@@ -192,17 +266,26 @@ export default function JustifiedGallery({
     return `${first}-${last}-${row.length}`;
   }, []);
 
+  const isSmallScreen = containerWidth < 640;
+
   return (
     <div
       ref={containerRef}
       className={cn("mx-auto w-full max-w-6xl", className)}
     >
       <div className="space-y-3">
-        {rows.map((row) => (
+        {rows.map((row, idx) => (
+          <div key={getRowKey(row)}>
             <div
-            key={getRowKey(row)}
-            className="flex justify-center"
-            style={{ gap }}
+              className={cn(
+                "flex",
+                row.length === 1 && (isSmallScreen || idx !== rows.length - 1)
+                  ? "justify-center"
+                  : idx === rows.length - 1
+                    ? "justify-start"
+                    : "justify-between",
+              )}
+              style={{ columnGap: effectiveGap }}
             >
               {row.map((t) => (
                 <GalleryTile
@@ -214,6 +297,21 @@ export default function JustifiedGallery({
                 />
               ))}
             </div>
+            {debug ? (
+              <div className="text-xs text-muted-foreground font-mono">
+                {`row ${idx + 1} | h=${Math.round(row[0]?.h ?? 0)} | w=${Math.round(
+                  row.reduce((sum, t) => sum + t.w, 0) +
+                  effectiveGap * (row.length - 1),
+                )} | items=${row.length} | `}
+                {row
+                  .map(
+                    (t) =>
+                      `${t.item.id}:${Math.round(t.w)}x${Math.round(t.h)} (src ${t.item.width}x${t.item.height})`,
+                  )
+                  .join(" | ")}
+              </div>
+            ) : null}
+          </div>
         ))}
       </div>
 

src/components/portfolio/PortfolioGallery.tsx

@@ -31,6 +31,12 @@ export default function PortfolioGallery({
   const [items, setItems] = useState<PortfolioArtworkItem[]>([]);
   const [done, setDone] = useState(false);
   const [loading, setLoading] = useState(false);
+  const showScreenDebug = false;
+  const [screen, setScreen] = useState<{
+    width: number;
+    height: number;
+    dpr: number;
+  } | null>(null);
 
   const inFlight = useRef(false);
   const doneRef = useRef(false);
@@ -80,6 +86,26 @@ export default function PortfolioGallery({
     void loadMore();
   }, [loadMore]);
 
+  useEffect(() => {
+    if (!showScreenDebug) return;
+
+    const update = () => {
+      setScreen({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        dpr: window.devicePixelRatio || 1,
+      });
+    };
+
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, []);
+
   const galleryItems: JustifiedGalleryItem[] = items.map((it) => ({
     id: it.id,
     name: it.name,
@@ -90,17 +116,17 @@ export default function PortfolioGallery({
     dominantHex: it.dominantHex,
   }));
 
-  useEffect(() => {
-    if (items.length === 0) return;
-    // Debug: inspect dominantHex values coming from the server.
-    console.log(
-      "[PortfolioGallery] dominantHex sample",
-      items.slice(0, 5).map((it) => ({
-        id: it.id,
-        dominantHex: it.dominantHex,
-      }))
-    );
-  }, [items]);
+  // useEffect(() => {
+  //   if (items.length === 0) return;
+  //   // Debug: inspect dominantHex values coming from the server.
+  //   console.log(
+  //     "[PortfolioGallery] dominantHex sample",
+  //     items.slice(0, 5).map((it) => ({
+  //       id: it.id,
+  //       dominantHex: it.dominantHex,
+  //     }))
+  //   );
+  // }, [items]);
 
   if (!loading && done && galleryItems.length === 0) {
     return (
@@ -111,17 +137,28 @@ export default function PortfolioGallery({
   }
 
   return (
-    <div className="w-full">
+    <div className="relative w-full">
+      {showScreenDebug && screen ? (
+        <div className="pointer-events-none absolute right-2 top-2 z-10 rounded border border-border/60 bg-background/80 px-2 py-1 text-[11px] font-mono text-muted-foreground shadow-sm">
+          Screen {screen.width} × {screen.height} · {screen.dpr}x
+        </div>
+      ) : null}
       <JustifiedGallery
         items={galleryItems}
         hrefFrom="portfolio"
         showCaption={false}
+        debug={false}
         targetRowHeight={160}
         targetRowHeightMobile={160}
         maxRowHeight={300}
         maxRowItems={5}
         maxRowItemsMobile={1}
         gap={12}
+        gapBreakpoints={[
+          { maxWidth: 685, gap: 6 },
+          { maxWidth: 910, gap: 8 },
+          { maxWidth: 1130, gap: 10 },
+        ]}
         onLoadMore={done ? undefined : () => void loadMore()}
         hasMore={!done}
         isLoadingMore={loading}

src/components/portfolio/TaggedGallery.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import type {
+  Cursor,
+  TaggedArtworkItem,
+} from "@/actions/portfolio/getTaggedArtworksPage";
+import { getTaggedArtworksPage } from "@/actions/portfolio/getTaggedArtworksPage";
+import JustifiedGallery, {
+  type JustifiedGalleryItem,
+} from "@/components/gallery/JustifiedGallery";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export default function TaggedGallery({ tagSlugs }: { tagSlugs: string[] }) {
+  const normalizedSlugs = useMemo(
+    () => tagSlugs.map((s) => s.trim()).filter(Boolean),
+    [tagSlugs],
+  );
+  const resetKey = useMemo(
+    () => normalizedSlugs.slice().sort().join(","),
+    [normalizedSlugs],
+  );
+
+  const [items, setItems] = useState<TaggedArtworkItem[]>([]);
+  const [done, setDone] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const inFlight = useRef(false);
+  const doneRef = useRef(false);
+  doneRef.current = done;
+  const cursorRef = useRef<Cursor>(null);
+
+  useEffect(() => {
+    setItems([]);
+    setDone(false);
+    doneRef.current = false;
+    inFlight.current = false;
+    cursorRef.current = null;
+  }, [resetKey]);
+
+  const loadMore = useCallback(async () => {
+    if (inFlight.current || doneRef.current || normalizedSlugs.length === 0)
+      return 0;
+    inFlight.current = true;
+    setLoading(true);
+
+    try {
+      const data = await getTaggedArtworksPage({
+        take: 60,
+        cursor: cursorRef.current,
+        tagSlugs: normalizedSlugs,
+        onlyPublished: true,
+      });
+
+      setItems((prev) => {
+        const seen = new Set(prev.map((x) => x.id));
+        const next = data.items.filter((x) => !seen.has(x.id));
+        return prev.concat(next);
+      });
+
+      cursorRef.current = data.nextCursor;
+      if (!data.nextCursor) setDone(true);
+
+      return data.items.length;
+    } finally {
+      setLoading(false);
+      inFlight.current = false;
+    }
+  }, [normalizedSlugs]);
+
+  useEffect(() => {
+    void loadMore();
+  }, [loadMore]);
+
+  const galleryItems: JustifiedGalleryItem[] = items.map((it) => ({
+    id: it.id,
+    name: it.name,
+    altText: it.altText,
+    fileKey: it.fileKey,
+    width: it.thumbW,
+    height: it.thumbH,
+    dominantHex: it.dominantHex,
+  }));
+
+  if (!loading && done && galleryItems.length === 0) {
+    return (
+      <p className="text-muted-foreground text-center py-20">
+        No artworks to display
+      </p>
+    );
+  }
+
+  return (
+    <div className="w-full">
+      <JustifiedGallery
+        items={galleryItems}
+        hrefFrom="portfolio"
+        showCaption={false}
+        debug={false}
+        targetRowHeight={160}
+        targetRowHeightMobile={160}
+        maxRowHeight={300}
+        maxRowItems={5}
+        maxRowItemsMobile={1}
+        gap={12}
+        gapBreakpoints={[
+          { maxWidth: 685, gap: 6 },
+          { maxWidth: 910, gap: 8 },
+          { maxWidth: 1130, gap: 10 },
+        ]}
+        onLoadMore={done ? undefined : () => void loadMore()}
+        hasMore={!done}
+        isLoadingMore={loading}
+      />
+    </div>
+  );
+}