@actuate-media/cms-admin 0.69.1 → 0.70.0

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { AlertTriangle, Layers, Pencil, RefreshCw, Trash2 } from 'lucide-react'
+import { AlertTriangle, Copy, FilePlus, Layers, Pencil, RefreshCw, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../../lib/api.js'
 import { useApiData } from '../../lib/useApiData.js'
@@ -80,6 +80,32 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
     }
   }
 
+  async function duplicateTemplate(template: PageTemplate) {
+    // The list payload carries the full tree, so no extra fetch is needed.
+    // Duplicating a built-in is the supported way to customize one (built-ins
+    // themselves are locked against edits).
+    if (!template.tree) {
+      toast.error('Template has no layout to duplicate')
+      return
+    }
+    const res = await cmsApi('/page-templates', {
+      method: 'POST',
+      body: JSON.stringify({
+        name: `${template.name ?? 'Untitled template'} (copy)`,
+        description: template.description ?? null,
+        category: categoryOf(template),
+        tree: template.tree,
+        thumbnail: template.thumbnail ?? null,
+      }),
+    })
+    if (res.error) {
+      toast.error(res.error)
+    } else {
+      toast.success('Template duplicated')
+      refetch()
+    }
+  }
+
   return (
     <div className="p-4 pr-8">
       {error && (
@@ -103,14 +129,15 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
             {templates.length} saved template{templates.length === 1 ? '' : 's'}
           </p>
         </div>
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="md"
           onClick={refetch}
-          className="inline-flex items-center gap-2 rounded-md border border-[var(--bdr)] px-3 py-2 text-sm font-medium text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)]"
+          leftIcon={<RefreshCw size={16} aria-hidden />}
         >
-          <RefreshCw className="h-4 w-4" aria-hidden />
           Refresh
-        </button>
+        </Button>
       </div>
 
       {!loading && templates.length > 0 && (
@@ -166,6 +193,8 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
             <TemplateCard
               key={template.id}
               template={template}
+              onUse={() => onNavigate?.(`/page-builder/new?template=${template.id}`)}
+              onDuplicate={() => void duplicateTemplate(template)}
               onEdit={() => setEditTarget(template)}
               onDelete={() => setDeleteTarget(template)}
             />
@@ -197,10 +226,14 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
 
 function TemplateCard({
   template,
+  onUse,
+  onDuplicate,
   onEdit,
   onDelete,
 }: {
   template: PageTemplate
+  onUse: () => void
+  onDuplicate: () => void
   onEdit: () => void
   onDelete: () => void
 }) {
@@ -237,16 +270,24 @@ function TemplateCard({
             {sections} section{sections === 1 ? '' : 's'}
             {updated ? ` · ${updated}` : ''}
           </span>
-          {!template.builtIn && (
-            <RowActions className="absolute top-1/2 right-0 -translate-y-1/2">
-              <RowActionButton aria-label={`Edit ${name}`} onClick={onEdit}>
-                <Pencil size={14} aria-hidden />
-              </RowActionButton>
-              <RowActionButton aria-label={`Delete ${name}`} danger onClick={onDelete}>
-                <Trash2 size={14} aria-hidden />
-              </RowActionButton>
-            </RowActions>
-          )}
+          <RowActions className="absolute top-1/2 right-0 -translate-y-1/2">
+            <RowActionButton aria-label={`Create page from ${name}`} onClick={onUse}>
+              <FilePlus size={14} aria-hidden />
+            </RowActionButton>
+            <RowActionButton aria-label={`Duplicate ${name}`} onClick={onDuplicate}>
+              <Copy size={14} aria-hidden />
+            </RowActionButton>
+            {!template.builtIn && (
+              <>
+                <RowActionButton aria-label={`Edit ${name}`} onClick={onEdit}>
+                  <Pencil size={14} aria-hidden />
+                </RowActionButton>
+                <RowActionButton aria-label={`Delete ${name}`} danger onClick={onDelete}>
+                  <Trash2 size={14} aria-hidden />
+                </RowActionButton>
+              </>
+            )}
+          </RowActions>
         </div>
       </div>
     </li>