@actuate-media/cms-admin 0.17.0 → 0.18.0

package/src/views/Pages/PagesListView.tsx

@@ -13,16 +13,19 @@ import {
   X,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
+  applyPagesQuery,
   bulkChangePageTags,
   bulkDeletePages,
   bulkUpdatePages,
-  fetchPages,
+  fetchPagesDataset,
   groupPages,
+  type BulkResult,
   type Page,
   type PageGroupBy,
+  type PagesDataset,
   type PageStatus,
-  type PagesResult,
   type PageTag,
 } from '../../lib/pages-service.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
@@ -61,7 +64,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
 
-  const [data, setData] = useState<PagesResult | null>(null)
+  const [dataset, setDataset] = useState<PagesDataset | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
@@ -81,23 +84,17 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
   const tagIds = useMemo(() => [...selectedTags], [selectedTags])
 
+  // Single network read. Search / sort / group / paging are applied in
+  // memory below, so changing any of those never re-fetches. The dataset
+  // refreshes only on mount and after a mutation (refreshToken bump).
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setError(null)
-    fetchPages({
-      status,
-      tagIds,
-      search: debouncedSearch,
-      groupBy,
-      sortBy,
-      sortDirection: dir,
-      page,
-      pageSize: PAGE_SIZE,
-    })
+    fetchPagesDataset()
       .then((res) => {
         if (cancelled) return
-        setData(res)
+        setDataset(res)
         setLoading(false)
       })
       .catch((err: unknown) => {
@@ -108,21 +105,40 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     return () => {
       cancelled = true
     }
-  }, [status, tagIds, debouncedSearch, groupBy, sortBy, dir, page, refreshToken])
+  }, [refreshToken])
 
-  // Reset paging/selection when the result set changes shape.
+  // Reset paging/selection when the active filters change shape.
   useEffect(() => {
     setPage(1)
     setSelected(new Set())
   }, [debouncedSearch, status, tagIds, groupBy])
 
-  const pages = data?.pages ?? []
-  const tags = data?.tags ?? []
-  const total = data?.total ?? 0
-  const totalAll = useMemo(() => tags.reduce((sum, t) => sum + t.pageCount, 0), [tags])
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const allPages = useMemo(() => dataset?.pages ?? [], [dataset])
+  const tags = useMemo(() => dataset?.tags ?? [], [dataset])
+  const grandTotal = allPages.length
   const grouped = groupBy !== 'none'
 
