Unify portfolio and animal studies galleries

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

@@ -1,4 +1,4 @@
-import ArtworkThumbGallery from "@/components/artworks/ArtworkThumbGallery";
+import AnimalStudiesGallery from "@/components/animalStudies/AnimalStudiesGallery";
 import TagFilterDialog from "@/components/artworks/TagFilterDialog";
 import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
@@ -19,7 +19,7 @@ function expandSelectedWithChildren(
   tagsForFilter: Array<{
     slug: string;
     children: Array<{ slug: string }>;
-  }>
+  }>,
 ) {
   const bySlug = new Map(tagsForFilter.map((t) => [t.slug, t]));
   const out = new Set(selectedSlugs);
@@ -33,7 +33,11 @@ function expandSelectedWithChildren(
   return Array.from(out);
 }
 
-export default async function AnimalStudiesPage({ searchParams }: { searchParams: { tags?: string | string[] } }) {
+export default async function AnimalStudiesPage({
+  searchParams,
+}: {
+  searchParams: { tags?: string | string[] };
+}) {
   const { tags } = await searchParams;
 
   const selectedTagSlugs = parseTagsParam(tags);
@@ -57,28 +61,6 @@ export default async function AnimalStudiesPage({ searchParams }: { searchParams
 
   const expandedTagSlugs = expandSelectedWithChildren(selectedTagSlugs, tagsForFilter);
 
-  const artworks = await prisma.artwork.findMany({
-    where: {
-      categories: { some: { name: "Animal Studies" } },
-      published: true,
-      ...(expandedTagSlugs.length
-        ? { tags: { some: { slug: { in: expandedTagSlugs } } } }
-        : {}),
-    },
-    include: {
-      file: true,
-      metadata: true,
-      tags: true,
-      variants: true,
-      colors: {
-        select: { color: { select: { hex: true } } }
-      }
-    },
-    orderBy: [{ sortKey: "asc" }, { id: "asc" }],
-  });
-
-  // console.log(JSON.stringify(artworks, null, 4))
-
   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">
@@ -88,16 +70,14 @@ export default async function AnimalStudiesPage({ searchParams }: { searchParams
           </h1>
           <p className="text-sm text-muted-foreground">
             {selectedTagSlugs.length > 0
-              ? `Filtered by ${selectedTagSlugs.length} tag${selectedTagSlugs.length === 1 ? "" : "s"}`
+              ? `Filtered by ${selectedTagSlugs.length} tag${selectedTagSlugs.length === 1 ? "" : "s"
+              }`
               : "Browse all published artworks in this category."}
           </p>
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-          <TagFilterDialog
-            tags={tagsForFilter}
-            selectedTagSlugs={selectedTagSlugs}
-          />
+          <TagFilterDialog tags={tagsForFilter} selectedTagSlugs={selectedTagSlugs} />
 
           <Button asChild type="button" variant="secondary" className="h-11 gap-2">
             <Link href="/artworks/animalstudies/index">
@@ -108,7 +88,7 @@ export default async function AnimalStudiesPage({ searchParams }: { searchParams
         </div>
       </header>
 
-      <ArtworkThumbGallery items={artworks} fit={{ mode: "fixedWidth", width: 300 }} />
+      <AnimalStudiesGallery key={expandedTagSlugs.join(",")} tagSlugs={expandedTagSlugs} />
     </div>
   );
-}
+}