Add filtering

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

@@ -1,32 +1,109 @@
 import ArtworkThumbGallery from "@/components/artworks/ArtworkThumbGallery";
+import TagFilterDialog from "@/components/artworks/TagFilterDialog";
+import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
+import { ListIcon } from "lucide-react";
+import Link from "next/link";
+
+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);
+}
+
+function expandSelectedWithChildren(
+  selectedSlugs: string[],
+  tagsForFilter: Array<{
+    slug: string;
+    children: Array<{ slug: string }>;
+  }>
+) {
+  const bySlug = new Map(tagsForFilter.map((t) => [t.slug, t]));
+  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);
+  }
+
+  return Array.from(out);
+}
+
+export default async function AnimalStudiesPage({ searchParams }: { searchParams: { tags?: string | string[] } }) {
+  const { tags } = await searchParams;
+
+  const selectedTagSlugs = parseTagsParam(tags);
+  const tagsForFilter = await prisma.artTag.findMany({
+    where: { showOnAnimalPage: 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" }],
+      },
+    },
+    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+  });
+
+  const expandedTagSlugs = expandSelectedWithChildren(selectedTagSlugs, tagsForFilter);
 
-export default async function AnimalStudiesPage() {
   const artworks = await prisma.artwork.findMany({
     where: {
-      categories: {
-        some: {
-          name: "Animal Studies"
-        }
-      },
-      published: true
+      categories: { some: { name: "Animal Studies" } },
+      published: true,
+      ...(expandedTagSlugs.length
+        ? { tags: { some: { slug: { in: expandedTagSlugs } } } }
+        : {}),
     },
     include: {
       file: true,
       metadata: true,
       tags: true,
-      variants: true
+      variants: true,
     },
-    orderBy: [{ sortKey: "asc" }, { id: "asc" }]
-  })
+    orderBy: [{ sortKey: "asc" }, { id: "asc" }],
+  });
 
   // console.log(JSON.stringify(artworks, null, 4))
 
   return (
     <div className="flex flex-col gap-4 p-4">
-      <div>
-        <h1 className="text-2xl font-bold text-center">Animal studies</h1>
-      </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">
+            Animal studies
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {selectedTagSlugs.length > 0
+              ? `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}
+          />
+
+          <Button asChild variant="secondary" className="h-11 gap-2">
+            <Link href="/animallist">
+              <ListIcon className="h-4 w-4" />
+              List all used animals
+            </Link>
+          </Button>
+        </div>
+      </header>
 
       <ArtworkThumbGallery items={artworks} fit={{ mode: "fixedWidth", width: 300 }} />
     </div>

src/app/(normal)/page.tsx

@@ -1,8 +1,55 @@
+import { ArrowBigRight } from "lucide-react";
 
 export default function Home() {
   return (
-    <div>
-      Home
-    </div>
+    <div className="flex flex-col gap-10 px-4 py-8">
+      {/* Hero Section */}
+      <div className="text-center flex flex-col items-center justify-center mt-10 px-4">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">
+          Welcome to my place!
+        </h1>
+        <p className="text-muted-foreground max-w-xl text-lg mb-6">
+          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
+        </p>
+        <p className="text-muted-foreground max-w-xl text-lg mb-6">
+          If you want to commission me<br />you can find all the information you need here:<br /> <a href="https://linktr.ee/gaertan" target="_blank" className="underline text-primary"  ><ArrowBigRight className="w-4 h-4 inline" /> Linktree</a>
+        </p>
+
+        {/* Search */}
+        {/* <div className="relative w-full max-w-lg">
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <Search className="w-4 h-4" />
+          </span>
+          <Input
+            type="text"
+            placeholder="Search artworks, commissions, pages..."
+            className="p-6 pl-10"
+          />
+        </div> */}
+      </div>
+
+
+      {/* Section Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {/* <p>
+          If you want to commission me you can find all the information you need under following link: <a href="https://linktr.ee/gaertan" target="_blank">Linktree</a>
+        </p> */}
+        {/* {sections.map((section) => (
+          <Link href={section.href} key={section.title}>
+            <Card className="hover:shadow-xl transition-shadow group">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <section.icon className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
+                  {section.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                {section.description}
+              </CardContent>
+            </Card>
+          </Link>
+        ))} */}
+      </div>
+    </div >
   );
 }