+  const filtered = useMemo(
+    () =>
+      applyPagesQuery(allPages, {
+        status,
+        tagIds,
+        search: debouncedSearch,
+        sortBy,
+        sortDirection: dir,
+      }),
+    [allPages, status, tagIds, debouncedSearch, sortBy, dir],
+  )
+  const total = filtered.length
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+  // Pagination only applies to the flat view; grouped views render every
+  // match so the buckets stay complete.
+  const pages = useMemo(
+    () => (grouped ? filtered : filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)),
+    [filtered, grouped, page],
+  )
+
   const tagBySlug = useMemo(() => {
     const m = new Map<string, PageTag>()
     for (const t of tags) m.set(t.slug, t)
@@ -143,6 +159,11 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     [sortBy],
   )
 
+  // `aria-sort` belongs on the column header cell (`<th>`), not the button
+  // inside it — assistive tech reads sort state from the header.
+  const ariaSortFor = (field: SortBy): 'ascending' | 'descending' | 'none' =>
+    sortBy === field ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
+
   const filtersAreActive = debouncedSearch !== '' || status !== 'all' || selectedTags.size > 0
 
   const clearFilters = () => {
@@ -190,17 +211,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     setRefreshToken((t) => t + 1)
   }
 
+  // Bulk service calls always resolve a { ok, failed } tally (they never
+  // reject), so we promote a *total* failure to a rejection — that's what
+  // makes `toast.promise`'s `error` branch reachable. The `await` is
+  // wrapped so a rejection can't escape as an unhandled promise, and
+  // `afterBulk` always runs to refresh the (possibly partially-changed) set.
+  const allFailed = (r: BulkResult) => r.ok === 0 && r.failed > 0
+
   const runBulkStatus = async (target: PageStatus) => {
     const ids = selectedPages.map((p) => p.id)
     if (ids.length === 0) return
     const verb = target === 'PUBLISHED' ? 'Publishing' : 'Updating'
-    const promise = bulkUpdatePages(ids, { status: target })
+    const promise = bulkUpdatePages(ids, { status: target }).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk update failed')
+      return r
+    })
     toast.promise(promise, {
       loading: `${verb} ${ids.length} page${ids.length === 1 ? '' : 's'}…`,
       success: (r) => `${r.ok} updated${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk update failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
@@ -209,7 +244,10 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     const promise = bulkChangePageTags(
       selectedPages.map((p) => ({ id: p.id, tags: p.tags, primaryTagId: p.primaryTagId })),
       mode === 'add' ? { add: [slug] } : { remove: [slug] },
-    )
+    ).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk tag change failed')
+      return r
+    })
     const tagName = tagBySlug.get(slug)?.name ?? slug
     toast.promise(promise, {
       loading: `${mode === 'add' ? 'Adding' : 'Removing'} "${tagName}"…`,
@@ -217,20 +255,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         `${r.ok} page${r.ok === 1 ? '' : 's'} updated${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk tag change failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
   const runBulkDelete = async () => {
     const ids = deletablePages.map((p) => p.id)
     if (ids.length === 0) return
-    const promise = bulkDeletePages(ids)
+    const promise = bulkDeletePages(ids).then((r) => {
+      if (allFailed(r)) throw new Error('Bulk delete failed')
+      return r
+    })
     toast.promise(promise, {
       loading: `Deleting ${ids.length} page${ids.length === 1 ? '' : 's'}…`,
       success: (r) => `${r.ok} deleted${r.failed ? `, ${r.failed} failed` : ''}`,
       error: 'Bulk delete failed',
     })
-    await promise
+    try {
+      await promise
+    } catch {
+      /* surfaced via toast.promise */
+    }
     afterBulk()
   }
 
@@ -242,7 +291,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       <div className="flex flex-col gap-1">
         <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Pages</h1>
         <p className="text-muted-foreground text-sm">
-          {totalAll} page{totalAll === 1 ? '' : 's'} · organized by tags
+          {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
         </p>
       </div>
 
@@ -291,7 +340,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         />
 
         <span className="text-muted-foreground ml-auto text-sm tabular-nums">
-          {total} of {totalAll}
+          {total} of {grandTotal}
         </span>
       </div>
 
@@ -369,7 +418,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   className="border-border accent-primary rounded"
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Title"
                   field="title"
@@ -381,7 +430,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
               <th scope="col" className="px-3 py-2.5 text-left">
                 <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Author"
                   field="author"
@@ -390,7 +439,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Status"
                   field="status"
@@ -399,7 +448,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('modified')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="Last Modified"
                   field="modified"
@@ -408,7 +457,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   onSort={handleSort}
                 />
               </th>
-              <th scope="col" className="px-3 py-2.5 text-left">
+              <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
                 <SortHeader
                   label="SEO"
                   field="seo"
@@ -513,12 +562,10 @@ function SortHeader({
   onSort: (f: SortBy) => void
 }) {
   const active = current === field
-  const ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
   return (
     <button
       type="button"
       onClick={() => onSort(field)}
-      aria-sort={ariaSort}
       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'
       }`}
@@ -680,56 +727,40 @@ function TagMenu({
   tags: PageTag[]
   onPick: (slug: string) => void
 }) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const onDoc = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', onDoc)
-    return () => document.removeEventListener('mousedown', onDoc)
-  }, [open])
-
   return (
-    <div className="relative" ref={ref}>
-      <button
-        type="button"
-        onClick={() => setOpen((o) => !o)}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
-      >
-        {label}
-        <ChevronDown className="h-3 w-3" aria-hidden />
-      </button>
-      {open && (
-        <div
-          role="menu"
-          className="border-border bg-popover absolute z-20 mt-1 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-lg"
+    <DropdownMenu.Root>
+      <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"
         >
-          {tags.length === 0 && (
+          {label}
+          <ChevronDown className="h-3 w-3" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <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"
+        >
+          {tags.length === 0 ? (
             <div className="text-muted-foreground px-2 py-1.5 text-xs">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"
+              >
+                <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
+                {t.name}
+              </DropdownMenu.Item>
+            ))
           )}
-          {tags.map((t) => (
-            <button
-              key={t.slug}
-              type="button"
-              role="menuitem"
-              onClick={() => {
-                onPick(t.slug)
-                setOpen(false)
-              }}
-              className="text-foreground hover:bg-accent flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm"
-            >
-              <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
-              {t.name}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   )
 }
 

package/src/views/page-editor/PagePreview.tsx

@@ -62,7 +62,14 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
       <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
         <button
           type="button"
-          onClick={() => window.close()}
+          onClick={() => {
+            // Opened via the editor's "Preview" (script-opened tab) → close
+            // it. Opened by navigating to the URL directly (no opener, so
+            // `window.close()` is a no-op) → fall back to the editor so the
+            // button is never dead.
+            if (window.opener) window.close()
+            else onNavigate(`/pages/${documentId}/edit`)
+          }}
           className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
           aria-label="Close preview tab"
         >
@@ -82,6 +89,8 @@ export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
         </button>
       </div>
 
+      {/* The canvas is intentionally white regardless of the admin theme:
+          it emulates the public page surface, not admin chrome. */}
       <div className="flex-1 overflow-auto bg-white">
         {visible.length === 0 ? (
           <div className="text-muted-foreground flex h-full items-center justify-center text-sm">

package/src/views/page-editor/PageSectionEditor.tsx

@@ -11,6 +11,7 @@ import {
   duplicateSection,
   emptyPage,
   fetchPageForEditor,
+  missingPageFields,
   moveSection,
   publishPage,
   removeSection,
@@ -88,12 +89,35 @@ export function PageSectionEditor({
 
   const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
 
+  // A misconfigured `pages` collection (missing the fields the editor
+  // writes) would silently drop content on save — detect it up front.
+  // Memoized to a string/null so the load effect can depend on it without
+  // re-running when `config`'s object identity changes between renders.
+  const schemaError = useMemo(() => {
+    const missing = missingPageFields(config)
+    if (missing.length === 0) return null
+    const plural = missing.length > 1
+    return (
+      `The "pages" collection is missing required field${plural ? 's' : ''}: ` +
+      `${missing.join(', ')}. Declare ${plural ? 'them' : 'it'} in your CMS config ` +
+      `so the page editor can save without losing content.`
+    )
+  }, [config])
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setLoadError(null)
 
+    // Fail loud on a misconfigured `pages` collection rather than letting
+    // the user build a page whose content would be silently dropped on save.
+    if (schemaError) {
+      setLoadError(schemaError)
+      setLoading(false)
+      return
+    }
+
     if (!documentId) {
       setPage(emptyPage())
       setLoading(false)
@@ -119,7 +143,7 @@ export function PageSectionEditor({
     return () => {
       cancelled = true
     }
-  }, [documentId])
+  }, [documentId, schemaError])
 
   // ─── Unsaved-changes guard (browser unload) ──────────────────────────
   useEffect(() => {