@graph8/sdk 0.361.0 → 0.370.0

package/blocks/lists/components/lists-screen.tsx

@@ -0,0 +1,344 @@
+"use client";
+
+/**
+ * ListsScreen: the finished Lists page. A searchable, paged table of every list with member counts and build status,
+ * a detail panel for the selected list (deep link `?id=`), and create / rename / delete.
+ *
+ * Composes: ScreenLayout, StatStrip, Toolbar, SplitView, DetailPanel, FormSheet (screen kit), ContactTable (crm),
+ * AddToListButton (this block), ConfirmSpendDialog.
+ *
+ * User flows:
+ *   - find a list by name, page through lists, see type, members, status ("import failed" etc.) and last update
+ *   - New list (name, description, contacts or companies) in a side sheet; Edit renames; Delete is confirmed
+ *   - open a list: Members tab (contacts of the list, selectable), Details tab (counts, status, timestamps)
+ *   - Add contacts: pick contacts from the CRM in a sheet and add them to the open list (conflicts shown, never auto-picked)
+ *   - Remove selected members from the list (confirmed; the contacts stay in the CRM)
+ *   - Refresh a dynamic list (re-runs its filters) and Check health (read-only integrity check)
+ *
+ * SDK operations, in order:
+ *   1. listLists            GET    /lists?page&limit&search                (read)
+ *   2. createList           POST   /lists                                  (write)
+ *   3. updateList           PATCH  /lists/{list_id}                        (write)
+ *   4. deleteList           DELETE /lists/{list_id}                        (destructive, ConfirmSpendDialog)
+ *   5. listContacts         GET    /contacts?list_id  via ContactTable     (read)
+ *   6. addContactsToList    POST   /lists/{list_id}/contacts               (write, via AddToListButton)
+ *   7. removeContactsFromList DELETE /lists/{list_id}/contacts             (destructive, ConfirmSpendDialog)
+ *   8. refreshDynamicList   POST   /lists/{audience_id}/refresh            (write)
+ *   9. checkListIntegrity   POST   /lists/{list_id}/integrity-check        (read)
+ *  10. downloadList         GET    /lists/{audience_id}/download?format    (read) -> { content, encoding, filename, media_type, format }
+ *      saved to the person's computer as CSV or XLSX (a list can hold personal data; the proxy's authorize decides who may).
+ * Company lists have no member read operation in the API, so their members link out to the graph8 app (`appUrl`).
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Building2, Database, Download, ExternalLink, HeartPulse, Plus, RefreshCw, Trash2, UserPlus, Users } from "lucide-react";
+import { Button, Input, Label, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill, humanizeStatus, toneForStatus } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { ContactTable } from "@/g8/crm/components/contact-table";
+import { useDebouncedValue } from "@/g8/crm/hooks/use-debounced";
+import { usePageQuery } from "@/g8/crm/hooks/use-page-query";
+import { AddToListButton } from "./add-to-list-button";
+import type { ListSummary } from "./list-picker";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface ListsScreenProps {
+  pageSize?: number;
+  /** Extra buttons next to "New list" (for example a link to the suppressions page). */
+  toolbarActions?: ReactNode;
+  /** Extra buttons on each row's action cell. */
+  renderRowActions?: (list: ListSummary) => ReactNode;
+  /** Extra buttons in the open list's header. */
+  renderDetailActions?: (list: ListSummary) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (list: ListSummary) => ReactNode }[];
+  /** Where company-list members are managed. Default: the graph8 app. */
+  appUrl?: string;
+  className?: string;
+}
+
+interface DownloadPayload { content: string; encoding: "utf-8" | "base64"; filename: string; media_type: string; format: "csv" | "xlsx" }
+
+/** Hand a downloaded payload to the browser as a file. */
+export function saveDownload(file: DownloadPayload): void {
+  const bytes = file.encoding === "base64" ? Uint8Array.from(atob(file.content), (c) => c.charCodeAt(0)) : new TextEncoder().encode(file.content);
+  const url = URL.createObjectURL(new Blob([bytes], { type: file.media_type }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = file.filename;
+  a.click();
+  // Firefox and Safari cancel the download when the URL is revoked in the same tick as the click.
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+interface Draft { id?: number; title: string; description: string; type: "contacts" | "companies" }
+interface Integrity { [key: string]: unknown }
+
+const count = (l: ListSummary): number => l.contact_count ?? l.company_count ?? l.total ?? 0;
+
+function statusOf(l: ListSummary): { tone: Tone; label: string } {
+  if (l.status_reason) return { tone: "negative", label: humanizeStatus(l.status_reason) };
+  if (!l.status || l.status === "ready") return { tone: "positive", label: "Ready" };
+  return { tone: toneForStatus(l.status), label: l.status === "completed" ? "Ready" : humanizeStatus(l.status) };
+}
+
+function when(value?: string | null): string {
+  return value ? new Date(value).toLocaleDateString() : "";
+}
+
+export function ListsScreen({ pageSize = 25, toolbarActions, renderRowActions, renderDetailActions, extraDetailTabs, appUrl: appUrlProp, className }: ListsScreenProps) {
+  const brand = useBrand();
+  const appUrl = appUrlProp ?? brand.appUrl;
+  const [search, setSearch] = useState("");
+  const term = useDebouncedValue(search).trim();
+  const [selectedId, setSelectedId] = useUrlState("id");
+  const [view, setView] = useUrlState("view");
+  const full = view === "full";
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [deleting, setDeleting] = useState<ListSummary | null>(null);
+  const [removing, setRemoving] = useState<number[] | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [membersKey, setMembersKey] = useState(0);
+  const [health, setHealth] = useState<Integrity | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [exportFormat, setExportFormat] = useState<"csv" | "xlsx">("csv");
+
+  const lists = usePageQuery<ListSummary>(
+    (page, signal) => g8Get<ListSummary[]>("/lists", { page, limit: pageSize, search: term || undefined }, { signal }),
+    [term],
+    pageSize,
+    ["lists", "list", "screen"],
+  );
+  // A deep link (`?id=`) can point at a list that is not on the current page. The API has no read-one operation, so
+  // scan the pages until it turns up instead of guessing its type and count.
+  const inPage = selectedId ? lists.rows.find((l) => String(l.id) === selectedId) : undefined;
+  const lookupNeeded = selectedId != null && !inPage && !lists.loading;
+  const lookup = useG8Query<ListSummary | null>(
+    async (signal) => {
+      for (let page = 1; page <= 50; page++) {
+        const res = await g8Get<ListSummary[]>("/lists", { page, limit: 200 }, { signal });
+        const hit = (res.data ?? []).find((l) => String(l.id) === selectedId);
+        if (hit) return hit;
+        if (!(res.pagination as { has_next?: boolean } | undefined)?.has_next) break;
+      }
+      return null;
+    },
+    [selectedId, lookupNeeded],
+    { enabled: lookupNeeded },
+  );
+  const found = lookup.data && String(lookup.data.id) === selectedId ? lookup.data : null;
+  const selected: ListSummary | null = inPage ?? (selectedId ? found : null);
+  const resolving = selectedId != null && !selected && (lists.loading || (lookupNeeded && lookup.loading) || (lookupNeeded && lookup.data === undefined && !lookup.error));
+
+  const save = useG8Mutation(
+    (v: Draft) => (v.id ? g8Patch(`/lists/${v.id}`, { title: v.title, description: v.description }) : g8Post("/lists", { title: v.title, type: v.type, description: v.description || undefined })),
+    { invalidates: [["lists"]], onSuccess: (res, v) => { setDraft(null); setNotice(v.id ? null : ((res.data as { warning?: string | null } | undefined)?.warning ?? null)); void lists.refetch(); } },
+  );
+  const download = useG8Mutation(async (id: number) => saveDownload((await g8Get<DownloadPayload>(`/lists/${id}/download`, { format: exportFormat })).data));
+  const remove = useG8Mutation((id: number) => g8Delete(`/lists/${id}`), {
+    invalidates: [["lists"]],
+    onSuccess: (_r, id) => { setDeleting(null); if (String(id) === selectedId) setSelectedId(null); void lists.refetch(); },
+  });
+  const removeMembers = useG8Mutation((v: { listId: number; ids: number[] }) => g8Delete(`/lists/${v.listId}/contacts`, { body: { contact_ids: v.ids } }), {
+    invalidates: [["lists"], ["contacts", "list"]],
+    onSuccess: () => { setRemoving(null); setMembersKey((k) => k + 1); void lists.refetch(); },
+  });
+  const refresh = useG8Mutation((id: number) => g8Post(`/lists/${id}/refresh`, {}), { invalidates: [["lists"], ["contacts", "list"]], onSuccess: () => { setMembersKey((k) => k + 1); void lists.refetch(); } });
+  const check = useG8Mutation(async (id: number) => (await g8Post<Integrity>(`/lists/${id}/integrity-check`, {})).data, { onSuccess: (r) => setHealth(r) });
+
+  const select = (l: ListSummary) => { setHealth(null); setSelectedId(String(l.id)); };
+  const rows = lists.rows;
+  const stats = [
+    { label: "Lists", value: lists.total.toLocaleString() },
+    { label: "Members in view", value: rows.reduce((n, l) => n + count(l), 0).toLocaleString(), hint: "On this page" },
+    { label: "Dynamic", value: rows.filter((l) => l.is_dynamic).length, hint: "On this page" },
+    { label: "Need attention", value: rows.filter((l) => l.status === "failed" || l.status === "processing").length, hint: "On this page" },
+  ];
+
+  const table = (
+    <div className="flex flex-col gap-3">
+      {lists.error ? <ApiError error={lists.error} title="Could not load lists" onRetry={() => void lists.refetch()} /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the list" /> : null}
+      {notice ? <p role="status" className="rounded-md border bg-muted/40 px-3 py-2 text-sm">{notice}</p> : null}
+      <div className="divide-y rounded-md border">
+        {lists.loading && rows.length === 0
+          ? Array.from({ length: 5 }, (_, i) => <div key={`sk${i}`} className="p-3"><Skeleton className="h-8 w-full" /></div>)
+          : rows.map((l) => {
+              const status = statusOf(l);
+              const Icon = l.type === "companies" ? Building2 : Users;
+              return (
+                <div key={l.id} data-testid={`list-row-${l.id}`} className={`flex items-center gap-3 p-3 ${String(l.id) === selectedId ? "bg-muted/50" : ""}`}>
+                  <button type="button" className="flex min-w-0 flex-1 items-center gap-3 text-left" onClick={() => select(l)}>
+                    <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium">{l.title}</span>
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {l.type === "companies" ? "Companies" : "Contacts"}{l.is_dynamic ? ", dynamic" : ""}{l.updated_at ? `, updated ${when(l.updated_at)}` : ""}
+                      </span>
+                    </span>
+                    <span className="text-sm tabular-nums">{count(l).toLocaleString()}</span>
+                    <span title={l.status_detail ?? undefined}><StatusPill tone={status.tone} dot>{status.label}</StatusPill></span>
+                  </button>
+                  <div className="flex items-center gap-1">
+                    {renderRowActions?.(l)}
+                    <Button variant="ghost" size="sm" aria-label={`Edit ${l.title}`} onClick={() => setDraft({ id: l.id, title: l.title, description: l.description ?? "", type: l.type === "companies" ? "companies" : "contacts" })}>Edit</Button>
+                    <Button variant="ghost" size="sm" aria-label={`Delete ${l.title}`} onClick={() => setDeleting(l)}><Trash2 className="size-4" aria-hidden /></Button>
+                  </div>
+                </div>
+              );
+            })}
+        {!lists.loading && !lists.error && rows.length === 0 ? (
+          <EmptyState
+            icon={<Database className="size-6" aria-hidden />}
+            title={term ? "No list matches" : "No lists yet"}
+            description={term ? "Try another name." : "A list groups contacts or companies for a campaign, sequence or export."}
+            action={!term ? <Button size="sm" onClick={() => setDraft({ title: "", description: "", type: "contacts" })}>Create your first list</Button> : undefined}
+          />
+        ) : null}
+      </div>
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <span>{lists.total.toLocaleString()} lists</span>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" disabled={lists.page <= 1 || lists.loading} onClick={() => lists.setPage(lists.page - 1)}>Previous</Button>
+          <span>Page {lists.page} of {lists.pageCount}</span>
+          <Button variant="outline" size="sm" disabled={!lists.hasNext || lists.loading} onClick={() => lists.setPage(lists.page + 1)}>Next</Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const detail = selected ? (
+    <DetailPanel
+      key={selected.id}
+      onExpand={full ? undefined : () => setView("full")}
+      onCollapse={full ? () => setView(null) : undefined}
+      title={selected.title}
+      subtitle={`${count(selected).toLocaleString()} ${selected.type === "companies" ? "companies" : "contacts"}`}
+      badges={<StatusPill tone={statusOf(selected).tone} dot>{statusOf(selected).label}</StatusPill>}
+      onClose={() => setSelectedId(null)}
+      actions={(
+        <div className="flex flex-wrap items-center gap-1">
+          {selected.type !== "companies" ? <Button size="sm" variant="outline" onClick={() => setAdding(true)}><UserPlus className="mr-1 size-4" aria-hidden />Add contacts</Button> : null}
+          {selected.is_dynamic ? <Button size="sm" variant="outline" loading={refresh.loading} onClick={() => void refresh.mutate(selected.id)}><RefreshCw className="mr-1 size-4" aria-hidden />Refresh</Button> : null}
+          <Button size="sm" variant="outline" loading={check.loading} onClick={() => void check.mutate(selected.id)}><HeartPulse className="mr-1 size-4" aria-hidden />Check health</Button>
+          <select aria-label="Export format" className="h-8 rounded-md border bg-background px-1 text-sm" value={exportFormat} onChange={(e) => setExportFormat(e.target.value as "csv" | "xlsx")}><option value="csv">CSV</option><option value="xlsx">XLSX</option></select>
+          <Button size="sm" variant="outline" loading={download.loading} onClick={() => void download.mutate(selected.id)}><Download className="mr-1 size-4" aria-hidden />Export</Button>
+          {renderDetailActions?.(selected)}
+        </div>
+      )}
+      tabs={[
+        {
+          id: "members",
+          label: "Members",
+          content: selected.type === "companies"
+            ? <EmptyState icon={<Building2 className="size-6" aria-hidden />} title="Companies in this list" description={`${count(selected).toLocaleString()} companies. The API has no read operation for company-list members, so review them in the ${brand.linkLabel} app.`}
+                action={<a className="inline-flex items-center gap-1 text-sm underline" href={`${appUrl}/lists`} target="_blank" rel="noreferrer">Open in {brand.linkLabel}<ExternalLink className="size-3" aria-hidden /></a>} />
+            : (
+              <div className="flex flex-col gap-2">
+                {removeMembers.error ? <ApiError error={removeMembers.error} title="Could not remove them" /> : null}
+                <ContactTable listId={selected.id} selectable allowDelete={false} pageSize={10} refreshKey={membersKey}
+                  renderBulkActions={({ ids }) => <Button size="sm" variant="outline" onClick={() => setRemoving(ids)}>Remove from list</Button>} />
+              </div>
+            ),
+        },
+        {
+          id: "details",
+          label: "Details",
+          content: (
+            <div className="flex flex-col gap-3">
+              {refresh.error ? <ApiError error={refresh.error} title="Could not refresh the list" /> : null}
+              {check.error ? <ApiError error={check.error} title="Could not check the list" /> : null}
+              {download.error ? <ApiError error={download.error} title="Could not export the list" /> : null}
+              {health ? <pre role="status" className="overflow-x-auto rounded-md border bg-muted/40 p-2 text-xs">{JSON.stringify(health, null, 2)}</pre> : null}
+              <KeyValueList columns={2} items={[
+                { label: "Type", value: selected.type === "companies" ? "Companies" : "Contacts" },
+                { label: "Members", value: count(selected).toLocaleString() },
+                { label: "Build", value: selected.is_dynamic ? "Dynamic (re-evaluated from filters)" : "Static" },
+                { label: "Description", value: selected.description || "None" },
+                { label: "Created", value: when(selected.created_at) || "Unknown" },
+                { label: "Updated", value: when(selected.updated_at) || "Unknown" },
+                { label: "Source", value: selected.source ? humanizeStatus(selected.source) : "" },
+                { label: "Created by", value: selected.created_by ?? "" },
+                { label: "Tags", value: selected.tags?.length ? selected.tags.join(", ") : "" },
+                { label: "Status detail", value: selected.status_detail ?? "", wide: true },
+                { label: "List id", value: String(selected.id), mono: true },
+              ]} />
+            </div>
+          ),
+        },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
+      ]}
+    />
+  ) : selectedId ? (
+    <div className="flex flex-col gap-3 p-4" data-testid="list-detail-pending">
+      {resolving ? (
+        <><Skeleton className="h-6 w-1/2" /><Skeleton className="h-4 w-1/3" /><Skeleton className="h-24 w-full" /></>
+      ) : lookup.error ? (
+        <ApiError error={lookup.error} title="Could not load the list" onRetry={() => void lookup.refetch()} />
+      ) : (
+        <EmptyState icon={<Database className="size-6" aria-hidden />} title="List not found" description="It may have been deleted, or you may not have access to it." />
+      )}
+      <div><Button size="sm" variant="outline" onClick={() => setSelectedId(null)}>Close</Button></div>
+    </div>
+  ) : null;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Lists"
+      description="Group contacts and companies for campaigns, sequences and exports."
+      icon={<Database className="size-5" aria-hidden />}
+      actions={<>{toolbarActions}<Button size="sm" onClick={() => setDraft({ title: "", description: "", type: "contacts" })}><Plus className="mr-1 size-4" aria-hidden />New list</Button></>}
+      stats={stats}
+      toolbar={<Toolbar search={{ value: search, onChange: setSearch, placeholder: "Search lists" }} />}
+    >
+      <SplitView expanded={full} onExpandedChange={(e) => setView(e ? "full" : null)} list={table} detail={detail} detailOpen={selectedId != null} onCloseDetail={() => setSelectedId(null)} />
+
+      <FormSheet open={draft != null} onOpenChange={(o) => !o && setDraft(null)} title={draft?.id ? "Edit list" : "New list"} description="Give it a name your team will recognise."
+        footer={(<><Button variant="ghost" onClick={() => setDraft(null)}>Cancel</Button><Button loading={save.loading} disabled={!draft?.title.trim()} onClick={() => draft && void save.mutate({ ...draft, title: draft.title.trim() })}>Save</Button></>)}>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1"><Label htmlFor="list-title">Name</Label><Input id="list-title" value={draft?.title ?? ""} onChange={(e) => setDraft((v) => v && { ...v, title: e.target.value })} /></div>
+          <div className="flex flex-col gap-1"><Label htmlFor="list-desc">Description</Label><Input id="list-desc" value={draft?.description ?? ""} onChange={(e) => setDraft((v) => v && { ...v, description: e.target.value })} /></div>
+          {!draft?.id ? (
+            <div className="flex flex-col gap-1"><Label htmlFor="list-type">Holds</Label>
+              <select id="list-type" className="h-9 rounded-md border bg-background px-2 text-sm" value={draft?.type} onChange={(e) => setDraft((v) => v && { ...v, type: e.target.value as Draft["type"] })}>
+                <option value="contacts">Contacts</option><option value="companies">Companies</option>
+              </select>
+            </div>
+          ) : null}
+          {save.error ? <ApiError error={save.error} title="Could not save the list" /> : null}
+        </div>
+      </FormSheet>
+
+      <Sheet open={adding && selected != null} onOpenChange={setAdding}>
+        <SheetContent className="w-full overflow-y-auto p-4 sm:max-w-3xl">
+          <SheetHeader><SheetTitle>Add contacts to {selected?.title}</SheetTitle><SheetDescription>Tick contacts from your CRM, then add them.</SheetDescription></SheetHeader>
+          {selected ? (
+            <ContactTable selectable allowDelete={false} pageSize={10}
+              renderBulkActions={({ ids, clear }) => <AddToListButton contactIds={ids} listId={selected.id} label={`Add ${ids.length} to list`} onAdded={() => { clear(); setMembersKey((k) => k + 1); void lists.refetch(); }} />} />
+          ) : null}
+        </SheetContent>
+      </Sheet>
+
+      {/* Outside the sheets: a modal sheet makes everything outside it inert, and the confirm is only opened from the panel. */}
+      <ConfirmSpendDialog open={removing != null} tier="destructive" title={`Remove ${removing?.length ?? 0} contacts from "${selected?.title ?? "the list"}"`} description="They stay in your CRM; they only leave this list."
+        affected={removing?.length} confirmLabel="Remove" confirming={removeMembers.loading}
+        onConfirm={() => selected && removing && void removeMembers.mutate({ listId: selected.id, ids: removing })} onCancel={() => setRemoving(null)} />
+      <ConfirmSpendDialog open={deleting != null} tier="destructive" title={`Delete list "${deleting?.title ?? ""}"`} description="The list is removed. Its contacts stay in your CRM."
+        affected={deleting ? count(deleting) : undefined} confirming={remove.loading} onConfirm={() => deleting && void remove.mutate(deleting.id)} onCancel={() => setDeleting(null)} />
+    </ScreenLayout>
+  );
+}

package/blocks/lists/components/suppression-manager.tsx

@@ -23,6 +23,7 @@ import { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
 
 export interface SuppressionRecord {
   id: string;
@@ -32,6 +33,9 @@ export interface SuppressionRecord {
   source?: string | null;
   reason?: string | null;
   created_at?: string | null;
+  created_by?: string | null;
+  source_ref?: string | null;
+  revision?: number | null;
 }
 
 interface ContactStatus { contact_id: number; is_suppressed: boolean; active_channels: string[]; suppressions: SuppressionRecord[] }
@@ -86,7 +90,7 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
             <option value="all">All channels</option><option value="email">Email</option><option value="phone">Phone</option><option value="linkedin">LinkedIn</option>
           </select>
           <Input aria-label="Reason" placeholder="Reason (optional)" className="w-64" value={reason} onChange={(e) => setReason(e.target.value)} />
-          <Button size="sm" loading={add.loading} disabled={ids.length === 0} onClick={() => void add.mutate(ids)}>Suppress {ids.length || ""} contact{ids.length === 1 ? "" : "s"}</Button>
+          <Button size="sm" loading={add.loading} disabled={ids.length === 0} onClick={() => void add.mutate(ids)}>{ids.length ? `Suppress ${plural(ids.length, "contact")}` : "Suppress contacts"}</Button>
         </div>
         {add.data ? <p role="status" className="text-sm">Suppressed {add.data.data.suppressed} of {add.data.data.total_requested}.{add.data.data.not_found.length ? ` ${add.data.data.not_found.length} ids do not exist.` : ""}</p> : null}
         {add.error ? <ApiError error={add.error} title="Could not suppress" /> : null}
@@ -138,7 +142,7 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
         </div>
       </section>
 
-      <ConfirmSpendDialog open={confirmReinstate} tier="external" title={`Reinstate ${selectedContacts.length} contact${selectedContacts.length === 1 ? "" : "s"}`}
+      <ConfirmSpendDialog open={confirmReinstate} tier="external" title={`Reinstate ${plural(selectedContacts.length, "contact")}`}
         description={(
           <div className="flex flex-col gap-2">
             <p>Reinstating a contact lifts EVERY suppression on it (all channels), not only the row you ticked. They can be messaged again by sequences, campaigns and newsletters. Contacts who unsubscribed themselves may be refused.</p>