create-nextblock 0.14.2 → 0.14.5

package/templates/nextblock-template/app/cms/components/VisibilityControl.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+/**
+ * Top-bar visibility control for pages, posts and products.
+ *
+ * This is the only place in the CMS that can change what the public sees. It is
+ * deliberately NOT part of the content form: editing settings autosaves into the
+ * Live Draft, while publishing writes straight to the row. Two decisions, two
+ * controls — see `app/actions/visibilityActions.ts`.
+ *
+ * The pill is read-only on purpose. A <select> implies every option is equivalent
+ * and instantly applied, which is exactly the behaviour this replaces; naming the
+ * transitions as verbs in a menu lets each one carry its own confirmation.
+ */
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+} from "@nextblock-cms/ui";
+import {
+  LIVE_STATUS,
+  resolveVisibilityState,
+  type PublishableType,
+  type VisibilityState,
+} from "@nextblock-cms/utils";
+import {
+  CalendarClock,
+  ChevronDown,
+  Link2,
+  Loader2,
+  Archive,
+  EyeOff,
+  Globe,
+} from "lucide-react";
+import {
+  getSiblingVisibility,
+  setContentVisibility,
+  type SiblingVisibility,
+  type VisibilityIntent,
+} from "../../actions/visibilityActions";
+import { publishVisualEditingDraft, publishVisualEditingProductDraft } from "../../actions/visualEditingActions";
+
+interface LanguageOption {
+  id: number;
+  name: string;
+  code: string;
+}
+
+export interface VisibilityControlProps {
+  type: PublishableType;
+  id: number | string;
+  /** Live row status — never the draft overlay. */
+  status: string;
+  /** Live row published_at; a future value means "scheduled". */
+  publishedAt: string | null;
+  /** Root-relative public URL, e.g. "/about" or "/article/hello". */
+  publicPath: string;
+  /** Display name of the language this row is written in. */
+  languageName?: string;
+  translationGroupId?: string | null;
+  languages?: LanguageOption[];
+  /** True when unpublished content edits exist in the Live Draft. */
+  hasDraft?: boolean;
+  /**
+   * Why this content cannot go public yet, if it can't — e.g. a product whose
+   * payment provider isn't configured. Blocks publish and schedule, and is shown
+   * verbatim, so write it as an explanation the editor can act on.
+   */
+  publishBlockedReason?: string | null;
+}
+
+const STATE_LABEL: Record<VisibilityState, string> = {
+  draft: "Draft",
+  scheduled: "Scheduled",
+  published: "Published",
+  archived: "Archived",
+};
+
+const STATE_STYLE: Record<VisibilityState, string> = {
+  draft:
+    "border-border bg-muted text-muted-foreground",
+  scheduled:
+    "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  published:
+    "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
+  archived:
+    "border-dashed border-border bg-transparent text-muted-foreground",
+};
+
+const DOT_STYLE: Record<VisibilityState, string> = {
+  draft: "bg-muted-foreground/70",
+  scheduled: "bg-amber-500",
+  published: "bg-emerald-500",
+  archived: "bg-muted-foreground/50",
+};
+
+/** `datetime-local` wants "YYYY-MM-DDTHH:mm" in LOCAL time, not an ISO string. */
+function toDateTimeLocal(value: string | null): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(
+    date.getHours()
+  )}:${pad(date.getMinutes())}`;
+}
+
+function defaultScheduleValue(): string {
+  const soon = new Date();
+  soon.setDate(soon.getDate() + 1);
+  soon.setMinutes(0, 0, 0);
+  return toDateTimeLocal(soon.toISOString());
+}
+
+export default function VisibilityControl({
+  type,
+  id,
+  status,
+  publishedAt,
+  publicPath,
+  languageName,
+  translationGroupId,
+  languages = [],
+  hasDraft = false,
+  publishBlockedReason = null,
+}: VisibilityControlProps) {
+  const router = useRouter();
+  const liveStatus = LIVE_STATUS[type];
+  const state = resolveVisibilityState({ status, publishedAt, liveStatus });
+
+  const [dialog, setDialog] = React.useState<null | "publish" | "schedule" | "unpublish" | "archive">(null);
+  const [isBusy, setIsBusy] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [alsoPublishDraft, setAlsoPublishDraft] = React.useState(true);
+  const [scheduleValue, setScheduleValue] = React.useState(() => toDateTimeLocal(publishedAt) || defaultScheduleValue());
+  const [siblings, setSiblings] = React.useState<SiblingVisibility[] | null>(null);
+
+  // The schedule date is formatted in the viewer's timezone, which the server
+  // doesn't know — render it only after mount so the two never disagree.
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+
+  const scheduleLabel = React.useMemo(() => {
+    if (!mounted || !publishedAt) return null;
+    const date = new Date(publishedAt);
+    if (Number.isNaN(date.getTime())) return null;
+    return new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short",
+    }).format(date);
+  }, [mounted, publishedAt]);
+
+  const label = state === "scheduled" && scheduleLabel ? `Goes live ${scheduleLabel}` : STATE_LABEL[state];
+
+  const languageNameById = React.useMemo(
+    () => new Map(languages.map((language) => [language.id, `${language.name} (${language.code.toUpperCase()})`])),
+    [languages]
+  );
+
+  const openPublishDialog = React.useCallback(() => {
+    setError(publishBlockedReason);
+    setAlsoPublishDraft(true);
+    setSiblings(null);
+    setDialog("publish");
+
+    if (translationGroupId) {
+      void getSiblingVisibility(type, translationGroupId, id).then(setSiblings);
+    }
+  }, [id, publishBlockedReason, translationGroupId, type]);
+
+  const run = async (intent: VisibilityIntent, opts?: { publishDraft?: boolean }) => {
+    setIsBusy(true);
+    setError(null);
+    try {
+      const result = await setContentVisibility(type, id, intent);
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+
+      // Publishing the row and publishing pending edits are separate operations;
+      // the dialog offers to do both so a never-live page doesn't go public
+      // showing content the editor has already replaced.
+      if (opts?.publishDraft && hasDraft) {
+        const draftResult =
+          type === "product"
+            ? await publishVisualEditingProductDraft(String(id))
+            : await publishVisualEditingDraft(type, Number(id));
+
+        if (draftResult && "error" in draftResult && draftResult.error) {
+          toast.error(`Visibility updated, but the edits didn't publish: ${draftResult.error}`);
+          setDialog(null);
+          router.refresh();
+          return;
+        }
+
+        // Partial success: the edits went live but the revision didn't record.
+        if (draftResult && "success" in draftResult && draftResult.warning) {
+          toast.error(draftResult.warning, { duration: 8000 });
+        }
+      }
+
+      toast.success(
+        intent.action === "publish"
+          ? "Published."
+          : intent.action === "schedule"
+            ? "Scheduled."
+            : intent.action === "unpublish"
+              ? "Unpublished."
+              : "Archived."
+      );
+      setDialog(null);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  const copyPublicUrl = async () => {
+    const url = typeof window === "undefined" ? publicPath : new URL(publicPath, window.location.origin).toString();
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success("Public URL copied.");
+    } catch {
+      toast.error("Couldn't copy the URL.");
+    }
+  };
+
+  const typeLabel = type === "product" ? "product" : type;
+  const busySpinner = <Loader2 className="mr-2 h-4 w-4 animate-spin" />;
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-semibold ${STATE_STYLE[state]}`}
+        title={
+          state === "published"
+            ? `Live at ${publicPath}`
+            : state === "scheduled"
+              ? "Not public yet — goes live automatically"
+              : "Not visible to the public"
+        }
+      >
+        <span className={`h-1.5 w-1.5 rounded-full ${DOT_STYLE[state]}`} aria-hidden="true" />
+        {label}
+      </span>
+
+      {hasDraft && (
+        <span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-dashed border-amber-500/50 px-2.5 py-1 text-xs font-medium text-amber-700 dark:text-amber-300">
+          <span className="h-1.5 w-1.5 rounded-full bg-amber-500" aria-hidden="true" />
+          Unpublished edits
+        </span>
+      )}
+
+      <div className="flex items-center">
+        {state !== "published" && (
+          <Button
+            size="sm"
+            className="rounded-r-none"
+            onClick={openPublishDialog}
+            disabled={isBusy}
+          >
+            <Globe className="mr-2 h-4 w-4" />
+            {state === "scheduled" ? "Publish now" : "Publish…"}
+          </Button>
+        )}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              variant={state === "published" ? "outline" : "default"}
+              className={state === "published" ? "" : "-ml-px rounded-l-none px-2"}
+              aria-label="Visibility options"
+              disabled={isBusy}
+            >
+              {state === "published" && <span className="mr-1">Visibility</span>}
+              <ChevronDown className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-64">
+            <DropdownMenuLabel>Visibility</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={() => {
+                setError(publishBlockedReason);
+                setScheduleValue(toDateTimeLocal(publishedAt) || defaultScheduleValue());
+                setDialog("schedule");
+              }}
+            >
+              <CalendarClock className="mr-2 h-4 w-4" />
+              {state === "scheduled" ? "Reschedule…" : "Schedule…"}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => void copyPublicUrl()}>
+              <Link2 className="mr-2 h-4 w-4" />
+              Copy public URL
+            </DropdownMenuItem>
+            {(state === "published" || state === "scheduled") && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-destructive focus:text-destructive"
+                  onSelect={() => {
+                    setError(null);
+                    setDialog("unpublish");
+                  }}
+                >
+                  <EyeOff className="mr-2 h-4 w-4" />
+                  Unpublish
+                </DropdownMenuItem>
+              </>
+            )}
+            {state !== "archived" && (
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
+                onSelect={() => {
+                  setError(null);
+                  setDialog("archive");
+                }}
+              >
+                <Archive className="mr-2 h-4 w-4" />
+                Archive
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* ---- Publish ---- */}
+      <Dialog open={dialog === "publish"} onOpenChange={(open) => !open && setDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Make this {typeLabel} public?</DialogTitle>
+            <DialogDescription>
+              Anyone with the link will be able to see it, and search engines can index it.
+            </DialogDescription>
+          </DialogHeader>
+
+          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 rounded-md border bg-muted/40 p-3 text-sm">
+            <dt className="text-xs uppercase tracking-wide text-muted-foreground">URL</dt>
+            <dd className="font-mono text-xs break-all">{publicPath}</dd>
+            {languageName && (
+              <>
+                <dt className="text-xs uppercase tracking-wide text-muted-foreground">Language</dt>
+                <dd>{languageName}</dd>
+              </>
+            )}
+            <dt className="text-xs uppercase tracking-wide text-muted-foreground">Goes live</dt>
+            <dd>Immediately</dd>
+          </dl>
+
+          {hasDraft && (
+            <label className="flex items-start gap-3 rounded-md border border-amber-500/40 bg-amber-500/10 p-3 text-sm">
+              <Checkbox
+                checked={alsoPublishDraft}
+                onCheckedChange={(checked) => setAlsoPublishDraft(checked === true)}
+                className="mt-0.5"
+              />
+              <span>
+                Publish your unpublished edits at the same time — otherwise the older live version
+                is what goes public.
+              </span>
+            </label>
+          )}
+
+          {siblings && siblings.some((sibling) => sibling.state !== "published") && (
+            <div className="space-y-1.5 text-sm text-muted-foreground">
+              {siblings
+                .filter((sibling) => sibling.state !== "published")
+                .map((sibling) => (
+                  <p key={String(sibling.id)}>
+                    <span className="font-semibold text-amber-600 dark:text-amber-400">!</span>{" "}
+                    The {languageNameById.get(sibling.languageId) ?? "other language"} version is
+                    still {STATE_LABEL[sibling.state].toLowerCase()}.
+                  </p>
+                ))}
+            </div>
+          )}
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <DialogFooter className="mt-2 gap-2">
+            <Button variant="outline" onClick={() => setDialog(null)} disabled={isBusy}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => void run({ action: "publish" }, { publishDraft: alsoPublishDraft })}
+              disabled={isBusy || Boolean(publishBlockedReason)}
+            >
+              {isBusy && busySpinner}
+              Publish {typeLabel}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ---- Schedule ---- */}
+      <Dialog open={dialog === "schedule"} onOpenChange={(open) => !open && setDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Schedule this {typeLabel}</DialogTitle>
+            <DialogDescription>
+              It stays private until the moment you pick, then goes live on its own. Times are in
+              your own timezone.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-2">
+            <Label htmlFor="visibility-schedule">Go live on</Label>
+            <Input
+              id="visibility-schedule"
+              type="datetime-local"
+              value={scheduleValue}
+              onChange={(event) => setScheduleValue(event.target.value)}
+            />
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <DialogFooter className="mt-2 gap-2">
+            <Button variant="outline" onClick={() => setDialog(null)} disabled={isBusy}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                if (publishBlockedReason) {
+                  setError(publishBlockedReason);
+                  return;
+                }
+                const local = new Date(scheduleValue);
+                if (Number.isNaN(local.getTime())) {
+                  setError("That isn't a valid date and time.");
+                  return;
+                }
+                void run({ action: "schedule", publishedAt: local.toISOString() });
+              }}
+              disabled={isBusy || !scheduleValue || Boolean(publishBlockedReason)}
+            >
+              {isBusy && busySpinner}
+              Schedule
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ---- Unpublish ---- */}
+      <Dialog open={dialog === "unpublish"} onOpenChange={(open) => !open && setDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Take this {typeLabel} off the live site?</DialogTitle>
+            <DialogDescription>
+              Visitors will get a 404 at{" "}
+              <span className="font-mono text-xs">{publicPath}</span>. Your content and any
+              unpublished edits are kept — you can publish it again at any time. Check your
+              navigation menus for links pointing here.
+            </DialogDescription>
+          </DialogHeader>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <DialogFooter className="mt-2 gap-2">
+            <Button variant="outline" onClick={() => setDialog(null)} disabled={isBusy}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void run({ action: "unpublish" })}
+              disabled={isBusy}
+            >
+              {isBusy && busySpinner}
+              Unpublish
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ---- Archive ---- */}
+      <Dialog open={dialog === "archive"} onOpenChange={(open) => !open && setDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Archive this {typeLabel}?</DialogTitle>
+            <DialogDescription>
+              It comes off the live site and drops out of the default {typeLabel} list. Nothing is
+              deleted, and you can publish it again later.
+            </DialogDescription>
+          </DialogHeader>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <DialogFooter className="mt-2 gap-2">
+            <Button variant="outline" onClick={() => setDialog(null)} disabled={isBusy}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void run({ action: "archive" })}
+              disabled={isBusy}
+            >
+              {isBusy && busySpinner}
+              Archive
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/pages/[id]/edit/EditPageClient.tsx

@@ -4,10 +4,10 @@ import Link from "next/link";
 import React from "react";
 import { Separator } from "@nextblock-cms/ui";
 import { Button } from "@nextblock-cms/ui";
-import { ViewLiveButton } from "@nextblock-cms/ui";
-import { ArrowLeft, FilePenLine } from "lucide-react";
-import { publishPage } from "../../actions";
+import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
 import PageForm from "../../components/PageForm";
+import VisibilityControl from "../../../components/VisibilityControl";
+import { buildViewUrl } from "../../../../../lib/publishing/viewUrl";
 import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
 import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
 import CopyContentFromLanguage from "../../../components/CopyContentFromLanguage";
@@ -33,8 +33,11 @@ interface EditPageClientProps {
   allSiteLanguages: Language[];
   updatePageAction: (formData: FormData) => Promise<{ error?: string } | void>;
   publicPageUrl: string;
-  isLive: boolean;
+  liveStatus: string;
+  livePublishedAt: string | null;
   liveViewUrl: string;
+  languageCode: string | null;
+  languageName: string | null;
   isDraftModeEnabled: boolean;
   initialFeatureImageUrl?: string | null;
   initialFeatureImageId?: string | null;
@@ -47,14 +50,19 @@ export default function EditPageClient({
   allSiteLanguages,
   updatePageAction,
   publicPageUrl,
-  isLive,
+  liveStatus,
+  livePublishedAt,
   liveViewUrl,
+  languageCode,
+  languageName,
   isDraftModeEnabled,
   initialFeatureImageUrl,
   initialFeatureImageId,
   hasDraft,
 }: EditPageClientProps) {
-  const draftModeUrl = `/api/draft/start?path=${encodeURIComponent(publicPageUrl)}`;
+  const previewUrl = buildViewUrl({ path: publicPageUrl, languageCode, draft: true });
+  const liveUrl = buildViewUrl({ path: liveViewUrl, languageCode });
+  const isLive = liveStatus === "published";
 
   return (
     <UploadFolderProvider defaultFolder={`pages/${page.slug}/`}>
@@ -111,22 +119,30 @@ export default function EditPageClient({
                 allSiteLanguages={allSiteLanguages}
               />
             )}
-            <ViewLiveButton
-              href={liveViewUrl}
-              isLive={isLive}
-              label="page"
-              publishAction={() => publishPage(pageId)}
-            />
             <Button variant="secondary" asChild>
-              <a
-                href={draftModeUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href={previewUrl} target="_blank" rel="noopener noreferrer">
                 <FilePenLine className="mr-2 h-4 w-4" /> Preview
               </a>
             </Button>
+            {isLive && (
+              <Button variant="outline" asChild>
+                <a href={liveUrl} target="_blank" rel="noopener noreferrer">
+                  <Eye className="mr-2 h-4 w-4" /> View Live
+                </a>
+              </Button>
+            )}
             <RevisionHistoryButton parentType="page" parentId={pageId} />
+            <VisibilityControl
+              type="page"
+              id={pageId}
+              status={liveStatus}
+              publishedAt={livePublishedAt}
+              publicPath={liveViewUrl}
+              languageName={languageName ?? undefined}
+              translationGroupId={page.translation_group_id}
+              languages={allSiteLanguages}
+              hasDraft={hasDraft}
+            />
           </div>
         </div>
 

package/templates/nextblock-template/app/cms/pages/[id]/edit/page.tsx

@@ -20,7 +20,13 @@ interface PageWithBlocks extends Page {
   translation_group_id: string;
 }
 
-async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks; hasDraft: boolean; liveStatus: string; liveSlug: string } | null> {
+async function getPageDataWithBlocks(id: number): Promise<{
+  page: PageWithBlocks;
+  hasDraft: boolean;
+  liveStatus: string;
+  liveSlug: string;
+  livePublishedAt: string | null;
+} | null> {
   const supabase = createClient();
   const { data: pageData, error: pageError } = await supabase
     .from("pages")
@@ -64,7 +70,9 @@ async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks
       title: (draft.meta.title as string) ?? pageWithBlocks.title,
       slug: (draft.meta.slug as string) ?? pageWithBlocks.slug,
       language_id: (draft.meta.language_id as number) ?? pageWithBlocks.language_id,
-      status: (draft.meta.status as any) ?? pageWithBlocks.status,
+      // `status`/`published_at` are intentionally NOT overlaid: visibility lives on
+      // the row, so the editor must show what is actually live — not what a stale
+      // draft remembers. Older drafts may still carry those keys.
       meta_title: (draft.meta.meta_title as string) ?? pageWithBlocks.meta_title,
       meta_description: (draft.meta.meta_description as string) ?? pageWithBlocks.meta_description,
       blocks: draft.blocks as any[],
@@ -74,10 +82,11 @@ async function getPageDataWithBlocks(id: number): Promise<{ page: PageWithBlocks
   return {
     page: pageWithBlocks,
     hasDraft,
-    // The LIVE row's status/slug (before the draft overlay above) — the "View
-    // Live" button must reflect what is actually published, not the draft.
+    // The LIVE row's visibility/slug — the top-bar control and the "View Live"
+    // link must reflect what is actually published, never the draft.
     liveStatus: pageData.status as string,
     liveSlug: pageData.slug as string,
+    livePublishedAt: (pageData as { published_at?: string | null }).published_at ?? null,
   };
 }
 
@@ -97,15 +106,15 @@ export default async function EditPage(props: { params: Promise<{ id: string }>
 
   const pageDataResult = await getPageDataWithBlocks(pageId);
   if (!pageDataResult) return notFound();
-  const { page: pageWithBlocks, hasDraft, liveStatus, liveSlug } = pageDataResult;
+  const { page: pageWithBlocks, hasDraft, liveStatus, liveSlug, livePublishedAt } = pageDataResult;
 
   const allSiteLanguages = await getActiveLanguagesServerSide();
 
   const draft = await draftMode();
   const updatePageWithId = updatePage.bind(null, pageId);
   const publicPageUrl = `/${pageWithBlocks.slug}`;
-  const isLive = liveStatus === "published";
   const liveViewUrl = liveSlug === "home" ? "/" : `/${liveSlug}`;
+  const language = allSiteLanguages.find((lang) => lang.id === pageWithBlocks.language_id);
   let initialFeatureImageUrl: string | null = null;
   let initialFeatureImageId: string | null = null;
 
@@ -132,8 +141,11 @@ export default async function EditPage(props: { params: Promise<{ id: string }>
       allSiteLanguages={allSiteLanguages}
       updatePageAction={updatePageWithId}
       publicPageUrl={publicPageUrl}
-      isLive={isLive}
+      liveStatus={liveStatus}
+      livePublishedAt={livePublishedAt}
       liveViewUrl={liveViewUrl}
+      languageCode={language?.code ?? pageWithBlocks.language_code ?? null}
+      languageName={language ? `${language.name} (${language.code.toUpperCase()})` : null}
       isDraftModeEnabled={draft.isEnabled}
       initialFeatureImageUrl={initialFeatureImageUrl}
       initialFeatureImageId={initialFeatureImageId}