@manta-eu/react 0.6.0 → 0.8.0

package/src/components/table/index.tsx

@@ -4,7 +4,7 @@ import type { Cell, Column, ColumnDef, Row, SortingState, Table as TableInstance
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from "react";
-import { useMemo, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 import { match } from "ts-pattern";
 import { getCommonPinnedColumnStyles } from "./table-utils";
 import { Button } from "#components/button/index";
@@ -18,11 +18,26 @@ export { getCommonPinnedColumnStyles, getPinnedColumnInfo, type CombinedSortOpti
 export { useMaxTableRows } from "./use-max-table-rows";
 export { useTableState, type UseTableStateOptions } from "./use-table-state";
 
-export function Table({ className, ...props }: ComponentProps<"table">) {
+export type TableSize = "base" | "sm";
+
+const TableSizeContext = createContext<TableSize>("base");
+
+export type TableProps = ComponentProps<"table"> & {
+  size?: TableSize;
+};
+
+export function Table({ className, size = "base", ...props }: TableProps) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      <table data-slot="table" className={cn("w-full caption-bottom typography-small", className)} {...props} />
-    </div>
+    <TableSizeContext.Provider value={size}>
+      <div data-slot="table-container" className="relative w-full overflow-x-auto">
+        <table
+          data-slot="table"
+          data-size={size}
+          className={cn("w-full caption-bottom typography-small", className)}
+          {...props}
+        />
+      </div>
+    </TableSizeContext.Provider>
   );
 }
 
@@ -45,11 +60,13 @@ export function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
 }
 
 export function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  const size = useContext(TableSizeContext);
   return (
     <tr
       data-slot="table-row"
       className={cn(
         "bg-card hover:bg-muted data-[state=selected]:bg-muted border-b transition-colors text-default-foreground [&>td[data-is-pinned]]:bg-card [&>td[data-is-pinned]]:transition-colors [&>td[data-is-pinned]]:group-hover:bg-muted",
+        size === "sm" && "border-default-border",
         className,
       )}
       {...props}
@@ -58,11 +75,13 @@ export function TableRow({ className, ...props }: ComponentProps<"tr">) {
 }
 
 export function TableHead({ className, ...props }: ComponentProps<"th">) {
+  const size = useContext(TableSizeContext);
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle typography-small-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        "bg-faint text-muted-foreground h-10 px-2 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint",
+        size === "sm" ? "h-9 px-4 py-2.5 typography-tiny-medium whitespace-normal" : "typography-small-medium",
         className,
       )}
       {...props}
@@ -71,11 +90,13 @@ export function TableHead({ className, ...props }: ComponentProps<"th">) {
 }
 
 export function TableCell({ className, ...props }: ComponentProps<"td">) {
+  const size = useContext(TableSizeContext);
   return (
     <td
       data-slot="table-cell"
       className={cn(
         "px-4 not-first:px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        size === "sm" && "not-first:px-4 py-3 align-top text-[0.8125rem] leading-5 whitespace-normal break-words",
         className,
       )}
       {...props}
@@ -117,13 +138,14 @@ declare module "@tanstack/react-table" {
 
 export function CustomTableCell<TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) {
   const columnType = cell.column.columnDef.meta?.type;
+  const size = useContext(TableSizeContext);
 
   const pinningStyles = getCommonPinnedColumnStyles(cell.column);
 
   return (
     <TableCell
       className={cn(
-        "h-12",
+        size === "base" && "h-12",
         cell.column.columnDef.meta?.wide ? "max-w-none" : "max-w-56",
         cell.column.columnDef.meta?.className,
       )}
@@ -159,7 +181,7 @@ export function ColumnHeader<TData, TValue>({ column, children }: TColumnHeaderP
   const isSorted = column.getIsSorted();
 
   const className = cn(
-    "typography-caption-medium flex gap-0.5 text-muted-foreground items-center group/sort-header",
+    "flex gap-0.5 text-muted-foreground items-center group/sort-header",
     isNumberColumn && "justify-end",
     column.getCanSort() && "cursor-pointer",
   );
@@ -203,6 +225,7 @@ export type DataTableBaseProps<TData> = HTMLAttributes<HTMLDivElement> & {
   renderRow?: (row: Row<TData>) => ReactNode;
   rowClassName?: (row: Row<TData>) => string | undefined;
   isRowClickable?: (row: Row<TData>) => boolean;
+  size?: TableSize;
 };
 
 export type DataTableWithRowClick<TData> = DataTableBaseProps<TData> & {
@@ -258,6 +281,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     renderRow,
     rowClassName,
     isRowClickable,
+    size = "base",
     ...restProps
   } = props;
 
@@ -265,7 +289,9 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   const hasClickHandler = !!onRowClick || !!rowHref;
 
-  const tableBodyRowClassName = cn("group border-muted-border bg-card py-2 px-4", hasClickHandler && "cursor-pointer");
+  const rowBorderClassName = size === "base" && "border-muted-border";
+
+  const tableBodyRowClassName = cn("group bg-card py-2 px-4", rowBorderClassName, hasClickHandler && "cursor-pointer");
 
   const handleRowClick = (row: Row<TData>) => {
     if (onRowClick) {
@@ -329,10 +355,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
 
   return (
     <div className={cn("grid gap-2.5", className)} {...restProps} ref={ref}>
-      <Table>
+      <Table size={size}>
         <TableHeader className={headerClassName}>
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="border-muted-border">
+            <TableRow key={headerGroup.id} className={cn(rowBorderClassName)}>
               {headerGroup.headers.map((header) => {
                 const headerContent = header.isPlaceholder
                   ? null
@@ -343,7 +369,10 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 return (
                   <TableHead
                     key={header.id}
-                    className={cn("h-13 px-4 not-first:px-3 py-2", header.column.columnDef.meta?.className)}
+                    className={cn(
+                      size === "base" && "h-13 px-4 not-first:px-3 py-2",
+                      header.column.columnDef.meta?.className,
+                    )}
                     data-is-pinned={header.column.getIsPinned() ? true : undefined}
                     style={pinningStyles}
                     ref={(thElement) => columnSizingHandler(thElement, table, header.column)}
@@ -390,6 +419,7 @@ export type SortableTableBaseProps<TRow> = {
   noResultsMessage?: string;
   className?: string;
   isLoading?: boolean;
+  size?: TableSize;
 };
 
 export type SortableTableProps<TRow> =

package/src/globals.css

@@ -381,6 +381,8 @@
   --color-rank-3: #ffe4d6;
 
   --color-default-foreground: var(--color-neutral-900);
+  --color-inverse: var(--color-neutral-900);
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(23, 23, 23, 0.85);
   --color-muted-foreground: var(--color-neutral-500);
   --color-disabled-foreground: var(--color-neutral-400);

package/src/hooks/useAuth.ts

@@ -22,6 +22,7 @@ export type UseAuthResult = {
   user: User | undefined;
   datastore: Datastore | undefined;
   datastores: Datastore[] | undefined;
+  inOrganization: boolean;
   isLoading: boolean;
   isAuthenticated: boolean;
   isOperator: boolean;
@@ -296,6 +297,7 @@ export function useAuth(): UseAuthResult {
       const datastore = sessionDatastore(row);
       return isPresent(datastore) ? [datastore] : [];
     }),
+    inOrganization: isPresent(contextData?.user?.memberOrgs) || isPresent(contextData?.datastores),
     datastoreAccessGranted: contextData?.datastoreAccessGranted ?? true,
     isOperator: contextData?.user?.isOperator ?? false,
     canManageTeam: contextData?.user?.canManageTeam ?? false,

package/src/providers/AuthContext.ts

@@ -21,6 +21,7 @@ export type AuthContextValue = Pick<
   // Only Manta's own web app may list the apps connected to someone; any other host's token is refused.
   canDisconnectCustomApps?: boolean;
   hasProfilePage?: boolean;
+  inOrganization?: boolean;
 };
 
 export const AuthContext = createContext<AuthContextValue | undefined>(undefined);

package/src/routes/integrations/components/connect-forms/MetaAdsConnectForm.tsx

@@ -3,8 +3,11 @@ import {
   GQLMetaSetupStateEnum,
   useConnectedAccountsQuery,
   useMetaSetupConnectMutation,
+  useMetaSetupIncludePagesMutation,
   useMetaSetupProgressQuery,
   type GQLMetaAdAccount,
+  type GQLMetaPage,
+  type GQLMetaSetupProgress,
 } from "@manta-eu/client";
 import { parseError } from "@manta-eu/client/shared/error-utils";
 import { isPresent } from "@manta-eu/lib/present";
@@ -15,6 +18,7 @@ import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { ConnectFormHeader } from "./ConnectFormHeader";
 import { ImportStartedNotice } from "./ImportStartedNotice";
+import { metaPageTreeItems, picksAPage } from "./meta-page-tree";
 import { OAuthConnectLink } from "./OAuthConnectLink";
 import { unavailableReasonLabel } from "./setup-account-unavailable-reason";
 import type { ConnectFormProps, ImportNotice } from "./types";
@@ -24,12 +28,22 @@ import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Loader } from "#components/loader/index";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import { TreeMultiSelect } from "#components/tree-multi-select/index";
 import { cn } from "#lib/utils";
 import { useMantaClient } from "#providers/index";
 
 const pollIntervalMs = 3000;
 
-type Phase = "idle" | "awaitingOAuth" | "loadingAccounts" | "pickingAccount" | "submitting" | "done" | "failed";
+type Phase =
+  | "idle"
+  | "awaitingOAuth"
+  | "loadingAccounts"
+  | "pickingAccount"
+  | "loadingPages"
+  | "pickingPages"
+  | "submitting"
+  | "done"
+  | "failed";
 
 type DerivePhaseInput = {
   states: GQLMetaSetupStateEnum[] | undefined;
@@ -42,6 +56,8 @@ const statePriority: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.FatallyFailed,
   GQLMetaSetupStateEnum.TimedOut,
   GQLMetaSetupStateEnum.ConnectingAccounts,
+  GQLMetaSetupStateEnum.SelectingPages,
+  GQLMetaSetupStateEnum.FetchingPages,
   GQLMetaSetupStateEnum.SelectingAccounts,
   GQLMetaSetupStateEnum.FetchingAccounts,
   GQLMetaSetupStateEnum.Setup,
@@ -53,7 +69,14 @@ const terminalStates: readonly GQLMetaSetupStateEnum[] = [
   GQLMetaSetupStateEnum.TimedOut,
 ];
 
-const activePhases: readonly Phase[] = ["awaitingOAuth", "loadingAccounts", "pickingAccount", "submitting"];
+const activePhases: readonly Phase[] = [
+  "awaitingOAuth",
+  "loadingAccounts",
+  "pickingAccount",
+  "loadingPages",
+  "pickingPages",
+  "submitting",
+];
 
 export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: DerivePhaseInput): Phase {
   const defaultPhase: Phase = hasStartedOAuth ? "awaitingOAuth" : "idle";
@@ -64,6 +87,8 @@ export function derivePhase({ states, hasStartedOAuth, hasSeenActiveState }: Der
     .with(GQLMetaSetupStateEnum.Finished, () => "done")
     .with(GQLMetaSetupStateEnum.FatallyFailed, GQLMetaSetupStateEnum.TimedOut, () => "failed")
     .with(GQLMetaSetupStateEnum.ConnectingAccounts, () => "submitting")
+    .with(GQLMetaSetupStateEnum.SelectingPages, () => "pickingPages")
+    .with(GQLMetaSetupStateEnum.FetchingPages, () => "loadingPages")
     .with(GQLMetaSetupStateEnum.SelectingAccounts, () => "pickingAccount")
     .with(GQLMetaSetupStateEnum.FetchingAccounts, GQLMetaSetupStateEnum.Setup, () => "loadingAccounts")
     .otherwise(() => defaultPhase);
@@ -114,11 +139,20 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   const [hasStartedOAuth, setHasStartedOAuth] = useState(resumedFromOAuth);
   const [hasSeenActiveState, setHasSeenActiveState] = useState(resumedFromOAuth);
   const [selectedAccountId, setSelectedAccountId] = useState<string>("");
+  const [selectedPageIds, setSelectedPageIds] = useState<ReadonlySet<string>>(new Set());
   const hasDismissedRef = useRef(false);
 
   const progressQuery = useMetaSetupProgressQuery(mantaClient, undefined, { staleTime: 0 });
   const progress = progressQuery.data?.metaSetupProgress;
-  const phase = derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const connectMutation = useMetaSetupConnectMutation(mantaClient);
+  const includePagesMutation = useMetaSetupIncludePagesMutation(mantaClient);
+  // Progress reads the old step until a mutation's step has run, so a pending one shows where it is heading.
+  const phase = connectMutation.isPending
+    ? "loadingPages"
+    : includePagesMutation.isPending
+      ? "submitting"
+      : derivePhase({ states: progress?.state, hasStartedOAuth, hasSeenActiveState });
+  const pages = progress?.pages ?? [];
 
   useWindowFocusPoll(progressQuery.refetch, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
 
@@ -139,8 +173,6 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   );
   const reconnectableExternalIds = useReconnectableExternalIds(GQLIntegration.Meta);
 
-  const connectMutation = useMetaSetupConnectMutation(mantaClient);
-
   useEffect(() => {
     if (phase !== "done" || hasDismissedRef.current) return;
     hasDismissedRef.current = true;
@@ -149,10 +181,12 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
     if (!importNotice) onDismiss();
   }, [phase, onChanged, onDismiss, importNotice]);
 
+  function setProgress(metaSetupProgress: GQLMetaSetupProgress) {
+    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), { metaSetupProgress });
+  }
+
   function resetProgressCache() {
-    queryClient.setQueryData(useMetaSetupProgressQuery.getKey(), {
-      metaSetupProgress: { state: [], accounts: null, lastError: null },
-    });
+    setProgress({ state: [], accounts: null, pages: null, lastError: null });
   }
 
   function handleOpened() {
@@ -164,16 +198,34 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
   async function handleSubmit() {
     if (!selectedAccountId) return;
     try {
-      await connectMutation.mutateAsync({ accountIds: [selectedAccountId] });
-      await progressQuery.refetch();
+      setProgress((await connectMutation.mutateAsync({ accountIds: [selectedAccountId] })).metaSetupConnect);
     } catch (err) {
       const info = parseError(err, "Failed to connect Meta");
       toast.error(info.message, { description: info.description });
     }
   }
 
+  async function handleIncludePages() {
+    try {
+      setProgress((await includePagesMutation.mutateAsync({ pageIds: [...selectedPageIds] })).metaSetupIncludePages);
+    } catch (err) {
+      const info = parseError(err, "Failed to connect Meta");
+      toast.error(info.message, { description: info.description });
+    }
+  }
+
+  function togglePage(id: string, checked: boolean) {
+    setSelectedPageIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
   function handleRetry() {
     setSelectedAccountId("");
+    setSelectedPageIds(new Set());
     hasDismissedRef.current = false;
     resetProgressCache();
     setHasStartedOAuth(false);
@@ -198,6 +250,10 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
               onSelect={setSelectedAccountId}
             />
           ))
+          .with("loadingPages", () => <LoadingPagesView />)
+          .with("pickingPages", () => (
+            <PickingPagesView pages={pages} selectedIds={selectedPageIds} onToggle={togglePage} />
+          ))
           .with("submitting", () => <SubmittingView />)
           .with("done", () => <DoneView providerName={provider.name} importNotice={importNotice} />)
           .with("failed", () => (
@@ -220,12 +276,16 @@ export function MetaAdsConnectForm(props: ConnectFormProps) {
           <OAuthConnectLink href="/oauth/meta/start" label="Continue with Meta" onOpened={handleOpened} />
         )}
         {phase === "pickingAccount" && (
+          <Button onClick={() => void handleSubmit()} disabled={!selectedAccountId}>
+            Continue
+          </Button>
+        )}
+        {phase === "pickingPages" && (
           <Button
-            onClick={() => void handleSubmit()}
-            disabled={!selectedAccountId}
-            isLoading={connectMutation.isPending}
+            onClick={() => void handleIncludePages()}
+            disabled={isPresent(pages) && !picksAPage(pages, selectedPageIds)}
           >
-            Connect account
+            {isPresent(pages) ? "Connect" : "Connect without a Page"}
           </Button>
         )}
         {phase === "done" && importNotice && <Button onClick={onDismiss}>Done</Button>}
@@ -348,12 +408,68 @@ function PickingAccountView(props: PickingAccountViewProps) {
   );
 }
 
+function LoadingPagesView() {
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Loading your Facebook Pages</h2>
+        <p className="typography-caption text-muted-foreground">
+          The Pages this ad account can advertise as, and their Instagram accounts.
+        </p>
+      </div>
+      <div
+        className="flex items-center gap-2 text-muted-foreground typography-caption"
+        role="status"
+        aria-live="polite"
+      >
+        <Loader className="size-4" aria-hidden /> Fetching Pages…
+      </div>
+    </div>
+  );
+}
+
+type PickingPagesViewProps = {
+  pages: GQLMetaPage[];
+  selectedIds: ReadonlySet<string>;
+  onToggle: (id: string, checked: boolean) => void;
+};
+
+function PickingPagesView(props: PickingPagesViewProps) {
+  const { pages, selectedIds, onToggle } = props;
+
+  if (!isPresent(pages)) {
+    return (
+      <Banner
+        type="warning"
+        label="This ad account can't advertise as any Facebook Page yet. Connect it anyway, and add a Page to it in Meta Business Suite before you run ads."
+      />
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-1">
+        <h2 className="typography-large-body-semibold text-default-foreground">Pick the Facebook Pages to use</h2>
+        <p className="typography-caption text-muted-foreground">
+          Manta runs ads only as the Pages and Instagram accounts you pick. Pick at least one Page.
+        </p>
+      </div>
+      <TreeMultiSelect
+        items={metaPageTreeItems(pages)}
+        selectedIds={selectedIds}
+        onToggle={onToggle}
+        searchPlaceholder="Search Pages..."
+      />
+    </div>
+  );
+}
+
 function SubmittingView() {
   return (
     <div className="grid gap-4">
       <div className="grid gap-1">
         <h2 className="typography-large-body-semibold text-default-foreground">Connecting your account</h2>
-        <p className="typography-caption text-muted-foreground">Hold tight — this usually takes a few seconds.</p>
+        <p className="typography-caption text-muted-foreground">This can take a minute. Keep this window open.</p>
       </div>
       <div
         className="flex items-center gap-2 text-muted-foreground typography-caption"

package/src/routes/integrations/components/connect-forms/OAuthSetupConnectForm.tsx

@@ -85,11 +85,12 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
   const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
   const hasDismissedRef = useRef(false);
   const [connectionExpired, setConnectionExpired] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   const states = setup.progress?.state;
   const phase = connectionExpired
     ? "failed"
-    : derivePhase({ states, hasStartedOAuth, hasSeenActiveState, resumesUnfinishedSetup });
+    : derivePhase({ states, hasStartedOAuth, hasSeenActiveState, resumesUnfinishedSetup, submitted });
 
   useWindowFocusPoll(setup.refetchProgress, { enabled: activePhases.includes(phase), intervalMs: pollIntervalMs });
 
@@ -114,6 +115,7 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
   function handleOpened() {
     setConnectionExpired(false);
+    setSubmitted(false);
     setSelectedIds(new Set());
     setup.resetProgress();
     setHasSeenActiveState(false);
@@ -131,21 +133,25 @@ export function OAuthSetupConnectForm<Row extends SetupRow>(props: OAuthSetupCon
 
   async function handleSubmit() {
     if (selectedIds.size === 0) return;
+    setSubmitted(true);
     try {
       const result = await setup.connect([...selectedIds]);
       if (result.state.includes(GQLGoogleSetupStateEnum.NotFound)) {
+        setSubmitted(false);
         setConnectionExpired(true);
         setSelectedIds(new Set());
         return;
       }
       await setup.refetchProgress();
     } catch (err) {
+      setSubmitted(false);
       const info = parseError(err, `Failed to connect ${providerName}`);
       toast.error(info.message, { description: info.description });
     }
   }
 
   function handleRetry() {
+    setSubmitted(false);
     setSelectedIds(new Set());
     hasDismissedRef.current = false;
     setup.resetProgress();
@@ -343,7 +349,7 @@ function SubmittingView(props: CopyProps) {
     <div className="grid gap-4">
       <div className="grid gap-1">
         <h2 className="typography-large-body-semibold text-default-foreground">Connecting your {copy.entityPlural}</h2>
-        <p className="typography-caption text-muted-foreground">Hold tight — this usually takes a few seconds.</p>
+        <p className="typography-caption text-muted-foreground">This can take a minute. Keep this window open.</p>
       </div>
       <StatusLine label="Provisioning…" />
     </div>

package/src/routes/integrations/components/connect-forms/meta-page-tree.ts

@@ -0,0 +1,17 @@
+import { GQLMetaPageKind, type GQLMetaPage } from "@manta-eu/client";
+import { buildTreeRows, type TreeSelectItem } from "#components/tree-multi-select/index";
+
+// Each Instagram account sits under the Page it is linked to, and is picked on its own.
+export function metaPageTreeItems(pages: readonly GQLMetaPage[]): TreeSelectItem[] {
+  return buildTreeRows(pages).map(({ node, depth }) => ({
+    id: node.id,
+    label: node.name ?? (node.kind === GQLMetaPageKind.Instagram ? `Instagram account ${node.id}` : node.id),
+    caption: node.kind === GQLMetaPageKind.Instagram ? "Instagram" : undefined,
+    selectable: true,
+    depth,
+  }));
+}
+
+export function picksAPage(pages: readonly GQLMetaPage[], selectedIds: ReadonlySet<string>): boolean {
+  return pages.some((page) => page.kind === GQLMetaPageKind.Page && selectedIds.has(page.id));
+}

package/src/routes/integrations/components/connect-forms/oauth-setup-phase.ts

@@ -9,6 +9,8 @@ export type DerivePhaseInput = {
   hasSeenActiveState: boolean;
   // Off when the account is connected before its picker, so a leftover setup cannot stand in for a new sign-in.
   resumesUnfinishedSetup?: boolean;
+  // Connect was sent: progress reads the old state until the connect has run, so only an outcome ends it.
+  submitted?: boolean;
 };
 
 const statePriority: readonly GQLGoogleSetupStateEnum[] = [
@@ -34,10 +36,14 @@ export function derivePhase({
   hasStartedOAuth,
   hasSeenActiveState,
   resumesUnfinishedSetup = true,
+  submitted = false,
 }: DerivePhaseInput): Phase {
   const defaultPhase: Phase = hasStartedOAuth ? "awaitingOAuth" : "idle";
   if (!hasStartedOAuth && !resumesUnfinishedSetup) return defaultPhase;
   const dominant = statePriority.find((state) => states?.includes(state));
+  const settled =
+    states?.includes(GQLGoogleSetupStateEnum.NotFound) || (dominant !== undefined && terminalStates.includes(dominant));
+  if (submitted && !settled) return "submitting";
   if (dominant && terminalStates.includes(dominant) && !hasSeenActiveState) return defaultPhase;
   return match(dominant)
     .returnType<Phase>()

package/src/routes/integrations/connection-view.ts

@@ -87,6 +87,7 @@ const grantExpiryWarningDays = 14;
 // Integrations whose account is limited to what was picked at connect time, so an empty pick reads nothing.
 const oauthIncludedResourcesLabels: Partial<Record<GQLIntegration, { label: string; noneLabel: string }>> = {
   [GQLIntegration.Dash]: { label: "Folders", noneLabel: "No folders selected" },
+  [GQLIntegration.Meta]: { label: "Pages", noneLabel: "No Pages picked, reconnect to pick them" },
 };
 
 function timeAgoLabel(event: string, at: string | null | undefined): string | undefined {

package/src/themes/manta-dark.css

@@ -25,6 +25,8 @@
   --color-rank-3: #431407;
 
   --color-default-foreground: #ffffff;
+  --color-inverse: #05070d;
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(255, 255, 255, 0.8);
   --color-muted-foreground: #8a90a0;
   --color-placeholder-foreground: #4b4e58;

package/src/themes/manta.css

@@ -26,6 +26,8 @@
   --color-card-alpha-0: rgb(255 255 255 / 0);
 
   --color-default-foreground: #0b1b45;
+  --color-inverse: #0b1530;
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(23, 23, 23, 0.85);
   --color-muted-foreground: #5a6480;
   --color-placeholder-foreground: var(--color-muted-foreground);

package/src/themes/standard.css

@@ -48,6 +48,8 @@
   --color-rank-3: #ffe4d6;
 
   --color-default-foreground: var(--color-neutral-900);
+  --color-inverse: var(--color-neutral-900);
+  --color-inverse-foreground: #ffffff;
   --color-muted-foreground: var(--color-neutral-500);
   --color-disabled-foreground: var(--color-neutral-400);
   --color-placeholder-foreground: var(--color-neutral-400);