@actuate-media/cms-admin 0.69.1 → 0.70.0

package/src/views/Pages/PagesListView.tsx

@@ -28,6 +28,7 @@ import {
   duplicatePage,
   fetchPagesDataset,
   groupPages,
+  movePage,
   type BulkResult,
   type Page,
   type PageGroupBy,
@@ -35,9 +36,15 @@ import {
   type PageStatus,
   type PageTag,
 } from '../../lib/pages-service.js'
-import { buildPageTree, defaultExpandedIds, flattenPageTree } from '../../lib/pages-tree.js'
+import {
+  buildPageTree,
+  checkReparent,
+  defaultExpandedIds,
+  flattenPageTree,
+} from '../../lib/pages-tree.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
 import { PageTagChip, PageTagsCell } from '../../components/pages/tag-badges.js'
+import { Button } from '../../components/ui/Button.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 import { PagesTreeTable } from './PagesTreeTable.js'
@@ -382,6 +389,38 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     }
   }
 
+  /** Drag-reparent from the tree view: `sourceId` becomes a child of `targetId`. */
+  const runReparent = async (sourceId: string, targetId: string) => {
+    const source = allPages.find((p) => p.id === sourceId)
+    const target = allPages.find((p) => p.id === targetId)
+    if (!source || !target) return
+    const check = checkReparent(treeRoots, sourceId, targetId)
+    if (!check.ok) {
+      toast.error(check.reason)
+      return
+    }
+    const promise = movePage(sourceId, targetId).then((r) => {
+      if (r.error) throw new Error(r.error)
+    })
+    toast.promise(promise, {
+      loading: `Moving "${source.title}"…`,
+      success: `"${source.title}" moved under "${target.title}"`,
+      error: (e: Error) => e.message || 'Move failed',
+    })
+    try {
+      await promise
+      // Make sure the new parent is expanded so the moved row stays visible.
+      setExpandedOverride((prev) => {
+        const next = new Set(prev ?? defaultExpanded)
+        next.add(targetId)
+        return next
+      })
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
   const runRowDelete = async (p: Page) => {
     const promise = deletePage(p.id).then((r) => {
       if (r.error) throw new Error(r.error)
@@ -419,14 +458,16 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
               : `${grandTotal} page${grandTotal === 1 ? '' : 's'} · organized by tags`}
           </p>
         </div>
-        <button
+        <Button
           type="button"
+          variant="primary"
+          size="sm"
+          className="shadow-sm"
           onClick={() => onNavigate('/pages/new')}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+          leftIcon={<Plus size={16} aria-hidden />}
         >
-          <Plus className="h-3.5 w-3.5" aria-hidden />
           New page
-        </button>
+        </Button>
       </div>
 
       {/* Controls row */}
@@ -559,6 +600,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             onAddSubPage={(p) => onNavigate(`/pages/new?parent=${encodeURIComponent(p.id)}`)}
             onDuplicate={(p) => void runDuplicate(p)}
             onDelete={(p) => setRowDelete(p)}
+            onReparent={(sourceId, targetId) => void runReparent(sourceId, targetId)}
+            canReparent={(sourceId, targetId) => checkReparent(treeRoots, sourceId, targetId).ok}
             onRetry={() => setRefreshToken((t) => t + 1)}
             onClearFilters={clearFilters}
             onNewPage={() => onNavigate('/pages/new')}
@@ -1154,14 +1197,16 @@ function EmptyRow({
             Clear filters
           </button>
         ) : (
-          <button
+          <Button
             type="button"
+            variant="primary"
+            size="sm"
+            className="shadow-sm"
             onClick={onNewPage}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors"
+            leftIcon={<Plus size={16} aria-hidden />}
           >
-            <Plus className="h-3.5 w-3.5" aria-hidden />
             New page
-          </button>
+          </Button>
         )}
       </td>
     </tr>

package/src/views/Pages/PagesTreeTable.tsx

@@ -1,9 +1,23 @@
 'use client'
 
-import { ChevronDown, Copy, PenLine, Plus, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  pointerWithin,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core'
+import { ChevronDown, Copy, GripVertical, PenLine, Plus, Trash2 } from 'lucide-react'
 import type { Page } from '../../lib/pages-service.js'
 import type { PageTreeRow } from '../../lib/pages-tree.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
+import { Button } from '../../components/ui/Button.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
 /**
@@ -16,6 +30,12 @@ import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
  * renders at depth 0 and expand state is ignored — the caller passes
  * pre-flattened rows, this component just skips the leaf spacers' tree
  * semantics.
+ *
+ * Drag-reparent: rows can be dragged (grip handle) and dropped onto
+ * another row to become its child. There is intentionally no "drop to
+ * make top-level" zone — with `parentPageId` cleared, the tree falls back
+ * to path-prefix derivation, which would silently re-nest most pages, so
+ * un-nesting stays an editor operation. Disabled while flattened.
  */
 
 interface PagesTreeTableProps {
@@ -33,6 +53,10 @@ interface PagesTreeTableProps {
   onAddSubPage: (page: Page) => void
   onDuplicate: (page: Page) => void
   onDelete: (page: Page) => void
+  /** Drop handler: `source` becomes a child of `targetParent`. */
+  onReparent: (sourceId: string, targetParentId: string) => void
+  /** Validity gate for a drop (cycle/self/no-op checks live in the caller). */
+  canReparent: (sourceId: string, targetParentId: string) => boolean
   onRetry: () => void
   onClearFilters: () => void
   onNewPage: () => void
@@ -55,125 +79,157 @@ export function PagesTreeTable({
   onAddSubPage,
   onDuplicate,
   onDelete,
+  onReparent,
+  canReparent,
   onRetry,
   onClearFilters,
   onNewPage,
 }: PagesTreeTableProps) {
   const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.page.id))
+  const [draggingId, setDraggingId] = useState<string | null>(null)
+
+  // A small activation distance keeps plain clicks (title, checkbox,
+  // chevron) from starting a drag.
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor),
+  )
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setDraggingId(String(event.active.id))
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setDraggingId(null)
+    const sourceId = String(event.active.id)
+    const targetId = event.over ? String(event.over.id) : null
+    if (!targetId || targetId === sourceId) return
+    if (!canReparent(sourceId, targetId)) return
+    onReparent(sourceId, targetId)
+  }
 
   return (
-    <div className="overflow-x-auto">
-      <table className="w-full min-w-[800px]" role="table" aria-label="Pages tree">
-        <colgroup>
-          <col style={{ width: '40px' }} />
-          <col />
-          <col style={{ width: '130px' }} />
-          <col style={{ width: '150px' }} />
-          <col style={{ width: '120px' }} />
-          <col style={{ width: '115px' }} />
-          <col style={{ width: '70px' }} />
-          <col style={{ width: '170px' }} />
-        </colgroup>
-        <thead className="border-b border-[var(--bdr)]">
-          <tr>
-            <th scope="col" className="px-3 py-2.5 text-left">
-              <input
-                type="checkbox"
-                aria-label="Select all visible pages"
-                checked={allSelected}
-                onChange={(e) => onToggleAll(e.target.checked)}
-                className="accent-primary rounded border-[var(--bdr)]"
-              />
-            </th>
-            <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
-              Title
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Template
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Author
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Status
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              Last Modified
-            </th>
-            <th scope="col" className={TH_CLASS}>
-              SEO
-            </th>
-            <th scope="col" className="px-3 py-2.5 text-right">
-              <span className="sr-only">Actions</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {loading && rows.length === 0 && <TreeLoadingRows />}
-          {!loading && error && (
-            <tr>
-              <td colSpan={8} className="px-3 py-12 text-center">
-                <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
-                <button
-                  onClick={onRetry}
-                  className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
-                >
-                  Try again
-                </button>
-              </td>
-            </tr>
-          )}
-          {!loading && !error && rows.length === 0 && (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={pointerWithin}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={() => setDraggingId(null)}
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[800px]" role="table" aria-label="Pages tree">
+          <colgroup>
+            <col style={{ width: '40px' }} />
+            <col />
+            <col style={{ width: '130px' }} />
+            <col style={{ width: '150px' }} />
+            <col style={{ width: '120px' }} />
+            <col style={{ width: '115px' }} />
+            <col style={{ width: '70px' }} />
+            <col style={{ width: '170px' }} />
+          </colgroup>
+          <thead className="border-b border-[var(--bdr)]">
             <tr>
-              <td colSpan={8} className="px-3 py-16 text-center">
-                <div className="mb-2 text-sm font-medium text-[var(--txt)]">
-                  {flattened ? 'No pages match your filters' : 'No pages yet'}
-                </div>
-                <div className="mb-4 text-sm text-[var(--sub)]">
-                  {flattened
-                    ? 'Try clearing the search or status filter above.'
-                    : 'Create your first page to get started.'}
-                </div>
-                {flattened ? (
-                  <button
-                    type="button"
-                    onClick={onClearFilters}
-                    className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
-                  >
-                    Clear filters
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={onNewPage}
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
-                  >
-                    <Plus className="h-3.5 w-3.5" aria-hidden />
-                    New page
-                  </button>
-                )}
-              </td>
+              <th scope="col" className="px-3 py-2.5 text-left">
+                <input
+                  type="checkbox"
+                  aria-label="Select all visible pages"
+                  checked={allSelected}
+                  onChange={(e) => onToggleAll(e.target.checked)}
+                  className="accent-primary rounded border-[var(--bdr)]"
+                />
+              </th>
+              <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
+                Title
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Template
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Author
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Status
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                Last Modified
+              </th>
+              <th scope="col" className={TH_CLASS}>
+                SEO
+              </th>
+              <th scope="col" className="px-3 py-2.5 text-right">
+                <span className="sr-only">Actions</span>
+              </th>
             </tr>
-          )}
-          {!loading &&
-            !error &&
-            rows.map((row) => (
-              <TreeRow
-                key={row.page.id}
-                row={row}
-                isSelected={selected.has(row.page.id)}
-                isExpanded={expanded.has(row.page.id)}
-                onToggleExpand={() => onToggleExpand(row.page.id)}
-                onToggleSelect={() => onToggleSelect(row.page.id)}
-                onOpen={() => onOpen(row.page)}
-                onAddSubPage={() => onAddSubPage(row.page)}
-                onDuplicate={() => onDuplicate(row.page)}
-                onDelete={() => onDelete(row.page)}
-              />
-            ))}
-        </tbody>
-      </table>
-    </div>
+          </thead>
+          <tbody>
+            {loading && rows.length === 0 && <TreeLoadingRows />}
+            {!loading && error && (
+              <tr>
+                <td colSpan={8} className="px-3 py-12 text-center">
+                  <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
+                  <Button variant="link" size="md" onClick={onRetry}>
+                    Try again
+                  </Button>
+                </td>
+              </tr>
+            )}
+            {!loading && !error && rows.length === 0 && (
+              <tr>
+                <td colSpan={8} className="px-3 py-16 text-center">
+                  <div className="mb-2 text-sm font-medium text-[var(--txt)]">
+                    {flattened ? 'No pages match your filters' : 'No pages yet'}
+                  </div>
+                  <div className="mb-4 text-sm text-[var(--sub)]">
+                    {flattened
+                      ? 'Try clearing the search or status filter above.'
+                      : 'Create your first page to get started.'}
+                  </div>
+                  {flattened ? (
+                    <Button type="button" variant="link" size="md" onClick={onClearFilters}>
+                      Clear filters
+                    </Button>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="primary"
+                      size="sm"
+                      className="shadow-sm"
+                      onClick={onNewPage}
+                      leftIcon={<Plus size={16} aria-hidden />}
+                    >
+                      New page
+                    </Button>
+                  )}
+                </td>
+              </tr>
+            )}
+            {!loading &&
+              !error &&
+              rows.map((row) => (
+                <TreeRow
+                  key={row.page.id}
+                  row={row}
+                  isSelected={selected.has(row.page.id)}
+                  isExpanded={expanded.has(row.page.id)}
+                  draggable={!flattened}
+                  isDropTarget={
+                    draggingId !== null &&
+                    draggingId !== row.page.id &&
+                    canReparent(draggingId, row.page.id)
+                  }
+                  onToggleExpand={() => onToggleExpand(row.page.id)}
+                  onToggleSelect={() => onToggleSelect(row.page.id)}
+                  onOpen={() => onOpen(row.page)}
+                  onAddSubPage={() => onAddSubPage(row.page)}
+                  onDuplicate={() => onDuplicate(row.page)}
+                  onDelete={() => onDelete(row.page)}
+                />
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </DndContext>
   )
 }
 
@@ -181,6 +237,8 @@ function TreeRow({
   row,
   isSelected,
   isExpanded,
+  draggable,
+  isDropTarget,
   onToggleExpand,
   onToggleSelect,
   onOpen,
@@ -191,6 +249,9 @@ function TreeRow({
   row: PageTreeRow
   isSelected: boolean
   isExpanded: boolean
+  draggable: boolean
+  /** true while another row is being dragged and this row is a valid parent */
+  isDropTarget: boolean
   onToggleExpand: () => void
   onToggleSelect: () => void
   onOpen: () => void
@@ -199,10 +260,28 @@ function TreeRow({
   onDelete: () => void
 }) {
   const { page, depth, hasChildren } = row
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    isDragging,
+  } = useDraggable({ id: page.id, disabled: !draggable })
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: page.id,
+    disabled: !draggable || !isDropTarget,
+  })
+
   return (
     <tr
+      ref={setDropRef}
       className={`group h-14 border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
         isSelected ? 'bg-[var(--acc-l)]' : ''
+      } ${isDragging ? 'opacity-40' : ''} ${
+        isDropTarget && isOver
+          ? 'bg-[var(--acc-l)] shadow-[inset_0_0_0_2px_var(--acc)]'
+          : isDropTarget
+            ? 'shadow-[inset_0_0_0_1px_var(--acc-m)]'
+            : ''
       }`}
     >
       <td className="px-3 align-middle">
@@ -218,6 +297,19 @@ function TreeRow({
         {/* Indentation is data-driven (24px per depth level), so it must be
             an inline style rather than a class. */}
         <div className="flex items-center" style={{ paddingLeft: depth * 24 }}>
+          {draggable && (
+            <button
+              type="button"
+              ref={setDragRef}
+              {...attributes}
+              {...listeners}
+              aria-label={`Move "${page.title}" — drag onto another page to nest it there`}
+              title="Drag to move under another page"
+              className="mr-1 flex h-5 w-5 shrink-0 cursor-grab items-center justify-center rounded-[5px] text-[var(--muted)] opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100 hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none active:cursor-grabbing"
+            >
+              <GripVertical size={13} aria-hidden />
+            </button>
+          )}
           {hasChildren ? (
             <button
               type="button"

package/src/views/Pages.tsx

@@ -97,6 +97,10 @@ function buildApiUrl(folderSel: FolderSelection): string {
   return `${base}&folderId=${folderSel.folderId}`
 }
 
+/**
+ * @deprecated Superseded by `PagesListView` (`views/Pages/PagesListView.tsx`),
+ * which `AdminRoot` routes to; will be removed in the next major.
+ */
 export function Pages({ onNavigate }: PagesProps) {
   const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
   const [sidebarOpen, setSidebarOpen] = useState(true)

package/src/views/Redirects.tsx

@@ -26,6 +26,10 @@ export interface RedirectsProps {
   onNavigate?: (path: string) => void
 }
 
+/**
+ * @deprecated Superseded by `RedirectsTab` (`views/seo/RedirectsTab.tsx`)
+ * inside the SEO view; will be removed in the next major.
+ */
 export function Redirects({ onNavigate }: RedirectsProps) {
   const { data, loading, error, refetch } = useApiData<any[]>('/redirects')
   const [showAddDialog, setShowAddDialog] = useState(false)

package/src/views/ScriptTags.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { EnabledSwitch } from '../components/EnabledSwitch.js'
+import { Button } from '../components/ui/Button.js'
 import { StatPill } from '../components/ui/StatPill.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -168,14 +169,15 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
               </div>
             )}
           </div>
-          <button
+          <Button
             type="button"
+            variant="primary"
+            size="md"
             onClick={() => setSelection({ mode: 'new' })}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+            leftIcon={<Plus size={16} aria-hidden />}
           >
-            <Plus className="h-4 w-4" />
             New Script
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -188,14 +190,16 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
               <p className="mt-1 text-sm text-[var(--sub)]">
                 Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
               </p>
-              <button
+              <Button
                 type="button"
+                variant="primary"
+                size="md"
+                className="mt-4"
                 onClick={() => setSelection({ mode: 'new' })}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+                leftIcon={<Plus size={16} aria-hidden />}
               >
-                <Plus className="h-4 w-4" />
                 Add Your First Script
-              </button>
+              </Button>
             </div>
           ) : (
             <div className="overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">

package/src/views/page-builder/PageBuilder.tsx

@@ -21,6 +21,8 @@ import { AIGenerateDialog } from './AIGenerateDialog.js'
 
 export interface PageBuilderProps {
   documentId?: string
+  /** Seed a NEW page from a saved template (`/page-builder/new?template=<id>`). */
+  templateId?: string
   collectionSlug: string
   config: any
   onNavigate: (path: string) => void
@@ -55,7 +57,13 @@ function initialSectionsCollapsed(): boolean {
   return false
 }
 
-export function PageBuilder({ documentId, collectionSlug, config, onNavigate }: PageBuilderProps) {
+export function PageBuilder({
+  documentId,
+  templateId,
+  collectionSlug,
+  config,
+  onNavigate,
+}: PageBuilderProps) {
   const [loading, setLoading] = useState(!!documentId)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
@@ -100,6 +108,25 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
 
   useEffect(() => {
     if (!documentId) {
+      // A new page can be seeded from a saved template ("Use template" on
+      // the Templates grid). Load the template tree, then hand the canvas
+      // over as a dirty, unsaved draft.
+      if (templateId) {
+        let cancelledNew = false
+        setLoading(true)
+        cmsApi<{ name?: string; tree?: PageNode }>(`/page-templates/${templateId}`).then((res) => {
+          if (cancelledNew) return
+          if (res.error) {
+            toast.error(`Couldn't load template: ${res.error}`)
+          } else if (res.data?.tree) {
+            replaceTree(res.data.tree)
+          }
+          setLoading(false)
+        })
+        return () => {
+          cancelledNew = true
+        }
+      }
       setLoading(false)
       return
     }
@@ -139,7 +166,8 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
     return () => {
       cancelled = true
     }
-  }, [documentId, collectionSlug])
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- replaceTree/setPageSettings are stable builder actions
+  }, [documentId, templateId, collectionSlug])
 
   const handleSave = useCallback(async () => {
     setSaving(true)