@bygghammar/cms-platform 0.94.0 → 0.96.0

package/src/backoffice/PageBuilderView.tsx

@@ -20,7 +20,16 @@ import { usePublicationBoundaryRefresh } from "../cms/use-publication-boundary";
 import { zoneAbbreviation, zonedLocalExists, zonedLocalToInstant } from "../cms/timezone";
 import { siteTimezone } from "../config/site-config";
 import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
-import { PageStatusBadge, PublicationBadge } from "./StatusBadge";
+import { ListingBadge, PageStatusBadge, ProtectedBadge, PublicationBadge } from "./StatusBadge";
+import { ConfirmDialog } from "./media/ConfirmDialog";
+import {
+  linkOnlyConfirmation,
+  normalizePageListing,
+  PROTECTED_PAGE_REASON,
+  showOnWebsiteConfirmation,
+  unpublishConsequences,
+  type PageListing,
+} from "../cms/page-visibility";
 import {
   ArrowLeft,
   Save,
@@ -32,6 +41,9 @@ import {
   ExternalLink,
   Copy,
   Check,
+  EyeOff,
+  Link2,
+  ListChecks,
 } from "lucide-react";
 
 /** A page row as the builder needs it. */
@@ -57,6 +69,12 @@ export type BuilderPage = {
   publication_transition?: PublicationTransitionKind | null;
   /** The version showing after that, for a publish or a replacement. */
   publication_next_version_id?: string | null;
+  /** Listed (default) or link-only; independent of publication. */
+  listing?: PageListing;
+  /** Version token sent back with a listing change; null when never changed. */
+  listing_version?: string | null;
+  /** The start and contact pages: never unpublished, never unlisted. */
+  protected?: boolean;
 };
 
 /** One saved version, with its computed change summary. */
@@ -143,6 +161,22 @@ export type PageBuilderDeps<TBlock> = {
   cancelPublication: (publicationId: string, editSessionId?: string) => Promise<unknown>;
   restoreVersion: (versionId: string, editSessionId?: string) => Promise<unknown>;
   rename: (input: { pageId: string; name: string; editSessionId?: string }) => Promise<unknown>;
+  /**
+   * Take the page offline, behind a confirmation. Optional: without it the
+   * header offers no Unpublish.
+   */
+  setPageStatus?: (input: {
+    pageId: string;
+    status: "draft" | "published";
+    editSessionId?: string;
+  }) => Promise<unknown>;
+  /** Make the page link-only or list it again. Optional likewise. */
+  setPageListing?: (input: {
+    pageId: string;
+    listing: PageListing;
+    expectedVersion: string | null;
+    editSessionId?: string;
+  }) => Promise<unknown>;
   refetchPage: () => void;
   refetchVersions: () => void;
   refetchPublications: () => void;
@@ -192,6 +226,9 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
   const [renameValue, setRenameValue] = useState<string | null>(null);
   const [locale, setLocale] = useState<string>(defaultLocale);
   const [copied, setCopied] = useState(false);
+  const [visibilityDialog, setVisibilityDialog] = useState<
+    null | { kind: "unpublish" } | { kind: "listing"; next: PageListing }
+  >(null);
 
   // Held for as long as this builder is open. Without a lock provider the
   // handle reports "not enforced" and nothing below changes.
@@ -391,6 +428,43 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
     }
   };
 
+  /** Unpublish and listing changes, once their dialog is confirmed. */
+  const onConfirmVisibility = async () => {
+    if (!page || !visibilityDialog) return;
+    setBusy(true);
+    try {
+      if (visibilityDialog.kind === "unpublish") {
+        if (!deps.setPageStatus) return;
+        await deps.setPageStatus({
+          pageId: page.id,
+          status: "draft",
+          editSessionId: lock.sessionId,
+        });
+        notify.success(`"${page.name}" is offline`);
+      } else {
+        if (!deps.setPageListing) return;
+        await deps.setPageListing({
+          pageId: page.id,
+          listing: visibilityDialog.next,
+          expectedVersion: page.listing_version ?? null,
+          editSessionId: lock.sessionId,
+        });
+        notify.success(
+          visibilityDialog.next === "link-only"
+            ? `"${page.name}" is now link-only`
+            : `"${page.name}" is listed on the website again`,
+        );
+      }
+      setVisibilityDialog(null);
+    } catch (e) {
+      notify.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+      deps.refetchPage();
+      deps.refetchPublications();
+    }
+  };
+
   if (isLoading) return <div className="p-12 text-ink/60">Loading…</div>;
   if (error) return <div className="p-12 text-red-600">Failed to load page.</div>;
   if (!page) return null;
