@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/views/Pages/PagesTreeTable.tsx

@@ -0,0 +1,339 @@
+'use client'
+
+import { ChevronDown, Copy, 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 { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
+
+/**
+ * Tree-mode table for the Pages list ("Pages (tree version)" design):
+ * nested parent/child rows with indentation (24px per level), a 20×20
+ * expand chevron that rotates -90° when collapsed, 56px rows, and hover
+ * actions (labeled Edit + Add sub-page / Duplicate / Delete icons).
+ *
+ * When `flattened` is true (search or status filter active) every match
+ * renders at depth 0 and expand state is ignored — the caller passes
+ * pre-flattened rows, this component just skips the leaf spacers' tree
+ * semantics.
+ */
+
+interface PagesTreeTableProps {
+  rows: PageTreeRow[]
+  loading: boolean
+  error: string | null
+  /** true when search/status filters flattened the tree */
+  flattened: boolean
+  selected: Set<string>
+  expanded: Set<string>
+  onToggleExpand: (id: string) => void
+  onToggleSelect: (id: string) => void
+  onToggleAll: (checked: boolean) => void
+  onOpen: (page: Page) => void
+  onAddSubPage: (page: Page) => void
+  onDuplicate: (page: Page) => void
+  onDelete: (page: Page) => void
+  onRetry: () => void
+  onClearFilters: () => void
+  onNewPage: () => void
+}
+
+const TH_CLASS =
+  'px-3 py-2.5 text-left text-[11.5px] font-semibold tracking-[0.4px] uppercase text-[var(--muted)]'
+
+export function PagesTreeTable({
+  rows,
+  loading,
+  error,
+  flattened,
+  selected,
+  expanded,
+  onToggleExpand,
+  onToggleSelect,
+  onToggleAll,
+  onOpen,
+  onAddSubPage,
+  onDuplicate,
+  onDelete,
+  onRetry,
+  onClearFilters,
+  onNewPage,
+}: PagesTreeTableProps) {
+  const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.page.id))
+
+  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="border-border accent-primary rounded"
+              />
+            </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="text-foreground mb-2 text-sm font-medium">{error}</div>
+                <button onClick={onRetry} className="text-primary text-sm hover:underline">
+                  Try again
+                </button>
+              </td>
+            </tr>
+          )}
+          {!loading && !error && rows.length === 0 && (
+            <tr>
+              <td colSpan={8} className="px-3 py-16 text-center">
+                <div className="text-foreground mb-2 text-sm font-medium">
+                  {flattened ? 'No pages match your filters' : 'No pages yet'}
+                </div>
+                <div className="text-muted-foreground mb-4 text-sm">
+                  {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 text-sm hover:underline"
+                  >
+                    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"
+                  >
+                    <Plus className="h-3.5 w-3.5" 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)}
+                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>
+  )
+}
+
+function TreeRow({
+  row,
+  isSelected,
+  isExpanded,
+  onToggleExpand,
+  onToggleSelect,
+  onOpen,
+  onAddSubPage,
+  onDuplicate,
+  onDelete,
+}: {
+  row: PageTreeRow
+  isSelected: boolean
+  isExpanded: boolean
+  onToggleExpand: () => void
+  onToggleSelect: () => void
+  onOpen: () => void
+  onAddSubPage: () => void
+  onDuplicate: () => void
+  onDelete: () => void
+}) {
+  const { page, depth, hasChildren } = row
+  return (
+    <tr
+      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)]' : ''
+      }`}
+    >
+      <td className="px-3 align-middle">
+        <input
+          type="checkbox"
+          aria-label={`Select "${page.title}"`}
+          checked={isSelected}
+          onChange={onToggleSelect}
+          className="border-border accent-primary rounded"
+        />
+      </td>
+      <td className="px-3 align-middle">
+        {/* 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 }}>
+          {hasChildren ? (
+            <button
+              type="button"
+              aria-expanded={isExpanded}
+              aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${page.title}`}
+              onClick={onToggleExpand}
+              className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[5px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+            >
+              <ChevronDown
+                size={13}
+                aria-hidden
+                className={`motion-safe:transition-transform motion-safe:duration-150 ${
+                  isExpanded ? '' : '-rotate-90'
+                }`}
+              />
+            </button>
+          ) : (
+            <span className="w-5 shrink-0" aria-hidden />
+          )}
+          <div className="min-w-0">
+            <button
+              type="button"
+              onClick={onOpen}
+              className="block max-w-[280px] truncate text-left text-[13.5px] font-[550] text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--acc)]"
+            >
+              {page.title}
+            </button>
+            <div className="max-w-[280px] truncate font-mono text-[11.5px] text-[var(--muted)]">
+              {page.path}
+            </div>
+          </div>
+        </div>
+      </td>
+      <td className="px-3 align-middle">
+        {page.templateId ? (
+          <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-2 py-0.5 text-[11.5px] whitespace-nowrap text-[var(--sub)]">
+            {page.templateId}
+          </span>
+        ) : (
+          <span className="text-[var(--muted)]">—</span>
+        )}
+      </td>
+      <td className="px-3 align-middle">
+        <div className="flex items-center gap-[7px]">
+          <span
+            aria-hidden
+            className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[var(--acc-l)] text-[9px] font-medium text-[var(--acc)]"
+          >
+            {page.authorInitials}
+          </span>
+          <span className="truncate text-[13px] text-[var(--txt)]">{page.authorName}</span>
+        </div>
+      </td>
+      <td className="px-3 align-middle">
+        <PostStatusBadge status={page.status} />
+      </td>
+      <td className="px-3 align-middle text-[12.5px] text-[var(--sub)] tabular-nums">
+        {formatDateShort(page.lastModified)}
+      </td>
+      <td className="px-3 align-middle">
+        <SeoScoreIndicator score={page.seoScore} />
+      </td>
+      <td className="px-3 align-middle">
+        <RowActions>
+          <button
+            type="button"
+            onClick={onOpen}
+            className="flex items-center gap-[5px] rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-[9px] py-[5px] text-[12px] font-medium whitespace-nowrap text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+          >
+            <PenLine size={12} aria-hidden />
+            Edit
+          </button>
+          <RowActionButton
+            aria-label={`Add sub-page under "${page.title}"`}
+            title="Add sub-page"
+            onClick={onAddSubPage}
+          >
+            <Plus size={12} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Duplicate "${page.title}"`}
+            title="Duplicate"
+            onClick={onDuplicate}
+          >
+            <Copy size={12} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Delete "${page.title}"`}
+            title={page.isHomepage ? 'The homepage cannot be deleted' : 'Delete'}
+            danger
+            disabled={page.isHomepage}
+            onClick={onDelete}
+          >
+            <Trash2 size={12} aria-hidden />
+          </RowActionButton>
+        </RowActions>
+      </td>
+    </tr>
+  )
+}
+
+function TreeLoadingRows() {
+  return (
+    <>
+      {Array.from({ length: 8 }).map((_, i) => (
+        <tr key={i} className="h-14 border-b border-[var(--bdr)] last:border-b-0">
+          {Array.from({ length: 8 }).map((__, j) => (
+            <td key={j} className="px-3 align-middle">
+              <div className="bg-muted h-4 w-full animate-pulse rounded" />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  )
+}
+
+function formatDateShort(input: string): string {
+  const d = new Date(input)
+  if (Number.isNaN(d.getTime())) return '—'
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+}

package/src/views/Posts/PostsListView.tsx

@@ -6,7 +6,10 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  Copy,
   Loader2,
+  PenLine,
+  Plus,
   Search,
   Settings,
   Trash2,
@@ -16,6 +19,8 @@ import { toast } from 'sonner'
 import {
   bulkDeletePosts,
   bulkUpdatePosts,
+  deletePost,
+  duplicatePost,
   fetchPosts,
   type Post,
   type PostStatus,
@@ -29,6 +34,7 @@ import {
   paletteFor,
 } from '../../components/posts/badges.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
 /**
  * All Posts management surface — table with type tabs, controls row,
@@ -69,6 +75,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
   const [error, setError] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
   const [pendingBulk, setPendingBulk] = useState<null | 'delete' | 'publish' | 'draft'>(null)
+  const [rowDelete, setRowDelete] = useState<Post | null>(null)
 
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
@@ -132,6 +139,14 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     () => (data?.types ?? []).reduce((sum, t) => sum + t.postCount, 0),
     [data?.types],
   )
+
+  // Header CTA target: one Post Type → its editor, several → the picker,
+  // none → the Post Type setup instructions.
+  const newPostPath = useMemo(() => {
+    const typeList = data?.types ?? []
+    if (typeList.length === 1) return `/${typeList[0]!.slug}/new`
+    return typeList.length > 1 ? '/posts/new' : '/posts/types/new'
+  }, [data?.types])
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const posts = data?.posts ?? []
   const types = data?.types ?? []
@@ -210,16 +225,69 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     setRefreshToken((t) => t + 1)
   }
 
+  // ─── Row actions ──────────────────────────────────────────────────
+
+  const runDuplicate = async (p: Post) => {
+    const promise = duplicatePost(p.postTypeId, p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+      return r
+    })
+    toast.promise(promise, {
+      loading: `Duplicating "${p.title}"…`,
+      success: `"${p.title}" duplicated`,
+      error: (e: Error) => e.message || 'Duplicate failed',
+    })
+    try {
+      await promise
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
+  const runRowDelete = async (p: Post) => {
+    const promise = deletePost(p.postTypeId, p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+    })
+    toast.promise(promise, {
+      loading: `Deleting "${p.title}"…`,
+      success: `"${p.title}" moved to trash`,
+      error: (e: Error) => e.message || 'Delete failed',
+    })
+    try {
+      await promise
+      setSelected((s) => {
+        const next = new Set(s)
+        next.delete(p.id)
+        return next
+      })
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
   // ─── Render ───────────────────────────────────────────────────────
 
   return (
     <div className="flex h-full flex-col gap-4 p-4 sm:p-6">
-      {/* Header */}
-      <div className="flex flex-col gap-1">
-        <h1 className="text-foreground">Posts</h1>
-        <p className="text-muted-foreground text-sm">
-          {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
-        </p>
+      {/* Header — the "+ New Post" primary action sits on the right, per
+          the design's `.page-hdr` / `.hdr-r` layout. */}
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-foreground">Posts</h1>
+          <p className="text-muted-foreground text-sm">
+            {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => onNavigate(newPostPath)}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring 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"
+        >
+          <Plus className="h-3.5 w-3.5" aria-hidden />
+          New Post
+        </button>
       </div>
 
       {/* Type tabs */}
@@ -269,6 +337,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
               <col style={{ width: '130px' }} />
               <col style={{ width: '120px' }} />
               <col style={{ width: '90px' }} />
+              <col style={{ width: '110px' }} />
             </colgroup>
             <thead className="border-border bg-muted/40 border-b">
               <tr className="text-muted-foreground text-xs">
@@ -335,13 +404,16 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
+                <th scope="col" className="px-3 py-2.5 text-right">
+                  <span className="sr-only">Actions</span>
+                </th>
               </tr>
             </thead>
             <tbody>
               {loading && posts.length === 0 && <LoadingRows />}
               {!loading && error && (
                 <tr>
-                  <td colSpan={7} className="px-3 py-12 text-center">
+                  <td colSpan={8} className="px-3 py-12 text-center">
                     <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
                     <button
                       onClick={() => setRefreshToken((t) => t + 1)}
@@ -368,6 +440,8 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     selected={selected.has(p.id)}
                     onSelect={() => toggleOne(p.id)}
                     onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
+                    onDuplicate={() => void runDuplicate(p)}
+                    onDelete={() => setRowDelete(p)}
                   />
                 ))}
             </tbody>
@@ -384,6 +458,19 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
         />
       </div>
 
+      <ConfirmDialog
+        open={rowDelete !== null}
+        title={`Delete "${rowDelete?.title ?? ''}"?`}
+        description="The post moves to trash and can be restored for 30 days."
+        confirmLabel="Delete"
+        destructive
+        onClose={() => setRowDelete(null)}
+        onConfirm={() => {
+          if (rowDelete) void runRowDelete(rowDelete)
+          setRowDelete(null)
+        }}
+      />
+
       <ConfirmDialog
         open={pendingBulk === 'delete'}
         title={`Delete ${selected.size} post${selected.size === 1 ? '' : 's'}?`}
@@ -669,11 +756,15 @@ function PostRow({
   selected,
   onSelect,
   onOpen,
+  onDuplicate,
+  onDelete,
 }: {
   post: Post
   selected: boolean
   onSelect: () => void
   onOpen: () => void
+  onDuplicate: () => void
+  onDelete: () => void
 }) {
   const p = paletteFor(post.postTypeAccentColor)
   return (
@@ -693,7 +784,19 @@ function PostRow({
       </td>
       <td className="px-3 py-3">
         <button type="button" onClick={onOpen} className="flex w-full items-center gap-3 text-left">
-          <span aria-hidden className={`block h-9 w-9 shrink-0 rounded-md ${p.bg.split(' ')[0]}`} />
+          {post.imageUrl ? (
+            <img
+              src={post.imageUrl}
+              alt=""
+              loading="lazy"
+              className="block h-9 w-9 shrink-0 rounded-md object-cover"
+            />
+          ) : (
+            <span
+              aria-hidden
+              className={`block h-9 w-9 shrink-0 rounded-md ${p.bg.split(' ')[0]}`}
+            />
+          )}
           <span className="min-w-0">
             <span className="text-foreground group-hover:text-primary block truncate text-sm font-medium">
               {post.title}
@@ -727,6 +830,28 @@ function PostRow({
       <td className="px-3 py-3">
         <SeoScoreIndicator score={post.seoScore} />
       </td>
+      <td className="px-3 py-3">
+        <RowActions>
+          <RowActionButton aria-label={`Edit "${post.title}"`} title="Edit" onClick={onOpen}>
+            <PenLine size={13} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Duplicate "${post.title}"`}
+            title="Duplicate"
+            onClick={onDuplicate}
+          >
+            <Copy size={12} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Delete "${post.title}"`}
+            title="Delete"
+            danger
+            onClick={onDelete}
+          >
+            <Trash2 size={12} aria-hidden />
+          </RowActionButton>
+        </RowActions>
+      </td>
     </tr>
   )
 }
@@ -737,7 +862,7 @@ function LoadingRows() {
     <>
       {rows.map((_, i) => (
         <tr key={i} className="border-border border-b last:border-b-0">
-          {Array.from({ length: 7 }).map((__, j) => (
+          {Array.from({ length: 8 }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
             </td>
@@ -759,7 +884,7 @@ function EmptyRow({
 }) {
   return (
     <tr>
-      <td colSpan={7} className="px-3 py-16 text-center">
+      <td colSpan={8} className="px-3 py-16 text-center">
         <div className="text-foreground mb-2 text-sm font-medium">
           {filtersActive ? 'No posts match the current filters.' : 'No posts yet.'}
         </div>