modern-cms 1.0.0

package/template/apps/web/app/admin/(protected)/settings/global-sections/page.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import { Save } from "lucide-react";
+import {
+  cloneWithNewIds,
+  createNode,
+  createEmptyPage,
+  findNode,
+  findParent,
+  findAncestorChain,
+  insertNode,
+  isNodeOrDescendant,
+  moveNode,
+  removeNode,
+  duplicateNode,
+  updateNode,
+  getComponentDefinition,
+  type NavItem,
+  type NodeStyle,
+  type PageNode,
+  type SiteTheme,
+} from "@pgcms/shared";
+import { api } from "@/lib/api";
+import { Palette } from "@/components/builder/Palette";
+import { Canvas } from "@/components/builder/Canvas";
+import { Inspector } from "@/components/builder/Inspector";
+import { IconRenderer } from "@/components/builder/IconRenderer";
+
+type Kind = "header" | "footer" | "goToTop";
+type GlobalSectionRow = { kind: string; enabled: boolean; content: PageNode };
+
+/** Edit-once site chrome: the same Palette/Canvas/Inspector as the page builder, but
+ * saving into the GlobalSection rows that render above/below every page. */
+export default function GlobalSectionsEditor() {
+  const [kind, setKind] = useState<Kind>("header");
+  const [trees, setTrees] = useState<Record<Kind, PageNode>>({
+    header: createEmptyPage(),
+    footer: createEmptyPage(),
+    goToTop: createEmptyPage(),
+  });
+  const [enabled, setEnabled] = useState<Record<Kind, boolean>>({
+    header: false,
+    footer: false,
+    goToTop: false,
+  });
+  const [theme, setTheme] = useState<SiteTheme | null>(null);
+  const [navItems, setNavItems] = useState<NavItem[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [activeDragType, setActiveDragType] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState<Date | null>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+  );
+  const tree = trees[kind];
+
+  useEffect(() => {
+    (async () => {
+      const [sections, themeData, nav] = await Promise.all([
+        api.get<GlobalSectionRow[]>("/api/global-sections"),
+        api.get<SiteTheme>("/api/theme"),
+        api.get<NavItem[]>("/api/theme/nav"),
+      ]);
+      setTheme(themeData);
+      setNavItems(nav);
+      const next = {
+        header: createEmptyPage(),
+        footer: createEmptyPage(),
+        goToTop: createEmptyPage(),
+      } as Record<Kind, PageNode>;
+      const nextEnabled = {
+        header: false,
+        footer: false,
+        goToTop: false,
+      } as Record<Kind, boolean>;
+      for (const row of sections) {
+        if (
+          row.kind === "header" ||
+          row.kind === "footer" ||
+          row.kind === "goToTop"
+        ) {
+          next[row.kind as Kind] = row.content;
+          nextEnabled[row.kind as Kind] = row.enabled;
+        }
+      }
+      setTrees(next);
+      setEnabled(nextEnabled);
+      setLoaded(true);
+    })().catch(console.error);
+  }, []);
+
+  function updateTree(updater: (prev: PageNode) => PageNode) {
+    setTrees((prev) => ({ ...prev, [kind]: updater(prev[kind]) }));
+  }
+
+  function handleDragStart(event: DragStartEvent) {
+    const id = String(event.active.id);
+    if (id.startsWith("palette:"))
+      setActiveDragType(id.slice("palette:".length));
+    else setActiveDragType(findNode(tree, id)?.type ?? null);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    setActiveDragType(null);
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    const overData = over.data.current as
+      | { type?: string; parentId?: string }
+      | undefined;
+
+    let targetParentId: string;
+    let targetIndex: number;
+    if (overData?.type === "container" && overData.parentId) {
+      targetParentId = overData.parentId;
+      targetIndex = findNode(tree, targetParentId)?.children.length ?? 0;
+    } else {
+      const parentInfo = findParent(tree, overId);
+      if (!parentInfo) return;
+      targetParentId = parentInfo.parent.id;
+      targetIndex = parentInfo.index;
+    }
+
+    const targetDef = getComponentDefinition(
+      findNode(tree, targetParentId)?.type ?? "",
+    );
+    if (targetParentId !== tree.id && !targetDef?.allowsChildren) return;
+
+    if (activeId.startsWith("palette:")) {
+      const newNode = createNode(activeId.slice("palette:".length));
+      updateTree((prev) =>
+        insertNode(prev, targetParentId, newNode, targetIndex),
+      );
+      setSelectedId(newNode.id);
+      return;
+    }
+
+    if (activeId.startsWith("block:")) {
+      const blockId = activeId.slice("block:".length);
+      api
+        .get<{ id: string; content: PageNode }[]>("/api/blocks")
+        .then((blocks) => {
+          const block = blocks.find((b) => b.id === blockId);
+          if (!block) return;
+          const copy = cloneWithNewIds(block.content);
+          updateTree((prev) =>
+            insertNode(prev, targetParentId, copy, targetIndex),
+          );
+          setSelectedId(copy.id);
+        })
+        .catch(console.error);
+      return;
+    }
+
+    const activeNode = findNode(tree, activeId);
+    if (
+      !activeNode ||
+      isNodeOrDescendant(activeNode, targetParentId) ||
+      activeId === overId
+    )
+      return;
+    updateTree((prev) => {
+      const before = findParent(prev, activeId);
+      let idx = targetIndex;
+      if (
+        before &&
+        before.parent.id === targetParentId &&
+        before.index < targetIndex
+      )
+        idx = targetIndex - 1;
+      return moveNode(prev, activeId, targetParentId, idx);
+    });
+  }
+
+  async function save() {
+    setSaving(true);
+    try {
+      await Promise.all(
+        (["header", "footer", "goToTop"] as Kind[]).map((k) =>
+          api.put(`/api/global-sections/${k}`, { enabled: enabled[k], content: trees[k] })
+        )
+      );
+      setSavedAt(new Date());
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const selectedNode = selectedId ? findNode(tree, selectedId) : null;
+  const ancestors =
+    selectedId && tree ? findAncestorChain(tree, selectedId) : [];
+
+  if (!loaded || !theme) {
+    return (
+      <div className="p-8 text-sm text-slate-400">Loading global sections…</div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between border-b bg-white px-4 py-2 shrink-0">
+        <div className="flex items-center gap-4">
+          <div className="font-semibold text-sm">Global Sections</div>
+          <div className="flex items-center border rounded-md overflow-hidden">
+            {(["header", "footer", "goToTop"] as Kind[]).map((k) => (
+              <button
+                key={k}
+                onClick={() => {
+                  setKind(k);
+                  setSelectedId(null);
+                }}
+                className={
+                  kind === k ? "px-3 py-1.5 text-xs font-medium bg-blue-600 text-white" : "px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                }
+              >
+                {k === "header" ? "Header" : k === "footer" ? "Footer" : "Go to Top"}
+              </button>
+            ))}
+          </div>
+          <label className="flex items-center gap-2 text-xs text-slate-600">
+            <input
+              type="checkbox"
+              checked={enabled[kind]}
+              onChange={(e) =>
+                setEnabled((prev) => ({ ...prev, [kind]: e.target.checked }))
+              }
+            />
+            Show on every page
+          </label>
+          <span className="text-xs text-slate-400">
+            Pages that still contain their own header/footer sections will show
+            both — remove the per-page copies once this is enabled.
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          {savedAt && (
+            <span className="text-xs text-slate-400">
+              saved {savedAt.toLocaleTimeString()}
+            </span>
+          )}
+          <button
+            onClick={save}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+          >
+            <Save size={15} /> Save
+          </button>
+        </div>
+      </div>
+
+      <DndContext
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex flex-1 overflow-hidden">
+          <Palette />
+          <Canvas
+            tree={tree}
+            theme={theme}
+            navItems={navItems}
+            selectedId={selectedId}
+            onSelect={(id) => setSelectedId(id === "" ? null : id)}
+            onDelete={(id) => {
+              updateTree((prev) => removeNode(prev, id));
+              setSelectedId((sel) => (sel === id ? null : sel));
+            }}
+            onDuplicate={(id) => updateTree((prev) => duplicateNode(prev, id))}
+            onToggleHidden={(id) =>
+              updateTree((prev) =>
+                updateNode(prev, id, (n) => ({
+                  ...n,
+                  props: { ...n.props, hidden: !n.props.hidden },
+                })),
+              )
+            }
+            onChangeStyle={(id, style) =>
+              updateTree((prev) =>
+                updateNode(prev, id, (n) => ({ ...n, style })),
+              )
+            }
+          />
+          <Inspector
+            node={selectedNode ?? null}
+            ancestors={ancestors}
+            onSelect={(id) => setSelectedId(id)}
+            onChangeProps={(props) =>
+              selectedId &&
+              updateTree((prev) =>
+                updateNode(prev, selectedId, (n) => ({ ...n, props })),
+              )
+            }
+            onChangeStyle={(style: NodeStyle) =>
+              selectedId &&
+              updateTree((prev) =>
+                updateNode(prev, selectedId, (n) => ({ ...n, style })),
+              )
+            }
+            onChangeColumnCount={() => {}}
+            onChangeGridDimensions={() => {}}
+            onChangeZoneCount={() => {}}
+            onEnableHeaderZones={() => {}}
+          />
+        </div>
+        <DragOverlay>
+          {activeDragType && (
+            <div className="bg-slate-900 text-white text-xs rounded px-3 py-2 flex items-center gap-2 shadow-lg">
+              <IconRenderer
+                name={getComponentDefinition(activeDragType)?.icon ?? "Square"}
+                size={14}
+              />
+              {getComponentDefinition(activeDragType)?.label ?? activeDragType}
+            </div>
+          )}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/settings/navigation/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, ChevronUp, ChevronDown, CornerDownRight } from "lucide-react";
+import { buildNavTree, type NavItem } from "@pgcms/shared";
+import { api } from "@/lib/api";
+
+export default function NavigationSettingsPage() {
+  const [items, setItems] = useState<NavItem[] | null>(null);
+  const [label, setLabel] = useState("");
+  const [href, setHref] = useState("");
+  const [parentId, setParentId] = useState<string>("");
+
+  function refresh() {
+    api.get<NavItem[]>("/api/theme/nav").then((data) => setItems([...data].sort((a, b) => a.order - b.order)));
+  }
+
+  useEffect(refresh, []);
+
+  const tree = items ? buildNavTree(items) : [];
+  const topLevelItems = items?.filter((i) => !i.parentId) ?? [];
+
+  async function addItem() {
+    if (!label || !href) return;
+    const siblingCount = (items?.filter((i) => (i.parentId ?? "") === (parentId || "")) ?? []).length;
+    await api.post("/api/theme/nav", {
+      label,
+      href,
+      order: siblingCount * 10,
+      parentId: parentId || null,
+    });
+    setLabel("");
+    setHref("");
+    setParentId("");
+    refresh();
+  }
+
+  async function removeItem(id: string) {
+    await api.delete(`/api/theme/nav/${id}`);
+    refresh();
+  }
+
+  async function changeParent(item: NavItem, newParentId: string) {
+    const siblingCount = (items?.filter((i) => (i.parentId ?? "") === newParentId) ?? []).length;
+    await api.put(`/api/theme/nav/${item.id}`, { parentId: newParentId || null, order: siblingCount * 10 });
+    refresh();
+  }
+
+  async function move(siblings: NavItem[], index: number, dir: -1 | 1) {
+    const target = index + dir;
+    if (target < 0 || target >= siblings.length) return;
+    const a = siblings[index];
+    const b = siblings[target];
+    await Promise.all([
+      api.put(`/api/theme/nav/${a.id}`, { order: b.order }),
+      api.put(`/api/theme/nav/${b.id}`, { order: a.order }),
+    ]);
+    refresh();
+  }
+
+  return (
+    <div className="p-8 max-w-2xl space-y-6">
+      <h1 className="text-2xl font-semibold">Navigation</h1>
+      <p className="text-sm text-slate-500">
+        Links shown in the site header. Give an item a parent to make it a submenu — it opens on hover under its
+        parent link.
+      </p>
+
+      <div className="bg-white border rounded-lg p-4 space-y-3">
+        <div className="flex gap-3">
+          <input
+            placeholder="Label"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            className="flex-1 border rounded-md px-3 py-2 text-sm"
+          />
+          <input
+            placeholder="/path or https://..."
+            value={href}
+            onChange={(e) => setHref(e.target.value)}
+            className="flex-1 border rounded-md px-3 py-2 text-sm"
+          />
+        </div>
+        <div className="flex gap-3">
+          <select
+            value={parentId}
+            onChange={(e) => setParentId(e.target.value)}
+            className="flex-1 border rounded-md px-3 py-2 text-sm bg-white"
+          >
+            <option value="">No parent (top-level menu item)</option>
+            {topLevelItems.map((p) => (
+              <option key={p.id} value={p.id}>
+                Submenu under &quot;{p.label}&quot;
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={addItem}
+            className="flex items-center gap-1.5 bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700"
+          >
+            <Plus size={15} /> Add
+          </button>
+        </div>
+      </div>
+
+      <div className="bg-white border rounded-lg divide-y">
+        {tree.length === 0 && <div className="p-6 text-sm text-slate-500">No navigation links yet.</div>}
+        {tree.map((item, index) => (
+          <div key={item.id}>
+            <NavRow
+              item={item}
+              topLevelItems={topLevelItems}
+              onMoveUp={() => move(topLevelItems, index, -1)}
+              onMoveDown={() => move(topLevelItems, index, 1)}
+              onRemove={() => removeItem(item.id)}
+              onChangeParent={(newParentId) => changeParent(item, newParentId)}
+            />
+            {item.children.map((child, childIndex) => (
+              <div key={child.id} className="pl-8 border-t">
+                <NavRow
+                  item={{ ...child, children: [] }}
+                  topLevelItems={topLevelItems}
+                  isChild
+                  onMoveUp={() => move(item.children, childIndex, -1)}
+                  onMoveDown={() => move(item.children, childIndex, 1)}
+                  onRemove={() => removeItem(child.id)}
+                  onChangeParent={(newParentId) => changeParent(child, newParentId)}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function NavRow({
+  item,
+  topLevelItems,
+  isChild,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+  onChangeParent,
+}: {
+  item: NavItem & { children: NavItem[] };
+  topLevelItems: NavItem[];
+  isChild?: boolean;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onRemove: () => void;
+  onChangeParent: (parentId: string) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 gap-3">
+      <div className="flex items-center gap-2 min-w-0">
+        {isChild && <CornerDownRight size={14} className="text-slate-300 shrink-0" />}
+        <div className="min-w-0">
+          <div className="font-medium text-sm truncate">{item.label}</div>
+          <div className="text-xs text-slate-400 truncate">{item.href}</div>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <select
+          value={item.parentId ?? ""}
+          onChange={(e) => onChangeParent(e.target.value)}
+          className="text-xs border rounded-md px-2 py-1.5 bg-white text-slate-600"
+          title="Parent menu item"
+        >
+          <option value="">Top-level</option>
+          {topLevelItems
+            .filter((p) => p.id !== item.id)
+            .map((p) => (
+              <option key={p.id} value={p.id}>
+                Under &quot;{p.label}&quot;
+              </option>
+            ))}
+        </select>
+        <button onClick={onMoveUp} className="text-slate-400 hover:text-slate-700">
+          <ChevronUp size={16} />
+        </button>
+        <button onClick={onMoveDown} className="text-slate-400 hover:text-slate-700">
+          <ChevronDown size={16} />
+        </button>
+        <button onClick={onRemove} className="text-slate-400 hover:text-red-600">
+          <Trash2 size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/apps/web/app/admin/(protected)/settings/redirects/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ArrowRight, Plus, Trash2 } from "lucide-react";
+import { api } from "@/lib/api";
+
+type Redirect = { id: string; fromPath: string; toPath: string; permanent: boolean; createdAt: string };
+
+/** Old URL → new URL mappings. Consulted whenever a public path matches neither a page
+ * nor a collection item, so restructured sites keep their inbound links working. */
+export default function RedirectsPage() {
+  const [redirects, setRedirects] = useState<Redirect[]>([]);
+  const [fromPath, setFromPath] = useState("");
+  const [toPath, setToPath] = useState("");
+  const [permanent, setPermanent] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.get<Redirect[]>("/api/redirects").then(setRedirects).catch(() => {});
+  }, []);
+
+  async function add() {
+    setError(null);
+    if (!fromPath.trim() || !toPath.trim()) {
+      setError("Both paths are required.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await api.post<Redirect>("/api/redirects", { fromPath, toPath, permanent });
+      setRedirects((prev) => [created, ...prev]);
+      setFromPath("");
+      setToPath("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create redirect");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function remove(id: string) {
+    await api.delete(`/api/redirects/${id}`);
+    setRedirects((prev) => prev.filter((r) => r.id !== id));
+  }
+
+  return (
+    <div className="p-8 max-w-3xl">
+      <h1 className="text-xl font-semibold mb-1">Redirects</h1>
+      <p className="text-sm text-slate-500 mb-6">
+        When a visitor hits a URL that no longer exists, they're sent to the new address instead of a 404. Use these
+        after renaming slugs or restructuring the site.
+      </p>
+
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2 mb-4">{error}</div>}
+
+      <div className="flex items-end gap-2 mb-8">
+        <div className="flex-1 space-y-1">
+          <label className="text-xs font-medium text-slate-600">From (old path)</label>
+          <input
+            value={fromPath}
+            onChange={(e) => setFromPath(e.target.value)}
+            placeholder="/old-page"
+            className="w-full border rounded-md px-3 py-2 text-sm"
+          />
+        </div>
+        <ArrowRight size={16} className="mb-2.5 text-slate-400 shrink-0" />
+        <div className="flex-1 space-y-1">
+          <label className="text-xs font-medium text-slate-600">To (new path or URL)</label>
+          <input
+            value={toPath}
+            onChange={(e) => setToPath(e.target.value)}
+            placeholder="/new-page"
+            className="w-full border rounded-md px-3 py-2 text-sm"
+          />
+        </div>
+        <label className="flex items-center gap-1.5 text-xs text-slate-600 mb-2.5 shrink-0">
+          <input type="checkbox" checked={permanent} onChange={(e) => setPermanent(e.target.checked)} />
+          Permanent (301)
+        </label>
+        <button
+          onClick={add}
+          disabled={saving}
+          className="flex items-center gap-1.5 bg-blue-600 text-white rounded-md px-3 py-2 text-sm font-medium hover:bg-blue-700 disabled:opacity-50 shrink-0"
+        >
+          <Plus size={15} /> Add
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        {redirects.length === 0 && <div className="text-sm text-slate-400">No redirects yet.</div>}
+        {redirects.map((r) => (
+          <div key={r.id} className="flex items-center justify-between border rounded-md px-3 py-2 text-sm">
+            <div className="flex items-center gap-2 min-w-0">
+              <code className="truncate">{r.fromPath}</code>
+              <ArrowRight size={13} className="text-slate-400 shrink-0" />
+              <code className="truncate">{r.toPath}</code>
+              <span className="text-xs text-slate-400 shrink-0">{r.permanent ? "301" : "302"}</span>
+            </div>
+            <button onClick={() => remove(r.id)} className="text-slate-300 hover:text-red-600 shrink-0 ml-3">
+              <Trash2 size={15} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}