create-nextblock 0.14.2 → 0.14.5

package/templates/nextblock-template/app/cms/pages/actions.ts

@@ -43,15 +43,17 @@ export async function createPage(formData: FormData) {
     title: formData.get("title") as string,
     slug: formData.get("slug") as string,
     language_id: parseInt(formData.get("language_id") as string, 10),
-    status: formData.get("status") as PageStatus,
+    // New pages always start private. Going public is an explicit, confirmed act
+    // in the editor's top bar, never a side effect of creating something.
+    status: "draft" as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
     custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: getOptionalFeatureImageId(formData),
   };
 
-  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-    return encodedRedirect("error", "/cms/pages/new", "Missing required fields: title, slug, language, or status.");
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id)) {
+    return encodedRedirect("error", "/cms/pages/new", "Missing required fields: title, slug, or language.");
   }
 
   const translation_group_id = formData.get("translation_group_id") as string || uuidv4();
@@ -127,26 +129,27 @@ export async function updatePage(pageId: number, formData: FormData) {
     return { error: "Original page not found or error fetching it." };
   }
 
+  // Visibility (status / published_at) is NOT part of this payload. It belongs to
+  // the top-bar control, which writes it straight to the `pages` row — so editing
+  // page settings can never publish or unpublish anything by accident.
   const rawFormData = {
     title: formData.get("title") as string,
     slug: formData.get("slug") as string,
     language_id: parseInt(formData.get("language_id") as string, 10),
-    status: formData.get("status") as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
     custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: getOptionalFeatureImageId(formData),
   };
 
