@payloadcms/ui 4.0.0-internal.543da65 → 4.0.0-internal.567a487

package/dist/views/Branch/MergeLedger/index.js

@@ -0,0 +1,211 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { formatAdminURL } from 'payload/shared';
+import React, { useCallback, useRef, useState } from 'react';
+import { Link } from '../../../elements/Link/index.js';
+import { Pill } from '../../../elements/Pill/index.js';
+import { ShimmerEffect } from '../../../elements/ShimmerEffect/index.js';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'merge-ledger';
+const operationPillStyle = {
+  create: 'success',
+  delete: 'error',
+  update: 'warning'
+};
+/**
+ * A branch's history: one section per merge event, newest first.
+ *
+ * Reconstructed from the ledger rather than from the branch's current state, which
+ * by then holds nothing — a merge consumes the change rows it applies and drops the
+ * shadow rows behind them. Titles are the ones the documents had when they merged.
+ *
+ * Rows expand to the diff of what that merge did, rendered from the snapshots taken
+ * either side of the write. Fetched per row, because a history can hold hundreds of
+ * documents and each diff is a full field-tree render.
+ */
+export const MergeLedger = ({
+  events
+}) => {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    serverFunction
+  } = useServerFunctions();
+  const [expanded, setExpanded] = useState(() => new Set());
+  const [loaded, setLoaded] = useState({});
+  const loadedRef = useRef(loaded);
+  loadedRef.current = loaded;
+  const load = useCallback(async ({
+    changeIndex,
+    key,
+    mergeID
+  }) => {
+    if (loadedRef.current[key]) {
+      return;
+    }
+    setLoaded(prev => ({
+      ...prev,
+      [key]: {
+        status: 'loading'
+      }
+    }));
+    try {
+      const result = await serverFunction({
+        name: 'render-merge-diff',
+        args: {
+          changeIndex,
+          mergeID
+        }
+      });
+      setLoaded(prev_1 => ({
+        ...prev_1,
+        [key]: {
+          result,
+          status: 'ready'
+        }
+      }));
+    } catch (_err) {
+      setLoaded(prev_0 => ({
+        ...prev_0,
+        [key]: {
+          status: 'error'
+        }
+      }));
+    }
+  }, [serverFunction]);
+  const toggle = useCallback(({
+    changeIndex: changeIndex_0,
+    key: key_0,
+    mergeID: mergeID_0
+  }) => {
+    // The fetch is kicked off outside the updater. A state updater must be pure —
+    // React may run it during another component's render, and the `setLoaded` inside
+    // `load` then lands mid-render.
+    const willExpand = !expanded.has(key_0);
+    setExpanded(prev_2 => {
+      const next = new Set(prev_2);
+      if (next.has(key_0)) {
+        next.delete(key_0);
+      } else {
+        next.add(key_0);
+      }
+      return next;
+    });
+    if (willExpand) {
+      void load({
+        changeIndex: changeIndex_0,
+        key: key_0,
+        mergeID: mergeID_0
+      });
+    }
+  }, [expanded, load]);
+  if (!events.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: events.map(event => /*#__PURE__*/_jsxs("section", {
+      className: `${baseClass}__event`,
+      children: [/*#__PURE__*/_jsxs("header", {
+        className: `${baseClass}__header`,
+        children: [/*#__PURE__*/_jsx("h3", {
+          className: `${baseClass}__when`,
+          children: t('branching:mergedOn', {
+            date: new Date(event.mergedAt).toLocaleString(undefined, {
+              dateStyle: 'medium',
+              timeStyle: 'short'
+            })
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__meta`,
+          children: event.mergedByLabel ? t('branching:mergedByCount', {
+            count: event.changes.length,
+            user: event.mergedByLabel
+          }) : t('branching:mergedCount', {
+            count: event.changes.length
+          })
+        })]
+      }), /*#__PURE__*/_jsx("ul", {
+        className: `${baseClass}__list`,
+        children: event.changes.map((change, changeIndex_1) => {
+          const collectionConfig = change.globalSlug ? undefined : getEntityConfig({
+            collectionSlug: change.collectionSlug
+          });
+          const globalConfig = change.globalSlug ? getEntityConfig({
+            globalSlug: change.globalSlug
+          }) : undefined;
+          const key_1 = `${event.id}-${changeIndex_1}`;
+          const isExpanded = expanded.has(key_1);
+          const state = loaded[key_1];
+          return /*#__PURE__*/_jsxs("li", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__row-header`,
+              children: [/*#__PURE__*/_jsx("button", {
+                "aria-expanded": isExpanded,
+                className: `${baseClass}__toggle`,
+                onClick: () => toggle({
+                  changeIndex: changeIndex_1,
+                  key: key_1,
+                  mergeID: event.id
+                }),
+                type: "button",
+                children: /*#__PURE__*/_jsx("span", {
+                  children: change.docTitle
+                })
+              }), /*#__PURE__*/_jsxs("div", {
+                className: `${baseClass}__row-content`,
+                children: [/*#__PURE__*/_jsx(Pill, {
+                  className: `${baseClass}__operation`,
+                  pillStyle: operationPillStyle[change.operation],
+                  size: "small",
+                  children: t(`branching:operation_${change.operation}`)
+                }), /*#__PURE__*/_jsx(Pill, {
+                  className: `${baseClass}__entity`,
+                  pillStyle: "light-gray",
+                  size: "small",
+                  children: getTranslation(globalConfig ? globalConfig.label ?? change.globalSlug : collectionConfig?.labels?.singular ?? change.collectionSlug, i18n)
+                }), change.operation === 'delete' ? /*#__PURE__*/_jsx("span", {
+                  className: `${baseClass}__title`,
+                  children: change.docTitle
+                }) : /*#__PURE__*/_jsx(Link, {
+                  className: `${baseClass}__title ${baseClass}__title--link`,
+                  href: formatAdminURL({
+                    adminRoute: config.routes.admin,
+                    path: change.globalSlug ? `/globals/${change.globalSlug}` : `/collections/${change.collectionSlug}/${change.docID}`
+                  }),
+                  children: change.docTitle
+                }), /*#__PURE__*/_jsx(ChevronIcon, {
+                  className: `${baseClass}__indicator`,
+                  direction: isExpanded ? 'up' : 'down',
+                  size: 16
+                })]
+              })]
+            }), isExpanded && /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__diff`,
+              children: [state?.status === 'ready' ? state.result?.diff : null, state?.status === 'loading' || !state ? /*#__PURE__*/_jsx(ShimmerEffect, {
+                height: "3rem"
+              }) : null, state?.status === 'error' ? /*#__PURE__*/_jsx("p", {
+                className: `${baseClass}__error`,
+                children: t('error:unknown')
+              }) : null]
+            })]
+          }, key_1);
+        })
+      })]
+    }, event.id))
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Branch/MergeLedger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","formatAdminURL","React","useCallback","useRef","useState","Link","Pill","ShimmerEffect","ChevronIcon","useConfig","useServerFunctions","useTranslation","baseClass","operationPillStyle","create","delete","update","MergeLedger","events","config","getEntityConfig","i18n","t","serverFunction","expanded","setExpanded","Set","loaded","setLoaded","loadedRef","current","load","changeIndex","key","mergeID","prev","status","result","name","args","_err","toggle","willExpand","has","next","add","length","_jsx","className","map","event","_jsxs","date","Date","mergedAt","toLocaleString","undefined","dateStyle","timeStyle","mergedByLabel","count","changes","user","change","collectionConfig","globalSlug","collectionSlug","globalConfig","id","isExpanded","state","onClick","type","docTitle","pillStyle","operation","size","label","labels","singular","href","adminRoute","routes","admin","path","docID","direction","diff","height"],"sources":["../../../../src/views/Branch/MergeLedger/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type { RenderMergeDiffResult } from '../renderMergeDiff.js'\n\nimport { Link } from '../../../elements/Link/index.js'\nimport { Pill } from '../../../elements/Pill/index.js'\nimport { ShimmerEffect } from '../../../elements/ShimmerEffect/index.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useServerFunctions } from '../../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'merge-ledger'\n\nexport type MergeEventChange = {\n  collectionSlug: string\n  docID: string\n  docTitle: string\n  /** Set instead of `collectionSlug`/`docID` when the merged change was a global. */\n  globalSlug?: string\n  operation: 'create' | 'delete' | 'update'\n}\n\nexport type MergeEvent = {\n  changes: MergeEventChange[]\n  id: string\n  mergedAt: string\n  mergedByLabel?: string\n}\n\ntype LoadState = {\n  result?: RenderMergeDiffResult\n  status: 'error' | 'loading' | 'ready'\n}\n\nconst operationPillStyle = {\n  create: 'success',\n  delete: 'error',\n  update: 'warning',\n} as const\n\n/**\n * A branch's history: one section per merge event, newest first.\n *\n * Reconstructed from the ledger rather than from the branch's current state, which\n * by then holds nothing — a merge consumes the change rows it applies and drops the\n * shadow rows behind them. Titles are the ones the documents had when they merged.\n *\n * Rows expand to the diff of what that merge did, rendered from the snapshots taken\n * either side of the write. Fetched per row, because a history can hold hundreds of\n * documents and each diff is a full field-tree render.\n */\nexport const MergeLedger: React.FC<{ events: MergeEvent[] }> = ({ events }) => {\n  const { config, getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n  const { serverFunction } = useServerFunctions()\n\n  const [expanded, setExpanded] = useState<Set<string>>(() => new Set())\n  const [loaded, setLoaded] = useState<Record<string, LoadState>>({})\n\n  const loadedRef = useRef(loaded)\n  loadedRef.current = loaded\n\n  const load = useCallback(\n    async ({\n      changeIndex,\n      key,\n      mergeID,\n    }: {\n      changeIndex: number\n      key: string\n      mergeID: string\n    }) => {\n      if (loadedRef.current[key]) {\n        return\n      }\n\n      setLoaded((prev) => ({ ...prev, [key]: { status: 'loading' } }))\n\n      try {\n        const result = (await serverFunction({\n          name: 'render-merge-diff',\n          args: { changeIndex, mergeID },\n        })) as RenderMergeDiffResult\n\n        setLoaded((prev) => ({ ...prev, [key]: { result, status: 'ready' } }))\n      } catch (_err) {\n        setLoaded((prev) => ({ ...prev, [key]: { status: 'error' } }))\n      }\n    },\n    [serverFunction],\n  )\n\n  const toggle = useCallback(\n    ({ changeIndex, key, mergeID }: { changeIndex: number; key: string; mergeID: string }) => {\n      // The fetch is kicked off outside the updater. A state updater must be pure —\n      // React may run it during another component's render, and the `setLoaded` inside\n      // `load` then lands mid-render.\n      const willExpand = !expanded.has(key)\n\n      setExpanded((prev) => {\n        const next = new Set(prev)\n\n        if (next.has(key)) {\n          next.delete(key)\n        } else {\n          next.add(key)\n        }\n\n        return next\n      })\n\n      if (willExpand) {\n        void load({ changeIndex, key, mergeID })\n      }\n    },\n    [expanded, load],\n  )\n\n  if (!events.length) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      {events.map((event) => (\n        <section className={`${baseClass}__event`} key={event.id}>\n          <header className={`${baseClass}__header`}>\n            <h3 className={`${baseClass}__when`}>\n              {t('branching:mergedOn', {\n                date: new Date(event.mergedAt).toLocaleString(undefined, {\n                  dateStyle: 'medium',\n                  timeStyle: 'short',\n                }),\n              })}\n            </h3>\n            <span className={`${baseClass}__meta`}>\n              {event.mergedByLabel\n                ? t('branching:mergedByCount', {\n                    count: event.changes.length,\n                    user: event.mergedByLabel,\n                  })\n                : t('branching:mergedCount', { count: event.changes.length })}\n            </span>\n          </header>\n\n          <ul className={`${baseClass}__list`}>\n            {event.changes.map((change, changeIndex) => {\n              const collectionConfig = change.globalSlug\n                ? undefined\n                : getEntityConfig({ collectionSlug: change.collectionSlug })\n              const globalConfig = change.globalSlug\n                ? getEntityConfig({ globalSlug: change.globalSlug })\n                : undefined\n              const key = `${event.id}-${changeIndex}`\n              const isExpanded = expanded.has(key)\n              const state = loaded[key]\n\n              return (\n                <li className={`${baseClass}__row`} key={key}>\n                  {/* Following `Collapsible` and the review list: an overlay button\n                      takes the clicks so the whole header opens the row, and the\n                      content sits above it with pointer events off. */}\n                  <div className={`${baseClass}__row-header`}>\n                    <button\n                      aria-expanded={isExpanded}\n                      className={`${baseClass}__toggle`}\n                      onClick={() => toggle({ changeIndex, key, mergeID: event.id })}\n                      type=\"button\"\n                    >\n                      <span>{change.docTitle}</span>\n                    </button>\n                    <div className={`${baseClass}__row-content`}>\n                      <Pill\n                        className={`${baseClass}__operation`}\n                        pillStyle={operationPillStyle[change.operation]}\n                        size=\"small\"\n                      >\n                        {t(`branching:operation_${change.operation}` as Parameters<typeof t>[0])}\n                      </Pill>\n                      <Pill className={`${baseClass}__entity`} pillStyle=\"light-gray\" size=\"small\">\n                        {getTranslation(\n                          globalConfig\n                            ? (globalConfig.label ?? change.globalSlug)\n                            : (collectionConfig?.labels?.singular ?? change.collectionSlug),\n                          i18n,\n                        )}\n                      </Pill>\n                      {/* A merged delete has no document left to open. A global has\n                          somewhere to go instead: its own edit view. */}\n                      {change.operation === 'delete' ? (\n                        <span className={`${baseClass}__title`}>{change.docTitle}</span>\n                      ) : (\n                        <Link\n                          className={`${baseClass}__title ${baseClass}__title--link`}\n                          href={formatAdminURL({\n                            adminRoute: config.routes.admin,\n                            path: change.globalSlug\n                              ? `/globals/${change.globalSlug}`\n                              : `/collections/${change.collectionSlug}/${change.docID}`,\n                          })}\n                        >\n                          {change.docTitle}\n                        </Link>\n                      )}\n                      <ChevronIcon\n                        className={`${baseClass}__indicator`}\n                        direction={isExpanded ? 'up' : 'down'}\n                        size={16}\n                      />\n                    </div>\n                  </div>\n\n                  {isExpanded && (\n                    <div className={`${baseClass}__diff`}>\n                      {state?.status === 'ready' ? state.result?.diff : null}\n                      {state?.status === 'loading' || !state ? (\n                        <ShimmerEffect height=\"3rem\" />\n                      ) : null}\n                      {state?.status === 'error' ? (\n                        <p className={`${baseClass}__error`}>{t('error:unknown')}</p>\n                      ) : null}\n                    </div>\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        </section>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Branch/ScheduledMerges/index.css

@@ -0,0 +1,83 @@
+@layer payload-default {
+  /* One line, stated plainly, above everything it qualifies. */
+  .scheduled-merges__banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    margin-block-end: var(--spacer-3);
+    padding: var(--spacer-2) var(--spacer-3);
+    border: var(--stroke-width-small) solid var(--color-border-success);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg-success-tertiary);
+  }
+
+  .scheduled-merges__banner-text {
+    min-width: 0;
+  }
+
+  .scheduled-merges__banner-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .scheduled-merges__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-4);
+  }
+
+  .scheduled-merges__schedule-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    margin-block-end: var(--spacer-2);
+  }
+
+  .scheduled-merges__when,
+  .scheduled-merges__manage-when {
+    margin: 0;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .scheduled-merges__meta,
+  .scheduled-merges__empty {
+    color: var(--color-text-secondary);
+  }
+
+  .scheduled-merges__manage-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .scheduled-merges__manage-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    padding-block-end: var(--spacer-3);
+    border-block-end: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  /* Stacked, so the date leads and the ledger reads underneath it. */
+  .scheduled-merges__manage-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+    min-width: 0;
+  }
+
+  .scheduled-merges__manage-row:last-child {
+    padding-block-end: 0;
+    border-block-end: none;
+  }
+}

package/dist/views/Branch/ScheduledMerges/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { BranchChange } from '../ChangedDocuments/index.js';
+import './index.css';
+export type ScheduledMerge = {
+    /** The documents this schedule will apply, resolved against what is pending now. */
+    changes: BranchChange[];
+    closeBranch: boolean;
+    /** `payload-jobs` row ID, which is also the handle for cancelling it. */
+    id: string;
+    /** True when the schedule named no selection, so it takes whatever is pending. */
+    isEverything: boolean;
+    waitUntil: string;
+};
+/**
+ * What a branch is about to merge, and when.
+ *
+ * A banner says it in one line, because it changes what everything below it means: the
+ * pending changes are no longer only a proposal, they are a proposal with a date on it.
+ * Below that each schedule lists the documents it will apply, expandable to the same
+ * diff the review list shows — the diff is against main either way, so it is the same
+ * question asked about a future moment.
+ *
+ * Several schedules can coexist: schedule a merge, keep working, schedule another. The
+ * banner names the soonest and the modal holds the rest, which is why actions live
+ * there rather than being repeated per row.
+ */
+export declare const ScheduledMerges: React.FC<{
+    branchID: number | string;
+    branchSlug: string;
+    schedules: ScheduledMerge[];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Branch/ScheduledMerges/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Branch/ScheduledMerges/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAiBhE,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,cAAc,GAAG;IAC3B,oFAAoF;IACpF,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,WAAW,EAAE,OAAO,CAAA;IACpB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAA;IACV,kFAAkF;IAClF,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,cAAc,EAAE,CAAA;CAC5B,CA2HA,CAAA"}

package/dist/views/Branch/ScheduledMerges/index.js

@@ -0,0 +1,183 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '../../../elements/Button/index.js';
+import { ChangeSummary } from '../../../elements/ChangeSummary/index.js';
+import { DialogBody, DialogFooter, DialogHeader, DialogModal } from '../../../elements/Dialog/index.js';
+import { useModal } from '../../../elements/Modal/index.js';
+import { Pill } from '../../../elements/Pill/index.js';
+import { useRouter } from '../../../providers/RouterAdapter/index.js';
+import { useRouteTransition } from '../../../providers/RouteTransition/index.js';
+import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { ChangedDocuments } from '../ChangedDocuments/index.js';
+import './index.css';
+const baseClass = 'scheduled-merges';
+const formatWhen = value => new Date(value).toLocaleString(undefined, {
+  dateStyle: 'long',
+  timeStyle: 'short'
+});
+/**
+ * What a branch is about to merge, and when.
+ *
+ * A banner says it in one line, because it changes what everything below it means: the
+ * pending changes are no longer only a proposal, they are a proposal with a date on it.
+ * Below that each schedule lists the documents it will apply, expandable to the same
+ * diff the review list shows — the diff is against main either way, so it is the same
+ * question asked about a future moment.
+ *
+ * Several schedules can coexist: schedule a merge, keep working, schedule another. The
+ * banner names the soonest and the modal holds the rest, which is why actions live
+ * there rather than being repeated per row.
+ */
+export const ScheduledMerges = ({
+  branchID,
+  branchSlug,
+  schedules
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const {
+    serverFunction
+  } = useServerFunctions();
+  const router = useRouter();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  const [isWorking, setIsWorking] = useState(false);
+  const modalSlug = `scheduled-merges-${branchID}`;
+  const soonest = schedules[0];
+  const handleCancel = useCallback(async deleteID => {
+    setIsWorking(true);
+    try {
+      await serverFunction({
+        name: 'schedule-merge',
+        args: {
+          deleteID
+        }
+      });
+      toast.success(t('branching:scheduleCancelled'));
+      closeModal(modalSlug);
+      startRouteTransition(() => router.refresh());
+    } catch (_err) {
+      toast.error(t('error:unknown'));
+    } finally {
+      setIsWorking(false);
+    }
+  }, [closeModal, modalSlug, router, serverFunction, startRouteTransition, t]);
+  if (!soonest) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__banner`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__banner-text`,
+        children: t('branching:scheduledToMergeOn', {
+          date: formatWhen(soonest.waitUntil)
+        })
+      }), /*#__PURE__*/_jsxs("span", {
+        className: `${baseClass}__banner-actions`,
+        children: [schedules.length > 1 && /*#__PURE__*/_jsx(Pill, {
+          pillStyle: "light-gray",
+          size: "small",
+          children: t('branching:scheduleCount', {
+            count: schedules.length
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "secondary",
+          onClick: () => openModal(modalSlug),
+          size: "medium",
+          children: t('branching:manage')
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__list`,
+      children: schedules.map(schedule => /*#__PURE__*/_jsxs("section", {
+        className: `${baseClass}__schedule`,
+        children: [/*#__PURE__*/_jsxs("header", {
+          className: `${baseClass}__schedule-header`,
+          children: [/*#__PURE__*/_jsx("h4", {
+            className: `${baseClass}__when`,
+            children: formatWhen(schedule.waitUntil)
+          }), /*#__PURE__*/_jsxs("span", {
+            className: `${baseClass}__meta`,
+            children: [schedule.isEverything ? t('branching:scheduleWillApplyAll', {
+              count: schedule.changes.length
+            }) : t('branching:scheduleWillApplySelected', {
+              count: schedule.changes.length
+            }), schedule.closeBranch ? ` · ${t('branching:closeBranchAfterMerge')}` : '']
+          })]
+        }), schedule.changes.length > 0 ?
+        // Read-only: what merges is decided, and the checkboxes on the review
+        // list below are for a different, immediate decision.
+        /*#__PURE__*/
+        _jsx(ChangedDocuments, {
+          branch: branchSlug,
+          changes: schedule.changes,
+          selectable: false
+        }) :
+        // A selection whose changes were all discarded since. The job will still
+        // fire and find nothing, which is harmless but worth saying.
+        /*#__PURE__*/
+        _jsx("p", {
+          className: `${baseClass}__empty`,
+          children: t('branching:scheduleHasNothingLeft')
+        })]
+      }, schedule.id))
+    }), /*#__PURE__*/_jsxs(DialogModal, {
+      className: baseClass,
+      closeOnBlur: true,
+      slug: modalSlug,
+      children: [/*#__PURE__*/_jsx(DialogHeader, {
+        showClose: true,
+        title: t('branching:scheduledMerges')
+      }), /*#__PURE__*/_jsx(DialogBody, {
+        children: /*#__PURE__*/_jsx("ul", {
+          className: `${baseClass}__manage-list`,
+          children: schedules.map(schedule_0 => /*#__PURE__*/_jsxs("li", {
+            className: `${baseClass}__manage-row`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__manage-details`,
+              children: [/*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__manage-when`,
+                children: formatWhen(schedule_0.waitUntil)
+              }), /*#__PURE__*/_jsxs("span", {
+                className: `${baseClass}__meta`,
+                children: [schedule_0.isEverything ? t('branching:scheduleWillApplyAll', {
+                  count: schedule_0.changes.length
+                }) : t('branching:scheduleWillApplySelected', {
+                  count: schedule_0.changes.length
+                }), schedule_0.closeBranch ? ` · ${t('branching:closeBranchAfterMerge')}` : '']
+              }), /*#__PURE__*/_jsx(ChangeSummary, {
+                changes: schedule_0.changes,
+                showOperations: true
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              buttonStyle: "destructive",
+              disabled: isWorking,
+              onClick: () => void handleCancel(schedule_0.id),
+              size: "medium",
+              children: t('branching:cancelSchedule')
+            })]
+          }, schedule_0.id))
+        })
+      }), /*#__PURE__*/_jsx(DialogFooter, {
+        children: /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "secondary",
+          onClick: () => closeModal(modalSlug),
+          size: "medium",
+          children: t('general:close')
+        })
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Branch/ScheduledMerges/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useState","toast","Button","ChangeSummary","DialogBody","DialogFooter","DialogHeader","DialogModal","useModal","Pill","useRouter","useRouteTransition","useServerFunctions","useTranslation","ChangedDocuments","baseClass","formatWhen","value","Date","toLocaleString","undefined","dateStyle","timeStyle","ScheduledMerges","branchID","branchSlug","schedules","t","closeModal","openModal","serverFunction","router","startRouteTransition","isWorking","setIsWorking","modalSlug","soonest","handleCancel","deleteID","name","args","success","refresh","_err","error","_jsxs","Fragment","className","_jsx","date","waitUntil","length","pillStyle","size","count","buttonStyle","onClick","map","schedule","isEverything","changes","closeBranch","branch","selectable","id","closeOnBlur","slug","showClose","title","showOperations","disabled"],"sources":["../../../../src/views/Branch/ScheduledMerges/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { BranchChange } from '../ChangedDocuments/index.js'\n\nimport { Button } from '../../../elements/Button/index.js'\nimport { ChangeSummary } from '../../../elements/ChangeSummary/index.js'\nimport {\n  DialogBody,\n  DialogFooter,\n  DialogHeader,\n  DialogModal,\n} from '../../../elements/Dialog/index.js'\nimport { useModal } from '../../../elements/Modal/index.js'\nimport { Pill } from '../../../elements/Pill/index.js'\nimport { useRouter } from '../../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../../providers/RouteTransition/index.js'\nimport { useServerFunctions } from '../../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { ChangedDocuments } from '../ChangedDocuments/index.js'\nimport './index.css'\n\nconst baseClass = 'scheduled-merges'\n\nexport type ScheduledMerge = {\n  /** The documents this schedule will apply, resolved against what is pending now. */\n  changes: BranchChange[]\n  closeBranch: boolean\n  /** `payload-jobs` row ID, which is also the handle for cancelling it. */\n  id: string\n  /** True when the schedule named no selection, so it takes whatever is pending. */\n  isEverything: boolean\n  waitUntil: string\n}\n\nconst formatWhen = (value: string) =>\n  new Date(value).toLocaleString(undefined, { dateStyle: 'long', timeStyle: 'short' })\n\n/**\n * What a branch is about to merge, and when.\n *\n * A banner says it in one line, because it changes what everything below it means: the\n * pending changes are no longer only a proposal, they are a proposal with a date on it.\n * Below that each schedule lists the documents it will apply, expandable to the same\n * diff the review list shows — the diff is against main either way, so it is the same\n * question asked about a future moment.\n *\n * Several schedules can coexist: schedule a merge, keep working, schedule another. The\n * banner names the soonest and the modal holds the rest, which is why actions live\n * there rather than being repeated per row.\n */\nexport const ScheduledMerges: React.FC<{\n  branchID: number | string\n  branchSlug: string\n  schedules: ScheduledMerge[]\n}> = ({ branchID, branchSlug, schedules }) => {\n  const { t } = useTranslation()\n  const { closeModal, openModal } = useModal()\n  const { serverFunction } = useServerFunctions()\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const [isWorking, setIsWorking] = useState(false)\n\n  const modalSlug = `scheduled-merges-${branchID}`\n  const soonest = schedules[0]\n\n  const handleCancel = useCallback(\n    async (deleteID: string) => {\n      setIsWorking(true)\n\n      try {\n        await serverFunction({ name: 'schedule-merge', args: { deleteID } })\n        toast.success(t('branching:scheduleCancelled'))\n        closeModal(modalSlug)\n        startRouteTransition(() => router.refresh())\n      } catch (_err) {\n        toast.error(t('error:unknown'))\n      } finally {\n        setIsWorking(false)\n      }\n    },\n    [closeModal, modalSlug, router, serverFunction, startRouteTransition, t],\n  )\n\n  if (!soonest) {\n    return null\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`${baseClass}__banner`}>\n        <span className={`${baseClass}__banner-text`}>\n          {t('branching:scheduledToMergeOn', { date: formatWhen(soonest.waitUntil) })}\n        </span>\n        <span className={`${baseClass}__banner-actions`}>\n          {schedules.length > 1 && (\n            <Pill pillStyle=\"light-gray\" size=\"small\">\n              {t('branching:scheduleCount', { count: schedules.length })}\n            </Pill>\n          )}\n          <Button buttonStyle=\"secondary\" onClick={() => openModal(modalSlug)} size=\"medium\">\n            {t('branching:manage')}\n          </Button>\n        </span>\n      </div>\n\n      <div className={`${baseClass}__list`}>\n        {schedules.map((schedule) => (\n          <section className={`${baseClass}__schedule`} key={schedule.id}>\n            <header className={`${baseClass}__schedule-header`}>\n              <h4 className={`${baseClass}__when`}>{formatWhen(schedule.waitUntil)}</h4>\n              <span className={`${baseClass}__meta`}>\n                {schedule.isEverything\n                  ? t('branching:scheduleWillApplyAll', { count: schedule.changes.length })\n                  : t('branching:scheduleWillApplySelected', { count: schedule.changes.length })}\n                {schedule.closeBranch ? ` · ${t('branching:closeBranchAfterMerge')}` : ''}\n              </span>\n            </header>\n\n            {schedule.changes.length > 0 ? (\n              // Read-only: what merges is decided, and the checkboxes on the review\n              // list below are for a different, immediate decision.\n              <ChangedDocuments branch={branchSlug} changes={schedule.changes} selectable={false} />\n            ) : (\n              // A selection whose changes were all discarded since. The job will still\n              // fire and find nothing, which is harmless but worth saying.\n              <p className={`${baseClass}__empty`}>{t('branching:scheduleHasNothingLeft')}</p>\n            )}\n          </section>\n        ))}\n      </div>\n\n      {/* Cancelling is the only reason to open this, so it is the action on every row\n          rather than a footer CTA — and it is destructive, so it says so. Scheduling\n          another belongs to the merge modal, which is one click away on the banner. */}\n      <DialogModal className={baseClass} closeOnBlur slug={modalSlug}>\n        <DialogHeader showClose title={t('branching:scheduledMerges')} />\n        <DialogBody>\n          <ul className={`${baseClass}__manage-list`}>\n            {schedules.map((schedule) => (\n              <li className={`${baseClass}__manage-row`} key={schedule.id}>\n                <div className={`${baseClass}__manage-details`}>\n                  <span className={`${baseClass}__manage-when`}>\n                    {formatWhen(schedule.waitUntil)}\n                  </span>\n                  <span className={`${baseClass}__meta`}>\n                    {schedule.isEverything\n                      ? t('branching:scheduleWillApplyAll', { count: schedule.changes.length })\n                      : t('branching:scheduleWillApplySelected', {\n                          count: schedule.changes.length,\n                        })}\n                    {schedule.closeBranch ? ` · ${t('branching:closeBranchAfterMerge')}` : ''}\n                  </span>\n                  {/* What is actually merging, which is the thing a date alone does not\n                      say — and the reason someone opened this to cancel. */}\n                  <ChangeSummary changes={schedule.changes} showOperations />\n                </div>\n                <Button\n                  buttonStyle=\"destructive\"\n                  disabled={isWorking}\n                  onClick={() => void handleCancel(schedule.id)}\n                  size=\"medium\"\n                >\n                  {t('branching:cancelSchedule')}\n                </Button>\n              </li>\n            ))}\n          </ul>\n        </DialogBody>\n        <DialogFooter>\n          <Button buttonStyle=\"secondary\" onClick={() => closeModal(modalSlug)} size=\"medium\">\n            {t('general:close')}\n          </Button>\n        </DialogFooter>\n      </DialogModal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Branch/index.css

@@ -0,0 +1,77 @@
+@layer payload-default {
+  /* The header band supplies the separation the list used to get from a margin
+     on the heading it replaced. */
+  .branch-changes {
+    padding-block-start: var(--spacer-3);
+  }
+
+  /* Matches `doc-controls`, the bar directly above it, so the two read as one
+     stack of header bands rather than a band and a heading. */
+  .branch-changes__controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    width: 100%;
+    padding: var(--spacer-2-5) var(--gutter-h);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    background-color: var(--color-bg);
+  }
+
+  .branch-changes__title {
+    margin: 0;
+    font-family: var(--text-heading-medium-font-family);
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+    letter-spacing: var(--text-heading-medium-letter-spacing);
+  }
+
+  .branch-changes__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  /* Separated by space rather than a rule: the section headings already divide them,
+     and a border here would compete with the bordered rows inside each. */
+  .branch-changes__section + .branch-changes__section {
+    margin-block-start: var(--spacer-6);
+  }
+
+  .branch-changes__section-title {
+    margin-block: 0 var(--spacer-2);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+  }
+
+  .branch-changes__history-pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-3);
+    margin-block-start: var(--spacer-4);
+  }
+
+  .branch-changes__history-page[aria-disabled='true'] {
+    pointer-events: none;
+    color: var(--color-text-disabled);
+  }
+
+  .branch-changes__history-position,
+  .branch-changes__since,
+  .branch-changes__empty,
+  .branch-changes__closed {
+    color: var(--color-text-secondary);
+  }
+
+  .branch-changes__since {
+    margin-block: 0 var(--spacer-2);
+  }
+
+  .branch-changes__closed {
+    margin-block: 0 var(--spacer-3);
+  }
+}