fix(preview): draft-preview bar drops redundant Publish when nothing is pending (#1986)

Under the auto-publish posture an AI build leaves zero pending drafts, yet opening
a draft preview still showed 'Nothing here is live until you publish' + 'Changes (0)'
+ a Publish button — a self-contradicting, no-op CTA. DraftPreviewBar now reflects
the real pending-draft count: a known-zero count softens the bar to a neutral
preview indicator and drops the Publish/Changes affordances; an unknown count keeps
the publish path. Aligns with HomePage (count-gated) and RuntimeDraftBar (draft-gated).

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

.changeset/draft-preview-bar-no-pending.md

@@ -0,0 +1,15 @@
+---
+'@object-ui/app-shell': patch
+'@object-ui/i18n': patch
+---
+
+fix(preview): draft-preview bar no longer demands a redundant Publish when nothing is pending
+
+Under the auto-publish posture an AI build leaves zero pending drafts, yet opening a
+draft preview still showed "Draft preview — Nothing here is live until you publish."
+alongside "Changes (0)" and a Publish button — a self-contradicting, no-op call to
+action. `DraftPreviewBar` now reflects the real pending-draft count: when it is
+known to be zero the bar softens to a neutral preview indicator and drops the
+Publish/Changes affordances; an unknown count (still loading / fetch failed) keeps
+the publish path. `HomePage` (count-gated) and `RuntimeDraftBar` (draft-gated)
+already behaved this way — this aligns the third surface.

packages/app-shell/src/preview/DraftPreviewBar.tsx

@@ -17,7 +17,7 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Eye, X, Rocket, GitCompareArrows } from 'lucide-react';
-import { Button } from '@object-ui/components';
+import { Button, cn } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { usePreviewDrafts, markPreviewExit, PREVIEW_QUERY_FLAG } from './PreviewModeContext';
 import { usePublishAllDrafts } from './usePublishAllDrafts';
@@ -77,34 +77,55 @@ export function DraftPreviewBar() {
     setTimeout(() => { try { window.location.reload(); } catch { /* ignore */ } }, 300);
   };
 
+  // Under the auto-publish posture (and any time a draft preview is opened with
+  // nothing staged) there are zero pending drafts. Claiming "nothing is live
+  // until you publish" and offering a Publish button then is both false and a
+  // no-op, so the bar drops the publish affordance and softens to a neutral
+  // preview indicator. An UNKNOWN count (null — still loading or the fetch
+  // failed) keeps the publish path: we only relax when we KNOW the count is zero.
+  const noChanges = pendingCount === 0;
+
   return (
     <div
-      className="sticky top-0 z-40 flex items-center gap-3 border-b border-amber-300/70 bg-amber-50 px-4 py-2 text-sm text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/40 dark:text-amber-200"
+      className={cn(
+        'sticky top-0 z-40 flex items-center gap-3 border-b px-4 py-2 text-sm',
+        noChanges
+          ? 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700/60 dark:bg-slate-900/40 dark:text-slate-300'
+          : 'border-amber-300/70 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/40 dark:text-amber-200',
+      )}
       data-testid="draft-preview-bar"
     >
       <Eye className="h-4 w-4 shrink-0" />
       <p className="min-w-0 flex-1 truncate">
-        {t('preview.draftBar.message', {
-          defaultValue: 'Draft preview — you are seeing unpublished changes. Nothing here is live until you publish.',
-        })}
+        {noChanges
+          ? t('preview.draftBar.messageClean', {
+              defaultValue: 'Draft preview — no unpublished changes; everything here is already live.',
+            })
+          : t('preview.draftBar.message', {
+              defaultValue: 'Draft preview — you are seeing unpublished changes. Nothing here is live until you publish.',
+            })}
       </p>
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={() => setChangesOpen(true)}
-        data-testid="draft-preview-changes"
-      >
-        <GitCompareArrows className="mr-1 h-3.5 w-3.5" />
-        {t('preview.draftBar.changes', { defaultValue: 'Changes' })}
-        {typeof pendingCount === 'number' ? ` (${pendingCount})` : ''}
-      </Button>
-      <Button size="sm" onClick={publish} disabled={publishing} data-testid="draft-preview-publish">
-        <Rocket className="mr-1 h-3.5 w-3.5" />
-        {publishing
-          ? t('preview.draftBar.publishing', { defaultValue: 'Publishing…' })
-          : t('preview.draftBar.publish', { defaultValue: 'Publish' })}
-      </Button>
-      <DraftChangesPanel open={changesOpen} onOpenChange={setChangesOpen} />
+      {!noChanges && (
+        <>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setChangesOpen(true)}
+            data-testid="draft-preview-changes"
+          >
+            <GitCompareArrows className="mr-1 h-3.5 w-3.5" />
+            {t('preview.draftBar.changes', { defaultValue: 'Changes' })}
+            {typeof pendingCount === 'number' ? ` (${pendingCount})` : ''}
+          </Button>
+          <Button size="sm" onClick={publish} disabled={publishing} data-testid="draft-preview-publish">
+            <Rocket className="mr-1 h-3.5 w-3.5" />
+            {publishing
+              ? t('preview.draftBar.publishing', { defaultValue: 'Publishing…' })
+              : t('preview.draftBar.publish', { defaultValue: 'Publish' })}
+          </Button>
+          <DraftChangesPanel open={changesOpen} onOpenChange={setChangesOpen} />
+        </>
+      )}
       <Button size="sm" variant="outline" onClick={exit} data-testid="draft-preview-exit">
         <X className="mr-1 h-3.5 w-3.5" />
         {t('preview.draftBar.exit', { defaultValue: 'Exit preview' })}

