@bygghammar/cms-platform 0.94.0 → 0.95.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/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"

package/src/backoffice/SiteSettingsView.tsx

@@ -47,6 +47,8 @@ export type SiteSettingsDeps = {
    */
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   MediaField?: (props: any) => ReactNode;
+  /** Site settings → Booking, rendered after Modules when the host supports it. */
+  bookingSection?: ReactNode;
 };
 
 // Labels and order come from the module table, so a new module appears here
@@ -290,6 +292,8 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
         </div>
       </section>
 
+      {deps.bookingSection ?? null}
+
       {Object.keys(brand).length > 0 && (
         <section className={`mt-6 ${cardClass}`}>
           <SectionHeader

package/src/backoffice/StatusBadge.tsx

@@ -15,26 +15,30 @@
  */
 
 import type { ReactNode } from "react";
-import { CalendarClock, CircleDot, CircleSlash, Eye, EyeOff, FileEdit } from "lucide-react";
+import { CalendarClock, CircleDot, CircleSlash, Eye, EyeOff, FileEdit, Link2, Lock } from "lucide-react";
 import { PAGE_STATUS_DESCRIPTIONS, PAGE_STATUS_LABELS, type PageStatus } from "../cms/page-status";
 import {
   publicationSummary,
   type PublicationState,
   type PublicationTransitionKind,
 } from "../cms/page-publication";
+import { PAGE_VISIBILITY_DESCRIPTIONS, PROTECTED_PAGE_REASON, type PageListing } from "../cms/page-visibility";
+import { isPubliclyVisible } from "../cms/page-publication";
 import {
   VISIBILITY_STATE_DESCRIPTIONS,
   VISIBILITY_STATE_LABELS,
   type VisibilityState,
 } from "../cms/visibility-schedule";
 
-export type StatusTone = "draft" | "live" | "hidden" | "scheduled";
+export type StatusTone = "draft" | "live" | "hidden" | "scheduled" | "unlisted" | "protected";
 
 const TONE_CLASS: Record<StatusTone, string> = {
   draft: "border-ink/25 bg-ink/[0.04] text-ink/70",
   live: "border-sea/40 bg-ice/60 text-ink",
   hidden: "border-ink/20 bg-ink/[0.02] text-ink/50",
   scheduled: "border-brass/50 bg-brass/10 text-ink/80",
+  unlisted: "border-ink/40 bg-paper text-ink",
+  protected: "border-ink/15 bg-ink/[0.02] text-ink/60",
 };
 
 const TONE_ICON: Record<StatusTone, (props: { className?: string }) => ReactNode> = {
@@ -42,6 +46,8 @@ const TONE_ICON: Record<StatusTone, (props: { className?: string }) => ReactNode
   live: CircleDot,
   hidden: CircleSlash,
   scheduled: CalendarClock,
+  unlisted: Link2,
+  protected: Lock,
 };
 
 const PUBLICATION_TONE: Record<PublicationState, StatusTone> = {
@@ -172,3 +178,33 @@ export function VisibilityIcon({ visible }: { visible: boolean }) {
     <EyeOff className="size-4" aria-hidden="true" />
   );
 }
+
+/**
+ * `LINK ONLY` beside the publication badge when a page is unlisted.
+ *
+ * Nothing is shown for an ordinary listed page — that is the default and the
+ * publication badge already says everything. An offline page that is link-only
+ * says so in its own words, because publishing it will not list it.
+ */
+export function ListingBadge({
+  listing,
+  publication,
+}: {
+  listing: PageListing;
+  publication: PublicationState;
+}) {
+  if (listing !== "link-only") return null;
+  const live = isPubliclyVisible(publication);
+  return (
+    <StatusBadge
+      label={live ? "Link only" : "Link only once published"}
+      tone="unlisted"
+      title={PAGE_VISIBILITY_DESCRIPTIONS["link-only"]}
+    />
+  );
+}
+
+/** Marks the start and contact pages, which cannot be unpublished or unlisted. */
+export function ProtectedBadge() {
+  return <StatusBadge label="Protected" tone="protected" title={PROTECTED_PAGE_REASON} />;
+}