@@ -505,7 +579,38 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
                   at={page.publication_at}
                   transition={page.publication_transition}
                 />
+            <ListingBadge listing={normalizePageListing(page.listing)} publication={page.publication} />
             <PageStatusBadge status={normalizePageStatus(page.status)} />
+            {page.protected ? <ProtectedBadge /> : null}
+            {/* What a visitor gets, changed from where it is shown. */}
+            {!page.protected && deps.setPageStatus && isPubliclyVisible(page.publication) ? (
+              <button
+                onClick={() => setVisibilityDialog({ kind: "unpublish" })}
+                disabled={busy || lock.blocked}
+                className="inline-flex items-center gap-1 border border-ink/20 px-2 py-0.5 text-xs text-ink/70 hover:border-ink hover:text-ink disabled:opacity-40"
+              >
+                <EyeOff className="size-3" aria-hidden="true" /> Unpublish
+              </button>
+            ) : null}
+            {!page.protected && deps.setPageListing ? (
+              normalizePageListing(page.listing) === "link-only" ? (
+                <button
+                  onClick={() => setVisibilityDialog({ kind: "listing", next: "listed" })}
+                  disabled={busy || lock.blocked}
+                  className="inline-flex items-center gap-1 border border-ink/20 px-2 py-0.5 text-xs text-ink/70 hover:border-ink hover:text-ink disabled:opacity-40"
+                >
+                  <ListChecks className="size-3" aria-hidden="true" /> Show on website
+                </button>
+              ) : (
+                <button
+                  onClick={() => setVisibilityDialog({ kind: "listing", next: "link-only" })}
+                  disabled={busy || lock.blocked}
+                  className="inline-flex items-center gap-1 border border-ink/20 px-2 py-0.5 text-xs text-ink/70 hover:border-ink hover:text-ink disabled:opacity-40"
+                >
+                  <Link2 className="size-3" aria-hidden="true" /> Make link-only
+                </button>
+              )
+            ) : null}
           </div>
           <div className="text-xs text-ink/50 font-mono mt-2">
             {page.key}
@@ -580,10 +685,11 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
               </span>
               <input
                 type="datetime-local"
-                disabled={lock.blocked}
+                disabled={lock.blocked || page.protected === true}
                 value={unpublishAt}
                 onChange={(e) => setUnpublishAt(e.target.value)}
-                className="w-full border border-ink/20 px-2 py-1.5 text-sm"
+                title={page.protected ? PROTECTED_PAGE_REASON : undefined}
+                className="w-full border border-ink/20 px-2 py-1.5 text-sm disabled:opacity-40"
               />
             </label>
             <label className="block md:col-span-1">
@@ -774,6 +880,46 @@ export function PageBuilderView<TBlock>({ deps }: { deps: PageBuilderDeps<TBlock
       )}
 
       {deps.footer && <div className="mt-6 text-xs text-ink/50">{deps.footer}</div>}
