@actuate-media/cms-admin 0.69.0 → 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)
@@ -412,28 +451,30 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           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">Pages</h1>
-          <p className="text-muted-foreground text-sm">
+          <h1 className="text-[var(--txt)]">Pages</h1>
+          <p className="text-sm text-[var(--sub)]">
             {treeMode
               ? `${grandTotal} page${grandTotal === 1 ? '' : 's'} total`
               : `${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 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"
+          leftIcon={<Plus size={16} aria-hidden />}
         >
-          <Plus className="h-3.5 w-3.5" aria-hidden />
           New page
-        </button>
+        </Button>
       </div>
 
       {/* Controls row */}
       <div className="flex flex-wrap items-center gap-2">
         <div className="relative max-w-sm flex-1">
           <Search
-            className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]"
             aria-hidden
           />
           <input
@@ -442,7 +483,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             onChange={(e) => setSearch(e.target.value)}
             aria-label="Search pages"
             placeholder="Search pages…"
-            className="border-border bg-card text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-primary/30 w-full rounded-lg border py-2 pr-3 pl-9 text-sm shadow-sm focus:ring-2 focus:outline-none"
+            className="focus:border-primary focus:ring-primary/30 w-full rounded-lg border border-[var(--bdr)] bg-[var(--card)] py-2 pr-3 pl-9 text-sm text-[var(--txt)] shadow-sm placeholder:text-[var(--sub)] focus:ring-2 focus:outline-none"
           />
         </div>
 
@@ -479,7 +520,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
         <ViewModeToggle mode={viewMode} onChange={changeViewMode} />
 
-        <span className="text-muted-foreground ml-auto text-sm tabular-nums">
+        <span className="ml-auto text-sm text-[var(--sub)] tabular-nums">
           {treeMode
             ? treeFiltersActive
               ? `${treeRows.length} result${treeRows.length === 1 ? '' : 's'}`
@@ -492,7 +533,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           with the page hierarchy) */}
       {!treeMode && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
+          <span className="text-[10px] font-medium tracking-wider text-[var(--sub)] uppercase">
             Tags
           </span>
           {tags.map((t) => (
@@ -509,7 +550,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             <button
               type="button"
               onClick={() => setSelectedTags(new Set())}
-              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+              className="inline-flex items-center gap-1 text-xs text-[var(--sub)] hover:text-[var(--txt)]"
             >
               <X className="h-3 w-3" aria-hidden />
               Clear tags
@@ -543,7 +584,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       )}
 
       {/* Table card */}
-      <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+      <div className="overflow-hidden rounded-xl border border-[var(--bdr)] bg-[var(--card)] shadow-sm">
         {treeMode ? (
           <PagesTreeTable
             rows={treeRows}
@@ -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')}
@@ -579,15 +622,15 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   <col style={{ width: '80px' }} />
                   <col style={{ width: '110px' }} />
                 </colgroup>
-                <thead className="border-border bg-muted/40 border-b">
-                  <tr className="text-muted-foreground text-xs">
+                <thead className="bg-muted/40 border-b border-[var(--bdr)]">
+                  <tr className="text-xs text-[var(--sub)]">
                     <th scope="col" className="px-3 py-2.5 text-left">
                       <input
                         type="checkbox"
                         aria-label="Select all pages on this page"
                         checked={allOnPageSelected}
                         onChange={(e) => toggleAllOnPage(e.target.checked)}
-                        className="border-border accent-primary rounded"
+                        className="accent-primary rounded border-[var(--bdr)]"
                       />
                     </th>
                     <th
@@ -668,7 +711,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   {!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>
+                        <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
                         <button
                           onClick={() => setRefreshToken((t) => t + 1)}
                           className="text-primary text-sm hover:underline"
@@ -779,8 +822,8 @@ function SortHeader({
     <button
       type="button"
       onClick={() => onSort(field)}
-      className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
-        active ? 'text-foreground' : 'text-muted-foreground'
+      className={`inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors hover:text-[var(--txt)] ${
+        active ? 'text-[var(--txt)]' : 'text-[var(--sub)]'
       }`}
     >
       <span>{label}</span>
@@ -849,12 +892,12 @@ function FilterSelect({
   options: { value: string; label: string }[]
 }) {
   return (
-    <label className="text-foreground inline-flex items-center gap-1.5 text-sm">
-      <span className="text-muted-foreground">{label}:</span>
+    <label className="inline-flex items-center gap-1.5 text-sm text-[var(--txt)]">
+      <span className="text-[var(--sub)]">{label}:</span>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="border-border bg-card text-foreground focus:border-primary focus:ring-primary/30 rounded-lg border px-2.5 py-1.5 text-sm shadow-sm focus:ring-2 focus:outline-none"
+        className="focus:border-primary focus:ring-primary/30 rounded-lg border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-sm text-[var(--txt)] shadow-sm focus:ring-2 focus:outline-none"
       >
         {options.map((o) => (
           <option key={o.value} value={o.value}>
@@ -882,12 +925,12 @@ function GroupBlock({
   return (
     <>
       {showHeader && (
-        <tr className="bg-muted/30 border-border border-b">
+        <tr className="bg-muted/30 border-b border-[var(--bdr)]">
           <td colSpan={8} className="px-3 py-2">
-            <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
+            <span className="inline-flex items-center gap-2 text-xs font-medium tracking-wider text-[var(--txt)] uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
-              <span className="text-muted-foreground tabular-nums">{count}</span>
+              <span className="text-[var(--sub)] tabular-nums">{count}</span>
             </span>
           </td>
         </tr>
@@ -934,19 +977,19 @@ function BulkActionBar({
 }) {
   return (
     <div className="border-primary/30 bg-primary/5 flex flex-wrap items-center gap-2 rounded-lg border px-4 py-2">
-      <span className="text-foreground text-sm font-medium">{count} selected</span>
+      <span className="text-sm font-medium text-[var(--txt)]">{count} selected</span>
       <div className="bg-border h-4 w-px" aria-hidden />
       <button
         type="button"
         onClick={onPublish}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Publish
       </button>
       <button
         type="button"
         onClick={onDraft}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Move to draft
       </button>
@@ -965,7 +1008,7 @@ function BulkActionBar({
       <button
         type="button"
         onClick={onClear}
-        className="text-muted-foreground hover:text-foreground ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+        className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--sub)] transition-colors hover:text-[var(--txt)]"
       >
         <X className="h-3.5 w-3.5" aria-hidden />
         Clear
@@ -988,7 +1031,7 @@ function TagMenu({
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
-          className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
         >
           {label}
           <ChevronDown className="h-3 w-3" aria-hidden />
@@ -998,16 +1041,16 @@ function TagMenu({
         <DropdownMenu.Content
           align="start"
           sideOffset={4}
-          className="border-border bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-md"
+          className="bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border border-[var(--bdr)] p-1 shadow-md"
         >
           {tags.length === 0 ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-xs">No tags yet</div>
+            <div className="px-2 py-1.5 text-xs text-[var(--sub)]">No tags yet</div>
           ) : (
             tags.map((t) => (
               <DropdownMenu.Item
                 key={t.slug}
                 onSelect={() => onPick(t.slug)}
-                className="text-foreground focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none"
+                className="focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--txt)] outline-none"
               >
                 <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
                 {t.name}
@@ -1039,8 +1082,8 @@ function PageRow({
 }) {
   return (
     <tr
-      className={`border-border hover:bg-muted/30 group border-b transition-colors last:border-b-0 ${
-        selected ? 'bg-primary/5' : ''
+      className={`group border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
+        selected ? 'bg-[var(--acc-l)]' : ''
       }`}
     >
       <td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
@@ -1049,17 +1092,17 @@ function PageRow({
           aria-label={`Select "${page.title}"`}
           checked={selected}
           onChange={onSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </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="bg-muted block h-9 w-9 shrink-0 rounded-md" />
           <span className="min-w-0">
-            <span className="text-foreground group-hover:text-primary block truncate text-sm font-medium">
+            <span className="block truncate text-sm font-medium text-[var(--txt)] group-hover:text-[var(--acc)]">
               {page.title}
             </span>
-            <span className="text-muted-foreground block truncate text-xs">{page.path}</span>
+            <span className="block truncate text-xs text-[var(--sub)]">{page.path}</span>
           </span>
         </button>
       </td>
@@ -1070,17 +1113,17 @@ function PageRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
+            className="bg-muted inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium text-[var(--sub)]"
           >
             {page.authorInitials}
           </span>
-          <span className="text-foreground truncate text-sm">{page.authorName}</span>
+          <span className="truncate text-sm text-[var(--txt)]">{page.authorName}</span>
         </div>
       </td>
       <td className="px-3 py-3">
         <PostStatusBadge status={page.status} />
       </td>
-      <td className="text-muted-foreground px-3 py-3 text-sm tabular-nums">
+      <td className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums">
         {formatDateShort(page.lastModified)}
       </td>
       <td className="px-3 py-3">
@@ -1117,7 +1160,7 @@ function LoadingRows() {
   return (
     <>
       {Array.from({ length: 8 }).map((_, i) => (
-        <tr key={i} className="border-border border-b last:border-b-0">
+        <tr key={i} className="border-b border-[var(--bdr)] last:border-b-0">
           {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" />
@@ -1141,10 +1184,10 @@ function EmptyRow({
   return (
     <tr>
       <td colSpan={8} className="px-3 py-16 text-center">
-        <div className="text-foreground mb-2 text-sm font-medium">
+        <div className="mb-2 text-sm font-medium text-[var(--txt)]">
           {filtersActive ? 'No pages match your filters' : 'No pages yet'}
         </div>
-        <div className="text-muted-foreground mb-4 text-sm">
+        <div className="mb-4 text-sm text-[var(--sub)]">
           {filtersActive
             ? 'Try clearing the search, tags, or status filter above.'
             : 'Create your first page to get started.'}
@@ -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>
@@ -1184,8 +1229,8 @@ function PaginationFooter({
   const start = total === 0 ? 0 : (page - 1) * pageSize + 1
   const end = Math.min(total, page * pageSize)
   return (
-    <div className="border-border flex items-center justify-between border-t px-4 py-3 text-sm">
-      <span className="text-muted-foreground tabular-nums">
+    <div className="flex items-center justify-between border-t border-[var(--bdr)] px-4 py-3 text-sm">
+      <span className="text-[var(--sub)] tabular-nums">
         {start}–{end} of {total} page{total === 1 ? '' : 's'}
       </span>
       <nav className="flex items-center gap-1" aria-label="Pages pagination">
@@ -1194,7 +1239,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.max(1, page - 1))}
           disabled={page === 1}
           aria-label="Previous page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronLeft className="h-4 w-4" aria-hidden />
         </button>
@@ -1203,7 +1248,7 @@ function PaginationFooter({
             <span
               key={`gap-${idx}`}
               aria-hidden
-              className="text-muted-foreground inline-flex h-8 w-8 items-center justify-center text-sm"
+              className="inline-flex h-8 w-8 items-center justify-center text-sm text-[var(--sub)]"
             >
               …
             </span>
@@ -1216,7 +1261,7 @@ function PaginationFooter({
               className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm tabular-nums transition-colors ${
                 p === page
                   ? 'bg-primary text-primary-foreground'
-                  : 'border-border bg-background text-foreground hover:bg-accent border'
+                  : 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] hover:bg-[var(--acc-l)]'
               }`}
             >
               {p}
@@ -1228,7 +1273,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.min(totalPages, page + 1))}
           disabled={page === totalPages}
           aria-label="Next page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronRight className="h-4 w-4" aria-hidden />
         </button>