Add animal bool to tags

src/components/categories/CategoryTable.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { deleteCategory } from "@/actions/categories/deleteCategory";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import Link from "next/link";
+
+type CatRow = {
+  id: string;
+  name: string;
+  slug: string;
+  _count: { artworks: number, tags: number };
+};
+
+export default function CategoryTable({ categories }: { categories: CatRow[] }) {
+  const handleDelete = (id: string) => {
+    deleteCategory(id);
+  };
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[16%]">Name</TableHead>
+            <TableHead className="w-[12%]">Slug</TableHead>
+            <TableHead className="w-[8%] text-right">Tags</TableHead>
+            <TableHead className="w-[8%] text-right">Artworks</TableHead>
+            <TableHead className="w-[10%] text-right" />
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {categories.map((c) => (
+            <TableRow key={c.id}>
+              <TableCell className="font-medium">{c.name}</TableCell>
+
+              <TableCell className="font-mono text-sm text-muted-foreground">
+                {c.slug}
+              </TableCell>
+
+              <TableCell className="text-right tabular-nums">
+                {c._count.tags}
+              </TableCell>
+
+              <TableCell className="text-right tabular-nums">
+                {c._count.artworks}
+              </TableCell>
+
+              <TableCell className="text-right">
+                <div className="flex justify-end gap-2">
+                  <Link href={`/categories/${c.id}`} aria-label={`Edit ${c.name}`}>
+                    <Button size="icon" variant="secondary">
+                      <PencilIcon className="h-4 w-4" />
+                    </Button>
+                  </Link>
+
+                  <Button
+                    size="icon"
+                    variant="destructive"
+                    aria-label={`Delete ${c.name}`}
+                    onClick={() => handleDelete(c.id)}
+                  >
+                    <Trash2Icon className="h-4 w-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/components/global/TopNav.tsx

@@ -23,6 +23,10 @@ const artworkItems = [
     title: "Tags",
     href: "/tags",
   },
+  {
+    title: "Animals",
+    href: "/animals",
+  },
 ]
 
 // const portfolioItems = [

src/components/tags/EditTagForm.tsx

@@ -2,7 +2,7 @@
 
 import { updateTag } from "@/actions/tags/updateTag";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { ArtCategory, ArtTag, ArtTagAlias } from "@/generated/prisma/client";
@@ -13,6 +13,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import MultipleSelector from "../ui/multiselect";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Switch } from "../ui/switch";
 import AliasEditor from "./AliasEditor";
 
 export default function EditTagForm({ tag, categories, allTags }: { tag: ArtTag & { categories: ArtCategory[], aliases: ArtTagAlias[] }, categories: ArtCategory[], allTags: ArtTag[] }) {
@@ -24,6 +25,7 @@ export default function EditTagForm({ tag, categories, allTags }: { tag: ArtTag
       description: tag.description || "",
       categoryIds: tag.categories?.map(cat => cat.id) ?? [],
       parentId: (tag as any).parentId ?? null,
+      showOnAnimalPage: tag.showOnAnimalPage ?? false,
       aliases: tag.aliases?.map(a => a.alias) ?? []
     }
   })
@@ -147,6 +149,23 @@ export default function EditTagForm({ tag, categories, allTags }: { tag: ArtTag
               </FormItem>
             )}
           />
+          <div className="flex">
+            <FormField
+              control={form.control}
+              name="showOnAnimalPage"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel>Show on animal page</FormLabel>
+                    <FormDescription></FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
             <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>

src/components/tags/NewTagForm.tsx

@@ -2,7 +2,7 @@
 
 import { createTag } from "@/actions/tags/createTag";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { ArtCategory, ArtTag } from "@/generated/prisma/client";
@@ -13,6 +13,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import MultipleSelector from "../ui/multiselect";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Switch } from "../ui/switch";
 import AliasEditor from "./AliasEditor";
 
 
@@ -25,6 +26,7 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
       description: "",
       categoryIds: [],
       parentId: null,
+      showOnAnimalPage: false,
       aliases: [],
     }
   })
@@ -148,6 +150,23 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
               </FormItem>
             )}
           />
+          <div className="flex">
+            <FormField
+              control={form.control}
+              name="showOnAnimalPage"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel>Show on animal page</FormLabel>
+                    <FormDescription></FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
             <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>

src/components/tags/TagTable.tsx

@@ -18,6 +18,7 @@ type TagRow = {
   name: string;
   slug: string;
   parent: { id: string; name: string } | null;
+  showOnAnimalPage: boolean;
   aliases: { alias: string }[];
   categories: { id: string; name: string }[];
   _count: { artworks: number };
@@ -73,6 +74,7 @@ export default function TagTable({ tags }: { tags: TagRow[] }) {
             <TableHead className="w-[18%]">Aliases</TableHead>
             <TableHead className="w-[22%]">Categories</TableHead>
             <TableHead className="w-[14%]">Parent</TableHead>
+            <TableHead className="w-[8%]">ShowAnimal</TableHead>
             <TableHead className="w-[8%] text-right">Artworks</TableHead>
             <TableHead className="w-[10%] text-right" />
           </TableRow>
@@ -105,6 +107,10 @@ export default function TagTable({ tags }: { tags: TagRow[] }) {
                 )}
               </TableCell>
 
+              <TableCell className="text-right tabular-nums">
+                {t.showOnAnimalPage ? "yes" : "no"}
+              </TableCell>
+
               <TableCell className="text-right tabular-nums">
                 {t._count.artworks}
               </TableCell>