Enhance tags

src/components/tags/AliasEditor.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+
+export default function AliasEditor({
+  value,
+  onChange,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+}) {
+  const [draft, setDraft] = useState("");
+
+  const add = () => {
+    const v = draft.trim();
+    if (!v) return;
+    if (value.includes(v)) {
+      setDraft("");
+      return;
+    }
+    onChange([...value, v]);
+    setDraft("");
+  };
+
+  const remove = (alias: string) => {
+    onChange(value.filter((a) => a !== alias));
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <Input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder='Add alias, e.g. "anthro"'
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              add();
+            }
+          }}
+        />
+        <Button type="button" variant="secondary" onClick={add}>
+          Add
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {value.length === 0 ? (
+          <span className="text-sm text-muted-foreground">No aliases.</span>
+        ) : (
+          value.map((a) => (
+            <span key={a} className="inline-flex items-center gap-2 rounded bg-muted px-2 py-1 text-sm">
+              <span className="font-mono">{a}</span>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground"
+                onClick={() => remove(a)}
+                aria-label={`Remove alias ${a}`}
+              >
+                ×
+              </button>
+            </span>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/components/tags/EditTagForm.tsx

@@ -5,28 +5,30 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, 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";
-import { tagSchema } from "@/schemas/artworks/tagSchema";
+import { ArtCategory, ArtTag, ArtTagAlias } from "@/generated/prisma/client";
+import { TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod/v4";
 import MultipleSelector from "../ui/multiselect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import AliasEditor from "./AliasEditor";
 
-export default function EditTagForm({ tag, categories }: { tag: ArtTag & { categories: ArtCategory[] }, categories: ArtCategory[] }) {
+export default function EditTagForm({ tag, categories, allTags }: { tag: ArtTag & { categories: ArtCategory[], aliases: ArtTagAlias[] }, categories: ArtCategory[], allTags: ArtTag[] }) {
   const router = useRouter();
-  const form = useForm<z.infer<typeof tagSchema>>({
+  const form = useForm<TagFormInput>({
     resolver: zodResolver(tagSchema),
     defaultValues: {
       name: tag.name,
-      slug: tag.slug,
       description: tag.description || "",
       categoryIds: tag.categories?.map(cat => cat.id) ?? [],
+      parentId: (tag as any).parentId ?? null,
+      aliases: tag.aliases?.map(a => a.alias) ?? []
     }
   })
 
-  async function onSubmit(values: z.infer<typeof tagSchema>) {
+  async function onSubmit(values: TagFormInput) {
     try {
       const updated = await updateTag(tag.id, values)
       console.log("Art tag updated:", updated)
@@ -38,6 +40,10 @@ export default function EditTagForm({ tag, categories }: { tag: ArtTag & { categ
     }
   }
 
+  const parentOptions = allTags
+    .filter((t) => t.id !== tag.id) // exclude self
+    .sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <div className="flex flex-col gap-8">
       <Form {...form}>
@@ -56,19 +62,6 @@ export default function EditTagForm({ tag, categories }: { tag: ArtTag & { categ
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="slug"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Slug</FormLabel>
-                <FormControl>
-                  <Input {...field} placeholder="The slug shown in the navigation" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
           <FormField
             control={form.control}
             name="description"
@@ -113,6 +106,47 @@ export default function EditTagForm({ tag, categories }: { tag: ArtTag & { categ
               )
             }}
           />
+          <FormField
+            control={form.control}
+            name="parentId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Parent tag</FormLabel>
+                <Select
+                  value={field.value ?? "none"}
+                  onValueChange={(v) => field.onChange(v === "none" ? null : v)}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="No parent (top-level tag)" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="none">No parent</SelectItem>
+                    {parentOptions.map((t) => (
+                      <SelectItem key={t.id} value={t.id}>
+                        {t.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="aliases"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Aliases</FormLabel>
+                <FormControl>
+                  <AliasEditor value={field.value ?? []} onChange={field.onChange} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           <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

@@ -5,29 +5,31 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ArtCategory } from "@/generated/prisma/client";
-import { tagSchema } from "@/schemas/artworks/tagSchema";
+import { ArtCategory, ArtTag } from "@/generated/prisma/client";
+import { TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod/v4";
 import MultipleSelector from "../ui/multiselect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import AliasEditor from "./AliasEditor";
 
 
-export default function NewTagForm({ categories }: { categories: ArtCategory[] }) {
+export default function NewTagForm({ categories, allTags }: { categories: ArtCategory[], allTags: ArtTag[] }) {
   const router = useRouter();
-  const form = useForm<z.infer<typeof tagSchema>>({
+  const form = useForm<TagFormInput>({
     resolver: zodResolver(tagSchema),
     defaultValues: {
       name: "",
-      slug: "",
       description: "",
       categoryIds: [],
+      parentId: null,
+      aliases: [],
     }
   })
 
-  async function onSubmit(values: z.infer<typeof tagSchema>) {
+  async function onSubmit(values: TagFormInput) {
     try {
       const created = await createTag(values)
       console.log("Art tag created:", created)
@@ -39,6 +41,10 @@ export default function NewTagForm({ categories }: { categories: ArtCategory[] }
     }
   }
 
+  const parentOptions = allTags
+    // .filter((t) => t.id !== tag.id) // exclude self
+    .sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <div className="flex flex-col gap-8">
       <Form {...form}>
@@ -57,19 +63,6 @@ export default function NewTagForm({ categories }: { categories: ArtCategory[] }
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="slug"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Slug</FormLabel>
-                <FormControl>
-                  <Input {...field} placeholder="The slug shown in the navigation" />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
           <FormField
             control={form.control}
             name="description"
@@ -114,6 +107,47 @@ export default function NewTagForm({ categories }: { categories: ArtCategory[] }
               )
             }}
           />
+          <FormField
+            control={form.control}
+            name="parentId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Parent tag</FormLabel>
+                <Select
+                  value={field.value ?? "none"}
+                  onValueChange={(v) => field.onChange(v === "none" ? null : v)}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="No parent (top-level tag)" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="none">No parent</SelectItem>
+                    {parentOptions.map((t) => (
+                      <SelectItem key={t.id} value={t.id}>
+                        {t.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="aliases"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Aliases</FormLabel>
+                <FormControl>
+                  <AliasEditor value={field.value ?? []} onChange={field.onChange} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           <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

@@ -0,0 +1,136 @@
+"use client";
+
+import { deleteTag } from "@/actions/tags/deleteTag";
+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 TagRow = {
+  id: string;
+  name: string;
+  slug: string;
+  parent: { id: string; name: string } | null;
+  aliases: { alias: string }[];
+  categories: { id: string; name: string }[];
+  _count: { artworks: number };
+};
+
+function Chips({
+  values,
+  empty = "—",
+  max = 4,
+  mono = false,
+}: {
+  values: string[];
+  empty?: string;
+  max?: number;
+  mono?: boolean;
+}) {
+  if (values.length === 0) return <span className="text-muted-foreground">{empty}</span>;
+
+  const shown = values.slice(0, max);
+  const extra = values.length - shown.length;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {shown.map((v) => (
+        <span
+          key={v}
+          className={[
+            "rounded bg-muted px-2 py-1 text-xs",
+            mono ? "font-mono" : "",
+          ].join(" ")}
+          title={v}
+        >
+          {v}
+        </span>
+      ))}
+      {extra > 0 ? <span className="text-xs text-muted-foreground">+{extra} more</span> : null}
+    </div>
+  );
+}
+
+export default function TagTable({ tags }: { tags: TagRow[] }) {
+  const handleDelete = (id: string) => {
+    deleteTag(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-[18%]">Aliases</TableHead>
+            <TableHead className="w-[22%]">Categories</TableHead>
+            <TableHead className="w-[14%]">Parent</TableHead>
+            <TableHead className="w-[8%] text-right">Artworks</TableHead>
+            <TableHead className="w-[10%] text-right" />
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          {tags.map((t) => (
+            <TableRow key={t.id}>
+              <TableCell className="font-medium">{t.name}</TableCell>
+
+              <TableCell className="font-mono text-sm text-muted-foreground">
+                #{t.slug}
+              </TableCell>
+
+              <TableCell>
+                <Chips values={t.aliases.map((a) => a.alias)} mono max={5} />
+              </TableCell>
+
+              <TableCell>
+                <Chips values={t.categories.map((c) => c.name)} max={4} />
+              </TableCell>
+
+              <TableCell>
+                {t.parent ? (
+                  <Link href={`/tags/${t.parent.id}`} className="underline underline-offset-2">
+                    {t.parent.name}
+                  </Link>
+                ) : (
+                  <span className="text-muted-foreground">—</span>
+                )}
+              </TableCell>
+
+              <TableCell className="text-right tabular-nums">
+                {t._count.artworks}
+              </TableCell>
+
+              <TableCell className="text-right">
+                <div className="flex justify-end gap-2">
+                  <Link href={`/tags/${t.id}`} aria-label={`Edit ${t.name}`}>
+                    <Button size="icon" variant="secondary">
+                      <PencilIcon className="h-4 w-4" />
+                    </Button>
+                  </Link>
+
+                  <Button
+                    size="icon"
+                    variant="destructive"
+                    aria-label={`Delete ${t.name}`}
+                    onClick={() => handleDelete(t.id)}
+                  >
+                    <Trash2Icon className="h-4 w-4" />
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/uploads/UploadImageForm.tsx

@@ -44,7 +44,7 @@ export default function UploadImageForm() {
     const image = await createImage(values)
     if (image) {
       toast.success("Image created")
-      router.push(`/portfolio/images/${image.id}`)
+      router.push(`/artworks/${image.id}`)
     }
   }