Refactor porfolio page

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

@@ -1,14 +1,64 @@
+import { PortfolioFilters } from "@/actions/portfolio/getPortfolioArtworksPage";
 import ColorMasonryGallery from "@/components/portfolio/ColorMasonryGallery";
+import PortfolioFiltersBar from "@/components/portfolio/PortfolioFiltersBar";
+import { prisma } from "@/lib/prisma";
+
+type SearchParams = {
+  year?: string;
+  q?: string;
+};
+
+function parseFilters(sp: SearchParams): PortfolioFilters {
+  const filters: 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;
+  }
+
+  const qRaw = sp.q?.trim();
+  if (qRaw) (filters as any).q = qRaw;
+
+  return filters;
+}
+
+async function getExistingArtworkYears(): Promise<number[]> {
+  const rows = await prisma.artwork.findMany({
+    where: {
+      published: true,
+      year: { not: null },
+    },
+    select: { year: true },
+    distinct: ["year"],
+    orderBy: { year: "desc" },
+  });
+
+  return rows
+    .map((r) => r.year)
+    .filter((y): y is number => typeof y === "number");
+}
+
+export default async function PortfolioPage({
+  searchParams,
+}: {
+  // Per your requirement: catch searchParams async
+  searchParams: Promise<SearchParams>;
+}) {
+  const sp = await searchParams;
+  const [years, filters] = await Promise.all([
+    getExistingArtworkYears().catch(() => []), // never let this break rendering
+    Promise.resolve(parseFilters(sp)),
+  ]);
 
-export default 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>
-        <p className="text-sm text-muted-foreground">Browse artworks ordered by color.</p>
       </div>
 
-      <ColorMasonryGallery />
+      <PortfolioFiltersBar years={years} />
+      <ColorMasonryGallery filters={filters} />
     </div>
   );
 }