@aglyn/plugins-inbox 1.0.0-beta.199 → 1.0.0-beta.200

package/src/lib/components/contacts-card.component.js

@@ -16,7 +16,7 @@
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { normalizeContactEmail, pluginDocsHelp } from "@aglyn/aglyn";
+import { pluginDocsHelp } from "@aglyn/aglyn";
 // A deep import, NOT the plugin barrel (AGL-1151): the barrel is the entry
 // point the tenant's loader dynamically imports to activate the marketing
 // plugin's SITE half, so a console card named there ships to every published
@@ -25,74 +25,61 @@ import { InboxRecordAttributionZone } from "./inbox-attribution-zone.js";
 // The CRM's route builder by its leaf path, not the plugin barrel: the barrel
 // carries the plugin registration, and a link needs only the address grammar.
 import { pluginRecordHref } from "@aglyn/aglyn/plugin-manager/plugin-record-routes";
+import { scopeTokensForHost } from "@aglyn/aglyn/app-utils/scope-tokens";
 import { mdiAccountArrowRight, mdiAccountRemoveOutline, mdiBullhornOutline } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
 import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { inMemoryListField } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
-import { useListRowsFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-rows-filter";
+import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
 import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
-import { useFirestore, useFirestoreCollection, useOrgDataScope, useUser } from "@aglyn/tenant-feature-instance";
-import { Alert, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material";
-import { collection, limit, orderBy, query, where } from "firebase/firestore";
+import { useFirestore, useOrgDataScope, useScopeTokens, useUser } from "@aglyn/tenant-feature-instance";
+import { useListQuery } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
+import { Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Stack, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { collection } from "firebase/firestore";
 import { useCallback, useMemo, useState } from "react";
-import { useRecordRouteContext } from "./use-record-route-context.js";
-import { scopeTokensForHost } from "@aglyn/aglyn/app-utils/scope-tokens";
+import { LEAD_FILTER_HEADERS, LEAD_LIST_QUERY, LEAD_SOURCE_OPTIONS, ORG_LEAD_LIST_QUERY, SITE_MEMBER_FILTER_HEADERS, SITE_MEMBER_LIST_QUERY, leadListBase, LEAD_ADDRESS_SEARCH_COLUMN, LEAD_ADDRESS_SEARCH_NOTICE, leadListQueryFor, leadSourceLabel } from "../constants/list-queries.js";
 import { orgSiteNames } from "./inbox-org-sites.js";
-/**
- * How many members and how many leads the contacts table reads.
- *
- * A ceiling rather than a page size — see the two queries, which explain why
- * this one table cannot be paged by the server without breaking the dedupe
- * between them.
- */ const CONTACT_CEILING = 200;
-/*
- * What the contacts grid's Filters panel offers (AGL-3317). The card holds
- * both capped windows, so it answers the panel over every contact they read;
- * the notice under the table says when a cap truncated one. Type reads
- * `typeKey`: `member`, or `lead` with the lead's `source` when it has one,
- * which is what the column draws. On the organization's Inbox, Site matches
- * any site that captured the lead.
- */ const CONTACT_FILTER_FIELDS = [
-    inMemoryListField('email', 'text'),
-    inMemoryListField('contactKind', 'select', 'typeKey')
-];
-const ORG_CONTACT_FILTER_FIELDS = [
-    ...CONTACT_FILTER_FIELDS,
-    _extends({}, inMemoryListField('capturedByHostIds', 'select'), {
-        tokensPath: 'capturedByHostIds',
-        verbatimTokens: true
-    })
-];
-const CONTACT_FILTER_HEADERS = {
-    email: 'Email',
-    contactKind: 'Type',
-    capturedByHostIds: 'Site'
-};
-const CONTACT_SEARCH_FIELDS = [
-    'email',
-    'displayName',
-    'name',
-    'source'
+import { useRecordRouteContext } from "./use-record-route-context.js";
+/** The organization's Inbox's Source and Site are picked, so the panel shows selects. */ const ORG_LEAD_SELECT_FIELDS = [
+    'sources',
+    'capturedByHostIds'
 ];
-/** How a contact's type reads, from its `typeKey`. */ const contactTypeLabel = (typeKey)=>typeKey === 'member' ? 'Member' : typeKey.startsWith('lead:') ? `Lead · ${typeKey.slice('lead:'.length)}` : 'Lead';
+const NO_SELECT_FIELDS = [];
+/**
+ * Every surface a lead was captured by: `sources`, which every capture
+ * `arrayUnion`s, or the single `source` a lead written before it carries.
+ */ const leadSources = (lead)=>Array.isArray(lead == null ? void 0 : lead.sources) ? lead.sources.filter((source)=>typeof source === 'string') : typeof (lead == null ? void 0 : lead.source) === 'string' && lead.source ? [
+        lead.source
+    ] : [];
 /**
- * The Members & leads section of the Inbox (AGL-109): everybody a site
- * collected, in one list.
+ * The Members & leads section of the Inbox (AGL-109): the people a site
+ * collected — its members, who signed up to it, and its leads, whom a form,
+ * a booking or a teammate captured.
  *
- * Its own component since AGL-2501, when the Inbox's tabs became routes. The
- * split is what makes "mount only the section being read" structural: hooks
- * cannot be conditional, so a page holding every section's reads pays for all
- * of them whichever one the URL names.
+ * ## Two lists, one table (AGL-3321)
+ *
+ * Members and leads are two collections, and the table shows one at a time,
+ * chosen by the toggle above it. Each is its own Firestore query, every
+ * filter and search word on it, paged by the server — so a page is a page of
+ * the answer, and a site with thousands of either reaches all of them.
+ *
+ * It used to read the two hundred newest of each and interleave them, hiding
+ * a lead whose address matched a member. That dedupe is only correct while
+ * both reads are whole, which is exactly what a paged query is not, so it is
+ * gone: a person who left their address and later signed up is a lead in one
+ * list and a member in the other, which is what they are in each collection.
  *
  * On the organization's Inbox (`hostId: null`, AGL-3303) it lists the
  * organization's leads with the sites each was captured by. A member signs up
- * to ONE site and lives under it, so members are listed once a site is
- * picked, which is the page handing this card that site.
+ * to ONE site and lives under it, so Members waits for a site to be picked,
+ * which is the page handing this card that site.
  */ export function ContactsCard({ hostId, orgMount }) {
-    var _ref, _ref1, _ref2;
+    var _ref;
     const firestore = useFirestore();
     const { data: user } = useUser();
     const { enqueueSnackbar } = useSnackbar();
@@ -101,135 +88,148 @@ const CONTACT_SEARCH_FIELDS = [
     // Leads section gives each one a status, an owner and a conversion.
     const routeContext = useRecordRouteContext();
     const leadHref = (contact)=>routeContext ? pluginRecordHref('lead', routeContext, String(contact.$id)) : null;
+    /*
+   * The list shown. Members exist only under a site, so the organization's
+   * Inbox shows leads whatever was chosen, and the toggle says why.
+   */ const [chosen, setChosen] = useState('members');
+    const view = hostId ? chosen : 'leads';
+    const [searchWords, setSearchWords] = useState([]);
+    const gridFilter = useListGridFilter({
+        selectFields: view === 'leads' && hostId == null ? ORG_LEAD_SELECT_FIELDS : NO_SELECT_FIELDS,
+        search: {
+            words: searchWords,
+            onChange: setSearchWords
+        }
+    });
+    /*
+   * A switch of list starts it clean: the two lists filter by different
+   * fields, and a clause carried across would be one the other list cannot
+   * ask — refused on arrival, for a question the reader asked of the list
+   * they just left.
+   */ const switchView = (next)=>{
+        if (!next || next === view) return;
+        gridFilter.setClauses([]);
+        setSearchWords([]);
+        setChosen(next);
+    };
+    const request = {
+        clauses: gridFilter.clauses,
+        search: gridFilter.searchWords
+    };
     /*==========================================
-   * SITE MEMBERS + LEADS (AGL-109): ORDERED AND CEILINGED, NOT PAGED BY QUERY.
-   *
-   * Both reads were `limit(200)` with no `orderBy` and a client sort on top —
-   * the same document-id sample the submissions list used to take, and both
-   * now name the order the rows are rendered in. `createdAt` is safe on both:
+   * SITE MEMBERS — `hosts/{hostId}/siteMembers`, newest first
+   * (`SITE_MEMBER_LIST_QUERY`). `createdAt` is safe to order on:
    * `membership-register.ts` is the only writer that CREATES a site member
-   * and stamps it inside its transaction (every other membership path
-   * updates an existing document), `recordVisitorLead` is the only writer
-   * that creates a lead and stamps it on every `tx.create`, and neither
-   * collection is in `IMPORTABLE_FIELDS`.
-   *
-   * What they must NOT do is page the query, and the reason is the dedupe
-   * below: a lead is hidden when a MEMBER already exists on the same address.
-   * That test is only correct while both windows are whole. On a ten-row
-   * server page it would compare a page of leads against a page of members, so
-   * somebody who signed up after leaving their address would render as a
-   * Member on one page and again as a Lead on another — one person counted
-   * twice, in a list a site owner uses to count people.
-   *
-   * So the CEILING stays and the page is a slice of the assembled rows. The
-   * probe row makes "there are more contacts than these" a fact rather than a
-   * guess from `length === CONTACT_CEILING`, which is wrong at exactly the
-   * count that equals the ceiling.
-   *=========================================*/ const { data: memberDocs } = useFirestoreCollection(()=>hostId ? query(collection(firestore, 'hosts', hostId, 'siteMembers'), orderBy('createdAt', 'desc'), limit(CONTACT_CEILING + 1)) : null, [
-        firestore,
-        hostId
-    ], {
+   * and stamps it inside its transaction, and the collection is not in
+   * `IMPORTABLE_FIELDS`. No query opens while the other list is shown.
+   *=========================================*/ const members = useListQuery({
+        collection: hostId && view === 'members' ? collection(firestore, 'hosts', hostId, 'siteMembers') : null,
+        declaration: SITE_MEMBER_LIST_QUERY,
+        request: view === 'members' ? request : {
+            clauses: []
+        },
+        deps: [
+            firestore,
+            hostId,
+            view
+        ],
         idField: '$id'
     });
-    /*
-   * The lead silo is the org's (AGL-3275), narrowed to this site by
-   * `visibleTo`. Reading `hosts/{hostId}/leads` showed a site its
-   * pre-migration rows and nothing captured since.
-   */ const { orgId } = useOrgDataScope({
+    /*==========================================
+   * LEADS — `orgs/{orgId}/leads`, newest first (`LEAD_LIST_QUERY`). The
+   * silo is the org's (AGL-3275), narrowed to this site by `visibleTo`;
+   * reading `hosts/{hostId}/leads` showed a site its pre-migration rows and
+   * nothing captured since. `addHostLead`, every lead door's one writer,
+   * stamps `createdAt` on every create.
+   *
+   * Every site's, on the organization's Inbox: an org-wide member reads the
+   * collection unscoped — the rules short-circuit on their reach, as for the
+   * CRM's own org list — so a clause there would only narrow what they may
+   * already read.
+   *=========================================*/ const { orgId } = useOrgDataScope({
         hostId: hostId != null ? hostId : undefined,
         orgId: hostId == null ? orgMount == null ? void 0 : orgMount.orgId : undefined
     });
-    const siteMembers = (memberDocs != null ? memberDocs : []).slice(0, CONTACT_CEILING);
-    const { data: leadDocs } = useFirestoreCollection(()=>orgId ? query(collection(firestore, 'orgs', orgId, 'leads'), /*
-             * Every site's, on the organization's Inbox: an org-wide member
-             * reads the collection unscoped — the rules short-circuit on
-             * their reach, as for the CRM's own org list — so a clause here
-             * would only narrow what they may already read.
-             */ ...hostId ? [
-            where('visibleTo', 'array-contains-any', scopeTokensForHost(hostId))
-        ] : [], orderBy('createdAt', 'desc'), limit(CONTACT_CEILING + 1)) : null, [
-        firestore,
-        orgId,
-        hostId
-    ], {
-        idField: '$id'
-    });
-    const leads = (leadDocs != null ? leadDocs : []).slice(0, CONTACT_CEILING);
-    const contactsTruncated = ((_ref = memberDocs == null ? void 0 : memberDocs.length) != null ? _ref : 0) > CONTACT_CEILING || ((_ref1 = leadDocs == null ? void 0 : leadDocs.length) != null ? _ref1 : 0) > CONTACT_CEILING;
     /*
-   * One person renders once, whichever way they came in.
-   *
-   * Raw `===` made `Bob@x.com` and `bob@x.com` two different people, so
-   * somebody could appear as a Member on one row and a Lead on another. The
-   * comparison is now the same NORMALIZATION a lead document is keyed by —
-   * `personKey` is `sha256(normalizeContactEmail(email))`, and hashing an
-   * already-normalized address cannot merge or split anything the normalizer
-   * did not, so the two agree by construction.
-   *
-   * `personKey` itself cannot run here: it needs `node:crypto` and this is a
-   * client component. That is why the shared half is the normalizer rather
-   * than the digest.
-   */ const dedupedLeads = useMemo(()=>{
-        const memberKeys = new Set(siteMembers.map((member)=>normalizeContactEmail(member.email)).filter(Boolean));
-        return leads.filter((lead)=>!memberKeys.has(normalizeContactEmail(lead.email)));
-    }, [
-        leads,
-        siteMembers
+   * Whether the search may fold into the scope clause (`scopedSearch`): a
+   * query without `visibleTo` is one the rules prove only for an ORG-WIDE
+   * member. Anyone else keeps the clause, and the plan refuses their search
+   * by name rather than sending a query the rules deny. Until the reach has
+   * answered, the answer is no. Asked only while Leads is shown: the member
+   * document is a read, and Members has no scope to fold into.
+   */ const reach = useScopeTokens(hostId && orgId && view === 'leads' ? orgId : undefined);
+    const foldsScope = hostId == null || reach.loaded && reach.orgWide;
+    const leadDeclaration = hostId ? LEAD_LIST_QUERY : ORG_LEAD_LIST_QUERY;
+    const leadBase = useMemo(()=>leadListBase(hostId ? scopeTokensForHost(hostId) : null), [
+        hostId
     ]);
-    /*
-   * ONE list of two collections — members first, then the leads that are not
-   * already members — so the grid pages the concatenation rather than either
-   * read, and a page stays whole across the seam between them. Both reads are
-   * ceilinged and complete below the ceiling, so the grid's count is the whole
-   * deduped list.
-   */ const contacts = useMemo(()=>[
-            ...siteMembers.map((member)=>_extends({}, member, {
-                    contactKind: 'member',
-                    typeKey: 'member'
-                })),
-            ...dedupedLeads.map((lead)=>_extends({}, lead, {
-                    contactKind: 'lead',
-                    typeKey: lead.source ? `lead:${lead.source}` : 'lead'
-                }))
-        ], [
-        siteMembers,
-        dedupedLeads
+    const leadQuery = useMemo(()=>leadListQueryFor(leadDeclaration, foldsScope, view === 'leads' ? _extends({}, request, {
+            base: leadBase
+        }) : {
+            clauses: []
+        }), // The request is data; its JSON is its identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        leadDeclaration,
+        foldsScope,
+        view,
+        leadBase,
+        JSON.stringify(request)
     ]);
-    /*
-   * A lead's source is open-ended, so the Type choices are the ones the rows
-   * hold, member and plain lead first.
-   */ const contactFilterOptions = useMemo(()=>{
+    const leads = useListQuery({
+        collection: orgId && view === 'leads' ? collection(firestore, 'orgs', orgId, 'leads') : null,
+        declaration: leadQuery.declaration,
+        request: leadQuery.request,
+        deps: [
+            firestore,
+            orgId,
+            hostId,
+            view
+        ],
+        idField: '$id'
+    });
+    const shown = view === 'members' ? members : leads;
+    const declaration = view === 'members' ? SITE_MEMBER_LIST_QUERY : leadDeclaration;
+    const headers = view === 'members' ? SITE_MEMBER_FILTER_HEADERS : LEAD_FILTER_HEADERS;
+    const options = useMemo(()=>{
         var _ref;
-        const leadSources = [
-            ...new Set(contacts.map((contact)=>contact.typeKey).filter((typeKey)=>typeKey.startsWith('lead:')))
-        ].sort();
-        return _extends({
-            contactKind: [
-                'member',
-                'lead',
-                ...leadSources
-            ].map((value)=>({
-                    value,
-                    label: contactTypeLabel(value)
-                }))
-        }, hostId == null ? {
+        return view === 'leads' && hostId == null ? {
+            sources: LEAD_SOURCE_OPTIONS,
             capturedByHostIds: ((_ref = orgMount == null ? void 0 : orgMount.hosts) != null ? _ref : []).map((host)=>({
                     value: host.id,
                     label: host.name || host.id
                 }))
-        } : {});
+        } : {};
     }, [
-        contacts,
+        view,
         hostId,
         orgMount
     ]);
-    const contactFilter = useListRowsFilter({
-        rows: contacts,
-        fields: hostId == null ? ORG_CONTACT_FILTER_FIELDS : CONTACT_FILTER_FIELDS,
-        options: contactFilterOptions,
-        headers: CONTACT_FILTER_HEADERS,
-        search: CONTACT_SEARCH_FIELDS
-    });
+    /*
+   * A site collaborator's search rides the query as an address-prefix clause
+   * (`leadListQueryFor`); a refusal of it is the search's, and when it is
+   * served the list says what it matched and how it is now ordered.
+   */ const refusals = useMemo(()=>listQueryRefusals(shown.plan.refused.map((entry)=>entry.clause !== 'search' && entry.clause.field === LEAD_ADDRESS_SEARCH_COLUMN ? _extends({}, entry, {
+                clause: 'search'
+            }) : entry), {
+            fields: declaration.fields,
+            headers,
+            options
+        }), [
+        shown.plan.refused,
+        declaration,
+        headers,
+        options
+    ]);
+    const addressSearched = view === 'leads' && leadQuery.addressSearch && leads.plan.served.some((clause)=>clause.field === LEAD_ADDRESS_SEARCH_COLUMN);
+    const notices = useMemo(()=>addressSearched ? [
+            ...shown.plan.notices,
+            LEAD_ADDRESS_SEARCH_NOTICE
+        ] : shown.plan.notices, [
+        addressSearched,
+        shown.plan.notices
+    ]);
+    const filtering = gridFilter.clauses.length > 0 || gridFilter.searchWords.some((word)=>word.trim());
     /*
    * REMOVED BY THE ROUTE THAT OWNS MEMBER ACCOUNTS (AGL-3308), not by a
    * client delete. A member's password hash lives in a document no client can
@@ -303,7 +303,7 @@ const CONTACT_SEARCH_FIELDS = [
         return typeof first === 'string' && first ? first : null;
     };
     const leadOriginSite = leadOrigin ? originSite(leadOrigin) : null;
-    const contactActions = (contact)=>contact.contactKind === 'member' ? [
+    const memberActions = (member)=>[
             {
                 key: 'remove',
                 label: 'Remove member',
@@ -312,12 +312,13 @@ const CONTACT_SEARCH_FIELDS = [
                     size: 0.8
                 }),
                 destructive: true,
-                onClick: ()=>void handleDeleteMember(contact)()
+                onClick: ()=>void handleDeleteMember(member)()
             }
-        ] : [
+        ];
+    const leadActions = (lead)=>[
             // Offered only where a plugin publishes a lead's address: text-less
             // rather than a link to a page this workspace cannot open.
-            ...leadHref(contact) ? [
+            ...leadHref(lead) ? [
                 {
                     key: 'crm',
                     label: 'Open in CRM',
@@ -325,11 +326,11 @@ const CONTACT_SEARCH_FIELDS = [
                         path: mdiAccountArrowRight.path,
                         size: 0.8
                     }),
-                    href: leadHref(contact)
+                    href: leadHref(lead)
                 }
             ] : [],
             // A lead no site captured has no site to ask for its campaign.
-            ...originSite(contact) ? [
+            ...originSite(lead) ? [
                 {
                     key: 'origin',
                     label: 'Where this came from',
@@ -337,11 +338,11 @@ const CONTACT_SEARCH_FIELDS = [
                         path: mdiBullhornOutline.path,
                         size: 0.8
                     }),
-                    onClick: ()=>setLeadOrigin(contact)
+                    onClick: ()=>setLeadOrigin(lead)
                 }
             ] : []
         ];
-    const contactColumns = [
+    const columns = [
         {
             field: 'email',
             headerName: 'Email',
@@ -352,7 +353,7 @@ const CONTACT_SEARCH_FIELDS = [
         the lead writer stores (AGL-2303) — because a list of bare addresses is
         a list nobody recognizes anyone in.
        */ renderCell: ({ row: contact })=>{
-                const name = contact.contactKind === 'member' ? contact.displayName : contact.name;
+                const name = view === 'members' ? contact.displayName : contact.name;
                 return /*#__PURE__*/ _jsxs(Stack, {
                     direction: "row",
                     spacing: 1,
@@ -376,52 +377,53 @@ const CONTACT_SEARCH_FIELDS = [
                 });
             }
         },
-        {
-            /*
-        WHERE A LEAD CAME FROM (AGL-2338). `source` has been written by both
-        lead writers — `'signup'` and `'booking'` — since AGL-109, so a site
-        owner can tell a membership sign-up from a booking. Falls back to the
-        bare label for a row written before the field, or by a future writer
-        that omits it.
-       */ field: 'contactKind',
-            headerName: 'Type',
-            width: 170,
-            valueGetter: (_value, contact)=>contact.typeKey,
-            renderCell: ({ row: contact })=>contact.contactKind === 'member' ? /*#__PURE__*/ _jsx(Chip, {
-                    label: contactTypeLabel(contact.typeKey),
-                    color: "primary",
-                    size: "small"
-                }) : /*#__PURE__*/ _jsx(Chip, {
-                    label: contactTypeLabel(contact.typeKey),
-                    size: "small",
-                    variant: "outlined"
-                })
-        },
+        /*
+      WHERE A LEAD CAME FROM (AGL-2338): every surface that captured the
+      person — a form, a booking, a lead added by hand — one chip each. A lead
+      written before `sources` carries the one `source` it was captured by,
+      and a row with neither simply shows none.
+     */ ...view === 'leads' ? [
+            {
+                field: 'sources',
+                headerName: 'Source',
+                width: 200,
+                sortable: false,
+                valueGetter: (_value, lead)=>leadSources(lead).map(leadSourceLabel).join(', '),
+                renderCell: ({ row: lead })=>/*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 0.5,
+                        sx: {
+                            alignItems: 'center',
+                            height: '100%'
+                        },
+                        children: [
+                            ...new Set(leadSources(lead).map(leadSourceLabel))
+                        ].map((label)=>/*#__PURE__*/ _jsx(Chip, {
+                                label: label,
+                                size: "small",
+                                variant: "outlined"
+                            }, label))
+                    })
+            }
+        ] : [],
         /*
       KNOWN BY, on the organization's Inbox: every site that captured the
       person, as the CRM's organization Leads list names them. A lead is one
       org row, so "which site" is a set, never one answer.
-     */ ...hostId == null ? [
+     */ ...view === 'leads' && hostId == null ? [
             {
                 field: 'capturedByHostIds',
                 headerName: 'Site',
                 flex: 1,
                 minWidth: 160,
-                // Sorted and drawn by name; the filter matches the ids.
-                valueGetter: (_value, contact)=>orgSiteNames(orgMount, contact.capturedByHostIds),
+                sortable: false,
                 renderCell: ({ row: contact })=>orgSiteNames(orgMount, contact.capturedByHostIds)
             }
         ] : [],
         {
             field: 'createdAt',
-            headerName: 'Joined',
+            headerName: view === 'members' ? 'Joined' : 'Captured',
             width: 200,
-            // Sorted on the instant, drawn as a local string.
-            valueGetter: (_value, contact)=>{
-                var _ref;
-                var _contact_createdAt_toDate_getTime, _contact_createdAt_toDate, _contact_createdAt_toDate1, _contact_createdAt;
-                return (_ref = (_contact_createdAt = contact.createdAt) == null ? void 0 : (_contact_createdAt_toDate1 = _contact_createdAt.toDate) == null ? void 0 : (_contact_createdAt_toDate = _contact_createdAt_toDate1.call(_contact_createdAt)) == null ? void 0 : (_contact_createdAt_toDate_getTime = _contact_createdAt_toDate.getTime) == null ? void 0 : _contact_createdAt_toDate_getTime.call(_contact_createdAt_toDate)) != null ? _ref : 0;
-            },
             renderCell: ({ row: contact })=>{
                 var _ref;
                 var _contact_createdAt_toDate, _contact_createdAt;
@@ -432,15 +434,17 @@ const CONTACT_SEARCH_FIELDS = [
             var _contact_email;
             return /*#__PURE__*/ _jsx(ListRowActions, {
                 label: String((_contact_email = contact.email) != null ? _contact_email : contact.$id),
-                items: contactActions(contact)
+                items: view === 'members' ? memberActions(contact) : leadActions(contact)
             });
         }, {
             width: 72
         })
     ];
+    const empty = shown.rows.length === 0 && !shown.hasMore && !filtering;
+    const emptyLabel = view === 'members' ? 'No members yet — visitors can join at /signup on your site.' : hostId == null ? 'No leads on any site yet.' : 'No leads yet — the forms and bookings that file leads add them here.';
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsxs(CardDisplay, {
+            /*#__PURE__*/ _jsx(CardDisplay, {
                 header: hostId == null ? 'Leads' : 'Site Members & Leads',
                 help: pluginDocsHelp('forms', {
                     anchor: '#filter-the-inbox'
@@ -448,43 +452,87 @@ const CONTACT_SEARCH_FIELDS = [
                 contentGutterX: true,
                 contentGutterY: true,
                 contentBordered: "all",
-                children: [
-                    hostId == null ? /*#__PURE__*/ _jsx(Typography, {
-                        variant: "body2",
-                        color: "text.secondary",
-                        sx: {
-                            mb: leads.length ? 2 : 1
-                        },
-                        children: 'Every site’s leads, newest first. Members sign up to one site ' + 'each — choose a site to list its members beside its leads.'
-                    }) : null,
-                    siteMembers.length === 0 && leads.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
-                        variant: "body2",
-                        color: "text.secondary",
-                        children: hostId == null ? 'No leads on any site yet.' : 'No members yet — visitors can join at /signup on your ' + 'site; sign-ups also appear here as leads.'
-                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx(ListFilterChips, _extends({}, contactFilter.chipsProps)),
-                            /*#__PURE__*/ _jsx(ListTable, _extends({
-                                "aria-label": "Site members and leads",
-                                rows: contactFilter.rows,
-                                columns: contactFilter.filterColumns(contactColumns)
-                            }, contactFilter.gridProps, {
-                                noRowsLabel: "No contacts match these filters",
-                                // A member and a lead are two collections, so an id alone could
-                                // name one of each.
-                                getRowId: (contact)=>`${contact.contactKind}:${contact.$id}`,
-                                rowHeight: TABLE_ROW_HEIGHT
-                            })),
-                            contactsTruncated ? /*#__PURE__*/ _jsx(Alert, {
-                                severity: "info",
-                                sx: {
-                                    mt: 1
-                                },
-                                children: hostId == null ? `Paging the ${CONTACT_CEILING} newest leads. Your ` + 'sites hold more than that — the CRM’s Leads list ' + 'reaches every one of them.' : `Paging the ${CONTACT_CEILING} newest members and the ` + `${CONTACT_CEILING} newest leads. This site has more ` + 'than that — the campaign audiences still reach ' + 'everyone, whether or not they are listed here.'
-                            }) : null
-                        ]
-                    })
-                ]
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 1.5,
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1.5,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                                    exclusive: true,
+                                    size: "small",
+                                    value: view,
+                                    onChange: (_event, next)=>switchView(next),
+                                    "aria-label": "Which people to list",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(ToggleButton, {
+                                            value: "members",
+                                            disabled: hostId == null,
+                                            children: 'Members'
+                                        }),
+                                        /*#__PURE__*/ _jsx(ToggleButton, {
+                                            value: "leads",
+                                            children: 'Leads'
+                                        })
+                                    ]
+                                }),
+                                hostId == null ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: 'Every site’s leads, newest first. Members sign up to one ' + 'site each — choose a site to list its members.'
+                                }) : null
+                            ]
+                        }),
+                        empty ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: emptyLabel
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(ListFilterChips, {
+                                    fields: declaration.fields,
+                                    headers: headers,
+                                    clauses: gridFilter.clauses,
+                                    onChange: gridFilter.setClauses,
+                                    options: options
+                                }),
+                                /*#__PURE__*/ _jsx(ListQueryNotices, {
+                                    refused: refusals,
+                                    notices: notices
+                                }),
+                                /*#__PURE__*/ _jsx(ListTable, {
+                                    "aria-label": view === 'members' ? 'Site members' : 'Leads',
+                                    rows: shown.rows,
+                                    columns: listFilterGridColumns(columns, declaration.fields, options, headers),
+                                    rowHeight: TABLE_ROW_HEIGHT,
+                                    // Paged by the footer below, so the grid must not also slice.
+                                    hideFooter: true,
+                                    // The panel and the search go to the query; the grid neither
+                                    // filters nor sorts the page it holds.
+                                    filterMode: "server",
+                                    filterModel: gridFilter.filterModel,
+                                    onFilterModelChange: gridFilter.onFilterModelChange,
+                                    quickFilter: true,
+                                    disableColumnSorting: true,
+                                    noRowsLabel: view === 'members' ? 'No members match these filters' : 'No leads match these filters'
+                                }, view),
+                                /*#__PURE__*/ _jsx(ListPagination, {
+                                    page: shown.page,
+                                    pageSize: shown.pageSize,
+                                    rowCount: shown.rows.length,
+                                    hasMore: shown.hasMore,
+                                    onPageChange: shown.setPage,
+                                    onPageSizeChange: shown.setPageSize
+                                })
+                            ]
+                        })
+                    ]
+                })
             }),
             /*#__PURE__*/ _jsxs(Dialog, {
                 open: Boolean(leadOrigin),
@@ -493,7 +541,7 @@ const CONTACT_SEARCH_FIELDS = [
                 fullWidth: true,
                 children: [
                     /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: (_ref2 = leadOrigin == null ? void 0 : leadOrigin.email) != null ? _ref2 : 'Lead'
+                        children: (_ref = leadOrigin == null ? void 0 : leadOrigin.email) != null ? _ref : 'Lead'
                     }),
                     /*#__PURE__*/ _jsx(DialogContent, {
                         children: (leadOrigin == null ? void 0 : leadOrigin.$id) && leadOriginSite ? /*#__PURE__*/ _jsx(InboxRecordAttributionZone, {