@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/PagesListView.tsx

@@ -1,13 +1,59 @@
 import { useState, type ReactNode } from "react";
 import { toast } from "sonner";
-import { Plus, Trash2, Pencil, Globe as GlobeIcon, ExternalLink, Undo2 } from "lucide-react";
+import {
+  Plus,
+  Trash2,
+  Pencil,
+  Globe as GlobeIcon,
+  ExternalLink,
+  Undo2,
+  Copy,
+  Eye,
+  EyeOff,
+} from "lucide-react";
+import { ConfirmDialog } from "./media/ConfirmDialog";
+import { PageStatusBadge, PublicationBadge } from "./StatusBadge";
+import {
+  duplicateNameFor,
+  isValidPageKey,
+  normalizePageStatus,
+  slugifyPageKey,
+  statusChangeConfirmation,
+  uniquePageKey,
+  type PageStatus,
+} from "../cms/page-status";
+import {
+  isPubliclyVisible,
+  type PublicationState,
+  type PublicationTransitionKind,
+} from "../cms/page-publication";
+import { usePublicationBoundaryRefresh } from "../cms/use-publication-boundary";
 
 /** A page row as listed by the host. */
 export type PageListRow = {
   id: string;
   key: string;
   name: string;
+  /**
+   * The editorial status an editor last set. Shown, but never used to decide
+   * what the screen says about visitors or which action to offer — see
+   * `publication` for that.
+   */
   status: string;
+  /**
+   * What a visitor actually gets, derived from the page's active publication
+   * rows by `listPagesCore`. A draft inside an open window is public; a
+   * published page past its end date is not.
+   */
+  publication: PublicationState;
+  /** When `publication` changes next, ISO-8601, or null when nothing is due. */
+  publication_at?: string | null;
+  /**
+   * What happens then: a first publish, one version replacing another, or the
+   * page going away. A live page with an update queued behind it is still live,
+   * and a list that shows it as merely "Scheduled" is wrong about today.
+   */
+  publication_transition?: PublicationTransitionKind | null;
   updated_at: string;
   is_system?: boolean | null;
 };
