@morphika/andami 0.1.2

package/app/admin/projects/page.tsx

@@ -0,0 +1,669 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type { PageListItem, PageType } from "../../../lib/sanity/types";
+import { adminAssetUrl } from "../../../lib/assets";
+import { csrfHeaders } from "../../../lib/csrf-client";
+import AssetBrowser from "../../../components/builder/AssetBrowser";
+import PublishToggle from "../../../components/admin/PublishToggle";
+import { EditIcon, DuplicateIcon, DeleteIcon, PreviewIcon } from "../../../components/admin/icons";
+
+// ============================================
+// Helpers
+// ============================================
+
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+// ============================================
+// Media Picker — unified Image + Video with tab toggle
+// ============================================
+
+type MediaTab = "image" | "video";
+
+function MediaPicker({
+  imagePath,
+  videoPath,
+  onImageChange,
+  onVideoChange,
+  onBrowserOpenChange,
+}: {
+  imagePath: string;
+  videoPath: string;
+  onImageChange: (path: string) => void;
+  onVideoChange: (path: string) => void;
+  onBrowserOpenChange?: (open: boolean) => void;
+}) {
+  const [activeTab, setActiveTab] = useState<MediaTab>("image");
+  const [browserOpen, setBrowserOpen] = useState(false);
+
+  const openBrowser = () => { setBrowserOpen(true); onBrowserOpenChange?.(true); };
+  const closeBrowser = () => { setBrowserOpen(false); onBrowserOpenChange?.(false); };
+
+  const currentValue = activeTab === "image" ? imagePath : videoPath;
+  const currentOnChange = activeTab === "image" ? onImageChange : onVideoChange;
+
+  return (
+    <div>
+      {/* Tab header */}
+      <div className="flex items-center justify-between mb-1.5">
+        <div
+          className="inline-flex items-center rounded-lg bg-neutral-100"
+          style={{ padding: 2 }}
+        >
+          <button
+            type="button"
+            onClick={() => setActiveTab("image")}
+            className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all duration-150"
+            style={{
+              backgroundColor: activeTab === "image" ? "#fff" : "transparent",
+              color: activeTab === "image" ? "#171717" : "#a3a3a3",
+              boxShadow: activeTab === "image" ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <polyline points="21 15 16 10 5 21" />
+            </svg>
+            Image
+            {imagePath && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("video")}
+            className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all duration-150"
+            style={{
+              backgroundColor: activeTab === "video" ? "#fff" : "transparent",
+              color: activeTab === "video" ? "#171717" : "#a3a3a3",
+              boxShadow: activeTab === "video" ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+            Video
+            {videoPath && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
+          </button>
+        </div>
+        <span className="text-[10px] text-neutral-400">
+          {activeTab === "image" ? "Preview thumbnail" : "Hover playback"}
+        </span>
+      </div>
+
+      {/* Media preview area */}
+      {currentValue ? (
+        <div className="relative aspect-[4/3] rounded-lg overflow-hidden bg-neutral-100 border border-neutral-200">
+          {activeTab === "image" ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={adminAssetUrl(currentValue)}
+              alt="Thumbnail"
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <video
+              src={adminAssetUrl(currentValue)}
+              className="w-full h-full object-cover"
+              muted
+              loop
+              playsInline
+              autoPlay
+            />
+          )}
+          <div className="absolute inset-0 bg-black/0 hover:bg-black/30 transition-colors flex items-center justify-center opacity-0 hover:opacity-100">
+            <button
+              type="button"
+              onClick={() => openBrowser()}
+              className="rounded-lg bg-white/90 px-3 py-1.5 text-xs font-medium text-neutral-700 shadow-sm hover:bg-white transition-colors"
+            >
+              Change
+            </button>
+            <button
+              type="button"
+              onClick={() => currentOnChange("")}
+              className="rounded-lg bg-white/90 px-3 py-1.5 text-xs font-medium text-red-500 shadow-sm hover:bg-white transition-colors ml-2"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => openBrowser()}
+          className="w-full aspect-[4/3] rounded-lg border border-dashed border-neutral-300 flex flex-col items-center justify-center gap-2 hover:border-[#076bff] hover:bg-neutral-50 transition-colors cursor-pointer"
+        >
+          {activeTab === "image" ? (
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <polyline points="21 15 16 10 5 21" />
+            </svg>
+          ) : (
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+          )}
+          <span className="text-xs text-neutral-400">
+            {activeTab === "image" ? "Choose preview image" : "Choose cover video"}
+          </span>
+        </button>
+      )}
+
+      {/* Asset browser (shared, switches filterType) */}
+      <AssetBrowser
+        open={browserOpen}
+        onSelect={(path) => {
+          currentOnChange(path);
+          closeBrowser();
+        }}
+        onClose={() => closeBrowser()}
+        filterType={activeTab}
+      />
+    </div>
+  );
+}
+
+// ============================================
+// Create Project Modal
+// ============================================
+
+function CreateProjectModal({
+  open,
+  onClose,
+  onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [thumbnailPath, setThumbnailPath] = useState("");
+  const [coverVideo, setCoverVideo] = useState("");
+  const [error, setError] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [autoSlug, setAutoSlug] = useState(true);
+  const [assetBrowserOpen, setAssetBrowserOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      // Don't close modal if the asset browser is open (it handles its own Escape)
+      if (e.key === "Escape" && !assetBrowserOpen) onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose, assetBrowserOpen]);
+
+  useEffect(() => {
+    if (autoSlug && title) {
+      setSlug(slugify(title));
+    }
+  }, [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: "project" as PageType,
+          ...(thumbnailPath ? { thumbnail_path: thumbnailPath } : {}),
+          ...(coverVideo ? { cover_video: coverVideo } : {}),
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) { setError(data.error || "Failed to create"); return; }
+      setTitle(""); setSlug(""); setAutoSlug(true); setThumbnailPath(""); setCoverVideo("");
+      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/30 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
+        <h2 className="text-sm font-medium text-neutral-900 mb-4">Add New Project</h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs text-neutral-500 mb-1">Project Title</label>
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="My Project" 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" autoFocus />
+          </div>
+          <div>
+            <label className="block text-xs text-neutral-500 mb-1">URL Slug</label>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-neutral-400">/work/</span>
+              <input type="text" value={slug} onChange={(e) => { setSlug(e.target.value); setAutoSlug(false); }} placeholder="my-project" className="flex-1 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" />
+            </div>
+          </div>
+          <MediaPicker
+            imagePath={thumbnailPath}
+            videoPath={coverVideo}
+            onImageChange={setThumbnailPath}
+            onVideoChange={setCoverVideo}
+            onBrowserOpenChange={setAssetBrowserOpen}
+          />
+          {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>
+  );
+}
+
+// ============================================
+// Edit Project Modal
+// ============================================
+
+function EditProjectModal({
+  project,
+  onClose,
+  onSaved,
+}: {
+  project: PageListItem | null;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+  const [thumbnailPath, setThumbnailPath] = useState("");
+  const [coverVideo, setCoverVideo] = useState("");
+  const [error, setError] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [assetBrowserOpen, setAssetBrowserOpen] = useState(false);
+
+  // Populate form when project changes
+  useEffect(() => {
+    if (project) {
+      setTitle(project.title);
+      setSlug(project.slug.current);
+      setThumbnailPath(project.thumbnail_path || "");
+      setCoverVideo(project.cover_video || "");
+      setError("");
+    }
+  }, [project]);
+
+  useEffect(() => {
+    if (!project) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !assetBrowserOpen) onClose();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [project, onClose, assetBrowserOpen]);
+
+  if (!project) return null;
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title || !slug) { setError("Title and slug are required"); return; }
+    setSaving(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/admin/pages/${project.slug.current}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...csrfHeaders() },
+        body: JSON.stringify({
+          title,
+          slug: { _type: "slug", current: slug },
+          thumbnail_path: thumbnailPath || null,
+          cover_video: coverVideo || null,
+        }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Save failed" }));
+        setError(data.error || "Save failed");
+        return;
+      }
+      onSaved();
+      onClose();
+    } catch { setError("Network error"); }
+    finally { setSaving(false); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
+        <h2 className="text-sm font-medium text-neutral-900 mb-4">Edit Project</h2>
+        <form onSubmit={handleSave} className="space-y-4">
+          <div>
+            <label className="block text-xs text-neutral-500 mb-1">Project 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" autoFocus />
+          </div>
+          <div>
+            <label className="block text-xs text-neutral-500 mb-1">URL Slug</label>
+            <div className="flex items-center gap-1">
+              <span className="text-xs text-neutral-400">/work/</span>
+              <input type="text" value={slug} onChange={(e) => setSlug(e.target.value)} className="flex-1 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" />
+            </div>
+          </div>
+          <MediaPicker
+            imagePath={thumbnailPath}
+            videoPath={coverVideo}
+            onImageChange={setThumbnailPath}
+            onVideoChange={setCoverVideo}
+            onBrowserOpenChange={setAssetBrowserOpen}
+          />
+          {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>
+  );
+}
+
+// ============================================
+// 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");
+      }
+    } catch { setError("Network error"); }
+    finally { setDeleting(false); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm">
+      <div className="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl">
+        <h2 className="text-sm font-medium text-neutral-900 mb-3">Delete Project</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>
+  );
+}
+
+// ============================================
+// Projects Page
+// ============================================
+
+type ViewMode = "list" | "thumb";
+
+export default function AdminProjectsPage() {
+  const router = useRouter();
+  const [projects, setProjects] = useState<PageListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [viewMode, setViewMode] = useState<ViewMode>("thumb");
+  const [showCreate, setShowCreate] = useState(false);
+  const [editingProject, setEditingProject] = useState<PageListItem | null>(null);
+  const [deletingProject, setDeletingProject] = useState<PageListItem | null>(null);
+  const [duplicating, setDuplicating] = useState<string | null>(null);
+  const fetchProjects = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/pages");
+      const data = await res.json();
+      const allPages: PageListItem[] = data.pages || [];
+      // Filter to projects only — thumbnail_path comes from the query now
+      setProjects(allPages.filter((p) => p.page_type === "project"));
+    } catch {
+      setProjects([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchProjects(); }, [fetchProjects]);
+
+  const filtered = projects.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 (project: PageListItem) => {
+    setDuplicating(project._id);
+    try {
+      const res = await fetch(`/api/admin/pages/${project.slug.current}/duplicate`, { method: "POST", headers: { ...csrfHeaders() } });
+      if (res.ok) {
+        await fetchProjects();
+      } 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);
+    }
+  };
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold text-neutral-900">Projects</h1>
+        <div className="flex items-center gap-3">
+          {/* View toggle */}
+          <div className="relative">
+            <select
+              value={viewMode === "thumb" ? "Thumb View" : "List View"}
+              onChange={(e) => setViewMode(e.target.value === "Thumb View" ? "thumb" : "list")}
+              className="appearance-none rounded-lg border border-neutral-200 bg-white px-3 py-2.5 pr-8 text-sm text-neutral-700 focus:border-[#076bff] focus:outline-none cursor-pointer"
+            >
+              <option>List View</option>
+              <option>Thumb View</option>
+            </select>
+            <svg className="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </div>
+          <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 Project
+          </button>
+        </div>
+      </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>
+
+      {/* Content */}
+      {loading ? (
+        <div className="flex items-center justify-center py-20">
+          <p className="text-xs text-neutral-400 animate-pulse">Loading projects...</p>
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 border border-dashed border-neutral-300 rounded-lg">
+          <p className="text-sm text-neutral-500 mb-2">
+            {projects.length === 0 ? "No projects yet" : "No projects match your search"}
+          </p>
+          {projects.length === 0 && (
+            <button onClick={() => setShowCreate(true)} className="text-xs text-[#076bff] hover:underline">
+              Create your first project
+            </button>
+          )}
+        </div>
+      ) : viewMode === "list" ? (
+        /* ====== LIST VIEW ====== */
+        <div>
+          {/* Table header */}
+          <div className="grid grid-cols-[1fr_120px_140px_180px] gap-4 px-5 py-3 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">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>
+
+          <div className="space-y-1 mt-1">
+            {filtered.map((project) => (
+              <div
+                key={project._id}
+                className="group grid grid-cols-[1fr_120px_140px_180px] gap-4 items-center rounded-lg bg-white px-5 py-4 hover:shadow-md transition-all cursor-pointer border border-transparent hover:border-neutral-200"
+                onClick={() => router.push(`/admin/projects/${project.slug.current}`)}
+              >
+                <p className="text-sm text-neutral-900 group-hover:text-[#076bff] transition-colors">
+                  {project.title}
+                </p>
+
+                <div onClick={(e) => e.stopPropagation()}>
+                  <PublishToggle
+                    mode="api"
+                    isDraft={!!project.draft_mode}
+                    slug={project.slug.current}
+                    onToggled={fetchProjects}
+                  />
+                </div>
+
+                <span className="text-xs text-neutral-500">
+                  {project.published_at
+                    ? new Date(project.published_at).toLocaleDateString("en-US", { day: "2-digit", month: "2-digit", year: "numeric" })
+                    : "\u2014"}
+                </span>
+
+                <div className="flex items-center gap-1 justify-end" onClick={(e) => e.stopPropagation()}>
+                  <button onClick={() => setEditingProject(project)} className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" title="Edit">
+                    <EditIcon />
+                  </button>
+                  <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._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={() => setDeletingProject(project)} className="p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors" title="Delete">
+                    <DeleteIcon />
+                  </button>
+                  <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" title="Preview">
+                    <PreviewIcon />
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        /* ====== THUMB VIEW (Semplice style) ====== */
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+          {filtered.map((project) => (
+            <div key={project._id} className="group relative">
+              {/* Thumbnail card */}
+              <div
+                className="relative aspect-[4/3] rounded-xl overflow-hidden bg-neutral-200 cursor-pointer border border-neutral-200/80 hover:shadow-md hover:shadow-[#076bff]/5 transition-all"
+                onClick={() => router.push(`/admin/projects/${project.slug.current}`)}
+              >
+                {project.thumbnail_path ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={adminAssetUrl(project.thumbnail_path)}
+                    alt={project.title}
+                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    loading="lazy"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = "none";
+                    }}
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-neutral-100">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" className="text-neutral-300">
+                      <rect x="3" y="3" width="18" height="18" rx="2" />
+                      <circle cx="8.5" cy="8.5" r="1.5" />
+                      <polyline points="21 15 16 10 5 21" />
+                    </svg>
+                  </div>
+                )}
+
+                {/* Hover overlay with actions */}
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-start justify-end p-2 opacity-0 group-hover:opacity-100">
+                  <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+                    <button onClick={() => setEditingProject(project)} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-[#076bff] transition-colors shadow-sm" title="Edit">
+                      <EditIcon />
+                    </button>
+                    <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._id} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" title="Duplicate">
+                      <DuplicateIcon />
+                    </button>
+                    <button onClick={() => setDeletingProject(project)} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-red-500 transition-colors shadow-sm" title="Delete">
+                      <DeleteIcon />
+                    </button>
+                    <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" title="Preview">
+                      <PreviewIcon />
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              {/* Info below thumbnail */}
+              <div className="mt-2 px-1">
+                <PublishToggle
+                  mode="api"
+                  isDraft={!!project.draft_mode}
+                  slug={project.slug.current}
+                  onToggled={fetchProjects}
+                />
+                <p className="text-sm text-neutral-900 mt-0.5 truncate">
+                  {project.title}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <CreateProjectModal open={showCreate} onClose={() => setShowCreate(false)} onCreated={fetchProjects} />
+      <EditProjectModal project={editingProject} onClose={() => setEditingProject(null)} onSaved={fetchProjects} />
+      <DeleteConfirmModal page={deletingProject} onClose={() => setDeletingProject(null)} onDeleted={fetchProjects} />
+    </div>
+  );
+}