Initial commit

2026-05-26 22:46:00 +02:00
commit 7e2c2ff89c
256 changed files with 51523 additions and 0 deletions
@@ -0,0 +1,182 @@
+"use client";
+import { useEffect, useState, useTransition } from "react";
+import { createPortal } from "react-dom";
+import { useRouter } from "next/navigation";
+import { X, Loader2 } from "lucide-react";
+import { updateActressMeta } from "@/app/actions/actressMeta";
+
+interface Props {
+  actressId: number;
+  initial: {
+    name: string;
+    altNames: string | null;
+    notes: string | null;
+    bornOn?: string | null;
+    heightCm?: number | null;
+    weightKg?: number | null;
+    cupSize?: string | null;
+  };
+  onClose: () => void;
+}
+
+export function ActressMetaEditor({ actressId, initial, onClose }: Props) {
+  const router = useRouter();
+  const [name, setName] = useState(initial.name);
+  const [altNames, setAltNames] = useState(initial.altNames ?? "");
+  const [notes, setNotes] = useState(initial.notes ?? "");
+  const [bornOn, setBornOn] = useState(initial.bornOn ?? "");
+  const [height, setHeight] = useState(initial.heightCm != null ? String(initial.heightCm) : "");
+  const [weight, setWeight] = useState(initial.weightKg != null ? String(initial.weightKg) : "");
+  const [cup, setCup] = useState(initial.cupSize ?? "");
+  const [busy, setBusy] = useState(false);
+  const [, start] = useTransition();
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  async function save() {
+    setBusy(true);
+    try {
+      const r = await updateActressMeta(actressId, {
+        name,
+        altNames,
+        notes,
+        bornOn: bornOn || null,
+        heightCm: height ? Number(height) : null,
+        weightKg: weight ? Number(weight) : null,
+        cupSize: cup || null,
+      });
+      router.refresh();
+      onClose();
+      if (r && r.slug) router.push(`/actress/${r.slug}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    <div
+      className="fixed inset-x-0 bottom-0 top-16 z-50 flex items-center justify-center px-4 py-4 fade-in overflow-y-auto"
+      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="bg-[var(--color-bg-0)] border border-[var(--color-glass-border)] shadow-2xl rounded-2xl p-5 w-[min(820px,calc(100vw-32px))]">
+        <div className="flex items-center justify-between mb-4">
+          <div className="text-base font-medium">Edit Actress</div>
+          <button onClick={onClose} className="text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 items-stretch">
+          <div className="rounded-xl border border-[var(--color-glass-border)] bg-[var(--color-bg-1)]/30 p-4 flex flex-col gap-3">
+            <SectionHeader>Identity</SectionHeader>
+            <Field label="Name">
+              <input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                maxLength={80}
+                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+              />
+            </Field>
+            <Field label="Alt Names" hint="comma-separated · used for search (kanji, romaji, nicknames). Reversed name is added automatically.">
+              <input
+                value={altNames}
+                onChange={(e) => setAltNames(e.target.value)}
+                placeholder="松本いちか"
+                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+              />
+            </Field>
+            <div className="flex-1 flex flex-col">
+              <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">Notes</div>
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                className="flex-1 min-h-[140px] w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)] resize-none"
+              />
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-[var(--color-glass-border)] bg-[var(--color-bg-1)]/30 p-4 flex flex-col gap-3">
+            <SectionHeader>Personal</SectionHeader>
+            <Field label="Born" hint="YYYY-MM-DD · age is computed from this">
+              <input
+                type="date"
+                value={bornOn}
+                onChange={(e) => setBornOn(e.target.value)}
+                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+              />
+            </Field>
+
+            <div className="pt-2"><SectionHeader>Body</SectionHeader></div>
+            <div className="grid grid-cols-3 gap-2">
+              <Field label="Height (cm)">
+                <input
+                  type="number"
+                  inputMode="numeric"
+                  value={height}
+                  onChange={(e) => setHeight(e.target.value)}
+                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+                />
+              </Field>
+              <Field label="Weight (kg)">
+                <input
+                  type="number"
+                  inputMode="numeric"
+                  value={weight}
+                  onChange={(e) => setWeight(e.target.value)}
+                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+                />
+              </Field>
+              <Field label="Cup Size">
+                <input
+                  value={cup}
+                  onChange={(e) => setCup(e.target.value)}
+                  placeholder="C"
+                  maxLength={6}
+                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
+                />
+              </Field>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 mt-5 pt-4 border-t border-[var(--color-glass-border)]">
+          <button
+            onClick={onClose}
+            className="flex-1 text-sm px-3 py-2 rounded-lg glass glass-hover"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={save}
+            disabled={busy || !name.trim()}
+            className="flex-1 flex items-center justify-center gap-1.5 text-sm px-3 py-2 rounded-lg bg-[var(--color-cyan)] text-black font-medium disabled:opacity-50"
+          >
+            {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : null} Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-cyan)]">{children}</div>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">{label}</div>
+      {children}
+      {hint && <div className="text-[10px] text-[var(--color-fg-muted)] mt-1">{hint}</div>}
+    </div>
+  );
+}