@@ -35,6 +81,17 @@ export type PagesListDeps = {
   hrefFor: (key: string) => string;
   createPage: (input: { key: string; name: string }) => Promise<unknown>;
   renamePage: (input: { pageId: string; name: string }) => Promise<unknown>;
+  /**
+   * Publish or unpublish, always behind a confirmation. Optional: a host that
+   * has not wired it up simply does not show the action.
+   */
+  setPageStatus?: (input: { pageId: string; status: PageStatus }) => Promise<unknown>;
+  /** Copy a page into a new draft. Optional for the same reason. */
+  duplicatePage?: (input: {
+    pageId: string;
+    name: string;
+    key?: string;
+  }) => Promise<{ id: string; key: string; name: string }>;
   deletePage: (pageId: string) => Promise<unknown>;
   restorePage: (pageId: string) => Promise<unknown>;
   purgePage: (pageId: string) => Promise<unknown>;
@@ -56,6 +113,8 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
     hrefFor,
     createPage,
     renamePage,
+    setPageStatus,
+    duplicatePage,
     deletePage,
     restorePage,
     purgePage,
@@ -69,9 +128,101 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
   const [newName, setNewName] = useState("");
   const [busy, setBusy] = useState(false);
   const [renaming, setRenaming] = useState<{ id: string; name: string } | null>(null);
+  const [statusChange, setStatusChange] = useState<{
+    page: PageListRow;
+    next: PageStatus;
+  } | null>(null);
+  const [duplicating, setDuplicating] = useState<{
+    page: PageListRow;
+    name: string;
+    key: string;
+    keyTouched: boolean;
+  } | null>(null);
 
   const fail = (e: unknown) => toast.error(e instanceof Error ? e.message : "Failed");
 
+  /**
+   * Re-read the list when the soonest scheduled transition falls due.
+   *
+   * This screen is a dashboard; it is left open. One timer for the earliest
+   * boundary is enough, because reaching it refetches every row and the next
+   * earliest becomes the new deadline. The waiting itself — including a
+   * boundary whose fresh data has not arrived yet — belongs to the hook.
+   */
+  const nextBoundary = (pages ?? []).reduce<number | null>((soonest, page) => {
+    const at = page.publication_at ? Date.parse(page.publication_at) : NaN;
+    if (Number.isNaN(at)) return soonest;
+    return soonest === null || at < soonest ? at : soonest;
+  }, null);
+  usePublicationBoundaryRefresh(nextBoundary, refetchPages);
+
+  const takenKeys = (pages ?? []).map((p) => p.key);
+  const duplicateKey = duplicating
+    ? duplicating.keyTouched
+      ? slugifyPageKey(duplicating.key)
+      : uniquePageKey(duplicating.name || duplicating.page.name, takenKeys)
+    : "";
+  /*
+   * The two fields are validated separately so the message can be attached to
+   * the field it is actually about: a screen reader hears the problem on the
+   * control that has to change, not on whichever one comes first in the DOM.
+   */
+  const duplicateNameProblem =
+    duplicating && !duplicating.name.trim() ? "A name is required." : null;
+  const duplicateKeyProblem =
+    !duplicating || duplicateNameProblem
+      ? null
+      : !duplicateKey || !isValidPageKey(duplicateKey)
+        ? "The address may only contain lowercase letters, numbers, dashes and underscores."
+        : takenKeys.includes(duplicateKey)
+          ? `Another page already uses the address "${duplicateKey}".`
+          : null;
+  const duplicateProblem = duplicateNameProblem ?? duplicateKeyProblem;
+
+  /**
+   * Publishing and unpublishing are never one click: both directions open the
+   * dialog below and are only applied once it is confirmed.
+   */
+  const onConfirmStatus = async () => {
+    if (!statusChange || !setPageStatus) return;
+    setBusy(true);
+    try {
+      await setPageStatus({ pageId: statusChange.page.id, status: statusChange.next });
+      toast.success(
+        statusChange.next === "published"
+          ? `"${statusChange.page.name}" is now visible on the public website`
+          : `"${statusChange.page.name}" is no longer visible on the public website`,
+      );
+      setStatusChange(null);
+      refetchPages();
+    } catch (e) {
+      fail(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onConfirmDuplicate = async () => {
+    if (!duplicating || !duplicatePage || duplicateProblem) return;
+    setBusy(true);
+    try {
+      const copy = await duplicatePage({
+        pageId: duplicating.page.id,
+        name: duplicating.name.trim(),
+        key: duplicateKey,
+      });
+      setDuplicating(null);
+      refetchPages();
+      toast.success(`Copied as the draft "${copy?.name ?? duplicating.name}"`, {
+        action: { label: "Edit copy", onClick: () => openEditor(copy?.key ?? duplicateKey) },
+      });
+    } catch (e) {
+      fail(e);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const onRename = async () => {
     if (!renaming || !renaming.name.trim()) return;
     try {
@@ -166,8 +317,10 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
       </div>
 
       <p className="mt-4 max-w-2xl text-sm text-ink/60">
-        Compose each page from blocks and global blocks. Every save creates a new version — publish
-        when ready.
+        Compose each page from blocks and global blocks. Every save creates a new version. The
+        status column is what a visitor gets right now: a page can also be scheduled to appear or
+        disappear on its own, so it does not always match the editorial status underneath. Anything
+        that is not public stays editable and previewable by signed-in staff.
       </p>
 
       <div className="mt-8 border border-ink/10 bg-white">
@@ -177,9 +330,9 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
               <th className="px-4 py-3">Name</th>
               <th className="px-4 py-3">Key</th>
               <th className="px-4 py-3">URL</th>
-              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Public status</th>
               <th className="px-4 py-3">Updated</th>
-              <th className="px-4 py-3 w-40"></th>
+              <th className="px-4 py-3 w-64 text-right">Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -236,23 +389,66 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
                     <ExternalLink className="size-3 text-ink/40" />
                   </a>
                 </td>
-                <td className="px-4 py-3 text-ink/70">{p.status}</td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-col items-start gap-1">
+                    <PublicationBadge
+                      state={p.publication}
+                      at={p.publication_at}
+                      transition={p.publication_transition}
+                    />
+                    <PageStatusBadge status={normalizePageStatus(p.status)} />
+                  </div>
+                </td>
                 <td className="px-4 py-3 text-ink/50">{new Date(p.updated_at).toLocaleString()}</td>
-                <td className="px-4 py-3 text-right">
-                  <button
-                    onClick={() => openEditor(p.key)}
-                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
-                  >
-                    <Pencil className="size-3.5" /> Edit
-                  </button>
-                  {!p.is_system && (
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-1">
                     <button
-                      onClick={() => onDelete(p.id, p.name)}
-                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                      onClick={() => openEditor(p.key)}
+                      className="inline-flex items-center gap-1 text-sea hover:underline"
                     >
-                      <Trash2 className="size-3.5" /> Delete
+                      <Pencil className="size-3.5" /> Edit
                     </button>
-                  )}
+                    {setPageStatus ? (
+                      isPubliclyVisible(p.publication) ? (
+                        <button
+                          onClick={() => setStatusChange({ page: p, next: "draft" })}
+                          className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
+                        >
+                          <EyeOff className="size-3.5" /> Unpublish
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => setStatusChange({ page: p, next: "published" })}
+                          className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
+                        >
+                          <Eye className="size-3.5" /> Publish
+                        </button>
+                      )
+                    ) : null}
+                    {duplicatePage ? (
+                      <button
+                        onClick={() =>
+                          setDuplicating({
+                            page: p,
+                            name: duplicateNameFor(p.name),
+                            key: "",
+                            keyTouched: false,
+                          })
+                        }
+                        className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
+                      >
+                        <Copy className="size-3.5" /> Duplicate
+                      </button>
+                    ) : null}
+                    {!p.is_system && (
+                      <button
+                        onClick={() => onDelete(p.id, p.name)}
+                        className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                      >
+                        <Trash2 className="size-3.5" /> Delete
+                      </button>
+                    )}
+                  </div>
                 </td>
               </tr>
             ))}
@@ -333,7 +529,10 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
 
       <div className="mt-10 border border-ink/10 bg-white p-6">
         <div className="font-serif text-lg text-ink">New page</div>
-        <p className="text-sm text-ink/60 mt-1">Create a blank page — you can add blocks after.</p>
+        <p className="text-sm text-ink/60 mt-1">
+          Create a blank page — you can add blocks after. A new page starts as a draft and is not
+          visible on the public website until you publish it.
+        </p>
         <div className="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]">
           <label className="block">
             <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">Name</span>
@@ -364,6 +563,82 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
           </button>
         </div>
       </div>
+
+      {statusChange ? (
+        <ConfirmDialog
+          title={statusChange.next === "published" ? "Publish page" : "Unpublish page"}
+          description={statusChangeConfirmation(
+            statusChange.next,
+            statusChange.page.publication,
+            statusChange.page.publication_transition,
+          )}
+          details={[`${statusChange.page.name} — ${pathFor(statusChange.page.key)}`]}
+          confirmLabel={statusChange.next === "published" ? "Publish" : "Unpublish"}
+          danger={statusChange.next !== "published"}
+          busy={busy}
+          onConfirm={onConfirmStatus}
+          onCancel={() => setStatusChange(null)}
+        />
+      ) : null}
+
+      {duplicating ? (
+        <ConfirmDialog
+          title="Duplicate page"
+          description={`A copy of "${duplicating.page.name}" is created as a new draft. The original is not changed.`}
+          confirmLabel="Create copy"
+          busy={busy}
+          onConfirm={onConfirmDuplicate}
+          onCancel={() => setDuplicating(null)}
+        >
+          <div className="space-y-3">
+            <label className="block">
+              <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+                Name of the copy
+              </span>
+              <input
+                autoFocus
+                value={duplicating.name}
+                onChange={(e) => setDuplicating({ ...duplicating, name: e.target.value })}
+                aria-invalid={duplicateNameProblem ? true : undefined}
+                aria-describedby={duplicateNameProblem ? "duplicate-page-problem" : undefined}
+                className="w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <div>
+              <label className="block">
+                <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+                  Address
+                </span>
+                <input
+                  value={duplicateKey}
+                  onChange={(e) =>
+                    setDuplicating({ ...duplicating, key: e.target.value, keyTouched: true })
+                  }
+                  aria-invalid={duplicateKeyProblem ? true : undefined}
+                  aria-describedby={`duplicate-page-hint${
+                    duplicateKeyProblem ? " duplicate-page-problem" : ""
+                  }`}
+                  className="w-full border border-ink/20 px-3 py-2 text-sm font-mono"
+                />
+              </label>
+              {/* Outside the label: inside it, the hint would be read out as
+                  part of the field's name every time the field is reached. */}
+              <span id="duplicate-page-hint" className="mt-1 block text-[0.7rem] text-ink/50">
+                Suggested from the name, and made unique automatically.
+              </span>
+            </div>
+            {duplicateProblem ? (
+              <p id="duplicate-page-problem" className="text-xs text-red-600">
+                {duplicateProblem}
+              </p>
+            ) : (
+              <p className="text-xs text-ink/50">
+                The copy is a draft, so nothing appears on the public website until you publish it.
+              </p>
+            )}
+          </div>
+        </ConfirmDialog>
+      ) : null}
     </div>
   );
 }

package/src/backoffice/ScheduleFields.tsx

@@ -0,0 +1,151 @@
+/**
+ * The one editor for scheduled visibility.
+ *
+ * Menu items, footer columns and footer links all use this control, so the
+ * vocabulary, the timezone handling and the validation are identical wherever
+ * scheduling appears. Editors type wall-clock time in the site's timezone; what
+ * is stored is always a UTC instant, converted here and nowhere else.
+ */
+
+import { useId, useState } from "react";
+import {
+  EMPTY_VISIBILITY_SCHEDULE,
+  isoToLocalInput,
+  localInputToIso,
+  normalizeSchedule,
+  scheduleProblems,
+  visibilityStateAt,
+  type VisibilitySchedule,
+} from "../cms/visibility-schedule";
+import { zoneAbbreviation, zonedLocalExists } from "../cms/timezone";
+import { siteTimezone } from "../config/site-config";
+import { VisibilityBadge } from "./StatusBadge";
+
+export type ScheduleFieldProps = {
+  value: VisibilitySchedule | null | undefined;
+  onChange: (next: VisibilitySchedule) => void;
+  /** IANA zone the wall-clock inputs are read in; the site's zone by default. */
+  timezone?: string | null;
+  /** Evaluation instant; passed in so previews and tests are deterministic. */
+  now?: number;
+  /** Heading shown above the controls. */
+  label?: string;
+};
+
+/**
+ * Visible/hidden switch plus an optional publish window.
+ *
+ * Nonsensical ranges are reported as they are typed: the end field is marked
+ * invalid and the problem is spelled out under the fields, associated with them
+ * through `aria-describedby`. A wall-clock time the site's timezone never
+ * reaches — the hour a spring-forward transition skips — is refused outright
+ * rather than stored as the shifted instant it would resolve to.
+ */
+export function ScheduleField({
+  value,
+  onChange,
+  timezone: timezoneProp,
+  now = Date.now(),
+  label = "Visibility",
+}: ScheduleFieldProps) {
+  const id = useId();
+  const timezone = timezoneProp || siteTimezone();
+  const schedule = normalizeSchedule(value) ?? EMPTY_VISIBILITY_SCHEDULE;
+  const enabled = schedule.enabled !== false;
+  const problems = scheduleProblems(schedule);
+  const [skipped, setSkipped] = useState<Partial<Record<"publishAt" | "unpublishAt", string>>>({});
+  const state = visibilityStateAt(schedule, now);
+  const zone = zoneAbbreviation(timezone);
+
+  const patch = (next: Partial<VisibilitySchedule>) => onChange({ ...schedule, ...next });
+
+  /*
+   * A time in the hour a spring-forward transition skips resolves to a real
+   * instant an hour away from what was typed, which would schedule the item at
+   * a time nobody chose. Refuse it instead: the field keeps its previous value
+   * and says why, so nothing is stored silently.
+   */
+  const setInstant = (key: "publishAt" | "unpublishAt", local: string) => {
+    if (local && !zonedLocalExists(local, timezone)) {
+      setSkipped((prev) => ({ ...prev, [key]: local }));
+      return;
+    }
+    setSkipped((prev) => (prev[key] ? { ...prev, [key]: undefined } : prev));
+    patch({ [key]: local ? localInputToIso(local, timezone) : null });
+  };
+
+  const skippedProblems = (["publishAt", "unpublishAt"] as const)
+    .filter((key) => skipped[key])
+    .map(
+      (key) =>
+        `${key === "publishAt" ? "Start" : "End"} time ${skipped[key]?.replace("T", " ")} does not exist in ${zone} — the clocks jump forward that night. Pick another time.`,
+    );
+  const allProblems = [...problems, ...skippedProblems];
+
+  return (
+    <fieldset className="border border-ink/10 bg-ice/20 px-3 py-3">
+      <legend className="px-1 text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">{label}</legend>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <label className="flex items-center gap-2 text-sm text-ink/75">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={(e) => patch({ enabled: e.target.checked })}
+            className="size-4 accent-sea"
+          />
+          Show this item
+        </label>
+        <VisibilityBadge state={state} />
+      </div>
+
+      <div
+        className={[
+          "mt-3 grid gap-3 sm:grid-cols-2",
+          enabled ? "" : "opacity-50",
+        ].join(" ")}
+      >
+        <label className="block">
+          <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+            Show from (optional)
+          </span>
+          <input
+            type="datetime-local"
+            disabled={!enabled}
+            value={isoToLocalInput(schedule.publishAt, timezone)}
+            onChange={(e) => setInstant("publishAt", e.target.value)}
+            aria-invalid={skipped.publishAt ? true : undefined}
+            aria-describedby={`${id}-zone${allProblems.length ? ` ${id}-problems` : ""}`}
+            className="w-full border border-ink/20 bg-white px-3 py-2 text-sm disabled:bg-ink/[0.03]"
+          />
+        </label>
+        <label className="block">
+          <span className="block text-xs uppercase tracking-wider text-ink/60 mb-1">
+            Hide again at (optional)
+          </span>
+          <input
+            type="datetime-local"
+            disabled={!enabled}
+            value={isoToLocalInput(schedule.unpublishAt, timezone)}
+            onChange={(e) => setInstant("unpublishAt", e.target.value)}
+            aria-invalid={problems.length || skipped.unpublishAt ? true : undefined}
+            aria-describedby={`${id}-zone${allProblems.length ? ` ${id}-problems` : ""}`}
+            className="w-full border border-ink/20 bg-white px-3 py-2 text-sm disabled:bg-ink/[0.03]"
+          />
+        </label>
+      </div>
+
+      <p id={`${id}-zone`} className="mt-2 text-xs text-ink/50">
+        Times are in the site&rsquo;s timezone ({zone}). Leave both empty to show the item all the
+        time.
+      </p>
+      {allProblems.length ? (
+        <ul id={`${id}-problems`} className="mt-1 space-y-0.5 text-xs text-red-600">
+          {allProblems.map((problem) => (
+            <li key={problem}>{problem}</li>
+          ))}
+        </ul>
+      ) : null}
+    </fieldset>
+  );
+}

package/src/backoffice/SectionFormView.tsx

@@ -37,6 +37,15 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 
 import { MediaPickerDialog } from "./inspectors/fields";
+import { ScheduleField } from "./ScheduleFields";
+import { VisibilityBadge } from "./StatusBadge";
+import {
+  isEmptySchedule,
+  normalizeSchedule,
+  visibilityStateAt,
+  type VisibilitySchedule,
+  type VisibilityState,
+} from "../cms/visibility-schedule";
 
 /**
  * Generic recursive editor for CMS section values, shared by every site.
@@ -95,6 +104,11 @@ export type SectionFormDeps = {
   FocusPickerComponent: ComponentType<SectionFormFocusPickerProps>;
   /** Managed forms offered by the `formKey` picker. */
   forms: SectionFormManagedForm[];
+  /**
+   * IANA zone the scheduling fields read wall-clock time in. Defaults to the
+   * platform's own default when a host does not pass one.
+   */
+  timezone?: string;
 };
 
 const DepsContext = createContext<SectionFormDeps | null>(null);
@@ -184,6 +198,8 @@ function elementShape(...lists: (readonly unknown[] | undefined)[]): unknown {
 
 /** Keys under which a nested list holds items of the parent's own shape. */
 const TREE_KEYS = ["children", "items", "links"] as const;
+/** Field holding a {@link VisibilitySchedule}; see `cms/visibility-schedule`. */
+const SCHEDULE_KEY = "schedule";
 
 /**
  * Whether an object is a menu entry rather than a content row.
@@ -257,6 +273,24 @@ function Node({
   const deps = useDeps();
   const isLocalizedString = useIsLocalizedString();
 
+  // Scheduled visibility has one editor for the whole platform, so a menu item
+  // and a footer link cannot drift apart. Matched before anything else: the
+  // generic object field would show raw ISO strings, and the sibling-shape
+  // rule below would blank it to `enabled: false`, which is not what an
+  // unscheduled item means.
+  if (path.endsWith(`.${SCHEDULE_KEY}`) || path === SCHEDULE_KEY) {
+    if (value == null || isPlainObject(value)) {
+      return (
+        <ScheduleField
+          value={value as VisibilitySchedule | null}
+          onChange={(next) => onChange(next as unknown as AnyVal)}
+          timezone={deps.timezone}
+          label={fieldLabel ?? "Visibility"}
+        />
+      );
+    }
+  }
+
   // A field a particular item is missing, or that was saved as an empty
   // object, still has to be editable — and has to be edited with the right
   // control. The sibling example says which one, without writing anything:
@@ -657,6 +691,7 @@ function ArrayField({
                   lastIndex={value.length - 1}
                   open={openIdx === i}
                   summary={itemSummary(item, deps)}
+                  scheduleState={rowScheduleState(item)}
                   onToggle={() => setOpenIdx(openIdx === i ? null : i)}
                   onMoveUp={() => move(i, -1)}
                   onMoveDown={() => move(i, 1)}
@@ -695,12 +730,24 @@ function ArrayField({
   );
 }
 
+/**
+ * The badge state for a collapsed row: only rows that actually carry a
+ * schedule get one, so an unscheduled menu stays as quiet as it is today.
+ */
+function rowScheduleState(item: unknown): VisibilityState | null {
+  if (!isPlainObject(item)) return null;
+  const schedule = normalizeSchedule(item[SCHEDULE_KEY]);
+  if (isEmptySchedule(schedule)) return null;
+  return visibilityStateAt(schedule, Date.now());
+}
+
 function SortableArrayRow({
   id,
   index,
   lastIndex,
   open,
   summary,
+  scheduleState,
   onToggle,
   onMoveUp,
   onMoveDown,
@@ -712,6 +759,8 @@ function SortableArrayRow({
   lastIndex: number;
   open: boolean;
   summary: string;
+  /** Set only when this row carries a schedule; `null` renders no badge. */
+  scheduleState: VisibilityState | null;
   onToggle: () => void;
   onMoveUp: () => void;
   onMoveDown: () => void;
@@ -751,6 +800,11 @@ function SortableArrayRow({
           )}
           <span className="text-ink/50 shrink-0">#{index + 1}</span>
           <span className="text-ink truncate">{summary}</span>
+          {scheduleState ? (
+            <span className="shrink-0">
+              <VisibilityBadge state={scheduleState} />
+            </span>
+          ) : null}
         </button>
 
         <button
@@ -853,6 +907,10 @@ function ObjectField({
   const isTreeKey = (k: string) => (TREE_KEYS as readonly string[]).includes(k);
   const isLink = Boolean(inList) && isLinkNode(value, deps);
   if (isLink && !keys.some(isTreeKey)) keys.push(TREE_KEYS[0]);
+  // Every menu item and footer link can be scheduled, so the control sits with
+  // that item's own controls whether or not anything has been scheduled before.
+  // Like the submenu above, showing it writes nothing.
+  if (isLink && !keys.includes(SCHEDULE_KEY)) keys.push(SCHEDULE_KEY);
 
   const content = (
     <div className={depth === 0 ? "space-y-5" : "space-y-4"}>