@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/views/Pages/PagesListView.tsx

@@ -6,6 +6,10 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  Copy,
+  List,
+  ListTree,
+  PenLine,
   Plus,
   Search,
   Tag as TagIcon,
@@ -20,6 +24,8 @@ import {
   bulkChangePageTags,
   bulkDeletePages,
   bulkUpdatePages,
+  deletePage,
+  duplicatePage,
   fetchPagesDataset,
   groupPages,
   type BulkResult,
@@ -29,9 +35,12 @@ import {
   type PageStatus,
   type PageTag,
 } from '../../lib/pages-service.js'
+import { buildPageTree, 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 { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
+import { PagesTreeTable } from './PagesTreeTable.js'
 
 /**
  * Pages management surface — table with a tag-chip filter bar, group-by,
@@ -51,8 +60,19 @@ interface PagesListViewProps {
 
 type SortBy = 'title' | 'author' | 'status' | 'modified' | 'seo'
 type Dir = 'asc' | 'desc'
+type ViewMode = 'list' | 'tree'
 
 const PAGE_SIZE = 25
+const VIEW_MODE_KEY = 'actuate.pages.viewMode'
+
+function readStoredViewMode(): ViewMode {
+  if (typeof window === 'undefined') return 'list'
+  try {
+    return localStorage.getItem(VIEW_MODE_KEY) === 'tree' ? 'tree' : 'list'
+  } catch {
+    return 'list'
+  }
+}
 
 export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [search, setSearch] = useState('')
@@ -64,12 +84,17 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [dir, setDir] = useState<Dir>('asc')
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [viewMode, setViewMode] = useState<ViewMode>(readStoredViewMode)
+  // null = "not yet touched" → falls back to the default expand state
+  // (all root nodes with children open) computed from the current tree.
+  const [expandedOverride, setExpandedOverride] = useState<Set<string> | 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)
   const [pendingDelete, setPendingDelete] = useState(false)
+  const [rowDelete, setRowDelete] = useState<Page | null>(null)
 
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
@@ -148,6 +173,49 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
   const displayGroups = useMemo(() => groupPages(pages, groupBy, tags), [pages, groupBy, tags])
 
+  // ─── Tree mode ─────────────────────────────────────────────────────
+
+  const treeMode = viewMode === 'tree'
+  const treeRoots = useMemo(() => buildPageTree(allPages), [allPages])
+  const defaultExpanded = useMemo(() => defaultExpandedIds(treeRoots), [treeRoots])
+  const expanded = expandedOverride ?? defaultExpanded
+
+  // Per the design, an active search or status filter flattens the tree:
+  // every match renders at depth 0 and expand state is ignored. (Tag
+  // filters and group-by don't apply in tree mode — the hierarchy *is*
+  // the grouping.)
+  const treeFiltersActive = debouncedSearch !== '' || status !== 'all'
+  const treeRows = useMemo(() => {
+    if (treeFiltersActive) {
+      return applyPagesQuery(allPages, {
+        status,
+        search: debouncedSearch,
+        sortBy: 'title',
+        sortDirection: 'asc',
+      }).map((p) => ({ page: p, depth: 0, hasChildren: false }))
+    }
+    return flattenPageTree(treeRoots, expanded)
+  }, [treeFiltersActive, allPages, status, debouncedSearch, treeRoots, expanded])
+
+  const toggleExpand = (id: string) =>
+    setExpandedOverride((prev) => {
+      const next = new Set(prev ?? defaultExpanded)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const changeViewMode = (mode: ViewMode) => {
+    if (mode === viewMode) return
+    setViewMode(mode)
+    setSelected(new Set())
+    try {
+      localStorage.setItem(VIEW_MODE_KEY, mode)
+    } catch {
+      /* storage unavailable (private mode) — the toggle still works for the session */
+    }
+  }
+
   const handleSort = useCallback(
     (field: SortBy) => {
       if (sortBy === field) {
@@ -192,16 +260,26 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       return next
     })
 
-  const allOnPageSelected = pages.length > 0 && pages.every((p) => selected.has(p.id))
+  // Selection operates over the rows currently visible in the active
+  // view mode (paged flat list, or visible tree rows).
+  const visiblePages = useMemo(
+    () => (treeMode ? treeRows.map((r) => r.page) : pages),
+    [treeMode, treeRows, pages],
+  )
+
+  const allOnPageSelected = visiblePages.length > 0 && visiblePages.every((p) => selected.has(p.id))
   const toggleAllOnPage = (checked: boolean) =>
     setSelected((s) => {
       const next = new Set(s)
-      if (checked) for (const p of pages) next.add(p.id)
-      else for (const p of pages) next.delete(p.id)
+      if (checked) for (const p of visiblePages) next.add(p.id)
+      else for (const p of visiblePages) next.delete(p.id)
       return next
     })
 
-  const selectedPages = useMemo(() => pages.filter((p) => selected.has(p.id)), [pages, selected])
+  const selectedPages = useMemo(
+    () => visiblePages.filter((p) => selected.has(p.id)),
+    [visiblePages, selected],
+  )
   const deletablePages = useMemo(() => selectedPages.filter((p) => !p.isHomepage), [selectedPages])
   const blockedHomepage = selectedPages.length !== deletablePages.length
 
@@ -284,16 +362,71 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     afterBulk()
   }
 
+  // ─── Row actions ───────────────────────────────────────────────────
+
+  const runDuplicate = async (p: Page) => {
+    const promise = duplicatePage(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: Page) => {
+    const promise = deletePage(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">Pages</h1>
-        <p className="text-muted-foreground text-sm">
-          {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
-        </p>
+      {/* Header — the "+ New page" 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">Pages</h1>
+          <p className="text-muted-foreground text-sm">
+            {treeMode
+              ? `${grandTotal} page${grandTotal === 1 ? '' : 's'} total`
+              : `${grandTotal} page${grandTotal === 1 ? '' : 's'} · organized by tags`}
+          </p>
+        </div>
+        <button
+          type="button"
+          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"
+        >
+          <Plus className="h-3.5 w-3.5" aria-hidden />
+          New page
+        </button>
       </div>
 
       {/* Controls row */}
@@ -313,17 +446,21 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           />
         </div>
 
-        <FilterSelect
-          label="Group by"
-          value={groupBy}
-          onChange={(v) => setGroupBy(v as PageGroupBy)}
-          options={[
-            { value: 'none', label: 'None' },
-            { value: 'tag', label: 'Tag' },
-            { value: 'status', label: 'Status' },
-            { value: 'author', label: 'Author' },
-          ]}
-        />
+        {/* Group-by only applies to the flat list — in tree mode the
+            hierarchy is the grouping. */}
+        {!treeMode && (
+          <FilterSelect
+            label="Group by"
+            value={groupBy}
+            onChange={(v) => setGroupBy(v as PageGroupBy)}
+            options={[
+              { value: 'none', label: 'None' },
+              { value: 'tag', label: 'Tag' },
+              { value: 'status', label: 'Status' },
+              { value: 'author', label: 'Author' },
+            ]}
+          />
+        )}
 
         <FilterSelect
           label="Status"
@@ -340,45 +477,54 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           ]}
         />
 
+        <ViewModeToggle mode={viewMode} onChange={changeViewMode} />
+
         <span className="text-muted-foreground ml-auto text-sm tabular-nums">
-          {total} of {grandTotal}
+          {treeMode
+            ? treeFiltersActive
+              ? `${treeRows.length} result${treeRows.length === 1 ? '' : 's'}`
+              : `${grandTotal} page${grandTotal === 1 ? '' : 's'}`
+            : `${total} of ${grandTotal}`}
         </span>
       </div>
 
-      {/* Tag filter bar */}
-      <div className="flex flex-wrap items-center gap-2">
-        <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
-          Tags
-        </span>
-        {tags.map((t) => (
-          <PageTagChip
-            key={t.slug}
-            name={t.name}
-            color={t.color}
-            count={t.pageCount}
-            selected={selectedTags.has(t.slug)}
-            onToggle={() => toggleTag(t.slug)}
-          />
-        ))}
-        {selectedTags.size > 0 && (
+      {/* Tag filter bar (flat list only — tree mode replaces tag grouping
+          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">
+            Tags
+          </span>
+          {tags.map((t) => (
+            <PageTagChip
+              key={t.slug}
+              name={t.name}
+              color={t.color}
+              count={t.pageCount}
+              selected={selectedTags.has(t.slug)}
+              onToggle={() => toggleTag(t.slug)}
+            />
+          ))}
+          {selectedTags.size > 0 && (
+            <button
+              type="button"
+              onClick={() => setSelectedTags(new Set())}
+              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+            >
+              <X className="h-3 w-3" aria-hidden />
+              Clear tags
+            </button>
+          )}
           <button
             type="button"
-            onClick={() => setSelectedTags(new Set())}
-            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+            onClick={() => onNavigate('/pages/tags')}
+            className="text-primary ml-auto inline-flex items-center gap-1 text-xs font-medium hover:underline"
           >
-            <X className="h-3 w-3" aria-hidden />
-            Clear tags
+            <TagIcon className="h-3 w-3" aria-hidden />
+            Manage tags
           </button>
-        )}
-        <button
-          type="button"
-          onClick={() => onNavigate('/pages/tags')}
-          className="text-primary ml-auto inline-flex items-center gap-1 text-xs font-medium hover:underline"
-        >
-          <TagIcon className="h-3 w-3" aria-hidden />
-          Manage tags
-        </button>
-      </div>
+        </div>
+      )}
 
       {/* Bulk action bar */}
       {selected.size > 0 && (
@@ -398,144 +544,202 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
       {/* Table card */}
       <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
-        {/* Horizontal scroll on narrow viewports: the fixed columns keep their
+        {treeMode ? (
+          <PagesTreeTable
+            rows={treeRows}
+            loading={loading}
+            error={error}
+            flattened={treeFiltersActive}
+            selected={selected}
+            expanded={expanded}
+            onToggleExpand={toggleExpand}
+            onToggleSelect={toggleOne}
+            onToggleAll={toggleAllOnPage}
+            onOpen={(p) => onNavigate(`/pages/${p.id}/edit`)}
+            onAddSubPage={(p) => onNavigate(`/pages/new?parent=${encodeURIComponent(p.id)}`)}
+            onDuplicate={(p) => void runDuplicate(p)}
+            onDelete={(p) => setRowDelete(p)}
+            onRetry={() => setRefreshToken((t) => t + 1)}
+            onClearFilters={clearFilters}
+            onNewPage={() => onNavigate('/pages/new')}
+          />
+        ) : (
+          <>
+            {/* Horizontal scroll on narrow viewports: the fixed columns keep their
             width and the table scrolls sideways instead of crushing content. */}
-        <div className="overflow-x-auto">
-          <table className="w-full min-w-[800px] table-fixed" role="table" aria-label="Pages">
-            <colgroup>
-              <col style={{ width: '40px' }} />
-              <col />
-              <col style={{ width: '200px' }} />
-              <col style={{ width: '170px' }} />
-              <col style={{ width: '120px' }} />
-              <col style={{ width: '130px' }} />
-              <col style={{ width: '80px' }} />
-            </colgroup>
-            <thead className="border-border bg-muted/40 border-b">
-              <tr className="text-muted-foreground text-xs">
-                <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"
-                  />
-                </th>
-                <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
-                  <SortHeader
-                    label="Title"
-                    field="title"
-                    current={sortBy}
-                    dir={dir}
-                    onSort={handleSort}
-                  />
-                </th>
-                <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" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
-                  <SortHeader
-                    label="Author"
-                    field="author"
-                    current={sortBy}
-                    dir={dir}
-                    onSort={handleSort}
-                  />
-                </th>
-                <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
-                  <SortHeader
-                    label="Status"
-                    field="status"
-                    current={sortBy}
-                    dir={dir}
-                    onSort={handleSort}
-                  />
-                </th>
-                <th
-                  scope="col"
-                  aria-sort={ariaSortFor('modified')}
-                  className="px-3 py-2.5 text-left"
-                >
-                  <SortHeader
-                    label="Last Modified"
-                    field="modified"
-                    current={sortBy}
-                    dir={dir}
-                    onSort={handleSort}
-                  />
-                </th>
-                <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
-                  <SortHeader
-                    label="SEO"
-                    field="seo"
-                    current={sortBy}
-                    dir={dir}
-                    onSort={handleSort}
-                  />
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {loading && pages.length === 0 && <LoadingRows />}
-              {!loading && error && (
-                <tr>
-                  <td colSpan={7} 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)}
-                      className="text-primary text-sm hover:underline"
+            <div className="overflow-x-auto">
+              <table className="w-full min-w-[800px] table-fixed" role="table" aria-label="Pages">
+                <colgroup>
+                  <col style={{ width: '40px' }} />
+                  <col />
+                  <col style={{ width: '200px' }} />
+                  <col style={{ width: '170px' }} />
+                  <col style={{ width: '120px' }} />
+                  <col style={{ width: '130px' }} />
+                  <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">
+                    <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"
+                      />
+                    </th>
+                    <th
+                      scope="col"
+                      aria-sort={ariaSortFor('title')}
+                      className="px-3 py-2.5 text-left"
+                    >
+                      <SortHeader
+                        label="Title"
+                        field="title"
+                        current={sortBy}
+                        dir={dir}
+                        onSort={handleSort}
+                      />
+                    </th>
+                    <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"
+                      aria-sort={ariaSortFor('author')}
+                      className="px-3 py-2.5 text-left"
                     >
-                      Try again
-                    </button>
-                  </td>
-                </tr>
-              )}
-              {!loading && !error && pages.length === 0 && (
-                <EmptyRow
-                  filtersActive={filtersAreActive}
-                  onClear={clearFilters}
-                  onNewPage={() => onNavigate('/pages/new')}
-                />
-              )}
-              {!loading &&
-                !error &&
-                displayGroups.map((group) => (
-                  <GroupBlock
-                    key={group.key}
-                    showHeader={grouped}
-                    label={group.label}
-                    color={group.color}
-                    count={group.pages.length}
-                  >
-                    {group.pages.map((p) => (
-                      <PageRow
-                        key={p.id}
-                        page={p}
-                        selected={selected.has(p.id)}
-                        resolveTag={(slug) => tagBySlug.get(slug)}
-                        onSelect={() => toggleOne(p.id)}
-                        onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
+                      <SortHeader
+                        label="Author"
+                        field="author"
+                        current={sortBy}
+                        dir={dir}
+                        onSort={handleSort}
                       />
+                    </th>
+                    <th
+                      scope="col"
+                      aria-sort={ariaSortFor('status')}
+                      className="px-3 py-2.5 text-left"
+                    >
+                      <SortHeader
+                        label="Status"
+                        field="status"
+                        current={sortBy}
+                        dir={dir}
+                        onSort={handleSort}
+                      />
+                    </th>
+                    <th
+                      scope="col"
+                      aria-sort={ariaSortFor('modified')}
+                      className="px-3 py-2.5 text-left"
+                    >
+                      <SortHeader
+                        label="Last Modified"
+                        field="modified"
+                        current={sortBy}
+                        dir={dir}
+                        onSort={handleSort}
+                      />
+                    </th>
+                    <th
+                      scope="col"
+                      aria-sort={ariaSortFor('seo')}
+                      className="px-3 py-2.5 text-left"
+                    >
+                      <SortHeader
+                        label="SEO"
+                        field="seo"
+                        current={sortBy}
+                        dir={dir}
+                        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 && pages.length === 0 && <LoadingRows />}
+                  {!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={() => setRefreshToken((t) => t + 1)}
+                          className="text-primary text-sm hover:underline"
+                        >
+                          Try again
+                        </button>
+                      </td>
+                    </tr>
+                  )}
+                  {!loading && !error && pages.length === 0 && (
+                    <EmptyRow
+                      filtersActive={filtersAreActive}
+                      onClear={clearFilters}
+                      onNewPage={() => onNavigate('/pages/new')}
+                    />
+                  )}
+                  {!loading &&
+                    !error &&
+                    displayGroups.map((group) => (
+                      <GroupBlock
+                        key={group.key}
+                        showHeader={grouped}
+                        label={group.label}
+                        color={group.color}
+                        count={group.pages.length}
+                      >
+                        {group.pages.map((p) => (
+                          <PageRow
+                            key={p.id}
+                            page={p}
+                            selected={selected.has(p.id)}
+                            resolveTag={(slug) => tagBySlug.get(slug)}
+                            onSelect={() => toggleOne(p.id)}
+                            onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
+                            onDuplicate={() => void runDuplicate(p)}
+                            onDelete={() => setRowDelete(p)}
+                          />
+                        ))}
+                      </GroupBlock>
                     ))}
-                  </GroupBlock>
-                ))}
-            </tbody>
-          </table>
-        </div>
+                </tbody>
+              </table>
+            </div>
 
-        {/* Pagination only for the flat (ungrouped) view. */}
-        {!grouped && (
-          <PaginationFooter
-            page={page}
-            totalPages={totalPages}
-            total={total}
-            pageSize={PAGE_SIZE}
-            onPage={setPage}
-          />
+            {/* Pagination only for the flat (ungrouped) view. */}
+            {!grouped && (
+              <PaginationFooter
+                page={page}
+                totalPages={totalPages}
+                total={total}
+                pageSize={PAGE_SIZE}
+                onPage={setPage}
+              />
+            )}
+          </>
         )}
       </div>
 
+      <ConfirmDialog
+        open={rowDelete !== null}
+        title={`Delete "${rowDelete?.title ?? ''}"?`}
+        description="The page 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={pendingDelete}
         title={`Delete ${deletablePages.length} page${deletablePages.length === 1 ? '' : 's'}?`}
@@ -590,6 +794,49 @@ function SortHeader({
   )
 }
 
+/**
+ * List / Tree segmented control (`.view-toggle` in the design). The
+ * choice persists in localStorage so the preferred mode survives reloads.
+ */
+function ViewModeToggle({
+  mode,
+  onChange,
+}: {
+  mode: ViewMode
+  onChange: (mode: ViewMode) => void
+}) {
+  const btn = (target: ViewMode, label: string, icon: React.ReactNode) => {
+    const active = mode === target
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        title={label}
+        aria-pressed={active}
+        onClick={() => onChange(target)}
+        className={`flex h-[30px] w-[34px] items-center justify-center transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+          active
+            ? 'bg-[var(--acc-l)] text-[var(--acc)]'
+            : 'bg-[var(--card)] text-[var(--muted)] hover:text-[var(--acc)]'
+        }`}
+      >
+        {icon}
+      </button>
+    )
+  }
+  return (
+    <div
+      role="group"
+      aria-label="View mode"
+      className="flex overflow-hidden rounded-lg border border-[var(--bdr)] shadow-sm"
+    >
+      {btn('list', 'List view', <List size={15} aria-hidden />)}
+      <span aria-hidden className="w-px bg-[var(--bdr)]" />
+      {btn('tree', 'Tree view', <ListTree size={15} aria-hidden />)}
+    </div>
+  )
+}
+
 function FilterSelect({
   label,
   value,
@@ -636,7 +883,7 @@ function GroupBlock({
     <>
       {showHeader && (
         <tr className="bg-muted/30 border-border border-b">
-          <td colSpan={7} className="px-3 py-2">
+          <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">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
@@ -779,12 +1026,16 @@ function PageRow({
   resolveTag,
   onSelect,
   onOpen,
+  onDuplicate,
+  onDelete,
 }: {
   page: Page
   selected: boolean
   resolveTag: (slug: string) => { name: string; color: string | null } | undefined
   onSelect: () => void
   onOpen: () => void
+  onDuplicate: () => void
+  onDelete: () => void
 }) {
   return (
     <tr
@@ -835,6 +1086,29 @@ function PageRow({
       <td className="px-3 py-3">
         <SeoScoreIndicator score={page.seoScore} />
       </td>
+      <td className="px-3 py-3">
+        <RowActions>
+          <RowActionButton aria-label={`Edit "${page.title}"`} title="Edit" onClick={onOpen}>
+            <PenLine size={13} 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>
   )
 }
@@ -844,7 +1118,7 @@ function LoadingRows() {
     <>
       {Array.from({ length: 8 }).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>
@@ -866,7 +1140,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 pages match your filters' : 'No pages yet'}
         </div>