@morphika/webframe 0.1.0

package/app/admin/pages/page.tsx

@@ -0,0 +1,588 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import type { PageListItem } from "../../../lib/sanity/types";
+import PublishToggle from "../../../components/admin/PublishToggle";
+import { EditIcon, DuplicateIcon, DeleteIcon, PreviewIcon } from "../../../components/admin/icons";
+
+function HomeIcon({ active }: { active: boolean }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill={active ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5">
+      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+      <polyline points="9 22 9 12 15 12 15 22" />
+    </svg>
+  );
+}
+
+// ============================================
+// Create Page Modal
+// ============================================
+
+function CreatePageModal({
+  open,
+  onClose,
+  onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [error, setError] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [autoSlug, setAutoSlug] = useState(true);
+
+  // Reset state when modal opens/closes
+  useEffect(() => {
+    if (open) {
+      setTitle("");
+      setSlug("");
+      setError("");
+      setAutoSlug(true);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (autoSlug && title) {
+      setSlug(
+        title
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/^-|-$/g, "")
+      );
+    }
+  }, [title, autoSlug]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title || !slug) {
+      setError("Title and slug are required");
+      return;
+    }
+    setCreating(true);
+    setError("");
+    try {
+      const res = await fetch("/api/admin/pages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({
+          title,
+          slug,
+          page_type: "page",
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to create page");
+        return;
+      }
+      setTitle("");
+      setSlug("");
+      setAutoSlug(true);
+      onCreated();
+      onClose();
+    } catch {
+      setError("Network error");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-6">
+      <div className="rounded-2xl border border-neutral-200/80 bg-white shadow-2xl w-full max-w-md">
+        <div className="p-6">
+          <h2 className="text-sm font-medium uppercase tracking-wider text-neutral-900 mb-1">
+            New Page
+          </h2>
+          <p className="text-xs text-neutral-400 mb-5">
+            Add sections and blocks after creating the page
+          </p>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs font-medium uppercase tracking-wider text-neutral-500 mb-1">
+                Title
+              </label>
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Page title"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+                autoFocus
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium uppercase tracking-wider text-neutral-500 mb-1">
+                Slug
+              </label>
+              <input
+                type="text"
+                value={slug}
+                onChange={(e) => { setSlug(e.target.value); setAutoSlug(false); }}
+                placeholder="page-slug"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+              />
+              <p className="text-xs text-neutral-400 mt-1">URL: /{slug || "page-slug"}</p>
+            </div>
+            {error && <p className="text-xs text-[var(--admin-error)]">{error}</p>}
+            <div className="flex gap-3 justify-end pt-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={creating}
+                className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+              >
+                {creating ? "Creating..." : "Create"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Delete Confirm Modal
+// ============================================
+
+function DeleteConfirmModal({
+  page,
+  onClose,
+  onDeleted,
+}: {
+  page: PageListItem | null;
+  onClose: () => void;
+  onDeleted: () => void;
+}) {
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!page) return;
+    const handleKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [page, onClose]);
+
+  useEffect(() => { setError(""); }, [page]);
+
+  if (!page) return null;
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/admin/pages/${page.slug.current}`, { method: "DELETE", headers: { ...csrfHeaders() } });
+      if (res.ok) { onDeleted(); onClose(); }
+      else {
+        const data = await res.json().catch(() => ({ error: "Delete failed" }));
+        setError(data.error || `Delete failed (${res.status})`);
+      }
+    } catch { setError("Network error"); }
+    finally { setDeleting(false); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="w-full max-w-sm rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-2xl">
+        <h2 className="text-sm font-medium uppercase tracking-wider text-neutral-900 mb-3">Delete Page</h2>
+        <p className="text-xs text-neutral-500 mb-6">
+          Are you sure you want to delete &ldquo;{page.title}&rdquo;? This action cannot be undone.
+        </p>
+        {error && <p className="text-xs text-[var(--admin-error)] mb-4">{error}</p>}
+        <div className="flex gap-3 justify-end">
+          <button onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
+          <button onClick={handleDelete} disabled={deleting} className="rounded-lg bg-[var(--admin-error)] px-5 py-2.5 text-sm font-medium text-white hover:bg-[var(--admin-error-dark)] transition-colors disabled:opacity-50">{deleting ? "Deleting..." : "Delete"}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Edit Page Settings Modal
+// ============================================
+
+function EditPageModal({
+  page,
+  onClose,
+  onUpdated,
+}: {
+  page: PageListItem | null;
+  onClose: () => void;
+  onUpdated: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [error, setError] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (page) {
+      setTitle(page.title);
+      setSlug(page.slug.current);
+      setError("");
+    }
+  }, [page]);
+
+  useEffect(() => {
+    if (!page) return;
+    const handleKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [page, onClose]);
+
+  if (!page) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) { setError("Title is required"); return; }
+    if (!slug.trim()) { setError("Slug is required"); return; }
+
+    setSaving(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/admin/pages/${page.slug.current}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({ title: title.trim(), newSlug: slug.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error || "Failed to update");
+        return;
+      }
+      onUpdated();
+      onClose();
+    } catch {
+      setError("Network error");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="w-full max-w-md rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-2xl">
+        <h2 className="text-sm font-medium uppercase tracking-wider text-neutral-900 mb-4">
+          Page Settings
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium uppercase tracking-wider text-neutral-500 mb-1">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+              autoFocus
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium uppercase tracking-wider text-neutral-500 mb-1">Slug</label>
+            <input
+              type="text"
+              value={slug}
+              onChange={(e) => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
+              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+            />
+            <p className="text-xs text-neutral-400 mt-1">URL: /{slug || "page-slug"}</p>
+          </div>
+          {error && <p className="text-xs text-[var(--admin-error)]">{error}</p>}
+          <div className="flex gap-3 justify-end pt-2">
+            <button type="button" onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
+            <button type="submit" disabled={saving} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{saving ? "Saving..." : "Save"}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Home Confirm Modal
+// ============================================
+
+function HomeConfirmModal({
+  page,
+  onClose,
+  onConfirmed,
+}: {
+  page: PageListItem | null;
+  onClose: () => void;
+  onConfirmed: () => void;
+}) {
+  const [setting, setSetting] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!page) return;
+    const handleKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [page, onClose]);
+
+  useEffect(() => { setError(""); }, [page]);
+
+  if (!page) return null;
+
+  const handleConfirm = async () => {
+    setSetting(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/admin/pages/${page.slug.current}/set-home`, {
+        method: "POST",
+        headers: { ...csrfHeaders() },
+      });
+      if (res.ok) {
+        onConfirmed();
+        onClose();
+      } else {
+        const data = await res.json().catch(() => ({ error: "Failed" }));
+        setError(data.error || `Failed (${res.status})`);
+      }
+    } catch {
+      setError("Network error");
+    } finally {
+      setSetting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="w-full max-w-sm rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-2xl">
+        <h2 className="text-sm font-medium uppercase tracking-wider text-neutral-900 mb-3">Set as Home Page</h2>
+        <p className="text-xs text-neutral-500 mb-6">
+          Do you want to set &ldquo;{page.title}&rdquo; as the index home page? The current home page will be unset.
+        </p>
+        {error && <p className="text-xs text-[var(--admin-error)] mb-4">{error}</p>}
+        <div className="flex gap-3 justify-end">
+          <button onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
+          <button onClick={handleConfirm} disabled={setting} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{setting ? "Setting..." : "Set as Home"}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Pages List Page (excludes projects)
+// ============================================
+
+export default function AdminPagesPage() {
+  const router = useRouter();
+  const [pages, setPages] = useState<PageListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [showCreate, setShowCreate] = useState(false);
+  const [deletingPage, setDeletingPage] = useState<PageListItem | null>(null);
+  const [editingPage, setEditingPage] = useState<PageListItem | null>(null);
+  const [homeConfirmPage, setHomeConfirmPage] = useState<PageListItem | null>(null);
+  const [duplicating, setDuplicating] = useState<string | null>(null);
+  const fetchPages = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/pages");
+      const data = await res.json();
+      // Exclude projects — they have their own section
+      setPages((data.pages || []).filter((p: PageListItem) => p.page_type !== "project"));
+    } catch {
+      setPages([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchPages(); }, [fetchPages]);
+
+  const filtered = pages.filter((p) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return p.title.toLowerCase().includes(q) || p.slug.current.toLowerCase().includes(q);
+  });
+
+
+
+  const handleDuplicate = async (page: PageListItem) => {
+    setDuplicating(page._id);
+    try {
+      const res = await fetch(`/api/admin/pages/${page.slug.current}/duplicate`, { method: "POST", headers: { ...csrfHeaders() } });
+      if (res.ok) {
+        await fetchPages();
+      } else {
+        const data = await res.json().catch(() => ({ error: "Duplicate failed" }));
+        console.error("Duplicate failed:", data.error || `HTTP ${res.status}`);
+      }
+    } catch (err) {
+      console.error("Duplicate operation failed:", err);
+    } finally {
+      setDuplicating(null);
+    }
+  };
+
+  const handleHomeClick = (page: PageListItem) => {
+    if (page.is_home) return; // Already home, do nothing
+    setHomeConfirmPage(page);
+  };
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold text-neutral-900">
+          Pages
+        </h1>
+        <button
+          onClick={() => setShowCreate(true)}
+          className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors"
+        >
+          + New Page
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="mb-6">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by title or slug..."
+          className="w-full max-w-md rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10 shadow-sm"
+        />
+      </div>
+
+      {/* Page List */}
+      {loading ? (
+        <div className="flex items-center justify-center py-20">
+          <p className="text-xs text-neutral-400 animate-pulse">Loading pages...</p>
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 border border-dashed border-neutral-300 rounded">
+          <p className="text-sm text-neutral-500 mb-2">
+            {pages.length === 0 ? "No pages yet" : "No pages match your search"}
+          </p>
+          {pages.length === 0 && (
+            <button onClick={() => setShowCreate(true)} className="text-xs text-[#076bff] hover:underline">
+              Create your first page
+            </button>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {/* Table header */}
+          <div className="hidden md:grid grid-cols-[1fr_60px_160px_120px_160px] gap-4 px-4 py-2 border-b border-neutral-200">
+            <span className="text-xs font-medium uppercase tracking-wider text-neutral-400">Title</span>
+            <span className="text-xs font-medium uppercase tracking-wider text-neutral-400">Home</span>
+            <span className="text-xs font-medium uppercase tracking-wider text-neutral-400">Status</span>
+            <span className="text-xs font-medium uppercase tracking-wider text-neutral-400">Created</span>
+            <span className="text-xs font-medium uppercase tracking-wider text-neutral-400 text-right">Actions</span>
+          </div>
+
+          {filtered.map((page) => (
+            <div
+              key={page._id}
+              className="group flex flex-col gap-2 rounded-xl bg-white px-4 py-3 hover:bg-neutral-50/50 transition-colors border border-transparent hover:border-neutral-200 md:grid md:grid-cols-[1fr_60px_160px_120px_160px] md:gap-4 md:items-center"
+            >
+              {/* Title */}
+              <div className="cursor-pointer" onClick={() => router.push(`/admin/pages/${page.slug.current}`)}>
+                <p className="text-sm text-neutral-900 group-hover:text-[#076bff] transition-colors">
+                  {page.title}
+                </p>
+                <p className="text-xs text-neutral-400">/{page.slug.current}</p>
+              </div>
+
+              {/* Home toggle */}
+              <button
+                onClick={(e) => { e.stopPropagation(); handleHomeClick(page); }}
+                className={`p-1.5 rounded w-fit transition-colors ${
+                  page.is_home
+                    ? "text-amber-500 cursor-default"
+                    : "text-neutral-300 hover:text-amber-400 cursor-pointer"
+                }`}
+                title={page.is_home ? "Home page" : "Set as home page"}
+              >
+                <HomeIcon active={!!page.is_home} />
+              </button>
+
+              {/* Status */}
+              <div className="flex items-center">
+                <PublishToggle
+                  mode="api"
+                  isDraft={!!page.draft_mode}
+                  slug={page.slug.current}
+                  onToggled={fetchPages}
+                />
+              </div>
+
+              {/* Date */}
+              <span className="text-xs text-neutral-500">
+                {page.published_at ? new Date(page.published_at).toLocaleDateString() : "\u2014"}
+              </span>
+
+              {/* Actions */}
+              <div className="flex items-center gap-1 justify-end">
+                <button
+                  onClick={(e) => { e.stopPropagation(); setEditingPage(page); }}
+                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+                  title="Edit settings"
+                >
+                  <EditIcon />
+                </button>
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleDuplicate(page); }}
+                  disabled={duplicating === page._id}
+                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-30"
+                  title="Duplicate"
+                >
+                  <DuplicateIcon />
+                </button>
+                <button
+                  onClick={(e) => { e.stopPropagation(); setDeletingPage(page); }}
+                  className="p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors"
+                  title="Delete"
+                >
+                  <DeleteIcon />
+                </button>
+                <Link
+                  href={page.is_home ? "/" : `/${page.slug.current}`}
+                  target="_blank"
+                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+                  title="Preview"
+                >
+                  <PreviewIcon />
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <CreatePageModal open={showCreate} onClose={() => setShowCreate(false)} onCreated={fetchPages} />
+      <EditPageModal page={editingPage} onClose={() => setEditingPage(null)} onUpdated={fetchPages} />
+      <DeleteConfirmModal page={deletingPage} onClose={() => setDeletingPage(null)} onDeleted={fetchPages} />
+      <HomeConfirmModal page={homeConfirmPage} onClose={() => setHomeConfirmPage(null)} onConfirmed={fetchPages} />
+    </div>
+  );
+}

package/app/admin/projects/[slug]/page.tsx

@@ -0,0 +1,3 @@
+// Re-export the page editor — projects use the same builder UI as pages.
+// This route exists so the sidebar correctly highlights "Projects" when editing a project.
+export { default } from "../../../../app/admin/pages/[slug]/page";