Unify portfolio and animal studies galleries

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