packages/app-shell/src/preview/__tests__/DraftPreviewBar.test.tsx

@@ -0,0 +1,83 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+// In preview mode regardless of the URL plumbing — we are testing the bar's
+// own count logic, not the query-flag reader.
+vi.mock('../PreviewModeContext', () => ({
+  usePreviewDrafts: () => true,
+  markPreviewExit: vi.fn(),
+  PREVIEW_QUERY_FLAG: 'preview',
+}));
+vi.mock('@object-ui/i18n', () => ({
+  useObjectTranslation: () => ({
+    t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k,
+  }),
+}));
+vi.mock('../usePublishAllDrafts', () => ({
+  usePublishAllDrafts: () => ({ publishAll: vi.fn(async () => ({ ok: true })), publishing: false }),
+}));
+vi.mock('../DraftChangesPanel', () => ({ DraftChangesPanel: () => null }));
+
+import { DraftPreviewBar } from '../DraftPreviewBar';
+
+function renderBar() {
+  return render(
+    <MemoryRouter initialEntries={['/app/x?preview=draft']}>
+      <DraftPreviewBar />
+    </MemoryRouter>,
+  );
+}
+
+function mockDrafts(list: unknown) {
+  global.fetch = vi.fn(async () => ({ ok: true, json: async () => list })) as unknown as typeof fetch;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('DraftPreviewBar', () => {
+  it('drops the redundant Publish affordance when there are zero pending drafts (auto-publish norm)', async () => {
+    mockDrafts([]);
+    renderBar();
+    // The bar is always the preview-mode indicator…
+    expect(screen.getByTestId('draft-preview-bar')).toBeInTheDocument();
+    // …but once we KNOW the count is zero, Publish + Changes go away and the
+    // copy stops claiming nothing is live.
+    await waitFor(() => {
+      expect(screen.queryByTestId('draft-preview-publish')).not.toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('draft-preview-changes')).not.toBeInTheDocument();
+    expect(screen.getByTestId('draft-preview-bar')).toHaveTextContent(/no unpublished changes/i);
+    expect(screen.getByTestId('draft-preview-exit')).toBeInTheDocument();
+  });
+
+  it('keeps Publish + the warning message + Changes(N) when drafts are genuinely pending', async () => {
+    mockDrafts([{ type: 'object', name: 'a' }, { type: 'object', name: 'b' }]);
+    renderBar();
+    await waitFor(() => {
+      expect(screen.getByTestId('draft-preview-publish')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('draft-preview-changes')).toHaveTextContent('(2)');
+    expect(screen.getByTestId('draft-preview-bar')).toHaveTextContent(/Nothing here is live until you publish/i);
+  });
+
+  it('keeps Publish visible when the draft count is unknown (fetch failed) — only a known zero relaxes', async () => {
+    global.fetch = vi.fn(async () => ({ ok: false, json: async () => null })) as unknown as typeof fetch;
+    renderBar();
+    // pendingCount stays null → not known-zero → safe default keeps the publish path.
+    await waitFor(() => {
+      expect(screen.getByTestId('draft-preview-publish')).toBeInTheDocument();
+    });
+  });
+});

packages/i18n/src/locales/en.ts

@@ -1799,6 +1799,7 @@ const en = {
     },
     draftBar: {
       message: 'Draft preview — you are seeing unpublished changes. Nothing here is live until you publish.',
+      messageClean: 'Draft preview — no unpublished changes; everything here is already live.',
       publish: 'Publish',
       publishing: 'Publishing…',
       exit: 'Exit preview',

packages/i18n/src/locales/zh.ts

@@ -1804,6 +1804,7 @@ const zh = {
     },
     draftBar: {
       message: '草稿预览 —— 您看到的是未发布的更改，发布前不会生效。',
+      messageClean: '草稿预览 —— 没有未发布的更改，此处内容均已生效。',
       publish: '发布',
       publishing: '发布中…',
       exit: '退出预览',