@ketvietlab/ketsuite 0.1.24 → 0.1.29

package/dist/modules/website_backend/screens/index.js

@@ -1,5 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { badge, code, columns, ContentCard, dataTable, emptyState, RecordScreen, inline, linkButton, Notice, pagerBar, RecordActions, RecordForm, Section, stack, Surface, } from '../../../ui/index.js';
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { withParam } from '../../backend/paging.js';
+import { collectionQueryKeep, prepareCollectionTable } from '../../../ui/index.js';
+import { badge, code, columns, ContentCard, dataTable, collectionTable, emptyState, RecordScreen, inline, linkButton, Notice, RecordActions, RecordForm, Section, stack, Surface, } from '../../../ui/index.js';
 import { FormScreenFrame, ListScreenFrame } from './page-frame.js';
 const statusTone = (status) => status === 'published'
     ? 'positive'
@@ -137,61 +139,62 @@ const domainInstructions = (_, site, row) => (_jsx(Surface, { body: siteFacts(_,
         [_('website_backend.domains.challenge'), _('website_backend.domains.challengeHint')],
         [_('website_backend.domains.nextStep'), _('website_backend.domains.nextStepHint')],
     ]) }));
-export const sitesScreen = (_, rows, frame, locale = '', active = 'all') => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.sites.title'), frame: frame, body: stack([
-        inline([
-            linkButton({
-                label: _('website_backend.action.newSite'),
-                href: `/admin/website/sites/new${locale}`,
-                variant: 'primary',
-            }),
+export const sitesScreen = (_, rows, frame, locale = '', active = 'all') => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `/admin/website/sites/${row.id}${locale}`,
+        columns: [
+            {
+                key: 'site',
+                label: _('website_backend.sites.site'),
+                priority: 'primary',
+                cell: (row) => `${row.title} · ${companyLabel(_, frame, row)}`,
+            },
+            {
+                key: 'primaryHost',
+                label: _('website_backend.sites.primaryHost'),
+                priority: 'primary',
+                cell: (row) => primaryHost(_, row),
+            },
+            {
+                key: 'locale',
+                label: _('website_backend.field.locale'),
+                cell: (row) => code(row.defaultLocale),
+            },
+            {
+                key: 'state',
+                label: _('website_backend.field.status'),
+                kind: 'status',
+                cell: (row) => row.active ? domainEvidenceBadge(_, row) : badge(_('website_backend.state.inactive'), 'neutral'),
+            },
+            {
+                key: 'role',
+                label: _('website_backend.sites.yourRole'),
+                cell: (row) => roleLabel(_, row.role),
+            },
+        ],
+        responsive: 'stack',
+    }, {
+        paginate: true,
+        searchText: (row) => `${row.name} ${row.title} ${row.primaryHost ?? ''} ${row.defaultLocale}`,
+    });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.sites.title'), frame: collection.frame, controls: activeFilter(_, (state) => withParam(new URL(frame.collectionUrl ?? `/admin/website/sites${locale}`, 'http://collection.local'), 'state', state), active), headerActions: linkButton({
+            label: _('website_backend.action.newSite'),
+            href: `/admin/website/sites/new${locale}`,
+            variant: 'primary',
+        }), actions: inline([
             linkButton({
                 label: _('website_backend.action.pages'),
                 href: `/admin/website/pages${locale}`,
                 variant: 'secondary',
             }),
-        ]),
-        activeFilter(_, (state) => `/admin/website/sites?state=${state}${locale ? `&${locale.slice(1)}` : ''}`, active),
-        rows.length === 0
-            ? emptyState(_('website_backend.sites.empty'), _('website_backend.sites.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                rowHref: (row) => `/admin/website/sites/${row.id}${locale}`,
-                columns: [
-                    {
-                        key: 'site',
-                        label: _('website_backend.sites.site'),
-                        priority: 'primary',
-                        cell: (row) => `${row.title} · ${companyLabel(_, frame, row)}`,
-                    },
-                    {
-                        key: 'primaryHost',
-                        label: _('website_backend.sites.primaryHost'),
-                        priority: 'primary',
-                        cell: (row) => primaryHost(_, row),
-                    },
-                    {
-                        key: 'locale',
-                        label: _('website_backend.field.locale'),
-                        cell: (row) => code(row.defaultLocale),
-                    },
-                    {
-                        key: 'state',
-                        label: _('website_backend.field.status'),
-                        kind: 'status',
-                        cell: (row) => row.active
-                            ? domainEvidenceBadge(_, row)
-                            : badge(_('website_backend.state.inactive'), 'neutral'),
-                    },
-                    {
-                        key: 'role',
-                        label: _('website_backend.sites.yourRole'),
-                        cell: (row) => roleLabel(_, row.role),
-                    },
-                ],
-                responsive: 'stack',
-            }),
-    ]) }));
+        ]), body: stack([
+            rows.length === 0
+                ? emptyState(_('website_backend.sites.empty'), _('website_backend.sites.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 export const siteFormScreen = (_, row, themes, frame, options = {}) => {
     const existing = !!row.id;
     const locale = options.locale ?? '';
@@ -310,44 +313,49 @@ export const siteFormScreen = (_, row, themes, frame, options = {}) => {
                 ]),
         ]) }));
 };
