@morphika/webframe 0.1.0

package/components/builder/editors/ProjectGridEditor.tsx

@@ -0,0 +1,648 @@
+"use client";
+
+/**
+ * ProjectGridEditor v2 — Settings editor for the projectGridBlock.
+ *
+ * Phase 6 rewrite (Session 105). Full new control layout:
+ * - Grid: columns slider, aspect ratio multi-select chips, gap V/H sliders
+ * - Appearance: hover effect segmented, subtitle toggle, border radius slider
+ * - Video: mode segmented
+ * - Per-card: aspect ratio override, custom thumbnail, custom subtitle
+ * - Projects list: reorder, remove, add picker
+ *
+ * All grid settings are responsive-aware (tablet/phone write to overrides).
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { getEffectiveValue, setResponsiveOverride } from "../../../lib/builder/responsive";
+import type { DeviceViewport } from "../../../lib/builder/types";
+import type { ProjectGridBlock, ProjectGridItem, PageListItem, ContentBlock } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  ViewportBadge,
+  StyledCheckbox,
+} from "./shared";
+
+// ============================================
+// Constants
+// ============================================
+
+const ASPECT_RATIO_OPTIONS = [
+  { value: "16/9", label: "16:9" },
+  { value: "1/1", label: "1:1" },
+  { value: "9/16", label: "9:16" },
+] as const;
+
+const HOVER_EFFECT_OPTIONS = [
+  { value: "scale", label: "Scale" },
+  { value: "3d", label: "3D" },
+  { value: "none", label: "None" },
+] as const;
+
+const VIDEO_MODE_OPTIONS = [
+  { value: "off", label: "Off" },
+  { value: "hover", label: "Hover" },
+  { value: "autoloop", label: "Auto" },
+] as const;
+
+
+// ============================================
+// Segmented Control Component
+// ============================================
+
+function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+}: {
+  options: readonly { value: T; label: string }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex gap-1">
+      {options.map((opt) => {
+        const active = value === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onChange(opt.value)}
+            className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
+              active
+                ? "bg-[#076bff] text-white"
+                : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
+            }`}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================
+// Range Slider Component
+// ============================================
+
+function RangeSlider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix = "",
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  suffix?: string;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-1 accent-[#076bff] cursor-pointer"
+      />
+      <span className="text-[11px] text-neutral-500 w-8 text-right tabular-nums shrink-0">
+        {value}{suffix}
+      </span>
+    </div>
+  );
+}
+
+// ============================================
+// Aspect Ratio Multi-Select Chips
+// ============================================
+
+function RatioChips({
+  selected,
+  onChange,
+}: {
+  selected: string[];
+  onChange: (ratios: string[]) => void;
+}) {
+  const toggle = (ratio: string) => {
+    const isActive = selected.includes(ratio);
+    // Prevent deselecting the last one
+    if (isActive && selected.length <= 1) return;
+    if (isActive) {
+      onChange(selected.filter((r) => r !== ratio));
+    } else {
+      onChange([...selected, ratio]);
+    }
+  };
+
+  return (
+    <div className="flex gap-1">
+      {ASPECT_RATIO_OPTIONS.map((opt) => {
+        const active = selected.includes(opt.value);
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => toggle(opt.value)}
+            className={`flex-1 flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
+              active
+                ? "bg-[#076bff] text-white"
+                : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
+            }`}
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              {opt.value === "16/9" && (
+                <rect x="2" y="5" width="16" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+              {opt.value === "1/1" && (
+                <rect x="4" y="4" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+              {opt.value === "9/16" && (
+                <rect x="5" y="2" width="10" height="16" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+            </svg>
+            <span>{opt.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================
+// Per-Card Override Chips (Inherit + ratios)
+// ============================================
+
+function CardRatioChips({
+  value,
+  onChange,
+}: {
+  value: string | null | undefined;
+  onChange: (v: "16/9" | "1/1" | "9/16" | null) => void;
+}) {
+  const options = [
+    { value: null as string | null, label: "Inherit" },
+    { value: "16/9", label: "16:9" },
+    { value: "1/1", label: "1:1" },
+    { value: "9/16", label: "9:16" },
+  ] as const;
+
+  return (
+    <div className="grid grid-cols-4 gap-1">
+      {options.map((opt) => {
+        const active = (value || null) === opt.value;
+        return (
+          <button
+            key={opt.label}
+            type="button"
+            onClick={() => onChange(opt.value as "16/9" | "1/1" | "9/16" | null)}
+            className={`flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
+              active
+                ? "bg-[#076bff] text-white"
+                : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
+            }`}
+          >
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
+              {opt.value === null && (
+                <text x="10" y="14" textAnchor="middle" fill="currentColor" fontSize="11" fontWeight="500">A</text>
+              )}
+              {opt.value === "16/9" && (
+                <rect x="2" y="5" width="16" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+              {opt.value === "1/1" && (
+                <rect x="4" y="4" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+              {opt.value === "9/16" && (
+                <rect x="5" y="2" width="10" height="16" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+              )}
+            </svg>
+            <span>{opt.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================
+// Main Editor
+// ============================================
+
+interface ProjectGridEditorProps {
+  block: ProjectGridBlock;
+}
+
+/** Minimal project info for the picker */
+interface AvailableProject {
+  _id: string;
+  title: string;
+  slug: string;
+  thumbnail_path?: string;
+}
+
+export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const activeViewport = useBuilderStore((s) => s.activeViewport) as DeviceViewport;
+  const selectedProjectCardKey = useBuilderStore((s) => s.selectedProjectCardKey);
+  const selectProjectCard = useBuilderStore((s) => s.selectProjectCard);
+
+  const [availableProjects, setAvailableProjects] = useState<AvailableProject[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [showPicker, setShowPicker] = useState(false);
+
+  // ─── Fetch published projects ───
+  useEffect(() => {
+    fetch("/api/admin/pages")
+      .then((r) => r.json())
+      .then((data) => {
+        const projects = (data.pages || [])
+          .filter((p: PageListItem) => p.page_type === "project" && !p.draft_mode)
+          .map((p: PageListItem) => ({
+            _id: p._id,
+            title: p.title,
+            slug: p.slug.current,
+            thumbnail_path: p.thumbnail_path,
+          }));
+        setAvailableProjects(projects);
+      })
+      .catch((err) => {
+        if (process.env.NODE_ENV === "development") console.warn("[ProjectGridEditor] Failed to load projects", err);
+        setAvailableProjects([]);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  // ─── Update helpers ───
+  const update = useCallback(
+    (updates: Partial<ProjectGridBlock>) => {
+      updateBlock(block._key, updates as Partial<ProjectGridBlock>);
+    },
+    [block._key, updateBlock]
+  );
+
+  /** Update a responsive-aware property */
+  const updateResponsive = useCallback(
+    (property: string, value: unknown) => {
+      if (activeViewport === "desktop") {
+        update({ [property]: value } as Partial<ProjectGridBlock>);
+      } else {
+        const resp = setResponsiveOverride(block as unknown as ContentBlock, activeViewport, property, value);
+        update(resp as unknown as Partial<ProjectGridBlock>);
+      }
+    },
+    [activeViewport, block, update]
+  );
+
+  /** Get effective value for current viewport */
+  const getVal = useCallback(
+    <T,>(property: string, base: T): T => {
+      return getEffectiveValue(block as unknown as ContentBlock, activeViewport, property, base);
+    },
+    [block, activeViewport]
+  );
+
+  const isResponsive = activeViewport !== "desktop";
+
+  // ─── Effective values ───
+  const effectiveColumns = getVal<number>("columns", block.columns ?? 3);
+  const effectiveRatios = getVal<string[]>("aspect_ratios", block.aspect_ratios ?? ["16/9"]);
+  const effectiveGapV = getVal<number>("gap_v", block.gap_v ?? 16);
+  const effectiveGapH = getVal<number>("gap_h", block.gap_h ?? 16);
+
+  const selectedSlugs = new Set((block.projects || []).map((p) => p.project_slug));
+
+  // ─── Selected card data ───
+  const selectedCard = useMemo(
+    () => (block.projects || []).find((p) => p._key === selectedProjectCardKey) || null,
+    [block.projects, selectedProjectCardKey]
+  );
+
+  const updateCard = useCallback(
+    (cardKey: string, updates: Partial<ProjectGridItem>) => {
+      const projects = (block.projects || []).map((p) =>
+        p._key === cardKey ? { ...p, ...updates } : p
+      );
+      update({ projects });
+    },
+    [block.projects, update]
+  );
+
+  /** Update a per-card property respecting viewport (writes to card.responsive for tablet/phone) */
+  const updateCardResponsive = useCallback(
+    (cardKey: string, property: keyof ProjectGridItem, value: unknown) => {
+      if (activeViewport === "desktop") {
+        updateCard(cardKey, { [property]: value } as Partial<ProjectGridItem>);
+      } else {
+        // Write to card.responsive[viewport][property]
+        const card = (block.projects || []).find((p) => p._key === cardKey);
+        if (!card) return;
+        const vp = activeViewport as "tablet" | "phone";
+        const projects = (block.projects || []).map((p) => {
+          if (p._key !== cardKey) return p;
+          return {
+            ...p,
+            responsive: {
+              ...p.responsive,
+              [vp]: {
+                ...p.responsive?.[vp],
+                [property]: value,
+              },
+            },
+          };
+        });
+        update({ projects });
+      }
+    },
+    [activeViewport, block.projects, update, updateCard]
+  );
+
+  /** Get effective per-card value for current viewport */
+  const getCardVal = useCallback(
+    <T,>(card: ProjectGridItem, property: keyof ProjectGridItem, base: T): T => {
+      if (activeViewport === "desktop") return (card[property] as T) ?? base;
+      const vp = activeViewport as "tablet" | "phone";
+      const override = card.responsive?.[vp]?.[property as keyof typeof card.responsive.tablet];
+      return (override as T) ?? (card[property] as T) ?? base;
+    },
+    [activeViewport]
+  );
+
+  const addProject = (project: AvailableProject) => {
+    const newItem: ProjectGridItem = {
+      _key: crypto.randomUUID().replace(/-/g, "").substring(0, 12),
+      project_slug: project.slug,
+    };
+    update({ projects: [...(block.projects || []), newItem] });
+  };
+
+  const removeProject = (key: string) => {
+    if (selectedProjectCardKey === key) selectProjectCard(null);
+    update({ projects: (block.projects || []).filter((p) => p._key !== key) });
+  };
+
+  const moveProject = (index: number, direction: -1 | 1) => {
+    const arr = [...(block.projects || [])];
+    const newIndex = index + direction;
+    if (newIndex < 0 || newIndex >= arr.length) return;
+    [arr[index], arr[newIndex]] = [arr[newIndex], arr[index]];
+    update({ projects: arr });
+  };
+
+  const filteredAvailable = availableProjects.filter(
+    (p) =>
+      !selectedSlugs.has(p.slug) &&
+      (search === "" || p.title.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Responsive badge */}
+      {isResponsive && <ViewportBadge />}
+
+      {/* ─── Grid Settings ─── */}
+      <SettingsSection title="Grid">
+        <SettingsField label="Columns">
+          <RangeSlider
+            value={effectiveColumns}
+            onChange={(v) => updateResponsive("columns", v)}
+            min={1}
+            max={6}
+          />
+        </SettingsField>
+
+        <SettingsField label="Ratios">
+          <RatioChips
+            selected={effectiveRatios}
+            onChange={(v) => updateResponsive("aspect_ratios", v)}
+          />
+        </SettingsField>
+
+        <SettingsField label="Gap V">
+          <RangeSlider
+            value={effectiveGapV}
+            onChange={(v) => updateResponsive("gap_v", v)}
+            min={0}
+            max={64}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+
+        <SettingsField label="Gap H">
+          <RangeSlider
+            value={effectiveGapH}
+            onChange={(v) => updateResponsive("gap_h", v)}
+            min={0}
+            max={64}
+            step={2}
+            suffix="px"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Appearance ─── */}
+      <SettingsSection title="Appearance">
+        <SettingsField label="Hover">
+          <SegmentedControl
+            options={HOVER_EFFECT_OPTIONS}
+            value={block.hover_effect || "scale"}
+            onChange={(v) => update({ hover_effect: v })}
+          />
+        </SettingsField>
+
+        <StyledCheckbox
+          label="Subtitle"
+          checked={block.show_subtitle !== false}
+          onChange={(v) => update({ show_subtitle: v })}
+        />
+
+        <SettingsField label="Radius">
+          <RangeSlider
+            value={block.border_radius ?? 0}
+            onChange={(v) => update({ border_radius: v })}
+            min={0}
+            max={24}
+            suffix="px"
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Video ─── */}
+      <SettingsSection title="Video">
+        <SettingsField label="Mode">
+          <SegmentedControl
+            options={VIDEO_MODE_OPTIONS}
+            value={block.video_mode || "off"}
+            onChange={(v) => update({ video_mode: v })}
+          />
+        </SettingsField>
+      </SettingsSection>
+
+      {/* ─── Projects ─── */}
+      <SettingsSection title={`Projects (${(block.projects || []).length})`}>
+        {(block.projects || []).length === 0 ? (
+          <p className="text-xs text-neutral-400 py-2">
+            No projects selected. Add projects below.
+          </p>
+        ) : (
+          <div className="space-y-1">
+            {(block.projects || []).map((item, i) => {
+              const proj = availableProjects.find((p) => p.slug === item.project_slug);
+              const isCardSelected = selectedProjectCardKey === item._key;
+              const hasOverride = !!item.aspect_ratio_override;
+              return (
+                <React.Fragment key={item._key}>
+                <div
+                  className={`flex items-center gap-2 px-2 py-1.5 group cursor-pointer transition-colors ${
+                    isCardSelected ? "bg-[#076bff]/10 ring-1 ring-[#076bff]/30 rounded-t-lg" : "bg-[#f5f5f5] hover:bg-[#efefef] rounded-lg"
+                  }`}
+                  onClick={() => selectProjectCard(isCardSelected ? null : item._key)}
+                >
+                  {/* Drag grip */}
+                  <span className="text-neutral-300 shrink-0 cursor-grab" title="Reorder">
+                    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+                      <circle cx="3" cy="2" r="1" />
+                      <circle cx="7" cy="2" r="1" />
+                      <circle cx="3" cy="5" r="1" />
+                      <circle cx="7" cy="5" r="1" />
+                      <circle cx="3" cy="8" r="1" />
+                      <circle cx="7" cy="8" r="1" />
+                    </svg>
+                  </span>
+
+                  {/* Project name */}
+                  <span className="text-xs text-neutral-700 truncate flex-1">
+                    {proj?.title || item.project_slug}
+                  </span>
+
+                  {/* Override badge */}
+                  {hasOverride && (
+                    <span className="text-[9px] text-neutral-400 bg-neutral-200 px-1.5 py-0.5 rounded-full shrink-0">
+                      override
+                    </span>
+                  )}
+
+                  {/* Move up/down */}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); moveProject(i, -1); }}
+                    disabled={i === 0}
+                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    title="Move up"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <polyline points="18 15 12 9 6 15" />
+                    </svg>
+                  </button>
+                  <button
+                    onClick={(e) => { e.stopPropagation(); moveProject(i, 1); }}
+                    disabled={i === (block.projects || []).length - 1}
+                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    title="Move down"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <polyline points="6 9 12 15 18 9" />
+                    </svg>
+                  </button>
+
+                  {/* Remove */}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); removeProject(item._key); }}
+                    className="p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
+                    title="Remove"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                </div>
+
+                {/* Per-card settings — expanded below this project row */}
+                {isCardSelected && (
+                  <div className="px-2 pb-2 pt-1 -mt-1 rounded-b-lg bg-[#076bff]/5 border-x border-b border-[#076bff]/15">
+                    {isResponsive && (
+                      <div className="flex items-center gap-1.5 px-2 py-1 mb-1 rounded bg-[#076bff]/8">
+                        <span className="text-[10px] font-medium text-[#076bff]">
+                          {activeViewport === "tablet" ? "Tablet" : "Phone"} override
+                        </span>
+                      </div>
+                    )}
+                    <SettingsField label="Ratio">
+                      <CardRatioChips
+                        value={getCardVal(item, "aspect_ratio_override", null)}
+                        onChange={(v) => updateCardResponsive(item._key, "aspect_ratio_override", v)}
+                      />
+                    </SettingsField>
+                  </div>
+                )}
+              </React.Fragment>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Add project button / picker */}
+        {!showPicker ? (
+          <button
+            onClick={() => setShowPicker(true)}
+            className="w-full mt-2 py-2 rounded-lg border border-dashed border-neutral-300 text-neutral-400 text-[11px] uppercase tracking-widest cursor-pointer hover:border-neutral-400 hover:text-neutral-600 transition-colors"
+          >
+            + Add Project
+          </button>
+        ) : (
+          <div className="mt-2 rounded-lg border border-neutral-200 bg-white overflow-hidden">
+            <div className="p-2 border-b border-neutral-100">
+              <input
+                type="text"
+                placeholder="Search projects..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="w-full rounded-md bg-[#f5f5f5] px-2.5 py-1.5 text-xs text-neutral-900 placeholder:text-neutral-400 outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/20"
+                autoFocus
+              />
+            </div>
+            <div className="max-h-[200px] overflow-y-auto">
+              {loading ? (
+                <p className="text-xs text-neutral-400 px-3 py-4 text-center">Loading...</p>
+              ) : filteredAvailable.length === 0 ? (
+                <p className="text-xs text-neutral-400 px-3 py-4 text-center">
+                  {availableProjects.length === 0
+                    ? "No published projects found"
+                    : "All projects already added"}
+                </p>
+              ) : (
+                filteredAvailable.map((proj) => (
+                  <button
+                    key={proj._id}
+                    onClick={() => addProject(proj)}
+                    className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[#f5f5f5] transition-colors"
+                  >
+                    <span className="text-xs text-neutral-700">{proj.title}</span>
+                    <span className="text-[10px] text-neutral-400 ml-auto">/{proj.slug}</span>
+                  </button>
+                ))
+              )}
+            </div>
+            <div className="p-2 border-t border-neutral-100">
+              <button
+                onClick={() => { setShowPicker(false); setSearch(""); }}
+                className="w-full py-1.5 rounded-md text-xs text-neutral-500 hover:text-neutral-700 transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        )}
+      </SettingsSection>
+    </div>
+  );
+}