Add portfolio thingies

src/components/artworks/ArtworkColorProcessor.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { getArtworkColorStats } from "@/actions/colors/getArtworkColorStats";
+import { processPendingArtworkColors } from "@/actions/colors/processPendingArtworkColors";
+import { Button } from "@/components/ui/button";
+import * as React from "react";
+
+export function ArtworkColorProcessor() {
+  const [stats, setStats] = React.useState<Awaited<ReturnType<typeof getArtworkColorStats>> | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [msg, setMsg] = React.useState<string | null>(null);
+
+  const refreshStats = async () => {
+    const s = await getArtworkColorStats();
+    setStats(s);
+  };
+
+  React.useEffect(() => {
+    void refreshStats();
+  }, []);
+
+  const run = async () => {
+    setLoading(true);
+    setMsg(null);
+    try {
+      const res = await processPendingArtworkColors({
+        limit: 50,
+        includeFailed: true,
+        includeMissingSortKey: true,
+      });
+      setMsg(`Processed ${res.processed}: ${res.ok} ok, ${res.failed} failed`);
+      await refreshStats();
+    } catch (e) {
+      setMsg(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const done =
+    stats &&
+    stats.pending === 0 &&
+    stats.processing === 0 &&
+    stats.failed === 0 &&
+    stats.missingSortKey === 0;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-4">
+        <Button onClick={run} disabled={loading || done}>
+          {done ? "All colors processed" : loading ? "Processing…" : "Process pending colors"}
+        </Button>
+
+        {stats && (
+          <span className="text-sm text-muted-foreground">
+            Ready {stats.ready}/{stats.total}
+            {stats.failed > 0 && ` · Failed ${stats.failed}`}
+          </span>
+        )}
+      </div>
+
+      {msg && <p className="text-sm text-muted-foreground">{msg}</p>}
+    </div>
+  );
+}

src/components/global/TopNav.tsx

@@ -25,6 +25,17 @@ const artworkItems = [
   }
 ]
 
+const commissionItems = [
+  {
+    title: "Commissions",
+    href: "/commissions",
+  },
+  {
+    title: "Types",
+    href: "/commissions/types",
+  }
+]
+
 // const portfolioItems = [
 //   {
 //     title: "Images",
@@ -104,9 +115,22 @@ export default function TopNav() {
         </NavigationMenuItem>
 
         <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/commissions">Commissions</Link>
-          </NavigationMenuLink>
+          <NavigationMenuTrigger>Commissions</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-50 gap-4">
+              {commissionItems.map((item) => (
+                <li key={item.title}>
+                  <NavigationMenuLink asChild>
+                    <Link href={item.href}>
+                      <div className="text-sm leading-none font-medium">{item.title}</div>
+                      <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                      </p>
+                    </Link>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
         </NavigationMenuItem>
 
         {/* <NavigationMenuItem>