+
+      {visibilityDialog?.kind === "unpublish" ? (
+        <ConfirmDialog
+          title={`Unpublish “${page.name}”?`}
+          description={statusChangeConfirmation("draft", page.publication, page.publication_transition)}
+          consequences={unpublishConsequences({
+            path: slugPath,
+            listing: normalizePageListing(page.listing),
+          })}
+          confirmLabel="Unpublish"
+          danger
+          busy={busy}
+          onConfirm={onConfirmVisibility}
+          onCancel={() => setVisibilityDialog(null)}
+        />
+      ) : null}
+      {visibilityDialog?.kind === "listing"
+        ? (() => {
+            const facts = {
+              name: page.name,
+              path: slugPath,
+              live: isPubliclyVisible(page.publication),
+            };
+            const copy =
+              visibilityDialog.next === "link-only"
+                ? linkOnlyConfirmation(facts)
+                : showOnWebsiteConfirmation(facts);
+            return (
+              <ConfirmDialog
+                title={copy.title}
+                description={copy.body[0]}
+                consequences={copy.body.slice(1)}
+                confirmLabel={copy.confirmLabel}
+                busy={busy}
+                onConfirm={onConfirmVisibility}
+                onCancel={() => setVisibilityDialog(null)}
+              />
+            );
+          })()
+        : null}
     </div>
   );
 }

package/src/backoffice/PageEditorView.tsx

@@ -56,6 +56,12 @@ import {
   type InsertRefusal,
 } from "../blocks/block-tree";
 import { subscribeSharedDrafts } from "../cms/shared-draft-store";