-export const contentScreen = (_, rows, sites, siteId, frame, locale = '', kind = { basePath: '/admin/website/pages', titleKey: 'pages' }, pager = null, 
-/** What the URL asked for, so the controls come back showing it. */
-query = {}) => (_jsx(ListScreenFrame, { translator: _, title: _(`website_backend.${kind.titleKey}.title`), frame: frame, footer: pager ? pagerBar(_, pager) : null, body: stack([
-        _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `${kind.basePath}${locale}`, method: "get", layout: "inline", fields: [
-                    {
-                        name: 'site',
-                        label: _('website_backend.field.site'),
-                        type: 'select',
-                        value: siteId,
-                        options: sites,
-                    },
-                    {
-                        name: 'q',
-                        label: _('website_backend.field.search'),
-                        value: query.search ?? '',
-                    },
-                    {
-                        name: 'status',
-                        label: _('website_backend.field.status'),
-                        type: 'select',
-                        value: query.status ?? 'all',
-                        options: [
-                            { value: 'all', label: _('website_backend.state.all') },
-                            { value: 'draft', label: _('website_backend.state.draft') },
-                            { value: 'scheduled', label: _('website_backend.state.scheduled') },
-                            { value: 'published', label: _('website_backend.state.published') },
-                            // Only by asking: the list leaves the bin out otherwise, the
-                            // way every other reader in the module already does.
-                            { value: 'trash', label: _('website_backend.state.trash') },
-                        ],
-                    },
-                ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }) }),
-        inline([
-            linkButton({
-                label: _(`website_backend.action.new${kind.titleKey === 'pages' ? 'Page' : 'Post'}`),
-                href: `${kind.basePath}/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
-                variant: 'primary',
-            }),
+export const contentScreen = (_, rows, sites, siteId, frame, locale = '', kind = { basePath: '/admin/website/pages', titleKey: 'pages' }, pager = null) => {
+    const collection = prepareCollectionTable(_, { ...frame, chrome: { ...frame.chrome, pager: pager ?? frame.chrome?.pager } }, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `${kind.basePath}/${row.id}${locale}`,
+        columns: [
+            {
+                key: 'title',
+                label: _('website_backend.field.title'),
+                priority: 'primary',
+                cell: (row) => row.title,
+            },
+            {
+                key: 'path',
+                label: _('website_backend.field.path'),
+                kind: 'identifier',
+                cell: (row) => code(row.path),
+            },
+            {
+                key: 'status',
+                label: _('website_backend.field.status'),
+                kind: 'status',
+                cell: (row) => badge(_(`website_backend.state.${row.status}`), statusTone(row.status)),
+            },
+        ],
+    }, { paginate: false });
+    return (_jsx(ListScreenFrame, { translator: _, title: _(`website_backend.${kind.titleKey}.title`), frame: collection.frame, controls: _jsx(RecordForm, { action: `${kind.basePath}${locale}`, method: "get", 
+            // The bar owns the query and the publication state now; what is
+            // left is which site's content this is, which is not a filter. The
+            // chrome draws the panel, so the form brings no card of its own.
+            hidden: collectionQueryKeep(new URL(frame.collectionUrl ?? `${kind.basePath}${locale}`, 'http://collection.local'), ['site']), layout: "inline", fields: [
+                {
+                    name: 'site',
+                    label: _('website_backend.field.site'),
+                    type: 'select',
+                    value: siteId,
+                    options: sites,
+                },
+            ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }), headerActions: linkButton({
+            label: _(`website_backend.action.new${kind.titleKey === 'pages' ? 'Page' : 'Post'}`),
+            href: `${kind.basePath}/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
+            variant: 'primary',
+        }), actions: inline([
             linkButton({
                 label: _('website_backend.action.taxonomies'),
                 href: `/admin/website/taxonomies?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
@@ -356,37 +364,16 @@ query = {}) => (_jsx(ListScreenFrame, { translator: _, title: _(`website_backend
                 label: _('website_backend.action.preflight'),
                 href: `/admin/website/preflight?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
             }),
-        ]),
-        !siteId
-            ? emptyState(_('website_backend.content.noSite'), _('website_backend.content.noSiteHint'))
-            : rows.length === 0
-                ? emptyState(_('website_backend.content.empty'), _('website_backend.content.emptyHint'))
-                : dataTable(_, {
-                    rows,
-                    id: (row) => row.id,
-                    rowHref: (row) => `${kind.basePath}/${row.id}${locale}`,
-                    columns: [
-                        {
-                            key: 'title',
-                            label: _('website_backend.field.title'),
-                            priority: 'primary',
-                            cell: (row) => row.title,
-                        },
-                        {
-                            key: 'path',
-                            label: _('website_backend.field.path'),
-                            kind: 'identifier',
-                            cell: (row) => code(row.path),
-                        },
-                        {
-                            key: 'status',
-                            label: _('website_backend.field.status'),
-                            kind: 'status',
-                            cell: (row) => badge(_(`website_backend.state.${row.status}`), statusTone(row.status)),
-                        },
-                    ],
-                }),
-    ]) }));
+        ]), body: stack([
+            // One GET form for all three, because they are one question - which
+            // pages am I looking at - and three forms would each drop the other two.
+            !siteId
+                ? emptyState(_('website_backend.content.noSite'), _('website_backend.content.noSiteHint'))
+                : rows.length === 0
+                    ? emptyState(_('website_backend.content.empty'), _('website_backend.content.emptyHint'))
+                    : collectionTable(_, collection.table),
+        ]) }));
+};
 /**
  * Which taxonomy terms this entry carries.
  *
@@ -595,13 +582,13 @@ export const entryFormScreen = (_, detail, siteId, kind, frame, options = {}) =>
  * written and nothing asked it. It defaults to the newest two, because "what
  * changed?" is the question people arrive at this screen holding.
  */
-const revisionCompare = (_, entry, rows, diff, basePath, locale) => {
+const revisionCompare = (_, entry, rows, diff, basePath, locale, frame) => {
     const options = rows.map((row) => ({
         value: row.id,
         label: `${_('website_backend.field.version')} ${row.version} · ${row.kind}`,
     }));
     return (_jsx(Section, { title: _('website_backend.revisions.compare'), description: _('website_backend.revisions.compareHint'), body: stack([
-            _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `${basePath}/${entry.id}/revisions${locale}`, method: "get", layout: "inline", fields: [
+            _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `${basePath}/${entry.id}/revisions${locale}`, method: "get", hidden: collectionQueryKeep(new URL(frame.collectionUrl ?? `${basePath}/${entry.id}/revisions${locale}`, 'http://collection.local'), ['from', 'to']), layout: "inline", fields: [
                         {
                             name: 'from',
                             label: _('website_backend.revisions.from'),
@@ -663,50 +650,54 @@ const revisionCompare = (_, entry, rows, diff, basePath, locale) => {
                 : []),
         ]) }));
 };
-export const revisionsScreen = (_, entry, rows, frame, locale = '', basePath = '/admin/website/pages', diff = null) => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.revisions.title'), frame: frame, body: stack([
-        inline([
+export const revisionsScreen = (_, entry, rows, frame, locale = '', basePath = '/admin/website/pages', diff = null, tableRows = rows) => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows: tableRows,
+        id: (row) => row.id,
+        columns: [
+            {
+                key: 'version',
+                label: _('website_backend.field.version'),
+                kind: 'number',
+                cell: (row) => String(row.version),
+            },
+            {
+                key: 'kind',
+                label: _('website_backend.field.kind'),
+                cell: (row) => badge(row.kind, 'neutral'),
+            },
+            { key: 'author', label: _('website_backend.field.author'), cell: (row) => row.authorId ?? '—' },
+            {
+                key: 'created',
+                label: _('website_backend.field.createdAt'),
+                kind: 'date',
+                cell: (row) => row.createdAt,
+            },
+            {
+                // A restore makes a draft; it does not change what a visitor
+                // reads. That is why it is offered on every row, including a
+                // revision the current deployment can no longer draw - getting
+                // the content back is how it gets repaired.
+                key: 'restore',
+                label: _('website_backend.action.restore'),
+                cell: (row) => (_jsx(RecordActions, { action: `${basePath}/${entry.id}/revisions/${row.id}/restore${locale}`, size: "compact", actions: [{ value: 'restore', label: _('website_backend.action.restore') }] })),
+            },
+        ],
+    }, { paginate: true });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.revisions.title'), frame: collection.frame, actions: inline([
             linkButton({
                 label: _('website_backend.action.backToEntry'),
                 href: `${basePath}/${entry.id}${locale}`,
             }),
-        ]),
-        ...(rows.length > 1 ? [revisionCompare(_, entry, rows, diff, basePath, locale)] : []),
-        rows.length === 0
-            ? emptyState(_('website_backend.revisions.empty'), _('website_backend.revisions.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                columns: [
-                    {
-                        key: 'version',
-                        label: _('website_backend.field.version'),
-                        kind: 'number',
-                        cell: (row) => String(row.version),
-                    },
-                    {
-                        key: 'kind',
-                        label: _('website_backend.field.kind'),
-                        cell: (row) => badge(row.kind, 'neutral'),
-                    },
-                    { key: 'author', label: _('website_backend.field.author'), cell: (row) => row.authorId ?? '—' },
-                    {
-                        key: 'created',
-                        label: _('website_backend.field.createdAt'),
-                        kind: 'date',
-                        cell: (row) => row.createdAt,
-                    },
-                    {
-                        // A restore makes a draft; it does not change what a visitor
-                        // reads. That is why it is offered on every row, including a
-                        // revision the current deployment can no longer draw - getting
-                        // the content back is how it gets repaired.
-                        key: 'restore',
-                        label: _('website_backend.action.restore'),
-                        cell: (row) => (_jsx(RecordActions, { action: `${basePath}/${entry.id}/revisions/${row.id}/restore${locale}`, size: "compact", actions: [{ value: 'restore', label: _('website_backend.action.restore') }] })),
-                    },
-                ],
-            }),
-    ]) }));
+        ]), body: stack([
+            ...(rows.length > 1
+                ? [revisionCompare(_, entry, rows, diff, basePath, locale, collection.frame)]
+                : []),
+            rows.length === 0
+                ? emptyState(_('website_backend.revisions.empty'), _('website_backend.revisions.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 /**
  * One preview link, and the way to withdraw all of them.
  *
@@ -766,47 +757,46 @@ export const previewScreen = (_, entry, minted, frame, basePath = '/admin/websit
                         },
                     ] }) }) }),
     ]) }));
-const siteSwitcher = (_, action, sites, siteId, locale) => (_jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `${action}${locale}`, method: "get", layout: "inline", fields: [
+const siteSwitcher = (_, action, sites, siteId, locale, frame = {}) => (_jsx(RecordForm, { action: `${action}${locale}`, method: "get", hidden: collectionQueryKeep(new URL(frame.collectionUrl ?? `${action}${locale}`, 'http://collection.local'), ['site']), layout: "inline", fields: [
+        {
+            name: 'site',
+            label: _('website_backend.field.site'),
+            type: 'select',
+            value: siteId,
+            options: sites,
+        },
+    ], submit: _('website_backend.action.switchSite'), submitVariant: "secondary" }));
+export const taxonomyScreen = (_, rows, sites, siteId, frame, locale = '') => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `/admin/website/taxonomies/${row.id}${locale}`,
+        columns: [
             {
-                name: 'site',
-                label: _('website_backend.field.site'),
-                type: 'select',
-                value: siteId,
-                options: sites,
+                key: 'name',
+                label: _('website_backend.field.name'),
+                priority: 'primary',
+                cell: (row) => row.name,
             },
-        ], submit: _('website_backend.action.switchSite'), submitVariant: "secondary" }) }));
-export const taxonomyScreen = (_, rows, sites, siteId, frame, locale = '') => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.taxonomies.title'), frame: frame, body: stack([
-        siteSwitcher(_, '/admin/website/taxonomies', sites, siteId, locale),
-        inline([
-            linkButton({
-                label: _('website_backend.action.newTerm'),
-                href: `/admin/website/taxonomies/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
-                variant: 'primary',
-            }),
-        ]),
-        rows.length === 0
-            ? emptyState(_('website_backend.taxonomies.empty'), _('website_backend.taxonomies.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                rowHref: (row) => `/admin/website/taxonomies/${row.id}${locale}`,
-                columns: [
-                    {
-                        key: 'name',
-                        label: _('website_backend.field.name'),
-                        priority: 'primary',
-                        cell: (row) => row.name,
-                    },
-                    {
-                        key: 'taxonomy',
-                        label: _('website_backend.field.taxonomy'),
-                        cell: (row) => code(row.taxonomy),
-                    },
-                    { key: 'slug', label: _('website_backend.field.slug'), cell: (row) => code(row.slug) },
-                    { key: 'parent', label: _('website_backend.field.parent'), cell: (row) => row.parentId ?? '—' },
-                ],
-            }),
-    ]) }));
+            {
+                key: 'taxonomy',
+                label: _('website_backend.field.taxonomy'),
+                cell: (row) => code(row.taxonomy),
+            },
+            { key: 'slug', label: _('website_backend.field.slug'), cell: (row) => code(row.slug) },
+            { key: 'parent', label: _('website_backend.field.parent'), cell: (row) => row.parentId ?? '—' },
+        ],
+    }, { paginate: true, searchText: (row) => `${row.name} ${row.taxonomy} ${row.slug}` });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.taxonomies.title'), frame: collection.frame, controls: siteSwitcher(_, '/admin/website/taxonomies', sites, siteId, locale, collection.frame), headerActions: linkButton({
+            label: _('website_backend.action.newTerm'),
+            href: `/admin/website/taxonomies/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
+            variant: 'primary',
+        }), body: stack([
+            rows.length === 0
+                ? emptyState(_('website_backend.taxonomies.empty'), _('website_backend.taxonomies.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 export const taxonomyFormScreen = (_, row, taxonomies, parents, frame, options = {}) => {
     const existing = !!row.id;
     return (_jsx(FormScreenFrame, { translator: _, title: existing ? String(row.name) : _('website_backend.taxonomies.newTitle'), frame: frame, body: stack([
@@ -852,37 +842,39 @@ export const taxonomyFormScreen = (_, row, taxonomies, parents, frame, options =
                 : []),
         ]) }));
 };
-export const mediaScreen = (_, rows, sites, siteId, frame, locale = '') => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.media.title'), frame: frame, body: stack([
-        siteSwitcher(_, '/admin/website/media', sites, siteId, locale),
-        inline([
-            linkButton({
-                label: _('website_backend.action.newMedia'),
-                href: `/admin/website/media/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
-                variant: 'primary',
-            }),
-        ]),
-        rows.length === 0
-            ? emptyState(_('website_backend.media.empty'), _('website_backend.media.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                rowHref: (row) => `/admin/website/media/${row.id}${locale}`,
-                columns: [
-                    {
-                        key: 'attachment',
-                        label: _('website_backend.field.attachment'),
-                        priority: 'primary',
-                        cell: (row) => code(row.attachmentId),
-                    },
-                    { key: 'alt', label: _('website_backend.field.alt'), cell: (row) => row.alt ?? '—' },
-                    {
-                        key: 'size',
-                        label: _('website_backend.field.size'),
-                        cell: (row) => (row.width && row.height ? `${row.width} × ${row.height}` : '—'),
-                    },
-                ],
-            }),
-    ]) }));
+export const mediaScreen = (_, rows, sites, siteId, frame, locale = '') => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `/admin/website/media/${row.id}${locale}`,
+        columns: [
+            {
+                key: 'attachment',
+                label: _('website_backend.field.attachment'),
+                priority: 'primary',
+                cell: (row) => code(row.attachmentId),
+            },
+            { key: 'alt', label: _('website_backend.field.alt'), cell: (row) => row.alt ?? '—' },
+            {
+                key: 'size',
+                label: _('website_backend.field.size'),
+                cell: (row) => (row.width && row.height ? `${row.width} × ${row.height}` : '—'),
+            },
+        ],
+    }, {
+        paginate: true,
+        searchText: (row) => `${row.attachmentId} ${row.alt ?? ''} ${row.width ?? ''} ${row.height ?? ''}`,
+    });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.media.title'), frame: collection.frame, controls: siteSwitcher(_, '/admin/website/media', sites, siteId, locale, collection.frame), headerActions: linkButton({
+            label: _('website_backend.action.newMedia'),
+            href: `/admin/website/media/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
+            variant: 'primary',
+        }), body: stack([
+            rows.length === 0
+                ? emptyState(_('website_backend.media.empty'), _('website_backend.media.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 export const mediaFormScreen = (_, row, frame, options = {}) => {
     const existing = !!row.id;
     const usage = options.usage ?? null;
@@ -1035,50 +1027,49 @@ const danglingNotice = (_, dangling) => dangling.length === 0
                 .map((item) => `${item.label} (${item.href})`)
                 .join(' · ')}` }),
     ];
