Unify portfolio and animal studies galleries

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

@@ -86,7 +86,7 @@ export default async function AnimalListPage() {
         {list.map((a) => (
           <li key={a.id}>
             <Link
-              href={`/artworks/single/${a.id}`}
+              href={`/artworks/single/${a.id}?from=animal-index`}
               className="
   inline-flex items-center gap-2
   rounded-md px-2 py-1

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>
   );
-}
+}

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

@@ -1,6 +1,6 @@
-import { PortfolioFilters } from "@/actions/portfolio/getPortfolioArtworksPage";
-import ColorMasonryGallery from "@/components/portfolio/ColorMasonryGallery";
+import type { PortfolioFilters } from "@/actions/portfolio/getPortfolioArtworksPage";
 import PortfolioFiltersBar from "@/components/portfolio/PortfolioFiltersBar";
+import PortfolioGallery from "@/components/portfolio/PortfolioGallery";
 import { prisma } from "@/lib/prisma";
 
 type SearchParams = {
@@ -14,11 +14,11 @@ function parseFilters(sp: SearchParams): PortfolioFilters {
   const yearRaw = sp.year?.trim();
   if (yearRaw && yearRaw !== "all") {
     const y = Number(yearRaw);
-    if (Number.isFinite(y) && y > 0) (filters as any).year = y;
+    if (Number.isFinite(y) && y > 0) filters.year = y;
   }
 
   const qRaw = sp.q?.trim();
-  if (qRaw) (filters as any).q = qRaw;
+  if (qRaw) filters.q = qRaw;
 
   return filters;
 }
@@ -53,12 +53,22 @@ export default async function PortfolioPage({
 
   return (
     <div className="mx-auto w-full max-w-6xl px-4 py-8">
-      <div className="mb-6">
-        <h1 className="text-2xl font-semibold">Portfolio</h1>
-        <PortfolioFiltersBar years={years} />
-      </div>
+      <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">
+            Portfolio
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Browse all published artworks.
+          </p>
+        </div>
 
-      <ColorMasonryGallery filters={filters} />
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+          <PortfolioFiltersBar years={years} />
+        </div>
+      </header>
+
+      <PortfolioGallery filters={filters} />
     </div>
   );
 }

src/app/globals.css

@@ -173,7 +173,7 @@
 
 .dark {
   /* Inky navy background (clearly not neutral) */
-  --background: oklch(0.12 0.035 255);
+  --background: oklch(15.774% 0.03835 263.588);
   --foreground: oklch(0.95 0.012 85);
 
   /* Surfaces */