+import {
+  acceptPreviewMessage,
+  EDITOR_SOURCE,
+  newPreviewSession,
+  previewOriginOf,
+} from "../site/preview-messaging";
 import { SaveGlobalDialog, type SaveGlobalResult } from "./SaveGlobalDialog";
 
 function uid(prefix = "b") {
@@ -570,6 +576,27 @@ export function PageEditorView({
   );
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [previewReady, setPreviewReady] = useState(false);
+  // The canvas is spoken to only at its own origin, in one session, in order
+  // (see preview-messaging); its answers count only from its own window.
+  const previewSession = useMemo(() => newPreviewSession(), []);
+  const previewSeq = useRef(0);
+  const previewOrigin = useMemo(
+    () =>
+      typeof window === "undefined" ? null : previewOriginOf(previewUrl(pageKey), window.location.href),
+    [previewUrl, pageKey],
+  );
+  const postToPreview = useCallback(
+    (message: Record<string, unknown>) => {
+      const frame = iframeRef.current?.contentWindow;
+      if (!frame || !previewOrigin) return;
+      previewSeq.current += 1;
+      frame.postMessage(
+        { source: EDITOR_SOURCE, session: previewSession, seq: previewSeq.current, ...message },
+        previewOrigin,
+      );
+    },
+    [previewOrigin, previewSession],
+  );
 
   const currentBlocks = controlledBlocks ?? blocks;
 
@@ -581,19 +608,15 @@ export function PageEditorView({
   // Push draft to iframe whenever blocks/locale/selection change.
   useEffect(() => {
     if (!previewReady) return;
-    iframeRef.current?.contentWindow?.postMessage(
-      {
-        source: "lovable-editor",
-        type: "draft",
-        blocks: currentBlocks,
-        globals,
-        selectedId,
-        locale,
-        sharedContent: sharedDrafts,
-      },
-      "*",
-    );
-  }, [currentBlocks, globals, selectedId, locale, previewReady, sharedDrafts]);
+    postToPreview({
+      type: "draft",
+      blocks: currentBlocks,
+      globals,
+      selectedId,
+      locale,
+      sharedContent: sharedDrafts,
+    });
+  }, [currentBlocks, globals, selectedId, locale, previewReady, sharedDrafts, postToPreview]);
 
   useEffect(() => {
     const t = setTimeout(() => {
@@ -604,27 +627,27 @@ export function PageEditorView({
   }, [pageKey, currentBlocks, globals, locale]);
 
   /** Select a block from the outline and scroll the preview to it. */
-  const selectAndReveal = useCallback((id: string) => {
-    setSelectedId(id);
-    iframeRef.current?.contentWindow?.postMessage(
-      { source: "lovable-editor", type: "scrollTo", blockId: id },
-      "*",
-    );
-  }, []);
+  const selectAndReveal = useCallback(
+    (id: string) => {
+      setSelectedId(id);
+      postToPreview({ type: "scrollTo", blockId: id });
+    },
+    [postToPreview],
+  );
 
   // Listen for iframe messages.
   useEffect(() => {
     const onMsg = (ev: MessageEvent) => {
-      const d = ev.data as { source?: string; type?: string; blockId?: string };
-      if (d?.source !== "lovable-preview") return;
+      const d = acceptPreviewMessage(ev, { frame: iframeRef.current?.contentWindow, previewOrigin });
+      if (!d) return;
       if (d.type === "ready") setPreviewReady(true);
-      if (d.type === "select" && d.blockId) {
+      if (d.type === "select") {
         if (findBlockDeep(currentBlocks, d.blockId)) setSelectedId(d.blockId);
       }
     };
     window.addEventListener("message", onMsg);
     return () => window.removeEventListener("message", onMsg);
-  }, [currentBlocks]);
+  }, [currentBlocks, previewOrigin]);
 
   // Keep the outline highlight visible whenever the selection changes.
   useEffect(() => {

package/src/backoffice/PagesListView.tsx

@@ -10,9 +10,11 @@ import {
   Copy,
   Eye,
   EyeOff,
+  Link2,
+  ListChecks,
 } from "lucide-react";
 import { ConfirmDialog } from "./media/ConfirmDialog";
-import { PageStatusBadge, PublicationBadge } from "./StatusBadge";
+import { ListingBadge, PageStatusBadge, ProtectedBadge, PublicationBadge } from "./StatusBadge";
 import {
   duplicateNameFor,
   isValidPageKey,
@@ -28,6 +30,13 @@ import {
   type PublicationTransitionKind,
 } from "../cms/page-publication";
 import { usePublicationBoundaryRefresh } from "../cms/use-publication-boundary";
+import {
+  linkOnlyConfirmation,
+  normalizePageListing,
+  showOnWebsiteConfirmation,
+  unpublishConsequences,
+  type PageListing,
+} from "../cms/page-visibility";
 
 /** A page row as listed by the host. */
 export type PageListRow = {
@@ -56,6 +65,12 @@ export type PageListRow = {
   publication_transition?: PublicationTransitionKind | null;
   updated_at: string;
   is_system?: boolean | null;
+  /** Listed (default) or link-only; independent of publication. */
+  listing?: PageListing;
+  /** Version token sent back with a listing change; null when never changed. */
+  listing_version?: string | null;
+  /** The start and contact pages: never unpublished, never unlisted. */
+  protected?: boolean;
 };
 
 /** A soft-deleted page kept in the trash bin. */
@@ -86,6 +101,15 @@ export type PagesListDeps = {
    * has not wired it up simply does not show the action.
    */
   setPageStatus?: (input: { pageId: string; status: PageStatus }) => Promise<unknown>;
+  /**
+   * Make a page link-only or list it again — listing only, never a publish.
+   * Optional: without it the actions are not offered.
+   */
+  setPageListing?: (input: {
+    pageId: string;
+    listing: PageListing;
+    expectedVersion: string | null;
+  }) => Promise<unknown>;
   /** Copy a page into a new draft. Optional for the same reason. */
   duplicatePage?: (input: {
     pageId: string;
@@ -114,6 +138,7 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
     createPage,
     renamePage,
     setPageStatus,
+    setPageListing,
     duplicatePage,
     deletePage,
     restorePage,
@@ -132,6 +157,10 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
     page: PageListRow;
     next: PageStatus;
   } | null>(null);
+  const [listingChange, setListingChange] = useState<{
+    page: PageListRow;
+    next: PageListing;
+  } | null>(null);
   const [duplicating, setDuplicating] = useState<{
     page: PageListRow;
     name: string;
@@ -202,6 +231,32 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
     }
   };
 
+  /** Listing changes are confirmed too, and never touch publication. */
+  const onConfirmListing = async () => {
+    if (!listingChange || !setPageListing) return;
+    setBusy(true);
+    try {
+      await setPageListing({
+        pageId: listingChange.page.id,
+        listing: listingChange.next,
+        expectedVersion: listingChange.page.listing_version ?? null,
+      });
+      toast.success(
+        listingChange.next === "link-only"
+          ? `"${listingChange.page.name}" is now link-only`
+          : `"${listingChange.page.name}" is listed on the website again`,
+      );
+      setListingChange(null);
+      refetchPages();
+    } catch (e) {
+      fail(e);
+      // A conflict means the row changed under us: show what is true now.
+      refetchPages();
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const onConfirmDuplicate = async () => {
     if (!duplicating || !duplicatePage || duplicateProblem) return;
     setBusy(true);
@@ -323,8 +378,10 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
         that is not public stays editable and previewable by signed-in staff.
       </p>
 
-      <div className="mt-8 border border-ink/10 bg-white">
-        <table className="w-full text-sm">
+      {/* Six columns do not fit a phone: the table scrolls inside its frame
+          rather than widening the page. */}
+      <div className="mt-8 border border-ink/10 bg-white overflow-x-auto">
+        <table className="w-full min-w-[56rem] text-sm">
           <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
             <tr>
               <th className="px-4 py-3">Name</th>
@@ -396,7 +453,12 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
                       at={p.publication_at}
                       transition={p.publication_transition}
                     />
+                    <ListingBadge
+                      listing={normalizePageListing(p.listing)}
+                      publication={p.publication}
+                    />
                     <PageStatusBadge status={normalizePageStatus(p.status)} />
+                    {p.protected ? <ProtectedBadge /> : null}
                   </div>
                 </td>
                 <td className="px-4 py-3 text-ink/50">{new Date(p.updated_at).toLocaleString()}</td>
@@ -410,18 +472,37 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
                     </button>
                     {setPageStatus ? (
                       isPubliclyVisible(p.publication) ? (
+                        p.protected ? null : (
+                          <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: "draft" })}
+                          onClick={() => setStatusChange({ page: p, next: "published" })}
                           className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
                         >
-                          <EyeOff className="size-3.5" /> Unpublish
+                          <Eye className="size-3.5" /> Publish
+                        </button>
+                      )
+                    ) : null}
+                    {setPageListing && !p.protected ? (
+                      normalizePageListing(p.listing) === "link-only" ? (
+                        <button
+                          onClick={() => setListingChange({ page: p, next: "listed" })}
+                          className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
+                        >
+                          <ListChecks className="size-3.5" /> Show on website
                         </button>
                       ) : (
                         <button
-                          onClick={() => setStatusChange({ page: p, next: "published" })}
+                          onClick={() => setListingChange({ page: p, next: "link-only" })}
                           className="inline-flex items-center gap-1 text-ink/60 hover:text-ink hover:underline"
                         >
-                          <Eye className="size-3.5" /> Publish
+                          <Link2 className="size-3.5" /> Make link-only
                         </button>
                       )
                     ) : null}
@@ -440,7 +521,7 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
                         <Copy className="size-3.5" /> Duplicate
                       </button>
                     ) : null}
-                    {!p.is_system && (
+                    {!p.is_system && !p.protected && (
                       <button
                         onClick={() => onDelete(p.id, p.name)}
                         className="inline-flex items-center gap-1 text-red-600 hover:underline"
@@ -473,58 +554,60 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
             </p>
           </div>
         </div>
-        <table className="w-full text-sm">
-          <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
-            <tr>
-              <th className="px-4 py-3">Name</th>
-              <th className="px-4 py-3">Key</th>
-              <th className="px-4 py-3">Deleted by</th>
-              <th className="px-4 py-3">Deleted at</th>
-              <th className="px-4 py-3 w-56"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {trash?.rows.map((p) => (
-              <tr key={p.id} className="border-t border-ink/10">
-                <td className="px-4 py-3 text-ink">{p.name}</td>
-                <td className="px-4 py-3 font-mono text-ink/70">{p.key}</td>
-                <td className="px-4 py-3 text-ink/70">
-                  {p.deleted_by_email ?? p.deleted_by ?? "Unknown user"}
-                </td>
-                <td className="px-4 py-3 text-ink/50">
-                  {p.deleted_at ? new Date(p.deleted_at).toLocaleString() : "—"}
-                </td>
-                <td className="px-4 py-3 text-right">
-                  <button
-                    onClick={() => onRestore(p.id)}
-                    className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
-                  >
-                    <Undo2 className="size-3.5" /> Restore
-                  </button>
-                  {trash?.canPurge ? (
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[40rem] text-sm">
+            <thead className="bg-ink/[0.03] text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/60">
+              <tr>
+                <th className="px-4 py-3">Name</th>
+                <th className="px-4 py-3">Key</th>
+                <th className="px-4 py-3">Deleted by</th>
+                <th className="px-4 py-3">Deleted at</th>
+                <th className="px-4 py-3 w-56"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {trash?.rows.map((p) => (
+                <tr key={p.id} className="border-t border-ink/10">
+                  <td className="px-4 py-3 text-ink">{p.name}</td>
+                  <td className="px-4 py-3 font-mono text-ink/70">{p.key}</td>
+                  <td className="px-4 py-3 text-ink/70">
+                    {p.deleted_by_email ?? p.deleted_by ?? "Unknown user"}
+                  </td>
+                  <td className="px-4 py-3 text-ink/50">
+                    {p.deleted_at ? new Date(p.deleted_at).toLocaleString() : "—"}
+                  </td>
+                  <td className="px-4 py-3 text-right">
                     <button
-                      onClick={() => onPurge(p.id, p.name)}
-                      className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                      onClick={() => onRestore(p.id)}
+                      className="inline-flex items-center gap-1 text-sea hover:underline mr-3"
                     >
-                      <Trash2 className="size-3.5" /> Delete forever
+                      <Undo2 className="size-3.5" /> Restore
                     </button>
-                  ) : (
-                    <span className="text-[0.7rem] uppercase tracking-widest text-ink/40">
-                      Superadmin only
-                    </span>
-                  )}
-                </td>
-              </tr>
-            ))}
-            {(trash?.rows.length ?? 0) === 0 && (
-              <tr>
-                <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
-                  Trash bin is empty.
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
+                    {trash?.canPurge ? (
+                      <button
+                        onClick={() => onPurge(p.id, p.name)}
+                        className="inline-flex items-center gap-1 text-red-600 hover:underline"
+                      >
+                        <Trash2 className="size-3.5" /> Delete forever
+                      </button>
+                    ) : (
+                      <span className="text-[0.7rem] uppercase tracking-widest text-ink/40">
+                        Superadmin only
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+              {(trash?.rows.length ?? 0) === 0 && (
+                <tr>
+                  <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                    Trash bin is empty.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
 
       <div className="mt-10 border border-ink/10 bg-white p-6">
@@ -573,6 +656,14 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
             statusChange.page.publication_transition,
           )}
           details={[`${statusChange.page.name} — ${pathFor(statusChange.page.key)}`]}
+          consequences={
+            statusChange.next === "published"
+              ? undefined
+              : unpublishConsequences({
+                  path: pathFor(statusChange.page.key),
+                  listing: normalizePageListing(statusChange.page.listing),
+                })
+          }
           confirmLabel={statusChange.next === "published" ? "Publish" : "Unpublish"}
           danger={statusChange.next !== "published"}
           busy={busy}
@@ -581,6 +672,31 @@ export function PagesListView({ deps }: { deps: PagesListDeps }): ReactNode {
         />
       ) : null}
 
+      {listingChange ? (
+        (() => {
+          const facts = {
+            name: listingChange.page.name,
+            path: pathFor(listingChange.page.key),
+            live: isPubliclyVisible(listingChange.page.publication),
+          };
+          const copy =
+            listingChange.next === "link-only"
+              ? linkOnlyConfirmation(facts)
+              : showOnWebsiteConfirmation(facts);
+          return (
+            <ConfirmDialog
+              title={copy.title}
+              description={copy.body[0]}
+              consequences={copy.body.slice(1)}
+              confirmLabel={copy.confirmLabel}
+              busy={busy}
+              onConfirm={onConfirmListing}
+              onCancel={() => setListingChange(null)}
+            />
+          );
+        })()
+      ) : null}
+
       {duplicating ? (
         <ConfirmDialog
           title="Duplicate page"