-export const menusScreen = (_, rows, sites, siteId, frame, locale = '', dangling = []) => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.menus.title'), frame: frame, body: stack([
-        siteSwitcher(_, '/admin/website/menus', sites, siteId, locale),
-        ...danglingNotice(_, dangling),
-        inline([
-            linkButton({
-                label: _('website_backend.action.newMenuItem'),
-                href: `/admin/website/menus/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
-                variant: 'primary',
-            }),
-        ]),
-        rows.length === 0
-            ? emptyState(_('website_backend.menus.empty'), _('website_backend.menus.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                rowHref: (row) => `/admin/website/menus/${row.id}?site=${encodeURIComponent(row.siteId)}${locale ? `&${locale.slice(1)}` : ''}`,
-                columns: [
-                    {
-                        key: 'label',
-                        label: _('website_backend.field.label'),
-                        priority: 'primary',
-                        cell: (row) => row.label,
-                    },
-                    { key: 'href', label: _('website_backend.field.href'), cell: (row) => code(row.href) },
-                    {
-                        key: 'position',
-                        label: _('website_backend.field.position'),
-                        kind: 'number',
-                        cell: (row) => String(row.position),
-                    },
-                    {
-                        // Buttons, so the order is editable from a keyboard without
-                        // anything having to be dragged - and without an editor doing
-                        // arithmetic in the position box, which was the only way.
-                        key: 'move',
-                        label: _('website_backend.menus.move'),
-                        cell: (row) => (_jsx(RecordActions, { action: `/admin/website/menus/${row.id}/move${locale}`, hidden: { site: row.siteId }, size: "compact", actions: [
-                                { value: 'up', label: _('website_backend.menus.up') },
-                                { value: 'down', label: _('website_backend.menus.down') },
-                            ] })),
-                    },
-                ],
-            }),
-    ]) }));
+export const menusScreen = (_, rows, sites, siteId, frame, locale = '', dangling = []) => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `/admin/website/menus/${row.id}?site=${encodeURIComponent(row.siteId)}${locale ? `&${locale.slice(1)}` : ''}`,
+        columns: [
+            {
+                key: 'label',
+                label: _('website_backend.field.label'),
+                priority: 'primary',
+                cell: (row) => row.label,
+            },
+            { key: 'href', label: _('website_backend.field.href'), cell: (row) => code(row.href) },
+            {
+                key: 'position',
+                label: _('website_backend.field.position'),
+                kind: 'number',
+                cell: (row) => String(row.position),
+            },
+            {
+                // Buttons, so the order is editable from a keyboard without
+                // anything having to be dragged - and without an editor doing
+                // arithmetic in the position box, which was the only way.
+                key: 'move',
+                label: _('website_backend.menus.move'),
+                cell: (row) => (_jsx(RecordActions, { action: `/admin/website/menus/${row.id}/move${locale}`, hidden: { site: row.siteId }, size: "compact", actions: [
+                        { value: 'up', label: _('website_backend.menus.up') },
+                        { value: 'down', label: _('website_backend.menus.down') },
+                    ] })),
+            },
+        ],
+    }, { paginate: true, searchText: (row) => `${row.label} ${row.href}` });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.menus.title'), frame: collection.frame, controls: siteSwitcher(_, '/admin/website/menus', sites, siteId, locale, collection.frame), headerActions: linkButton({
+            label: _('website_backend.action.newMenuItem'),
+            href: `/admin/website/menus/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
+            variant: 'primary',
+        }), body: stack([
+            ...danglingNotice(_, dangling),
+            rows.length === 0
+                ? emptyState(_('website_backend.menus.empty'), _('website_backend.menus.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 export const menuFormScreen = (_, row, parents, frame, options = {}) => {
     const existing = !!row.id;
     return (_jsx(FormScreenFrame, { translator: _, title: existing ? String(row.label) : _('website_backend.menus.newTitle'), frame: frame, body: stack([
@@ -1120,55 +1111,55 @@ export const menuFormScreen = (_, row, parents, frame, options = {}) => {
                 : []),
         ]) }));
 };
-export const formsScreen = (_, rows, siteId, frame, locale = '', active = 'all') => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.forms.title'), frame: frame, body: stack([
-        activeFilter(_, (state) => `/admin/website/forms?site=${encodeURIComponent(siteId ?? '')}&state=${state}${locale ? `&${locale.slice(1)}` : ''}`, active),
-        inline([
-            linkButton({
-                label: _('website_backend.action.newForm'),
-                href: `/admin/website/forms/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
-                variant: 'primary',
-            }),
-        ]),
-        rows.length === 0
-            ? emptyState(_('website_backend.forms.empty'), _('website_backend.forms.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                // The row opens the form, the way a row opens the record on every
-                // other list here. Submissions were the row's destination only
-                // because there was nothing else to open.
-                rowHref: (row) => `/admin/website/forms/${row.id}${locale}`,
-                columns: [
-                    {
-                        key: 'name',
-                        label: _('website_backend.field.name'),
-                        priority: 'primary',
-                        cell: (row) => row.name,
-                    },
-                    {
-                        key: 'status',
-                        label: _('website_backend.field.status'),
-                        cell: (row) => badge(row.active ? _('website_backend.state.active') : _('website_backend.state.inactive'), row.active ? 'positive' : 'neutral'),
-                    },
-                    {
-                        key: 'retention',
-                        label: _('website_backend.field.retentionDays'),
-                        cell: (row) => row.retentionDays == null
-                            ? badge(_('website_backend.state.kept'), 'neutral')
-                            : String(row.retentionDays),
-                    },
-                    {
-                        key: 'submissions',
-                        label: _('website_backend.submissions.title'),
-                        cell: (row) => linkButton({
-                            label: _('website_backend.action.open'),
-                            href: `/admin/website/forms/${row.id}/submissions${locale}`,
-                            size: 'compact',
-                        }),
-                    },
-                ],
-            }),
-    ]) }));
+export const formsScreen = (_, rows, siteId, frame, locale = '', active = 'all') => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        // The row opens the form, the way a row opens the record on every
+        // other list here. Submissions were the row's destination only
+        // because there was nothing else to open.
+        rowHref: (row) => `/admin/website/forms/${row.id}${locale}`,
+        columns: [
+            {
+                key: 'name',
+                label: _('website_backend.field.name'),
+                priority: 'primary',
+                cell: (row) => row.name,
+            },
+            {
+                key: 'status',
+                label: _('website_backend.field.status'),
+                cell: (row) => badge(row.active ? _('website_backend.state.active') : _('website_backend.state.inactive'), row.active ? 'positive' : 'neutral'),
+            },
+            {
+                key: 'retention',
+                label: _('website_backend.field.retentionDays'),
+                cell: (row) => row.retentionDays == null
+                    ? badge(_('website_backend.state.kept'), 'neutral')
+                    : String(row.retentionDays),
+            },
+            {
+                key: 'submissions',
+                label: _('website_backend.submissions.title'),
+                cell: (row) => linkButton({
+                    label: _('website_backend.action.open'),
+                    href: `/admin/website/forms/${row.id}/submissions${locale}`,
+                    size: 'compact',
+                }),
+            },
+        ],
+    }, { paginate: true, searchText: (row) => `${row.name}` });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.forms.title'), frame: collection.frame, controls: activeFilter(_, (state) => withParam(new URL(frame.collectionUrl ??
+            `/admin/website/forms?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`, 'http://collection.local'), 'state', state), active), headerActions: linkButton({
+            label: _('website_backend.action.newForm'),
+            href: `/admin/website/forms/new?site=${encodeURIComponent(siteId ?? '')}${locale ? `&${locale.slice(1)}` : ''}`,
+            variant: 'primary',
+        }), body: stack([
+            rows.length === 0
+                ? emptyState(_('website_backend.forms.empty'), _('website_backend.forms.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 /**
  * One editor, for a new form and an existing one.
  *
@@ -1366,13 +1357,52 @@ const submissionActions = (_, formId, fields, retentionDays, locale, status = 'a
                         ], submit: _('website_backend.submissions.purge'), submitVariant: "secondary" }) }) }),
         ]),
 ];
-export const submissionsScreen = (_, rows, frame, options = {}) => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.submissions.title'), frame: frame, footer: options.pager ? pagerBar(_, options.pager) : null, body: stack([
-        // `listSubmissions` and `countSubmissions` have both taken this since
-        // they were written. Without it a form with a year of entries is read
-        // thirty at a time and the erased rows sit among the live ones.
-        ...(options.formId
-            ? [
-                _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `/admin/website/forms/${options.formId}/submissions${options.locale ?? ''}`, method: "get", layout: "inline", fields: [
+export const submissionsScreen = (_, rows, frame, options = {}) => {
+    const collection = prepareCollectionTable(_, { ...frame, chrome: { ...frame.chrome, pager: options.pager ?? frame.chrome?.pager } }, {
+        rows,
+        id: (row) => row.id,
+        rowHref: (row) => `/admin/website/forms/${row.formId}/submissions/${row.id}`,
+        columns: [
+            {
+                key: 'created',
+                label: _('website_backend.field.createdAt'),
+                kind: 'date',
+                priority: 'primary',
+                cell: (row) => row.createdAt,
+            },
+            {
+                key: 'summary',
+                label: _('website_backend.field.summary'),
+                cell: (row) => row.purgedAt
+                    ? badge(_('website_backend.state.purged'), 'neutral')
+                    : Object.keys(row.summary ?? {}).length
+                        ? code(JSON.stringify(row.summary))
+                        : badge(_('website_backend.state.noPreview'), 'neutral'),
+            },
+            {
+                key: 'hold',
+                label: _('website_backend.field.hold'),
+                cell: (row) => row.held
+                    ? badge(row.holdReason ?? _('website_backend.state.yes'), 'warning')
+                    : badge(_('website_backend.state.no'), 'neutral'),
+            },
+            {
+                key: 'consent',
+                label: _('website_backend.field.consent'),
+                cell: (row) => badge(row.consent ? _('website_backend.state.yes') : _('website_backend.state.no'), row.consent ? 'positive' : 'neutral'),
+            },
+            {
+                key: 'status',
+                label: _('website_backend.field.status'),
+                cell: (row) => badge(row.status, 'info'),
+            },
+        ],
+    }, { paginate: false });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.submissions.title'), frame: collection.frame, controls: stack([
+            ...(options.formId
+                ? [
+                    _jsx(RecordForm, { action: `/admin/website/forms/${options.formId}/submissions${options.locale ?? ''}`, method: "get", hidden: collectionQueryKeep(new URL(frame.collectionUrl ??
+                            `/admin/website/forms/${options.formId}/submissions${options.locale ?? ''}`, 'http://collection.local'), ['status']), layout: "inline", fields: [
                             {
                                 name: 'status',
                                 label: _('website_backend.field.status'),
@@ -1384,55 +1414,21 @@ export const submissionsScreen = (_, rows, frame, options = {}) => (_jsx(ListScr
                                     { value: 'purged', label: _('website_backend.state.purged') },
                                 ],
                             },
-                        ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }) }),
-            ]
-            : []),
-        ...(options.formId
-            ? submissionActions(_, options.formId, options.fields ?? [], options.retentionDays ?? null, options.locale ?? '', options.status ?? 'all')
-            : []),
-        rows.length === 0
-            ? emptyState(_('website_backend.submissions.empty'), _('website_backend.submissions.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                rowHref: (row) => `/admin/website/forms/${row.formId}/submissions/${row.id}`,
-                columns: [
-                    {
-                        key: 'created',
-                        label: _('website_backend.field.createdAt'),
-                        kind: 'date',
-                        priority: 'primary',
-                        cell: (row) => row.createdAt,
-                    },
-                    {
-                        key: 'summary',
-                        label: _('website_backend.field.summary'),
-                        cell: (row) => row.purgedAt
-                            ? badge(_('website_backend.state.purged'), 'neutral')
-                            : Object.keys(row.summary ?? {}).length
-                                ? code(JSON.stringify(row.summary))
-                                : badge(_('website_backend.state.noPreview'), 'neutral'),
-                    },
-                    {
-                        key: 'hold',
-                        label: _('website_backend.field.hold'),
-                        cell: (row) => row.held
-                            ? badge(row.holdReason ?? _('website_backend.state.yes'), 'warning')
-                            : badge(_('website_backend.state.no'), 'neutral'),
-                    },
-                    {
-                        key: 'consent',
-                        label: _('website_backend.field.consent'),
-                        cell: (row) => badge(row.consent ? _('website_backend.state.yes') : _('website_backend.state.no'), row.consent ? 'positive' : 'neutral'),
-                    },
-                    {
-                        key: 'status',
-                        label: _('website_backend.field.status'),
-                        cell: (row) => badge(row.status, 'info'),
-                    },
-                ],
-            }),
-    ]) }));
+                        ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }),
+                ]
+                : []),
+        ]), body: stack([
+            // `listSubmissions` and `countSubmissions` have both taken this since
+            // they were written. Without it a form with a year of entries is read
+            // thirty at a time and the erased rows sit among the live ones.
+            ...(options.formId
+                ? submissionActions(_, options.formId, options.fields ?? [], options.retentionDays ?? null, options.locale ?? '', options.status ?? 'all')
+                : []),
+            rows.length === 0
+                ? emptyState(_('website_backend.submissions.empty'), _('website_backend.submissions.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 /** The four site roles the access layer recognises, in the order they widen. */
 const SITE_ROLES = ['contributor', 'author', 'editor', 'administrator'];
 /**
@@ -1442,62 +1438,64 @@ const SITE_ROLES = ['contributor', 'author', 'editor', 'administrator'];
  * changed by calling the function directly. A permission that can be granted
  * and never reviewed is the kind that quietly outlives the reason for it.
  */
-export const siteMembersScreen = (_, site, rows, frame, options = {}) => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.members.title'), frame: frame, body: stack([
-        inline([
+export const siteMembersScreen = (_, site, rows, frame, options = {}) => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        columns: [
+            {
+                key: 'user',
+                label: _('website_backend.members.user'),
+                priority: 'primary',
+                cell: (row) => row.userId,
+            },
+            {
+                key: 'role',
+                label: _('website_backend.members.role'),
+                cell: (row) => badge(_(`website_backend.role.${row.role}`), 'info'),
+            },
+            {
+                key: 'remove',
+                label: _('website_backend.action.remove'),
+                cell: (row) => (_jsx(RecordActions, { action: `/admin/website/sites/${site.id}/members/${row.id}/remove${options.locale ?? ''}`, size: "compact", actions: [
+                        {
+                            value: 'remove',
+                            label: _('website_backend.action.remove'),
+                            variant: 'destructive',
+                        },
+                    ] })),
+            },
+        ],
+    }, { paginate: true });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.members.title'), frame: collection.frame, actions: inline([
             linkButton({
                 label: _('website_backend.action.backToSite'),
                 href: `/admin/website/sites/${site.id}${options.locale ?? ''}`,
             }),
-        ]),
-        _jsx(Section, { title: _('website_backend.members.add'), description: _('website_backend.members.addHint'), body: _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `/admin/website/sites/${site.id}/members${options.locale ?? ''}`, layout: "inline", fields: [
-                        {
-                            name: 'userId',
-                            label: _('website_backend.members.user'),
-                            value: options.values?.userId,
-                            required: true,
-                        },
-                        {
-                            name: 'role',
-                            label: _('website_backend.members.role'),
-                            type: 'select',
-                            value: options.values?.role ?? 'editor',
-                            options: SITE_ROLES.map((role) => ({
-                                value: role,
-                                label: _(`website_backend.role.${role}`),
-                            })),
-                        },
-                    ], submit: _('website_backend.action.save'), submitVariant: "primary", errors: options.errors }) }) }),
-        rows.length === 0
-            ? emptyState(_('website_backend.members.empty'), _('website_backend.members.emptyHint'))
-            : dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                columns: [
-                    {
-                        key: 'user',
-                        label: _('website_backend.members.user'),
-                        priority: 'primary',
-                        cell: (row) => row.userId,
-                    },
-                    {
-                        key: 'role',
-                        label: _('website_backend.members.role'),
-                        cell: (row) => badge(_(`website_backend.role.${row.role}`), 'info'),
-                    },
-                    {
-                        key: 'remove',
-                        label: _('website_backend.action.remove'),
-                        cell: (row) => (_jsx(RecordActions, { action: `/admin/website/sites/${site.id}/members/${row.id}/remove${options.locale ?? ''}`, size: "compact", actions: [
-                                {
-                                    value: 'remove',
-                                    label: _('website_backend.action.remove'),
-                                    variant: 'destructive',
-                                },
-                            ] })),
-                    },
-                ],
-            }),
-    ]) }));
+        ]), body: stack([
+            _jsx(Section, { title: _('website_backend.members.add'), description: _('website_backend.members.addHint'), body: _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `/admin/website/sites/${site.id}/members${options.locale ?? ''}`, layout: "inline", fields: [
+                            {
+                                name: 'userId',
+                                label: _('website_backend.members.user'),
+                                value: options.values?.userId,
+                                required: true,
+                            },
+                            {
+                                name: 'role',
+                                label: _('website_backend.members.role'),
+                                type: 'select',
+                                value: options.values?.role ?? 'editor',
+                                options: SITE_ROLES.map((role) => ({
+                                    value: role,
+                                    label: _(`website_backend.role.${role}`),
+                                })),
+                            },
+                        ], submit: _('website_backend.action.save'), submitVariant: "primary", errors: options.errors }) }) }),
+            rows.length === 0
+                ? emptyState(_('website_backend.members.empty'), _('website_backend.members.emptyHint'))
+                : collectionTable(_, collection.table),
+        ]) }));
+};
 /**
  * Which hosts answer for this site, and which one the others defer to.
  *
@@ -1523,21 +1521,72 @@ export const siteDomainsScreen = (_, site, rows, frame, options = {}) => {
                 size: 'compact',
             }),
         ]) })));
-    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.domains.title'), frame: frame, body: stack([
-            inline([
-                linkButton({
-                    label: _('website_backend.action.backToSite'),
-                    href: `/admin/website/sites/${site.id}${locale}`,
+    const collection = prepareCollectionTable(_, frame, {
+        rows: options.tableRows ?? rows,
+        id: (row) => row.id,
+        columns: [
+            {
+                key: 'host',
+                label: _('website_backend.domains.host'),
+                priority: 'primary',
+                cell: (row) => row.host,
+            },
+            {
+                key: 'evidence',
+                label: _('website_backend.domains.evidence'),
+                kind: 'status',
+                cell: () => badge(_('website_backend.domains.pendingEvidence'), 'warning'),
+            },
+            {
+                key: 'tls',
+                label: _('website_backend.domains.tls'),
+                kind: 'status',
+                cell: () => badge(_('website_backend.domains.pendingEvidence'), 'warning'),
+            },
+            {
+                key: 'primary',
+                label: _('website_backend.domains.primary'),
+                cell: (row) => row.primary
+                    ? badge(_('website_backend.state.yes'), 'positive')
+                    : badge(_('website_backend.state.no'), 'neutral'),
+            },
+            {
+                key: 'edit',
+                label: _('website_backend.action.edit'),
+                cell: (row) => linkButton({
+                    label: _('website_backend.action.edit'),
+                    href: `/admin/website/sites/${site.id}/domains?edit=${encodeURIComponent(row.id)}${locale ? `&${locale.slice(1)}` : ''}`,
+                    size: 'compact',
                 }),
-                ...(editing
-                    ? [
-                        linkButton({
-                            label: _('website_backend.action.cancel'),
-                            href: `/admin/website/sites/${site.id}/domains${locale}`,
-                        }),
-                    ]
-                    : []),
-            ]),
+            },
+            {
+                key: 'remove',
+                label: _('website_backend.action.remove'),
+                cell: (row) => (_jsx(RecordActions, { action: `/admin/website/sites/${site.id}/domains/${row.id}/remove${locale}`, size: "compact", actions: [
+                        {
+                            value: 'remove',
+                            label: _('website_backend.action.remove'),
+                            variant: 'destructive',
+                        },
+                    ] })),
+            },
+        ],
+        responsive: 'stack',
+    }, { paginate: true });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.domains.title'), frame: collection.frame, actions: inline([
+            linkButton({
+                label: _('website_backend.action.backToSite'),
+                href: `/admin/website/sites/${site.id}${locale}`,
+            }),
+            ...(editing
+                ? [
+                    linkButton({
+                        label: _('website_backend.action.cancel'),
+                        href: `/admin/website/sites/${site.id}/domains${locale}`,
+                    }),
+                ]
+                : []),
+        ]), body: stack([
             rows.length === 0
                 ? Notice({
                     tone: 'warning',
@@ -1605,58 +1654,7 @@ export const siteDomainsScreen = (_, site, rows, frame, options = {}) => {
                             }),
                         ]) }),
                 ], 'loose'),
-            rows.length === 0 ? (_jsx(_Fragment, {})) : (dataTable(_, {
-                rows,
-                id: (row) => row.id,
-                columns: [
-                    {
-                        key: 'host',
-                        label: _('website_backend.domains.host'),
-                        priority: 'primary',
-                        cell: (row) => row.host,
-                    },
-                    {
-                        key: 'evidence',
-                        label: _('website_backend.domains.evidence'),
-                        kind: 'status',
-                        cell: () => badge(_('website_backend.domains.pendingEvidence'), 'warning'),
-                    },
-                    {
-                        key: 'tls',
-                        label: _('website_backend.domains.tls'),
-                        kind: 'status',
-                        cell: () => badge(_('website_backend.domains.pendingEvidence'), 'warning'),
-                    },
-                    {
-                        key: 'primary',
-                        label: _('website_backend.domains.primary'),
-                        cell: (row) => row.primary
-                            ? badge(_('website_backend.state.yes'), 'positive')
-                            : badge(_('website_backend.state.no'), 'neutral'),
-                    },
-                    {
-                        key: 'edit',
-                        label: _('website_backend.action.edit'),
-                        cell: (row) => linkButton({
-                            label: _('website_backend.action.edit'),
-                            href: `/admin/website/sites/${site.id}/domains?edit=${encodeURIComponent(row.id)}${locale ? `&${locale.slice(1)}` : ''}`,
-                            size: 'compact',
-                        }),
-                    },
-                    {
-                        key: 'remove',
-                        label: _('website_backend.action.remove'),
-                        cell: (row) => (_jsx(RecordActions, { action: `/admin/website/sites/${site.id}/domains/${row.id}/remove${locale}`, size: "compact", actions: [
-                                {
-                                    value: 'remove',
-                                    label: _('website_backend.action.remove'),
-                                    variant: 'destructive',
-                                },
-                            ] })),
-                    },
-                ],
-                responsive: 'stack',
-            })),
+            rows.length === 0 ? null : collectionTable(_, collection.table),
         ]) }));
 };
 /**
@@ -1669,14 +1667,77 @@ export const siteDomainsScreen = (_, site, rows, frame, options = {}) => {
 export const redirectsScreen = (_, rows, sites, siteId, frame, options = {}) => {
     const editing = options.editing ?? null;
     const values = options.values ?? {};
+    // Two callers with two questions: the state links set `state`, the row's
+    // edit button sets `edit`. Forwarding only one of them left the edit button
+    // pointing back at the plain list.
     const query = (params) => {
-        const search = new URLSearchParams({ site: siteId ?? '', ...params });
-        if (options.locale)
-            search.set('lang', options.locale.slice('?lang='.length));
-        return `/admin/website/redirects?${search.toString()}`;
+        const url = new URL(frame.collectionUrl ?? `/admin/website/redirects${options.locale ?? ''}`, 'http://collection.local');
+        url.searchParams.set('site', siteId ?? '');
+        if (params.edit)
+            return withParam(url, 'edit', params.edit, false);
+        url.searchParams.delete('edit');
+        return withParam(url, 'state', params.state ?? null);
     };
-    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.redirects.title'), frame: frame, body: stack([
-            siteSwitcher(_, '/admin/website/redirects', sites, siteId, options.locale ?? ''),
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        columns: [
+            {
+                key: 'from',
+                label: _('website_backend.redirects.from'),
+                priority: 'primary',
+                cell: (row) => row.fromPath,
+            },
+            { key: 'to', label: _('website_backend.redirects.to'), cell: (row) => row.toPath },
+            {
+                key: 'kind',
+                label: _('website_backend.redirects.permanent'),
+                cell: (row) => badge(row.permanent ? _('website_backend.redirects.p301') : _('website_backend.redirects.p302'), row.permanent ? 'info' : 'neutral'),
+            },
+            {
+                key: 'status',
+                label: _('website_backend.field.status'),
+                cell: (row) => badge(row.active ? _('website_backend.state.active') : _('website_backend.state.inactive'), row.active ? 'positive' : 'neutral'),
+            },
+            {
+                key: 'edit',
+                label: _('website_backend.action.edit'),
+                cell: (row) => linkButton({
+                    label: _('website_backend.action.edit'),
+                    href: query({ edit: row.id }),
+                    size: 'compact',
+                }),
+            },
+            {
+                // Off rather than deleted: the unique index holds one row per
+                // `fromPath`, so deleting to "free" the path and deactivating
+                // to stop it are the same reversible act, and one of them
+                // keeps the history of what that address used to do.
+                key: 'state',
+                label: _('website_backend.redirects.state'),
+                cell: (row) => (_jsx(RecordActions, { action: `/admin/website/redirects/${row.id}/state${options.locale ?? ''}`, size: "compact", actions: [
+                        row.active
+                            ? { value: 'deactivate', label: _('website_backend.action.deactivate') }
+                            : { value: 'activate', label: _('website_backend.action.activate') },
+                    ] })),
+            },
+        ],
+    }, { paginate: true, searchText: (row) => `${row.fromPath} ${row.toPath}` });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.redirects.title'), frame: collection.frame, controls: stack([
+            siteSwitcher(_, '/admin/website/redirects', sites, siteId, options.locale ?? '', collection.frame),
+            ...(siteId
+                ? [
+                    inline([
+                        linkButton({ label: _('website_backend.redirects.all'), href: query({}) }),
+                        linkButton({ label: _('website_backend.state.active'), href: query({ state: 'active' }) }),
+                        linkButton({
+                            label: _('website_backend.state.inactive'),
+                            href: query({ state: 'inactive' }),
+                        }),
+                    ]),
+                ]
+                : []),
+        ]), body: stack([
             ...(siteId
                 ? [
                     _jsx(Section, { title: editing ? _('website_backend.redirects.edit') : _('website_backend.redirects.add'), description: _('website_backend.redirects.addHint'), body: _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `/admin/website/redirects${editing ? `/${editing.id}` : ''}${options.locale ?? ''}`, hidden: { siteId }, layout: "inline", fields: [
@@ -1705,70 +1766,13 @@ export const redirectsScreen = (_, rows, sites, siteId, frame, options = {}) =>
                     // The list already had a column for a state nothing could produce:
                     // the route wrote `active: true` every time, so every row read
                     // "active" for ever and the off switch on the contract was unreachable.
-                    inline([
-                        linkButton({ label: _('website_backend.redirects.all'), href: query({}) }),
-                        linkButton({
-                            label: _('website_backend.state.active'),
-                            href: query({ state: 'active' }),
-                        }),
-                        linkButton({
-                            label: _('website_backend.state.inactive'),
-                            href: query({ state: 'inactive' }),
-                        }),
-                    ]),
                 ]
                 : []),
             !siteId
                 ? emptyState(_('website_backend.content.noSite'), _('website_backend.content.noSiteHint'))
                 : rows.length === 0
                     ? emptyState(_('website_backend.redirects.empty'), _('website_backend.redirects.emptyHint'))
-                    : dataTable(_, {
-                        rows,
-                        id: (row) => row.id,
-                        columns: [
-                            {
-                                key: 'from',
-                                label: _('website_backend.redirects.from'),
-                                priority: 'primary',
-                                cell: (row) => row.fromPath,
-                            },
-                            { key: 'to', label: _('website_backend.redirects.to'), cell: (row) => row.toPath },
-                            {
-                                key: 'kind',
-                                label: _('website_backend.redirects.permanent'),
-                                cell: (row) => badge(row.permanent
-                                    ? _('website_backend.redirects.p301')
-                                    : _('website_backend.redirects.p302'), row.permanent ? 'info' : 'neutral'),
-                            },
-                            {
-                                key: 'status',
-                                label: _('website_backend.field.status'),
-                                cell: (row) => badge(row.active ? _('website_backend.state.active') : _('website_backend.state.inactive'), row.active ? 'positive' : 'neutral'),
-                            },
-                            {
-                                key: 'edit',
-                                label: _('website_backend.action.edit'),
-                                cell: (row) => linkButton({
-                                    label: _('website_backend.action.edit'),
-                                    href: query({ edit: row.id }),
-                                    size: 'compact',
-                                }),
-                            },
-                            {
-                                // Off rather than deleted: the unique index holds one row per
-                                // `fromPath`, so deleting to "free" the path and deactivating
-                                // to stop it are the same reversible act, and one of them
-                                // keeps the history of what that address used to do.
-                                key: 'state',
-                                label: _('website_backend.redirects.state'),
-                                cell: (row) => (_jsx(RecordActions, { action: `/admin/website/redirects/${row.id}/state${options.locale ?? ''}`, size: "compact", actions: [
-                                        row.active
-                                            ? { value: 'deactivate', label: _('website_backend.action.deactivate') }
-                                            : { value: 'activate', label: _('website_backend.action.activate') },
-                                    ] })),
-                            },
-                        ],
-                    }),
+                    : collectionTable(_, collection.table),
         ]) }));
 };
 /**
@@ -1819,86 +1823,100 @@ const publicationTone = (state) => state === 'active' ? 'positive' : state === '
  * only by an agent, so the atomic path existed and the one-page-at-a-time path
  * was the only one a person could take.
  */
-export const publicationsScreen = (_, rows, entries, sites, siteId, frame, options = {}) => (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.publications.title'), frame: frame, body: stack([
-        siteSwitcher(_, '/admin/website/publications', sites, siteId, options.locale ?? ''),
-        // Superseded sets accumulate one per activation and are the majority of
-        // the list within a week, which buries the two rows anybody came to see.
-        ...(siteId
-            ? [
-                _jsx(Surface, { padding: "compact", body: _jsx(RecordForm, { action: `/admin/website/publications${options.locale ?? ''}`, method: "get", layout: "inline", hidden: { site: siteId }, fields: [
-                            {
-                                name: 'state',
-                                label: _('website_backend.field.status'),
-                                type: 'select',
-                                value: options.state ?? 'all',
-                                options: [
-                                    { value: 'all', label: _('website_backend.state.all') },
-                                    { value: 'prepared', label: _('website_backend.pubstate.prepared') },
-                                    { value: 'active', label: _('website_backend.pubstate.active') },
-                                    { value: 'superseded', label: _('website_backend.pubstate.superseded') },
-                                ],
-                            },
-                        ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }) }),
-            ]
-            : []),
-        ...(options.notice
-            ? [_jsx(Notice, { tone: "positive", title: _('website_backend.publications.done'), message: options.notice })]
-            : []),
-        ...(siteId && entries.length
-            ? [
-                _jsx(Section, { title: _('website_backend.publications.prepare'), description: _('website_backend.publications.prepareHint'), body: _jsx(Surface, { body: _jsx(RecordForm, { action: `/admin/website/publications${options.locale ?? ''}`, hidden: { siteId }, fields: [
-                                {
-                                    name: 'entryIds',
-                                    label: _('website_backend.publications.entries'),
-                                    type: 'textarea',
-                                    value: entries.map((entry) => entry.id).join('\n'),
-                                    help: _('website_backend.publications.entriesHint'),
-                                    span: 'full',
-                                    required: true,
-                                },
-                            ], submit: _('website_backend.publications.prepare'), submitVariant: "primary", errors: options.errors }) }) }),
-            ]
-            : []),
-        !siteId
-            ? emptyState(_('website_backend.content.noSite'), _('website_backend.content.noSiteHint'))
-            : rows.length === 0
-                ? emptyState(_('website_backend.publications.empty'), _('website_backend.publications.emptyHint'))
-                : dataTable(_, {
-                    rows,
-                    id: (row) => row.id,
-                    columns: [
-                        {
-                            key: 'prepared',
-                            label: _('website_backend.publications.preparedAt'),
-                            kind: 'date',
-                            priority: 'primary',
-                            cell: (row) => row.preparedAt,
-                        },
-                        {
-                            key: 'state',
-                            label: _('website_backend.field.status'),
-                            cell: (row) => badge(_(`website_backend.pubstate.${row.state}`), publicationTone(row.state)),
-                        },
+export const publicationsScreen = (_, rows, entries, sites, siteId, frame, options = {}) => {
+    const collection = prepareCollectionTable(_, frame, {
+        rows,
+        id: (row) => row.id,
+        columns: [
+            {
+                key: 'prepared',
+                label: _('website_backend.publications.preparedAt'),
+                kind: 'date',
+                priority: 'primary',
+                cell: (row) => row.preparedAt,
+            },
+            {
+                key: 'state',
+                label: _('website_backend.field.status'),
+                cell: (row) => badge(_(`website_backend.pubstate.${row.state}`), publicationTone(row.state)),
+            },
+            {
+                key: 'count',
+                label: _('website_backend.publications.entryCount'),
+                kind: 'number',
+                cell: (row) => String(row.entryCount),
+            },
+            {
+                key: 'act',
+                label: _('website_backend.publications.action'),
+                cell: (row) => row.state === 'prepared' ? (_jsx(RecordActions, { action: `/admin/website/publications/${row.id}/activate${options.locale ?? ''}`, hidden: { expectedPublicationId: options.activeId ?? '' }, size: "compact", actions: [
                         {
-                            key: 'count',
-                            label: _('website_backend.publications.entryCount'),
-                            kind: 'number',
-                            cell: (row) => String(row.entryCount),
+                            value: 'activate',
+                            label: _('website_backend.action.activate'),
+                            variant: 'primary',
                         },
-                        {
-                            key: 'act',
-                            label: _('website_backend.publications.action'),
-                            cell: (row) => row.state === 'prepared' ? (_jsx(RecordActions, { action: `/admin/website/publications/${row.id}/activate${options.locale ?? ''}`, hidden: { expectedPublicationId: options.activeId ?? '' }, size: "compact", actions: [
+                    ] })) : row.state === 'active' ? (_jsx(RecordActions, { action: `/admin/website/publications/${row.id}/rollback${options.locale ?? ''}`, size: "compact", actions: [{ value: 'rollback', label: _('website_backend.action.rollback') }] })) : (''),
+            },
+        ],
+    }, {
+        paginate: true,
+        searchText: (row) => `${row.preparedAt} ${_(`website_backend.pubstate.${row.state}`)} ${row.entryCount}`,
+    });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.publications.title'), frame: collection.frame, controls: stack([
+            siteSwitcher(_, '/admin/website/publications', sites, siteId, options.locale ?? '', collection.frame),
+            stack([
+                ...(siteId
+                    ? [
+                        _jsx(RecordForm, { action: `/admin/website/publications${options.locale ?? ''}`, method: "get", layout: "inline", hidden: {
+                                ...collectionQueryKeep(new URL(frame.collectionUrl ?? `/admin/website/publications${options.locale ?? ''}`, 'http://collection.local'), ['state', 'site']),
+                                site: siteId,
+                            }, fields: [
+                                {
+                                    name: 'state',
+                                    label: _('website_backend.field.status'),
+                                    type: 'select',
+                                    value: options.state ?? 'all',
+                                    options: [
+                                        { value: 'all', label: _('website_backend.state.all') },
+                                        { value: 'prepared', label: _('website_backend.pubstate.prepared') },
+                                        { value: 'active', label: _('website_backend.pubstate.active') },
+                                        { value: 'superseded', label: _('website_backend.pubstate.superseded') },
+                                    ],
+                                },
+                            ], submit: _('website_backend.action.apply'), submitVariant: "secondary" }),
+                    ]
+                    : []),
+            ]),
+        ]), body: stack([
+            // Superseded sets accumulate one per activation and are the majority of
+            // the list within a week, which buries the two rows anybody came to see.
+            ...(options.notice
+                ? [
+                    _jsx(Notice, { tone: "positive", title: _('website_backend.publications.done'), message: options.notice }),
+                ]
+                : []),
+            ...(siteId && entries.length
+                ? [
+                    _jsx(Section, { title: _('website_backend.publications.prepare'), description: _('website_backend.publications.prepareHint'), body: _jsx(Surface, { body: _jsx(RecordForm, { action: `/admin/website/publications${options.locale ?? ''}`, hidden: { siteId }, fields: [
                                     {
-                                        value: 'activate',
-                                        label: _('website_backend.action.activate'),
-                                        variant: 'primary',
+                                        name: 'entryIds',
+                                        label: _('website_backend.publications.entries'),
+                                        type: 'textarea',
+                                        value: entries.map((entry) => entry.id).join('\n'),
+                                        help: _('website_backend.publications.entriesHint'),
+                                        span: 'full',
+                                        required: true,
                                     },
-                                ] })) : row.state === 'active' ? (_jsx(RecordActions, { action: `/admin/website/publications/${row.id}/rollback${options.locale ?? ''}`, size: "compact", actions: [{ value: 'rollback', label: _('website_backend.action.rollback') }] })) : (''),
-                        },
-                    ],
-                }),
-    ]) }));
+                                ], submit: _('website_backend.publications.prepare'), submitVariant: "primary", errors: options.errors }) }) }),
+                ]
+                : []),
+            !siteId
+                ? emptyState(_('website_backend.content.noSite'), _('website_backend.content.noSiteHint'))
+                : rows.length === 0
+                    ? emptyState(_('website_backend.publications.empty'), _('website_backend.publications.emptyHint'))
+                    : collectionTable(_, collection.table),
+        ]) }));
+};
 /**
  * The head tags for one page, on the page's own screen.
  *
@@ -1964,33 +1982,34 @@ export const concernsOf = (_, health) => {
  * Read-only and built from reads that already existed. It is a place to notice,
  * and every row leads to the screen that fixes the thing.
  */
-export const siteHealthScreen = (_, rows, frame, locale = '') => {
+export const siteHealthScreen = (_, rows, frame, locale = '', tableRows = rows) => {
     const troubled = rows.filter((row) => concernsOf(_, row).length > 0);
-    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.health.title'), frame: frame, body: stack([
-            rows.length === 0 ? (emptyState(_('website_backend.sites.empty'), _('website_backend.sites.emptyHint'))) : troubled.length === 0 ? (_jsx(Notice, { tone: "positive", title: _('website_backend.health.allWell'), message: _('website_backend.health.allWellHint') })) : (dataTable(_, {
-                rows: troubled,
-                id: (row) => row.siteId,
-                rowHref: (row) => `/admin/website/sites/${row.siteId}${locale}`,
-                columns: [
-                    {
-                        key: 'site',
-                        label: _('website_backend.field.site'),
-                        priority: 'primary',
-                        cell: (row) => row.title,
-                    },
-                    {
-                        key: 'host',
-                        label: _('website_backend.domains.host'),
-                        kind: 'identifier',
-                        cell: (row) => row.primaryHost ? code(row.primaryHost) : badge(_('website_backend.health.none'), 'danger'),
-                    },
-                    {
-                        key: 'concerns',
-                        label: _('website_backend.health.concerns'),
-                        cell: (row) => inline(concernsOf(_, row).map((concern) => badge(concern.label, concern.tone))),
-                    },
-                ],
-            })),
+    const collection = prepareCollectionTable(_, frame, {
+        rows: tableRows.filter((row) => concernsOf(_, row).length > 0),
+        id: (row) => row.siteId,
+        rowHref: (row) => `/admin/website/sites/${row.siteId}${locale}`,
+        columns: [
+            {
+                key: 'site',
+                label: _('website_backend.field.site'),
+                priority: 'primary',
+                cell: (row) => row.title,
+            },
+            {
+                key: 'host',
+                label: _('website_backend.domains.host'),
+                kind: 'identifier',
+                cell: (row) => row.primaryHost ? code(row.primaryHost) : badge(_('website_backend.health.none'), 'danger'),
+            },
+            {
+                key: 'concerns',
+                label: _('website_backend.health.concerns'),
+                cell: (row) => inline(concernsOf(_, row).map((concern) => badge(concern.label, concern.tone))),
+            },
+        ],
+    }, { paginate: true });
+    return (_jsx(ListScreenFrame, { translator: _, title: _('website_backend.health.title'), frame: collection.frame, body: stack([
+            rows.length === 0 ? (emptyState(_('website_backend.sites.empty'), _('website_backend.sites.emptyHint'))) : troubled.length === 0 ? (_jsx(Notice, { tone: "positive", title: _('website_backend.health.allWell'), message: _('website_backend.health.allWellHint') })) : (collectionTable(_, collection.table)),
             // The quiet sites are worth showing too: a list that only ever holds
             // problems cannot tell "nothing is wrong" from "nothing was checked".
             ...(rows.length