-  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-     return { error: "Missing required fields: title, slug, language, or status." };
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id)) {
+     return { error: "Missing required fields: title, slug, or language." };
   }
 
   const pageUpdateData: Partial<Omit<UpsertPagePayload, 'translation_group_id' | 'author_id'>> = {
     title: rawFormData.title,
     slug: rawFormData.slug,
     language_id: rawFormData.language_id,
-    status: rawFormData.status,
     meta_title: rawFormData.meta_title,
     meta_description: rawFormData.meta_description,
     custom_canonical: rawFormData.custom_canonical,
@@ -193,9 +196,13 @@ export async function updatePage(pageId: number, formData: FormData) {
 
 /**
  * Publish a page directly (status -> "published") so it becomes visible on the
- * live site. Used by the draft-aware "View Live" button when an admin chooses to
- * publish a still-draft page. Revalidates the public surfaces, including "/" when
- * the page belongs to the homepage translation group.
+ * live site. Revalidates the public surfaces, including "/" when the page belongs
+ * to the homepage translation group.
+ *
+ * The CMS top bar now goes through `setContentVisibility` in
+ * `app/actions/visibilityActions.ts`, which also handles scheduling and
+ * unpublishing. This remains as a simple programmatic publish for scripts and
+ * customizations.
  */
 export async function publishPage(pageId: number): Promise<{ error?: string } | void> {
   const supabase = createClient();

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -21,7 +21,6 @@ import { useHotkeys } from '../../../../hooks/use-hotkeys';
 import FeatureImageField from "../../components/FeatureImageField";
 
 type Page = Database['public']['Tables']['pages']['Row'];
-type PageStatus = Database['public']['Enums']['page_status'];
 type Language = Database['public']['Tables']['languages']['Row'];
 // Remove: import { getActiveLanguagesClientSide } from "@nextblock-cms/db";
 
@@ -76,7 +75,6 @@ export default function PageForm({
     // If no languages are available, default to an empty string
     return "";
   });
-  const [status, setStatus] = useState<PageStatus>(page?.status || "draft");
   const [metaTitle, setMetaTitle] = useState(page?.meta_title || "");
   const [metaDescription, setMetaDescription] = useState(
     page?.meta_description || ""
@@ -118,7 +116,6 @@ export default function PageForm({
     setTitle(page.title || "");
     setSlug(page.slug || "");
     setLanguageId(page.language_id?.toString() || "");
-    setStatus(page.status || "draft");
     setMetaTitle(page.meta_title || "");
     setMetaDescription(page.meta_description || "");
     setCustomCanonical(page.custom_canonical || "");
@@ -131,7 +128,6 @@ export default function PageForm({
     page?.meta_description,
     page?.meta_title,
     page?.slug,
-    page?.status,
     page?.title,
     page?.updated_at,
   ]);
@@ -156,7 +152,6 @@ export default function PageForm({
       formData.append("title", title);
       formData.append("slug", slug);
       formData.append("language_id", languageId);
-      formData.append("status", status);
       formData.append("meta_title", metaTitle);
       formData.append("meta_description", metaDescription);
       formData.append("custom_canonical", customCanonical);
@@ -214,7 +209,6 @@ export default function PageForm({
       title !== (page?.title || "") ||
       slug !== (page?.slug || "") ||
       languageId !== (page?.language_id?.toString() || "") ||
-      status !== (page?.status || "draft") ||
       metaTitle !== (page?.meta_title || "") ||
       metaDescription !== (page?.meta_description || "") ||
       customCanonical !== (page?.custom_canonical || "") ||
@@ -227,7 +221,9 @@ export default function PageForm({
     }, 1000);
 
     return () => clearTimeout(timer);
-  }, [title, slug, languageId, status, metaTitle, metaDescription, featureImageId, page, isEditing]);
+    // customCanonical belongs here too: hasChanges checks it, so leaving it out
+    // meant editing only the canonical URL never scheduled a save.
+  }, [title, slug, languageId, metaTitle, metaDescription, customCanonical, featureImageId, page, isEditing]);
 
   // Removed languagesLoading from this condition
   if (authLoading) {
@@ -304,8 +300,10 @@ export default function PageForm({
           </p>
         </div>
 
-        {/* Language */}
-        <div className="md:col-span-2 flex flex-col gap-1">
+        {/* Language. Visibility deliberately lives in the top bar, not here: this
+            form autosaves into the Live Draft on every keystroke, and publishing
+            must never be a side effect of editing settings. */}
+        <div className="md:col-span-4 flex flex-col gap-1">
           <Label htmlFor="language_id" className="text-xs font-medium">Language</Label>
           {availableLanguages.length > 0 ? (
             <Select
@@ -330,26 +328,6 @@ export default function PageForm({
             <p className="text-xs text-muted-foreground py-2 leading-none">No languages available.</p>
           )}
         </div>
-
-        {/* Status */}
-        <div className="md:col-span-2 flex flex-col gap-1">
-          <Label htmlFor="status" className="text-xs font-medium">Status</Label>
-          <Select
-            name="status"
-            value={status}
-            onValueChange={(value) => setStatus(value as PageStatus)}
-            required
-          >
-            <SelectTrigger className="h-9">
-              <SelectValue placeholder="Select status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="draft">Draft</SelectItem>
-              <SelectItem value="published">Published</SelectItem>
-              <SelectItem value="archived">Archived</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
       </div>
 
       {/* Row 2: SEO Settings. Canonical override (optional): blank = self-referencing canonical. */}

package/templates/nextblock-template/app/cms/pages/page.tsx

@@ -34,6 +34,7 @@ type Page = Database["public"]["Tables"]["pages"]["Row"];
 import LanguageFilterSelect from "../components/LanguageFilterSelect";
 import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
 import { ContentTransferControls } from "../import-export/ContentTransferControls";
+import VisibilityBadge from "../components/VisibilityBadge";
 
 async function getPagesWithDetails(
   filterLanguageId?: number
@@ -172,25 +173,11 @@ export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
                     </Link>
                   </TableCell>
                   <TableCell>
-                    <Badge
-                      variant={
-                        page.status === "published"
-                          ? "default"
-                          : page.status === "draft"
-                            ? "secondary"
-                            : "destructive"
-                      }
-                      className={
-                        page.status === "published"
-                          ? "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50"
-                          : page.status === "draft"
-                            ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50"
-                            : "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600"
-                      }
-                    >
-                      {page.status.charAt(0).toUpperCase() +
-                        page.status.slice(1)}
-                    </Badge>
+                    <VisibilityBadge
+                      type="page"
+                      status={page.status}
+                      publishedAt={page.published_at}
+                    />
                   </TableCell>
                   <TableCell>
                     <Badge variant="outline" className="dark:border-slate-600">

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

@@ -3,13 +3,13 @@ import React from "react";
 import { Separator } from "@nextblock-cms/ui";
 import { createClient } from "@nextblock-cms/db/server";
 import PostForm from "../../components/PostForm";
-import { updatePost, publishPost } from "../../actions";
+import { updatePost } from "../../actions";
 import type { Database } from "@nextblock-cms/db";
 import { notFound, redirect } from "next/navigation";
 import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
 import Link from "next/link";
-import { Button, ViewLiveButton } from "@nextblock-cms/ui";
-import { ArrowLeft, FilePenLine } from "lucide-react";
+import { Button } from "@nextblock-cms/ui";
+import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
 import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
 import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
 import { normalizeContentDraftRow } from "../../../../../lib/visual-editing/draft-content";
@@ -19,6 +19,8 @@ import RevisionHistoryButton from "../../../revisions/RevisionHistoryButton";
 import { resolveMediaUrl } from "../../../../../lib/media/resolveMediaUrl";
 import { CortexAiPageContextRegistrar } from "../../../components/CortexAiPageContext";
 import DraftStatusActions from "../../../components/DraftStatusActions";
+import VisibilityControl from "../../../components/VisibilityControl";
+import { buildViewUrl } from "../../../../../lib/publishing/viewUrl";
 
 type PostType = Database['public']['Tables']['posts']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
@@ -30,7 +32,13 @@ interface PostWithBlocks extends PostType {
   translation_group_id: string;
 }
 
-async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks; hasDraft: boolean; liveStatus: string; liveSlug: string } | null> {
+async function getPostDataWithBlocks(id: number): Promise<{
+  post: PostWithBlocks;
+  hasDraft: boolean;
+  liveStatus: string;
+  liveSlug: string;
+  livePublishedAt: string | null;
+} | null> {
   const supabase = createClient();
   const { data: postData, error: postError } = await supabase
     .from("posts")
@@ -74,13 +82,13 @@ async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks
       title: (draft.meta.title as string) ?? postWithBlocks.title,
       slug: (draft.meta.slug as string) ?? postWithBlocks.slug,
       language_id: (draft.meta.language_id as number) ?? postWithBlocks.language_id,
-      status: (draft.meta.status as any) ?? postWithBlocks.status,
+      // `status`/`published_at` are intentionally NOT overlaid — see the matching
+      // note in cms/pages/[id]/edit/page.tsx. Visibility comes from the row.
       meta_title: (draft.meta.meta_title as string) ?? postWithBlocks.meta_title,
       meta_description: (draft.meta.meta_description as string) ?? postWithBlocks.meta_description,
       label: (draft.meta.label as string) ?? postWithBlocks.label,
       excerpt: (draft.meta.excerpt as string) ?? postWithBlocks.excerpt,
       subtitle: (draft.meta.subtitle as string) ?? postWithBlocks.subtitle,
-      published_at: (draft.meta.published_at as string) ?? postWithBlocks.published_at,
       feature_image_id: (draft.meta.feature_image_id as any) ?? postWithBlocks.feature_image_id,
       blocks: draft.blocks as any[],
     };
@@ -89,10 +97,11 @@ async function getPostDataWithBlocks(id: number): Promise<{ post: PostWithBlocks
   return {
     post: postWithBlocks,
     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: postData.status as string,
     liveSlug: postData.slug as string,
+    livePublishedAt: (postData.published_at as string | null) ?? null,
   };
 }
 
@@ -120,7 +129,9 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
     return notFound();
   }
 
-  const { post: postWithBlocks, hasDraft, liveStatus, liveSlug } = postDataResult;
+  const { post: postWithBlocks, hasDraft, liveStatus, liveSlug, livePublishedAt } = postDataResult;
+  const language = allSiteLanguages.find((lang) => lang.id === postWithBlocks.language_id);
+  const languageCode = language?.code ?? postWithBlocks.language_code ?? null;
 
   let initialFeatureImageUrl: string | null = null;
   let initialFeatureImageIdProp: string | null = null;
@@ -144,9 +155,10 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
 
   const updatePostWithId = updatePost.bind(null, postId);
   const publicPostUrl = `/article/${postWithBlocks.slug}`;
-  const draftModeUrl = `/api/draft/start?path=${encodeURIComponent(publicPostUrl)}`;
-  const isLive = liveStatus === "published";
   const liveViewUrl = `/article/${liveSlug}`;
+  const previewUrl = buildViewUrl({ path: publicPostUrl, languageCode, draft: true });
+  const liveUrl = buildViewUrl({ path: liveViewUrl, languageCode });
+  const isLive = liveStatus === "published";
   
   return (
     <UploadFolderProvider defaultFolder={`posts/${postWithBlocks.slug}/`}>
@@ -190,19 +202,31 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
                   allSiteLanguages={allSiteLanguages}
                 />
               )}
-              <ViewLiveButton
-                href={liveViewUrl}
-                isLive={isLive}
-                label="post"
-                publishAction={publishPost.bind(null, postId)}
-              />
               <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="post" parentId={postId} />
+              <VisibilityControl
+                type="post"
+                id={postId}
+                status={liveStatus}
+                publishedAt={livePublishedAt}
+                publicPath={liveViewUrl}
+                languageName={language ? `${language.name} (${language.code.toUpperCase()})` : undefined}
+                translationGroupId={postWithBlocks.translation_group_id}
+                languages={allSiteLanguages}
+                hasDraft={hasDraft}
+              />
           </div>
         </div>
 

package/templates/nextblock-template/app/cms/posts/actions.ts

@@ -14,8 +14,12 @@ import { encodedRedirect } from "@nextblock-cms/utils/server"; // Ensure this is
 
 /**
  * Publish a post directly (status -> "published") so it becomes visible on the
- * live site. Used by the draft-aware "View Live" button when an admin chooses to
- * publish a still-draft post.
+ * live site.
+ *
+ * The CMS top bar now goes through `setContentVisibility` in
+ * `app/actions/visibilityActions.ts`, which also handles scheduling and
+ * unpublishing. This remains as a simple programmatic publish for scripts and
+ * customizations.
  */
 export async function publishPost(postId: number): Promise<{ error?: string } | void> {
   const supabase = createClient();
@@ -75,32 +79,26 @@ export async function createPost(formData: FormData) {
     slug: formData.get("slug") as string,
     language_id: parseInt(formData.get("language_id") as string, 10),
     label: formData.get("label") as string || null,
-    status: formData.get("status") as PageStatus,
+    // New posts always start private; going public is an explicit act in the
+    // editor's top bar, never a side effect of creating something.
+    status: "draft" as PageStatus,
     excerpt: formData.get("excerpt") as string || null,
     subtitle: formData.get("subtitle") as string || null,
-    published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
     custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: featureImageId_create,
   };
 
-  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-    return encodedRedirect("error", "/cms/posts/new", "Missing required fields: title, slug, language, or status.");
-  }
-
-  let publishedAtISO: string | null = null;
-  if (rawFormData.published_at) {
-    const parsedDate = new Date(rawFormData.published_at);
-    if (!isNaN(parsedDate.getTime())) publishedAtISO = parsedDate.toISOString();
-    else publishedAtISO = rawFormData.published_at;
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id)) {
+    return encodedRedirect("error", "/cms/posts/new", "Missing required fields: title, slug, or language.");
   }
 
   const newTranslationGroupId = uuidv4();
 
   const postData: UpsertPostPayload = {
     ...rawFormData,
-    published_at: publishedAtISO,
+    published_at: null,
     author_id: user.id,
     translation_group_id: newTranslationGroupId,
     feature_image_id: rawFormData.feature_image_id,
@@ -196,35 +194,28 @@ export async function updatePost(postId: number, formData: FormData) {
     featureImageId_update = featureImageIdStr_update;
   }
 
+  // Visibility (status / published_at) is NOT part of this payload — see the note
+  // in cms/pages/actions.ts updatePage. The top-bar control owns it.
   const rawFormData = {
     title: formData.get("title") as string,
     slug: formData.get("slug") as string,
     language_id: existingPost.language_id, // Use existing post's language_id
     label: formData.get("label") as string || null,
-    status: formData.get("status") as PageStatus,
     excerpt: formData.get("excerpt") as string || null,
     subtitle: formData.get("subtitle") as string || null,
-    published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
     custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: featureImageId_update,
   };
 
-  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id) || !rawFormData.status) {
-     return { error: "Missing required fields: title, slug, language, or status." };
+  if (!rawFormData.title || !rawFormData.slug || isNaN(rawFormData.language_id)) {
+     return { error: "Missing required fields: title, slug, or language." };
   }
   if (rawFormData.language_id !== existingPost.language_id) {
       return { error: "Changing the language of an existing post version is not allowed. Create a new translation instead." };
   }
 
-  let publishedAtISO: string | null = null;
-  if (rawFormData.published_at) {
-    const parsedDate = new Date(rawFormData.published_at);
-    if (!isNaN(parsedDate.getTime())) publishedAtISO = parsedDate.toISOString();
-    else publishedAtISO = rawFormData.published_at;
-  }
-
   const postUpdateData: Partial<Omit<UpsertPostPayload, 'translation_group_id' | 'author_id'>> = {
     title: rawFormData.title,
     slug: rawFormData.slug,
@@ -232,8 +223,6 @@ export async function updatePost(postId: number, formData: FormData) {
     label: rawFormData.label,
     excerpt: rawFormData.excerpt,
     subtitle: rawFormData.subtitle,
-    status: rawFormData.status,
-    published_at: publishedAtISO,
     meta_title: rawFormData.meta_title,
     meta_description: rawFormData.meta_description,
     custom_canonical: rawFormData.custom_canonical,

package/templates/nextblock-template/app/cms/posts/components/PostForm.tsx

@@ -20,7 +20,6 @@ import { useAuth } from '../../../../context/AuthContext';
 import FeatureImageField from "../../components/FeatureImageField";
 
 type Post = Database['public']['Tables']['posts']['Row'];
-type PageStatus = Database['public']['Enums']['page_status'];
 type Language = Database['public']['Tables']['languages']['Row'];
 import { useHotkeys } from '../../../../hooks/use-hotkeys';
 
@@ -35,28 +34,6 @@ interface PostFormProps {
   initialFeatureImageId?: string | null;
 }
 
-function formatDateTimeLocal(value: string | null | undefined) {
-  if (!value) {
-    return "";
-  }
-
-  try {
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) {
-      return "";
-    }
-
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  } catch {
-    return "";
-  }
-}
-
 export default function PostForm({
   post,
   formAction,
@@ -77,12 +54,8 @@ export default function PostForm({
   const [languageId, setLanguageId] = useState<string>(
     post?.language_id?.toString() || ""
   );
-  const [status, setStatus] = useState<PageStatus>(post?.status || "draft");
   const [excerpt, setExcerpt] = useState(post?.excerpt || "");
   const [subtitle, setSubtitle] = useState(post?.subtitle || "");
-  const [publishedAt, setPublishedAt] = useState<string>(() =>
-    formatDateTimeLocal(post?.published_at)
-  );
   const [metaTitle, setMetaTitle] = useState(post?.meta_title || "");
   const [metaDescription, setMetaDescription] = useState(
     post?.meta_description || ""
@@ -124,10 +97,8 @@ export default function PostForm({
     setSlug(post.slug || "");
     setLabel(post.label || "");
     setLanguageId(post.language_id?.toString() || "");
-    setStatus(post.status || "draft");
     setExcerpt(post.excerpt || "");
     setSubtitle(post.subtitle || "");
-    setPublishedAt(formatDateTimeLocal(post.published_at));
     setMetaTitle(post.meta_title || "");
     setMetaDescription(post.meta_description || "");
     setCustomCanonical(post.custom_canonical || "");
@@ -141,9 +112,7 @@ export default function PostForm({
     post?.language_id,
     post?.meta_description,
     post?.meta_title,
-    post?.published_at,
     post?.slug,
-    post?.status,
     post?.subtitle,
     post?.title,
     post?.updated_at,
@@ -181,10 +150,8 @@ export default function PostForm({
       formData.append("slug", slug);
       formData.append("language_id", languageId);
       formData.append("label", label);
-      formData.append("status", status);
       formData.append("excerpt", excerpt);
       formData.append("subtitle", subtitle);
-      formData.append("published_at", publishedAt);
       formData.append("meta_title", metaTitle);
       formData.append("meta_description", metaDescription);
       formData.append("custom_canonical", customCanonical);
@@ -235,17 +202,13 @@ export default function PostForm({
       return;
     }
 
-    const dbPublishedAt = formatDateTimeLocal(post?.published_at);
-
     const hasChanges =
       title !== (post?.title || "") ||
       slug !== (post?.slug || "") ||
       label !== (post?.label || "") ||
       languageId !== (post?.language_id?.toString() || "") ||
-      status !== (post?.status || "draft") ||
       excerpt !== (post?.excerpt || "") ||
       subtitle !== (post?.subtitle || "") ||
-      publishedAt !== dbPublishedAt ||
       metaTitle !== (post?.meta_title || "") ||
       metaDescription !== (post?.meta_description || "") ||
       customCanonical !== (post?.custom_canonical || "") ||
@@ -263,10 +226,8 @@ export default function PostForm({
     slug,
     label,
     languageId,
-    status,
     excerpt,
     subtitle,
-    publishedAt,
     metaTitle,
     metaDescription,
     customCanonical,
@@ -345,35 +306,17 @@ export default function PostForm({
           )}
         </div>
 
-        {/* Status */}
-        <div className="md:col-span-2 flex flex-col gap-1">
-          <Label htmlFor="status" className="text-xs font-medium">Status</Label>
-          <Select name="status" value={status} onValueChange={(value) => setStatus(value as PageStatus)} required>
-            <SelectTrigger className="h-9"><SelectValue placeholder="Select status" /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="draft">Draft</SelectItem>
-              <SelectItem value="published">Published</SelectItem>
-              <SelectItem value="archived">Archived</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
       </div>
 
-      {/* Row 2: Label + Published At */}
+      {/* Row 2: Label. Visibility and the go-live date live in the top bar — this
+          form autosaves into the Live Draft, and publishing must never be a side
+          effect of editing post settings. */}
       <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-        {/* Label */}
         <div className="md:col-span-6 flex flex-col gap-1">
           <Label htmlFor="label" className="text-xs font-medium">Label</Label>
           <Input id="label" name="label" value={label} onChange={(e) => setLabel(e.target.value)} className="h-9" placeholder="e.g. Architecture" />
           <p className="text-[10px] text-muted-foreground leading-tight">Short pill text shown on the article hero and post cards.</p>
         </div>
-
-        {/* Published At */}
-        <div className="md:col-span-6 flex flex-col gap-1">
-          <Label htmlFor="published_at" className="text-xs font-medium">Published At (Optional)</Label>
-          <Input id="published_at" name="published_at" type="datetime-local" value={publishedAt} onChange={(e) => setPublishedAt(e.target.value)} className="h-9" />
-          <p className="text-[10px] text-muted-foreground leading-tight">Leave blank to publish immediately when status is &apos;Published&apos;.</p>
-        </div>
       </div>
 
       {/* Row 3: Excerpt + Subtitle */}

package/templates/nextblock-template/app/cms/posts/page.tsx

@@ -30,6 +30,7 @@ type Post = Database['public']['Tables']['posts']['Row'] & { feature_image_url?:
 import LanguageFilterSelect from "../components/LanguageFilterSelect";
 import DeletePostButtonClient from "./components/DeletePostButtonClient"; // Import the new client component
 import { ContentTransferControls } from "../import-export/ContentTransferControls";
+import VisibilityBadge from "../components/VisibilityBadge";
 
 async function getPostsWithDetails(filterLanguageId?: number): Promise<{ post: Post; languageCode: string }[]> {
   const supabase = createClient();
@@ -154,19 +155,11 @@ export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
                     </Link>
                   </TableCell>
                   <TableCell>
-                    <Badge
-                      variant={
-                        post.status === "published" ? "default" :
-                        post.status === "draft" ? "secondary" : "destructive"
-                      }
-                      className={
-                        post.status === "published" ? "bg-green-100 text-green-700 dark:bg-green-700/30 dark:text-green-300 dark:border-green-700/50" :
-                        post.status === "draft" ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700/30 dark:text-yellow-300 dark:border-yellow-700/50" :
-                        "bg-slate-100 text-slate-700 dark:bg-slate-700/30 dark:text-slate-300 dark:border-slate-600"
-                      }
-                    >
-                      {post.status.charAt(0).toUpperCase() + post.status.slice(1)}
-                    </Badge>
+                    <VisibilityBadge
+                      type="post"
+                      status={post.status}
+                      publishedAt={post.published_at}
+                    />
                   </TableCell>
                   <TableCell><Badge variant="outline" className="dark:border-slate-600">{languageCode}</Badge></TableCell>
                   <TableCell className="text-muted-foreground text-xs hidden md:table-cell">/article/{post.slug}</TableCell>