@morphika/webframe 0.1.0

package/components/builder/SectionTypePicker.tsx

@@ -0,0 +1,422 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { SECTION_TYPE_REGISTRY } from "../../lib/builder/types";
+import type { CustomSectionListItem } from "../../lib/sanity/types";
+import { ProjectGridBlockIcon, ParallaxGroupIcon } from "./blockStyles";
+import { BLOCK_GRADIENTS } from "./blockStyles";
+import { BUILDER_BLUE, BUILDER_VIOLET } from "../../lib/builder/constants";
+
+// ── Section card icons ──
+
+function EmptySectionV2Icon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="es2Grad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor={BUILDER_BLUE} />
+          <stop offset="100%" stopColor="#0550c0" />
+        </linearGradient>
+      </defs>
+      {/* Grid pattern */}
+      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#es2Grad)" opacity="0.15" />
+      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#es2Grad)" strokeWidth="2" fill="none" opacity="0.5" />
+      {/* Grid columns */}
+      <rect x="6" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
+      <rect x="16" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
+      <rect x="26" y="8" width="8" height="24" rx="2" fill="url(#es2Grad)" opacity="0.3" />
+    </svg>
+  );
+}
+
+function SavedSectionIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="savedGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor={BUILDER_VIOLET} />
+          <stop offset="100%" stopColor="#6d28d9" />
+        </linearGradient>
+      </defs>
+      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#savedGrad)" opacity="0.15" />
+      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#savedGrad)" strokeWidth="2" fill="none" opacity="0.5" />
+      {/* Component/puzzle icon */}
+      <rect x="8" y="8" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
+      <rect x="22" y="8" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
+      <rect x="8" y="22" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.5" />
+      <rect x="22" y="22" width="10" height="10" rx="2" fill="url(#savedGrad)" opacity="0.3" />
+    </svg>
+  );
+}
+
+const SECTION_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
+  "empty-v2": EmptySectionV2Icon,
+  projectGridBlock: ProjectGridBlockIcon,
+  parallaxGroup: ParallaxGroupIcon,
+};
+
+const SECTION_GRADIENTS: Record<string, string> = {
+  "empty-v2": "linear-gradient(135deg, #d0e0f8 0%, #b8d0f0 50%, #a0c0e8 100%)",
+  projectGridBlock: BLOCK_GRADIENTS.projectGridBlock,
+  parallaxGroup: BLOCK_GRADIENTS.parallaxGroup,
+};
+
+// ── V2 layout presets (use cascade preset names) ──
+type V2Preset = "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3";
+const layoutPresets: { key: V2Preset; label: string; widths: number[] }[] = [
+  { key: "full", label: "Full Width", widths: [12] },
+  { key: "halves", label: "Two Halves", widths: [6, 6] },
+  { key: "thirds", label: "Three Thirds", widths: [4, 4, 4] },
+  { key: "quarters", label: "Four Quarters", widths: [3, 3, 3, 3] },
+  { key: "1/3+2/3", label: "1/3 + 2/3", widths: [4, 8] },
+  { key: "2/3+1/3", label: "2/3 + 1/3", widths: [8, 4] },
+];
+
+// ── Shared card component (glass card with gradient, icon, title, subtitle) ──
+
+interface SectionCardProps {
+  gradient: string;
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  isHovered: boolean;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  onClick: () => void;
+}
+
+function SectionCard({
+  gradient,
+  icon,
+  title,
+  subtitle,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+}: SectionCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className="relative flex items-center gap-3 rounded-2xl px-3.5 py-3 transition-all text-left group overflow-hidden border-0"
+      style={{
+        background: gradient,
+        transform: isHovered ? "translateY(-1px) scale(1.015)" : "translateY(0) scale(1)",
+        boxShadow: isHovered
+          ? "0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3)"
+          : "0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
+        transition: "all 0.3s cubic-bezier(0.23, 1, 0.32, 1)",
+      }}
+    >
+      {/* Glass overlay */}
+      <div
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        style={{
+          background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
+        }}
+      />
+      {/* Icon container */}
+      <div
+        className="relative shrink-0 flex items-center justify-center"
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 12,
+          background: "rgba(255,255,255,0.4)",
+          backdropFilter: "blur(8px)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
+          transition: "transform 0.3s",
+          transform: isHovered ? "scale(1.08)" : "scale(1)",
+        }}
+      >
+        {icon}
+      </div>
+      {/* Text */}
+      <div className="relative z-10 min-w-0 flex-1">
+        <p
+          className="text-sm font-semibold truncate"
+          style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
+        >
+          {title}
+        </p>
+        {subtitle && (
+          <p
+            className="text-xs truncate leading-snug mt-0.5"
+            style={{ color: "rgba(0,0,0,0.42)" }}
+          >
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </button>
+  );
+}
+
+// ============================================
+
+interface SectionTypePickerProps {
+  onSelectEmptyV2?: (preset: "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3") => void;
+  onSelectSection: (blockType: "projectGridBlock") => void;
+  onSelectParallaxGroup?: () => void;
+  onSelectCustomSection?: (section: CustomSectionListItem) => void;
+  onCreateCustomSection?: () => void;
+  onClose: () => void;
+  /** Pre-fetched custom sections list — skips internal fetch when provided */
+  preloadedSections?: CustomSectionListItem[] | null;
+}
+
+export default function SectionTypePicker({
+  onSelectEmptyV2,
+  onSelectSection,
+  onSelectParallaxGroup,
+  onSelectCustomSection,
+  onCreateCustomSection,
+  onClose,
+  preloadedSections,
+}: SectionTypePickerProps) {
+  const [hovered, setHovered] = useState<string | null>(null);
+  // "pick" = choosing section type, "layout" = choosing column layout
+  const [step, setStep] = useState<"pick" | "layout">("pick");
+
+  // Custom sections — use preloaded data when available, otherwise fetch on mount
+  const [savedSections, setSavedSections] = useState<CustomSectionListItem[]>(
+    preloadedSections ?? []
+  );
+  const [loadingSaved, setLoadingSaved] = useState(!preloadedSections);
+  // Show skeletons only if fetch takes longer than 400ms (avoids flash on fast loads)
+  const [showSkeletons, setShowSkeletons] = useState(false);
+  const [savedError, setSavedError] = useState<string | null>(null);
+  const showCustomSections = !!(onSelectCustomSection || onCreateCustomSection);
+
+  // Fetch custom sections on mount — only if no preloaded data
+  useEffect(() => {
+    if (!showCustomSections || preloadedSections) return;
+    let cancelled = false;
+    setLoadingSaved(true);
+    setSavedError(null);
+
+    // Delay skeleton display to avoid flash on fast responses
+    const skeletonTimer = setTimeout(() => {
+      if (!cancelled) setShowSkeletons(true);
+    }, 400);
+
+    fetch("/api/admin/custom-sections")
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to load");
+        return res.json();
+      })
+      .then((data) => {
+        if (!cancelled) setSavedSections(data.sections || []);
+      })
+      .catch(() => {
+        if (!cancelled) setSavedError("Failed to load custom sections");
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoadingSaved(false);
+          setShowSkeletons(false);
+          clearTimeout(skeletonTimer);
+        }
+      });
+
+    return () => { cancelled = true; clearTimeout(skeletonTimer); };
+  }, [showCustomSections, preloadedSections]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-2xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
+        style={{ fontFamily: "Inter, system-ui, sans-serif" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4 border-b border-neutral-100">
+          <div className="flex items-center justify-between mb-1">
+            <div className="flex items-center gap-2">
+              {step === "layout" && (
+                <button
+                  onClick={() => setStep("pick")}
+                  className="w-7 h-7 rounded-lg flex items-center justify-center text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors"
+                  aria-label="Back to section types"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <polyline points="15 18 9 12 15 6" />
+                  </svg>
+                </button>
+              )}
+              <h3 className="text-lg font-semibold text-neutral-900">
+                {step === "pick" ? "Add Section" : "Choose Layout"}
+              </h3>
+            </div>
+            <button
+              onClick={onClose}
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors"
+              aria-label="Close section picker"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+          <p className="text-sm text-neutral-400">
+            {step === "pick"
+              ? "Choose a section type to add to your page"
+              : "Select a column layout for your section"}
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto px-6 py-4 flex-1">
+          {step === "layout" ? (
+            /* ── Column layout picker ── */
+            <div className="grid grid-cols-3 gap-2">
+              {layoutPresets.map(({ key, label, widths }) => (
+                <button
+                  key={key}
+                  onClick={() => {
+                    if (onSelectEmptyV2) {
+                      onSelectEmptyV2(key);
+                    }
+                    onClose();
+                  }}
+                  className="rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#076bff] hover:bg-[#076bff]/5 transition-colors group shadow-sm"
+                  title={label}
+                >
+                  <div className="flex gap-1 h-6">
+                    {widths.map((w, i) => (
+                      <div
+                        key={i}
+                        className="bg-neutral-200 group-hover:bg-[#076bff]/30 rounded-sm transition-colors"
+                        style={{ flex: w }}
+                      />
+                    ))}
+                  </div>
+                  <p className="text-xs text-neutral-500 mt-1.5 group-hover:text-neutral-700">
+                    {label}
+                  </p>
+                </button>
+              ))}
+            </div>
+          ) : step === "pick" ? (
+            /* ── Section type cards + inline custom sections ── */
+            <div>
+              <p className="text-[10px] font-semibold uppercase tracking-widest text-neutral-300 mb-2.5">
+                Page Sections
+              </p>
+              <div className="grid grid-cols-2 gap-2.5">
+                {SECTION_TYPE_REGISTRY.map((section) => {
+                  const IconComponent = SECTION_ICON_COMPONENTS[section.type];
+                  const gradient = SECTION_GRADIENTS[section.type] || "#f5f5f5";
+
+                  return (
+                    <SectionCard
+                      key={section.type}
+                      gradient={gradient}
+                      icon={IconComponent ? <IconComponent /> : null}
+                      title={section.label}
+                      subtitle={section.description}
+                      isHovered={hovered === section.type}
+                      onMouseEnter={() => setHovered(section.type)}
+                      onMouseLeave={() => setHovered(null)}
+                      onClick={() => {
+                        if (section.type === "empty-v2") {
+                          setStep("layout");
+                        } else if (section.type === "parallaxGroup") {
+                          onSelectParallaxGroup?.();
+                          onClose();
+                        } else if (section.blockType) {
+                          onSelectSection(section.blockType);
+                          onClose();
+                        }
+                      }}
+                    />
+                  );
+                })}
+              </div>
+
+              {/* Custom Sections — inline */}
+              {showCustomSections && (
+                <>
+                  <p className="text-[10px] font-semibold uppercase tracking-widest text-neutral-300 mb-2.5 mt-5">
+                    Custom Sections
+                  </p>
+
+                  <div className="grid grid-cols-2 gap-2.5">
+                    {/* Create new section button — always visible immediately */}
+                    {onCreateCustomSection && (
+                      <SectionCard
+                        gradient="linear-gradient(135deg, #f3f0ff 0%, #ede5ff 50%, #e0d4fc 100%)"
+                        icon={<span className="text-[#8b5cf6] text-xl font-light">+</span>}
+                        title="Create New"
+                        subtitle="Build a reusable section"
+                        isHovered={hovered === "create-custom"}
+                        onMouseEnter={() => setHovered("create-custom")}
+                        onMouseLeave={() => setHovered(null)}
+                        onClick={() => {
+                          onCreateCustomSection();
+                          onClose();
+                        }}
+                      />
+                    )}
+
+                    {/* Loading placeholder cards — only shown if fetch takes >400ms */}
+                    {loadingSaved && showSkeletons && (
+                      <>
+                        {[1, 2].map((i) => (
+                          <div
+                            key={`skeleton-${i}`}
+                            className="flex items-center gap-3 rounded-2xl px-3.5 py-3 animate-pulse"
+                            style={{ background: "linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%)" }}
+                          >
+                            <div className="w-11 h-11 rounded-xl bg-white/60" />
+                            <div className="flex-1 space-y-1.5">
+                              <div className="h-3.5 bg-white/60 rounded w-24" />
+                              <div className="h-2.5 bg-white/40 rounded w-16" />
+                            </div>
+                          </div>
+                        ))}
+                      </>
+                    )}
+
+                    {/* Error state */}
+                    {!loadingSaved && savedError && (
+                      <div className="col-span-2 flex items-center justify-center py-4">
+                        <p className="text-xs text-red-400">{savedError}</p>
+                      </div>
+                    )}
+
+                    {/* Existing custom sections */}
+                    {!loadingSaved && savedSections.map((section) => (
+                      <SectionCard
+                        key={section._id}
+                        gradient="linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%)"
+                        icon={<SavedSectionIcon size={20} />}
+                        title={section.title}
+                        subtitle={section.description}
+                        isHovered={hovered === section._id}
+                        onMouseEnter={() => setHovered(section._id)}
+                        onMouseLeave={() => setHovered(null)}
+                        onClick={() => {
+                          if (onSelectCustomSection) {
+                            onSelectCustomSection(section);
+                          }
+                          onClose();
+                        }}
+                      />
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}