Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -0,0 +1,158 @@
+import Link from "next/link";
+import { Layers, Plus, ArrowDownAZ, Hash, RectangleVertical, RectangleHorizontal } from "lucide-react";
+import { listAllTagCategories, type CategorySort } from "@/lib/db/queries";
+import { createTagCategoryAction } from "@/app/actions/tagCategories";
+import { CategoryGridCard } from "@/components/categories/CategoryGridCard";
+import { cn } from "@/lib/utils";
+
+export const dynamic = "force-dynamic";
+
+type View = "portrait" | "landscape";
+
+export default async function CategoriesPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const sp = await searchParams;
+  const sort: CategorySort = sp.sort === "count" ? "count" : "az";
+  const view: View = sp.view === "landscape" ? "landscape" : "portrait";
+  const qs = (overrides: Partial<{ sort: CategorySort; view: View }>) => {
+    const params = new URLSearchParams();
+    const finalSort = overrides.sort ?? sort;
+    const finalView = overrides.view ?? view;
+    if (finalSort === "count") params.set("sort", "count");
+    if (finalView === "landscape") params.set("view", "landscape");
+    const s = params.toString();
+    return s ? `/category?${s}` : "/category";
+  };
+  const cats = listAllTagCategories(sort);
+  return (
+    <div className="max-w-[1600px] mx-auto px-6 py-6 fade-in">
+      <div className="flex items-start justify-between gap-6 mb-6">
+        <div>
+          <h1 className="text-3xl font-semibold tracking-tight">Categories</h1>
+          <p className="text-[var(--color-fg-dim)] mt-1 max-w-prose">
+            Umbrellas that group related tags. A category like <span className="font-mono text-[var(--color-fg)]">BDSM</span> can collect{" "}
+            <span className="font-mono text-[var(--color-fg)]">bondage</span>,{" "}
+            <span className="font-mono text-[var(--color-fg)]">shibari</span>,{" "}
+            <span className="font-mono text-[var(--color-fg)]">cuffs</span>, etc.
+            Each tag belongs to at most one category.
+          </p>
+          <p className="text-sm text-[var(--color-fg-muted)] mt-1">{cats.length} categor{cats.length === 1 ? "y" : "ies"}</p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <div className="flex items-center rounded-lg glass overflow-hidden text-xs">
+            <Link
+              href={qs({ sort: "az" })}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1.5",
+                sort === "az"
+                  ? "bg-[var(--color-cyan)] text-black font-medium"
+                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
+              )}
+              title="Sort A → Z"
+            >
+              <ArrowDownAZ className="w-3.5 h-3.5" /> A-Z
+            </Link>
+            <Link
+              href={qs({ sort: "count" })}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1.5",
+                sort === "count"
+                  ? "bg-[var(--color-cyan)] text-black font-medium"
+                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
+              )}
+              title="Sort by cover count"
+            >
+              <Hash className="w-3.5 h-3.5" /> Count
+            </Link>
+          </div>
+          <form action={createTagCategoryAction} className="flex items-center gap-2">
+            <input
+              name="name"
+              placeholder="New category"
+              required
+              maxLength={64}
+              className="glass rounded-lg px-3 py-1.5 text-sm outline-none focus:border-[var(--color-cyan)] w-56"
+            />
+            <button className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-[var(--color-cyan)] text-black font-medium">
+              <Plus className="w-4 h-4" /> Create
+            </button>
+          </form>
+          <div className="flex items-center rounded-lg glass overflow-hidden text-xs">
+            <Link
+              href={qs({ view: "portrait" })}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1.5",
+                view === "portrait"
+                  ? "bg-[var(--color-cyan)] text-black font-medium"
+                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
+              )}
+              title="Portrait layout"
+            >
+              <RectangleVertical className="w-3.5 h-3.5" /> P
+            </Link>
+            <Link
+              href={qs({ view: "landscape" })}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1.5",
+                view === "landscape"
+                  ? "bg-[var(--color-cyan)] text-black font-medium"
+                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
+              )}
+              title="Landscape layout"
+            >
+              <RectangleHorizontal className="w-3.5 h-3.5" /> L
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {cats.length === 0 ? (
+        <div className="glass rounded-2xl p-card text-center">
+          <Layers className="w-8 h-8 mx-auto text-[var(--color-fg-dim)] mb-label" />
+          <p className="text-[var(--color-fg-dim)]">No categories yet. Create one above to start grouping tags.</p>
+        </div>
+      ) : view === "portrait" ? (
+        // Target 7 per row at full desktop width; scale down responsively.
+        <div key="portrait" className="fade-in grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
+          {cats.map((c) => (
+            <CategoryGridCard
+              key={c.id}
+              id={c.id}
+              slug={c.slug}
+              name={c.name}
+              color={c.color}
+              description={c.description}
+              tagCount={c.tagCount}
+              imageCount={c.imageCount}
+              view="portrait"
+              portrait={{ path: c.coverPortraitPath, zoom: c.coverPortraitZoom, offsetX: c.coverPortraitOffsetX, offsetY: c.coverPortraitOffsetY }}
+              landscape={{ path: c.coverLandscapePath, zoom: c.coverLandscapeZoom, offsetX: c.coverLandscapeOffsetX, offsetY: c.coverLandscapeOffsetY }}
+            />
+          ))}
+        </div>
+      ) : (
+        // Landscape: 3 per row at desktop; 1-2 on smaller screens.
+        <div key="landscape" className="fade-in grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {cats.map((c) => (
+            <CategoryGridCard
+              key={c.id}
+              id={c.id}
+              slug={c.slug}
+              name={c.name}
+              color={c.color}
+              description={c.description}
+              tagCount={c.tagCount}
+              imageCount={c.imageCount}
+              view="landscape"
+              portrait={{ path: c.coverPortraitPath, zoom: c.coverPortraitZoom, offsetX: c.coverPortraitOffsetX, offsetY: c.coverPortraitOffsetY }}
+              landscape={{ path: c.coverLandscapePath, zoom: c.coverLandscapeZoom, offsetX: c.coverLandscapeOffsetX, offsetY: c.coverLandscapeOffsetY }}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}