= ({ currentTab, c
>
{post?.title}
- {post?.published_at && (
+ {publicationSummary && (
- {isEmailOnly(post) &&
- `Sent on ${formatDisplayDate(post.published_at, siteTimezone)} at ${formatDisplayTime(post.published_at, siteTimezone)}`}
- {showPublishedOnSite &&
- `Published on your site on ${formatDisplayDate(post.published_at, siteTimezone)} at ${formatDisplayTime(post.published_at, siteTimezone)}`}
- {showPublishedAndSent &&
- `Published and sent on ${formatDisplayDate(post.published_at, siteTimezone)} at ${formatDisplayTime(post.published_at, siteTimezone)}`}
+ {publicationSummary}
)}
+
)}
-
diff --git a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-banner.tsx b/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-banner.tsx
deleted file mode 100644
index 65f389692f6..00000000000
--- a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-banner.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { Banner, Button } from '@tryghost/shade/components';
-import { Box, Grid, Text } from '@tryghost/shade/primitives';
-import { LucideIcon, cn, formatNumber } from '@tryghost/shade/utils';
-import { useEmailSendingStatusContext } from './email-sending-status-context';
-import { usePostAnalytics } from '@/posts/analytics/providers/post-analytics-context';
-import { getEmailSendingProgressCopy } from '@/posts/email-sending-status/email-sending-status-copy';
-import { useSendingEta } from '@/posts/email-sending-status/use-sending-eta';
-import type { EmailSendingState } from '@tryghost/admin-x-framework/api/emails';
-
-const FILL_CLIP_ID = 'email-sending-fill-clip';
-
-/** A grey level rising over a white face and dropping back, on the arrow's tempo. */
-const FillingGlyph = () => (
-
-);
-
-const StatusGlyph = ({ sending }: { sending: EmailSendingState }) => {
- if (sending.status === 'preparing') {
- return (
-
-
-
- );
- }
-
- if (sending.status === 'failed') {
- return (
-
-
-
- );
- }
-
- return (
-
-
-
-
-
- );
-};
-
-const activeDetail = (sending: Exclude) => {
- const { completed, total } = sending.progress;
-
- if (total === 0) {
- return null;
- }
-
- // Preparation reports a percentage so the recipient count only climbs
- // once, during sending, while the audience size stays on screen throughout.
- if (sending.status === 'preparing') {
- const percent = Math.min(100, Math.floor((completed / total) * 100));
- return `${formatNumber(percent)}% complete · ${formatNumber(total)} total`;
- }
-
- return getEmailSendingProgressCopy(sending, null).detail;
-};
-
-const failureDetail = (
- sending: Extract,
- error?: string | null,
-) => {
- const { completed, total } = sending.progress;
- const sent = sending.failed_during === 'submitting' ? completed : 0;
- const progress =
- sent > 0
- ? `${formatNumber(sent)} of ${formatNumber(total)} emails were sent.`
- : total > 0
- ? `None of the ${formatNumber(total)} emails were sent.`
- : 'No emails were sent.';
-
- return error ? `${progress} ${error}` : progress;
-};
-
-const EmailSendingStatusBanner = () => {
- const { post } = usePostAnalytics();
- const { status, isNewsletterDataHidden, hasUnknownDeliveryOutcome, isRetrying, retrySending } =
- useEmailSendingStatusContext();
- const sending = status?.sending;
- const estimate = useSendingEta(status);
-
- if (!sending || (sending.status === 'submitted' && !isNewsletterDataHidden)) {
- return null;
- }
-
- const isFailed = sending.status === 'failed';
- const hasSentEmails = isFailed
- ? !hasUnknownDeliveryOutcome &&
- sending.failed_during === 'submitting' &&
- sending.progress.completed > 0
- : false;
- let title: string;
- let detail: string | null;
-
- if (sending.status === 'failed') {
- title = hasSentEmails ? 'Some emails failed to send' : 'Emails failed to send';
- detail = hasUnknownDeliveryOutcome
- ? post?.email?.error || 'Something went wrong while sending this email.'
- : failureDetail(sending, post?.email?.error);
- } else {
- const progressCopy = getEmailSendingProgressCopy(sending, null);
- title = progressCopy.title;
- detail = activeDetail(sending);
- }
-
- const retryLabel = hasSentEmails ? 'Send remaining emails' : 'Retry sending email';
-
- return (
-
-
-
-
-
-
- {title}
-
-
-
- {detail}
-
- {!isFailed && estimate && (
-
- {detail && {' · '}}
- {estimate}
-
- )}
-
- {isFailed && !hasUnknownDeliveryOutcome && (
-
- )}
-
-
- );
-};
-
-export default EmailSendingStatusBanner;
diff --git a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-context.ts b/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-context.ts
index 9265f3d641a..c141dbd24c2 100644
--- a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-context.ts
+++ b/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-context.ts
@@ -7,6 +7,8 @@ export interface EmailSendingStatusContextValue {
isNewsletterDataHidden: boolean;
newsletterDataHiddenReason: 'sending' | 'failed' | null;
hasNewsletterAnalytics: boolean;
+ /** The send has finished successfully and its newsletter data is up to date. */
+ isEmailSent: boolean;
hasUnknownDeliveryOutcome: boolean;
isRetrying: boolean;
retrySending: () => Promise;
diff --git a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-provider.tsx b/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-provider.tsx
index 75fb55a1a47..546caf35f0e 100644
--- a/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-provider.tsx
+++ b/apps/admin/src/posts/analytics/email-sending-status/email-sending-status-provider.tsx
@@ -112,6 +112,12 @@ const EmailSendingStatusProvider = ({ children }: { children: ReactNode }) => {
(post.status === 'published' || post.status === 'sent') &&
(hasBeenEmailed(post) || (enabled && status && post.email)),
);
+ // Loading counts as unsent so a send in progress never briefly reads as done.
+ const isEmailSent =
+ hasNewsletterAnalytics &&
+ sendingStatus !== 'failed' &&
+ !isStatusLoading &&
+ !isNewsletterDataHidden;
const retrySending = useCallback(async () => {
if (!emailId || retryInFlight.current) {
@@ -140,6 +146,7 @@ const EmailSendingStatusProvider = ({ children }: { children: ReactNode }) => {
isNewsletterDataHidden,
newsletterDataHiddenReason,
hasNewsletterAnalytics,
+ isEmailSent,
hasUnknownDeliveryOutcome,
isRetrying,
retrySending,
@@ -150,6 +157,7 @@ const EmailSendingStatusProvider = ({ children }: { children: ReactNode }) => {
isNewsletterDataHidden,
newsletterDataHiddenReason,
hasNewsletterAnalytics,
+ isEmailSent,
hasUnknownDeliveryOutcome,
isRetrying,
retrySending,
diff --git a/apps/admin/src/posts/analytics/email-sending-status/post-analytics-email-sending-status.tsx b/apps/admin/src/posts/analytics/email-sending-status/post-analytics-email-sending-status.tsx
new file mode 100644
index 00000000000..05e80c8eb97
--- /dev/null
+++ b/apps/admin/src/posts/analytics/email-sending-status/post-analytics-email-sending-status.tsx
@@ -0,0 +1,108 @@
+import { Button } from '@tryghost/shade/components';
+import { Inline } from '@tryghost/shade/primitives';
+import { cn, formatNumber } from '@tryghost/shade/utils';
+import { useEmailSendingStatusContext } from './email-sending-status-context';
+import { usePostAnalytics } from '@/posts/analytics/providers/post-analytics-context';
+import { getEmailSendingLine } from '@/posts/email-sending-status/email-sending-status-copy';
+import { EmailSendingStatusLine } from '@/posts/email-sending-status/email-sending-status-line';
+import { useChangeCount } from '@/posts/email-sending-status/use-change-count';
+import { useSendingEta } from '@/posts/email-sending-status/use-sending-eta';
+import type { EmailSendingState } from '@tryghost/admin-x-framework/api/emails';
+
+// Use `fade-in-0`, not `fade-in`: Ember's ghost.css has its own `.fade-in`
+// that leaves content at opacity 0.
+const CROSSFADE = 'animate-in fade-in-0 duration-300 ease-out motion-reduce:animate-none';
+
+const failureDetail = (
+ sending: Extract,
+ error?: string | null,
+) => {
+ const { completed, total } = sending.progress;
+ const sent = sending.failed_during === 'submitting' ? completed : 0;
+ const progress =
+ sent > 0
+ ? `${formatNumber(sent)} of ${formatNumber(total)} emails were sent.`
+ : total > 0
+ ? `None of the ${formatNumber(total)} emails were sent.`
+ : 'No emails were sent.';
+
+ return error ? `${progress} ${error}` : progress;
+};
+
+const PostAnalyticsEmailSendingStatus = () => {
+ const { post } = usePostAnalytics();
+ const {
+ status,
+ isStatusLoading,
+ isNewsletterDataHidden,
+ hasUnknownDeliveryOutcome,
+ isRetrying,
+ retrySending,
+ } = useEmailSendingStatusContext();
+ const sending = status?.sending;
+ const estimate = useSendingEta(status);
+ const isFailed = sending?.status === 'failed';
+ // After load, a swap between the failure and the sending line animates the
+ // new one in, and the old one goes at once rather than fading out.
+ const swapCount = useChangeCount(isFailed, !isStatusLoading);
+
+ if (isFailed) {
+ const hasSentEmails =
+ !hasUnknownDeliveryOutcome &&
+ sending.failed_during === 'submitting' &&
+ sending.progress.completed > 0;
+ const detail = hasUnknownDeliveryOutcome
+ ? post?.email?.error || 'Something went wrong while sending this email.'
+ : failureDetail(sending, post?.email?.error);
+
+ return (
+ 0 && CROSSFADE,
+ )}
+ data-testid="email-sending-status-line"
+ gap="xs"
+ role="alert"
+ wrap
+ >
+
+ {hasSentEmails ? 'Some emails failed to send' : 'Emails failed to send'}
+
+ ·
+ {detail}
+ {!hasUnknownDeliveryOutcome && (
+
+ )}
+
+ );
+ }
+
+ const isActive = sending && (sending.status !== 'submitted' || isNewsletterDataHidden);
+
+ return (
+ 0}
+ data-testid="email-sending-status-line"
+ line={
+ isActive
+ ? getEmailSendingLine(sending, { estimate, preparingProgress: 'percentage' })
+ : null
+ }
+ ready={!isStatusLoading}
+ />
+ );
+};
+
+export default PostAnalyticsEmailSendingStatus;
diff --git a/apps/admin/src/posts/analytics/post-analytics.acceptance.test.tsx b/apps/admin/src/posts/analytics/post-analytics.acceptance.test.tsx
index fd126a15cf2..4241377227f 100644
--- a/apps/admin/src/posts/analytics/post-analytics.acceptance.test.tsx
+++ b/apps/admin/src/posts/analytics/post-analytics.acceptance.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, onTestFinished } from 'vitest';
import { page } from 'vitest/browser';
import { focusManager } from '@tanstack/react-query';
@@ -15,6 +15,7 @@ import {
renderAdminApp,
settingsResponse,
webAnalyticsBootOverrides,
+ type TinybirdPipeCapture,
} from '@test-utils/acceptance';
import { membersScreen } from '@/members/members.screen';
import { postsListScreen } from '@/posts/list/posts-list.screen';
@@ -242,6 +243,8 @@ describe('Post analytics overview', () => {
await expect.element(page.getByText('Sending emails')).toBeVisible();
await expect.element(page.getByText(/500 of 1,000/)).toBeVisible();
await expect.element(page.getByText('Your newsletter is being sent')).toBeVisible();
+ await expect.element(page.getByText(/^Published on your site on/)).toBeVisible();
+ await expect.element(page.getByText(/^Published and sent/)).not.toBeInTheDocument();
await expect.element(postAnalyticsScreen.uniqueVisitors()).toHaveTextContent('250');
await postAnalyticsScreen.newsletterTab().click();
@@ -259,7 +262,7 @@ describe('Post analytics overview', () => {
await expect
.poll(() => statusRequestCount, { timeout: 3500 })
.toBeGreaterThan(pendingStatusRequestCount);
- await expect.element(postAnalyticsScreen.emailSendingStatusBanner()).not.toBeInTheDocument();
+ await expect.element(postAnalyticsScreen.emailSendingStatusLine()).not.toBeInTheDocument();
await expect.poll(() => postsApi.requests.length).toBeGreaterThan(1);
await expect.poll(() => detailedPostsApi.requests.length).toBeGreaterThan(1);
await expect.poll(() => basicStatsApi.requests.length).toBeGreaterThan(0);
@@ -268,6 +271,8 @@ describe('Post analytics overview', () => {
await expect.element(page.getByText('1,000').first()).toBeVisible();
await expect.element(page.getByText('400').first()).toBeVisible();
await expect.element(page.getByRole('button', { name: /View members/ }).first()).toBeEnabled();
+ await expect.element(page.getByText(/^Published and sent to 1,000 members on/)).toBeVisible();
+ await expect.element(page.getByText(/^Published on your site on/)).not.toBeInTheDocument();
});
it('shows only recipient counts until a sending estimate is available', async () => {
@@ -293,21 +298,101 @@ describe('Post analytics overview', () => {
});
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
- .toHaveTextContent(/Sending emails\s*250 of 1,000/);
+ .element(postAnalyticsScreen.emailSendingStatusLine())
+ .toHaveTextContent('Sending emails · 250 of 1,000');
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
+ .element(postAnalyticsScreen.emailSendingStatusLine())
.not.toHaveTextContent('minute');
estimate = 30;
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
- .toHaveTextContent(/Sending emails\s*250 of 1,000/);
+ .element(postAnalyticsScreen.emailSendingStatusLine())
+ .toHaveTextContent('Sending emails · 250 of 1,000');
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
+ .element(postAnalyticsScreen.emailSendingStatusLine())
.toHaveTextContent('Less than 1 minute left');
});
- it('moves a failed send and its retry action into the banner', async () => {
+ it('does not show a send as complete while its status is loading', async () => {
+ seedPostAnalyticsWorld({
+ email: { id: EMAIL_ID, email_count: 1000, opened_count: 0, status: 'submitting' },
+ });
+ let releaseStatus = () => {};
+ const statusReleased = new Promise((resolve) => {
+ releaseStatus = resolve;
+ });
+ // A held request would block teardown if an assertion fails first.
+ onTestFinished(() => releaseStatus());
+ fakeAdminEndpoint('GET', `/emails/${EMAIL_ID}/status/`, async () => {
+ await statusReleased;
+ return {
+ email_statuses: [
+ {
+ id: EMAIL_ID,
+ sending: {
+ status: 'submitting',
+ progress: { completed: 250, total: 1000, estimated_seconds_remaining: null },
+ },
+ },
+ ],
+ };
+ });
+
+ await renderAdminApp(`/posts/analytics/${POST_ID}`, {
+ labs: { improveSendingUI: true },
+ boot: webAnalyticsBootOverrides(),
+ });
+
+ await expect.element(page.getByText(/^Published on your site on/)).toBeVisible();
+ await expect.element(page.getByText(/^Published and sent/)).not.toBeInTheDocument();
+
+ releaseStatus();
+ await expect
+ .element(postAnalyticsScreen.emailSendingStatusLine())
+ .toHaveTextContent('Sending emails · 250 of 1,000');
+ await expect.element(page.getByText(/^Published on your site on/)).toBeVisible();
+ });
+
+ it('only shows an email-only post as sent once the send finishes', async () => {
+ seedPostAnalyticsWorld({
+ email_only: true,
+ status: 'sent',
+ email: { id: EMAIL_ID, email_count: 1000, opened_count: 0, status: 'submitting' },
+ });
+ fakeAdminEndpoint('GET', `/emails/${EMAIL_ID}/status/`, {
+ email_statuses: [
+ {
+ id: EMAIL_ID,
+ sending: {
+ status: 'submitting',
+ progress: { completed: 250, total: 1000, estimated_seconds_remaining: null },
+ },
+ },
+ ],
+ });
+
+ await renderAdminApp(`/posts/analytics/${POST_ID}`, {
+ labs: { improveSendingUI: true },
+ boot: webAnalyticsBootOverrides(),
+ });
+
+ await expect
+ .element(postAnalyticsScreen.emailSendingStatusLine())
+ .toHaveTextContent('Sending emails · 250 of 1,000');
+ await expect.element(page.getByText(/^Sent\b/)).not.toBeInTheDocument();
+ });
+
+ it('shows the recipient count for a sent email-only post', async () => {
+ seedPostAnalyticsWorld({ email_only: true, status: 'sent' });
+
+ await renderAdminApp(`/posts/analytics/${POST_ID}`, {
+ labs: { improveSendingUI: true },
+ boot: webAnalyticsBootOverrides(),
+ });
+
+ await expect.element(page.getByText(/^Sent to 1,000 members on/)).toBeVisible();
+ });
+
+ it('shows a failed send and its retry action under the title', async () => {
const postOverrides = {
email: {
id: EMAIL_ID,
@@ -368,7 +453,7 @@ describe('Post analytics overview', () => {
await expect.element(page.getByText('Sending emails')).toBeVisible();
// Keep submission visible until asserted, regardless of how many polls CI runs.
hasCompleted = true;
- await expect.element(postAnalyticsScreen.emailSendingStatusBanner()).not.toBeInTheDocument();
+ await expect.element(postAnalyticsScreen.emailSendingStatusLine()).not.toBeInTheDocument();
});
it('shows a generic failure without retry when a batch has an unknown delivery outcome', async () => {
@@ -403,7 +488,7 @@ describe('Post analytics overview', () => {
await expect.element(page.getByText(/only partially sent/)).toBeVisible();
await expect
.element(
- postAnalyticsScreen.emailSendingStatusBanner().getByRole('button', { name: /send|retry/i }),
+ postAnalyticsScreen.emailSendingStatusLine().getByRole('button', { name: /send|retry/i }),
)
.not.toBeInTheDocument();
await expect
@@ -471,10 +556,10 @@ describe('Post analytics overview', () => {
});
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
- .toHaveTextContent(/Preparing emails\s*10% complete · 1,000 total/);
+ .element(postAnalyticsScreen.emailSendingStatusLine())
+ .toHaveTextContent('Preparing emails · 10% complete · 1,000 total');
await expect
- .element(postAnalyticsScreen.emailSendingStatusBanner())
+ .element(postAnalyticsScreen.emailSendingStatusLine())
.not.toHaveTextContent('minute');
// Advance the fake server only after the initial state is visible: extra
// mount-time requests must not race the assertion straight into failure.
@@ -510,7 +595,7 @@ describe('Post analytics overview', () => {
await expect.element(page.getByText('Newsletter performance')).toBeVisible();
await expect.element(page.getByText('Your newsletter is being sent')).not.toBeInTheDocument();
- await expect.element(postAnalyticsScreen.emailSendingStatusBanner()).not.toBeInTheDocument();
+ await expect.element(postAnalyticsScreen.emailSendingStatusLine()).not.toBeInTheDocument();
await expect.poll(() => statusApi.requests.length).toBe(1);
await app.unmount();
});
@@ -575,7 +660,7 @@ describe('Post analytics overview', () => {
boot: webAnalyticsBootOverrides(),
});
- await expect.element(postAnalyticsScreen.emailSendingStatusBanner()).not.toBeInTheDocument();
+ await expect.element(postAnalyticsScreen.emailSendingStatusLine()).not.toBeInTheDocument();
await expect.element(postAnalyticsScreen.newsletterTab()).not.toBeInTheDocument();
expect(statusApi.requests).toHaveLength(0);
});
@@ -608,6 +693,7 @@ describe('Post analytics overview', () => {
});
await expect.element(postAnalyticsScreen.postTitle('Attack of the Clones')).toBeVisible();
+ await expect.element(page.getByText(/^Published and sent on/)).toBeVisible();
await expect.element(postAnalyticsScreen.uniqueVisitors()).toHaveTextContent('250');
const overviewKpiRequestCount = kpisApi.requests.length;
@@ -740,24 +826,18 @@ describe('Post analytics web', () => {
await renderAdminApp(`/posts/analytics/${POST_ID}/web`, { boot: webAnalyticsBootOverrides() });
await expect.element(postAnalyticsScreen.locationRow('US')).toHaveTextContent('United States');
- const initialKpiRequestCount = kpisApi.requests.length;
- const initialLocationsRequestCount = topLocationsApi.requests.length;
- const initialSourcesRequestCount = topSourcesApi.requests.length;
await postAnalyticsScreen.locationRow('US').click();
await expect.poll(currentRoute).toBe(`/posts/analytics/${POST_ID}/web?location=US`);
await expect.element(postAnalyticsScreen.filterContainer()).toHaveTextContent('Location');
- await expect.poll(() => kpisApi.requests.length).toBeGreaterThan(initialKpiRequestCount);
- await expect
- .poll(() => topLocationsApi.requests.length)
- .toBeGreaterThan(initialLocationsRequestCount);
- await expect
- .poll(() => topSourcesApi.requests.length)
- .toBeGreaterThan(initialSourcesRequestCount);
- expect(kpisApi.lastRequest?.params.get('location')).toBe('US');
- expect(topLocationsApi.lastRequest?.params.get('location')).toBe('US');
- expect(topSourcesApi.lastRequest?.params.get('location')).toBe('US');
+ // The applied filter looks up its location options on the same pipe, deliberately
+ // without the location it filters by, so the filtered request need not come last.
+ const sentLocation = (pipeApi: TinybirdPipeCapture) =>
+ pipeApi.requests.some(({ params }) => params.get('location') === 'US');
+ await expect.poll(() => sentLocation(kpisApi)).toBe(true);
+ await expect.poll(() => sentLocation(topLocationsApi)).toBe(true);
+ await expect.poll(() => sentLocation(topSourcesApi)).toBe(true);
});
});
diff --git a/apps/admin/src/posts/analytics/post-analytics.screen.ts b/apps/admin/src/posts/analytics/post-analytics.screen.ts
index 13b440b0956..6a8a53e9aae 100644
--- a/apps/admin/src/posts/analytics/post-analytics.screen.ts
+++ b/apps/admin/src/posts/analytics/post-analytics.screen.ts
@@ -23,7 +23,7 @@ export const postAnalyticsScreen = {
page.getByTestId(sel.webPerformance).getByRole('button', { name: 'View more' }),
uniqueVisitors: () => page.getByTestId(sel.uniqueVisitors),
growthCard: () => page.getByTestId(sel.growth),
- emailSendingStatusBanner: () => page.getByTestId(sel.emailSendingStatusBanner),
+ emailSendingStatusLine: () => page.getByTestId(sel.emailSendingStatusLine),
growthViewMoreButton: () =>
page.getByTestId(sel.growth).getByRole('button', { name: 'View more' }),
diff --git a/apps/admin/src/posts/analytics/utils/post-publication-summary.test.ts b/apps/admin/src/posts/analytics/utils/post-publication-summary.test.ts
new file mode 100644
index 00000000000..1fbd5c6d224
--- /dev/null
+++ b/apps/admin/src/posts/analytics/utils/post-publication-summary.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import { formatDisplayDate, formatDisplayTime } from '@tryghost/shade/utils';
+import { getPostPublicationSummary } from '@/posts/analytics/utils/post-publication-summary';
+import type { Post } from '@tryghost/admin-x-framework/api/posts';
+
+const PUBLISHED_AT = '2026-09-19T10:00:00.000Z';
+const TIMEZONE = 'Europe/London';
+const ON = `on ${formatDisplayDate(PUBLISHED_AT, TIMEZONE)} at ${formatDisplayTime(PUBLISHED_AT, TIMEZONE)}`;
+
+const publishedPost = (overrides: Partial = {}): Post =>
+ ({
+ id: 'post-1',
+ status: 'published',
+ published_at: PUBLISHED_AT,
+ email: { email_count: 1000 },
+ ...overrides,
+ }) as Post;
+
+const emailOnlyPost = (overrides: Partial = {}) =>
+ publishedPost({ status: 'sent', email_only: true, ...overrides });
+
+const sent = { isEmailSent: true, improveSendingUI: true, timezone: TIMEZONE };
+const unsent = { ...sent, isEmailSent: false };
+
+describe('getPostPublicationSummary', () => {
+ it('has nothing to say before a post is published', () => {
+ expect(getPostPublicationSummary(publishedPost({ published_at: null }), sent)).toBeNull();
+ });
+
+ it('says a post is only on the site until its send finishes', () => {
+ expect(getPostPublicationSummary(publishedPost(), unsent)).toBe(`Published on your site ${ON}`);
+ });
+
+ it('adds the recipient count once the send finishes', () => {
+ expect(getPostPublicationSummary(publishedPost(), sent)).toBe(
+ `Published and sent to 1,000 members ${ON}`,
+ );
+ expect(
+ getPostPublicationSummary(
+ publishedPost({ email: { email_count: 1 } } as Partial),
+ sent,
+ ),
+ ).toBe(`Published and sent to 1 member ${ON}`);
+ });
+
+ it('leaves the count out when there is none', () => {
+ expect(
+ getPostPublicationSummary(
+ publishedPost({ email: { email_count: 0 } } as Partial),
+ sent,
+ ),
+ ).toBe(`Published and sent ${ON}`);
+ });
+
+ it('holds an email-only publication summary back until the send finishes', () => {
+ expect(getPostPublicationSummary(emailOnlyPost(), unsent)).toBeNull();
+ expect(getPostPublicationSummary(emailOnlyPost(), sent)).toBe(`Sent to 1,000 members ${ON}`);
+ });
+
+ it('keeps the previous wording without the improved sending UI', () => {
+ const flagOff = { ...unsent, improveSendingUI: false };
+
+ expect(getPostPublicationSummary(emailOnlyPost(), flagOff)).toBe(`Sent ${ON}`);
+ expect(getPostPublicationSummary(publishedPost(), { ...flagOff, isEmailSent: true })).toBe(
+ `Published and sent ${ON}`,
+ );
+ });
+});
diff --git a/apps/admin/src/posts/analytics/utils/post-publication-summary.ts b/apps/admin/src/posts/analytics/utils/post-publication-summary.ts
new file mode 100644
index 00000000000..b24572565a2
--- /dev/null
+++ b/apps/admin/src/posts/analytics/utils/post-publication-summary.ts
@@ -0,0 +1,39 @@
+import { formatDisplayDate, formatDisplayTime, formatNumber } from '@tryghost/shade/utils';
+import { isEmailOnly } from '@tryghost/admin-x-framework';
+import type { Post } from '@tryghost/admin-x-framework/api/posts';
+
+interface PostPublicationSummaryOptions {
+ isEmailSent: boolean;
+ improveSendingUI: boolean;
+ timezone: string;
+}
+
+export function getPostPublicationSummary(
+ post: Post,
+ { isEmailSent, improveSendingUI, timezone }: PostPublicationSummaryOptions,
+): string | null {
+ if (!post.published_at) {
+ return null;
+ }
+
+ const publishedAt = `on ${formatDisplayDate(post.published_at, timezone)} at ${formatDisplayTime(post.published_at, timezone)}`;
+ // Only a finished send's recipient count is final.
+ const emailCount = post.email?.email_count ?? 0;
+ const recipients =
+ improveSendingUI && isEmailSent && emailCount > 0
+ ? ` to ${formatNumber(emailCount)} ${emailCount === 1 ? 'member' : 'members'}`
+ : '';
+
+ if (isEmailOnly(post)) {
+ // An unfinished send is reported by the status line under the title.
+ return isEmailSent || !improveSendingUI ? `Sent${recipients} ${publishedAt}` : null;
+ }
+
+ if (post.status === 'published') {
+ return isEmailSent
+ ? `Published and sent${recipients} ${publishedAt}`
+ : `Published on your site ${publishedAt}`;
+ }
+
+ return null;
+}
diff --git a/apps/admin/src/posts/email-sending-status/email-sending-status-copy.test.ts b/apps/admin/src/posts/email-sending-status/email-sending-status-copy.test.ts
index dacf2cac2b0..43cfd374bd2 100644
--- a/apps/admin/src/posts/email-sending-status/email-sending-status-copy.test.ts
+++ b/apps/admin/src/posts/email-sending-status/email-sending-status-copy.test.ts
@@ -1,43 +1,85 @@
import { describe, expect, it } from 'vitest';
-import { getEmailSendingProgressCopy } from './email-sending-status-copy';
+import { getEmailSendingLine } from './email-sending-status-copy';
-describe('getEmailSendingProgressCopy', () => {
- it('formats preparing progress and an estimate', () => {
+describe('getEmailSendingLine', () => {
+ it('counts preparing progress and adds an estimate', () => {
expect(
- getEmailSendingProgressCopy(
+ getEmailSendingLine(
{
status: 'preparing',
progress: { completed: 1200, total: 5000, estimated_seconds_remaining: 60 },
},
- 'About 1 minute left',
+ { estimate: 'About 1 minute left' },
),
).toEqual({
- title: 'Preparing emails',
- detail: '1,200 of 5,000 · About 1 minute left',
+ phase: 'preparing',
+ fractionComplete: 0.24,
+ text: 'Preparing emails · 1,200 of 5,000 · About 1 minute left',
});
});
- it('formats sending progress without an estimate', () => {
+ it('can show preparing progress as a percentage of the audience', () => {
expect(
- getEmailSendingProgressCopy(
+ getEmailSendingLine(
+ {
+ status: 'preparing',
+ progress: { completed: 100, total: 1000, estimated_seconds_remaining: null },
+ },
+ { preparingProgress: 'percentage' },
+ ).text,
+ ).toBe('Preparing emails · 10% complete · 1,000 total');
+ });
+
+ it('counts sending progress, even when percentages are asked for', () => {
+ expect(
+ getEmailSendingLine(
{
status: 'submitting',
progress: { completed: 250, total: 1000, estimated_seconds_remaining: null },
},
- null,
+ { preparingProgress: 'percentage' },
),
- ).toEqual({ title: 'Sending emails', detail: '250 of 1,000' });
+ ).toEqual({
+ phase: 'submitting',
+ fractionComplete: 0.25,
+ text: 'Sending emails · 250 of 1,000',
+ });
});
it('shows only an estimate before a total is available', () => {
expect(
- getEmailSendingProgressCopy(
+ getEmailSendingLine(
{
status: 'preparing',
progress: { completed: 0, total: 0, estimated_seconds_remaining: 30 },
},
- 'Less than 1 minute left',
+ { estimate: 'Less than 1 minute left' },
),
- ).toEqual({ title: 'Preparing emails', detail: 'Less than 1 minute left' });
+ ).toEqual({
+ phase: 'preparing',
+ fractionComplete: null,
+ text: 'Preparing emails · Less than 1 minute left',
+ });
+ });
+
+ it('treats a submitted send as sending', () => {
+ expect(
+ getEmailSendingLine({
+ status: 'submitted',
+ progress: { completed: 1000, total: 1000, estimated_seconds_remaining: 0 },
+ }),
+ ).toEqual({
+ phase: 'submitting',
+ fractionComplete: 1,
+ text: 'Sending emails · 1,000 of 1,000',
+ });
+ });
+
+ it('names only the phase before any progress is known', () => {
+ expect(getEmailSendingLine({ status: 'preparing' })).toEqual({
+ phase: 'preparing',
+ fractionComplete: null,
+ text: 'Preparing emails',
+ });
});
});
diff --git a/apps/admin/src/posts/email-sending-status/email-sending-status-copy.ts b/apps/admin/src/posts/email-sending-status/email-sending-status-copy.ts
index 32516f40b33..02aef4367f5 100644
--- a/apps/admin/src/posts/email-sending-status/email-sending-status-copy.ts
+++ b/apps/admin/src/posts/email-sending-status/email-sending-status-copy.ts
@@ -1,11 +1,29 @@
import { formatNumber } from '@tryghost/shade/utils';
-import type { EmailSendingState } from '@tryghost/admin-x-framework/api/emails';
+import type {
+ EmailSendingPhase,
+ EmailSendingProgress,
+ EmailSendingState,
+} from '@tryghost/admin-x-framework/api/emails';
-type NonFailedEmailSendingState = Exclude;
+interface ActiveEmailSend {
+ status: Exclude['status'];
+ progress?: EmailSendingProgress;
+}
+
+interface EmailSendingLineOptions {
+ estimate?: string | null;
+ /**
+ * Post analytics shows preparation as a percentage so the recipient count
+ * only climbs once, during sending, while the audience size stays on screen.
+ */
+ preparingProgress?: 'count' | 'percentage';
+}
-export interface EmailSendingProgressCopy {
- title: 'Preparing emails' | 'Sending emails';
- detail: string | null;
+export interface EmailSendingLine {
+ phase: EmailSendingPhase;
+ /** 0 to 1, or null before the total is known. */
+ fractionComplete: number | null;
+ text: string;
}
/**
@@ -13,15 +31,28 @@ export interface EmailSendingProgressCopy {
* `submitted` is accepted because analytics keeps the sending UI visible while
* its dependent post and newsletter data refreshes.
*/
-export function getEmailSendingProgressCopy(
- sending: NonFailedEmailSendingState,
- estimate: string | null,
-): EmailSendingProgressCopy {
- const { completed, total } = sending.progress;
- const progress = total === 0 ? null : `${formatNumber(completed)} of ${formatNumber(total)}`;
+export function getEmailSendingLine(
+ { status, progress }: ActiveEmailSend,
+ { estimate = null, preparingProgress = 'count' }: EmailSendingLineOptions = {},
+): EmailSendingLine {
+ const phase = status === 'preparing' ? 'preparing' : 'submitting';
+ const completed = progress?.completed ?? 0;
+ const total = progress?.total ?? 0;
+ let progressText: string | null = null;
+
+ if (total > 0) {
+ const percent = Math.min(100, Math.floor((completed / total) * 100));
+ progressText =
+ phase === 'preparing' && preparingProgress === 'percentage'
+ ? `${formatNumber(percent)}% complete · ${formatNumber(total)} total`
+ : `${formatNumber(completed)} of ${formatNumber(total)}`;
+ }
return {
- title: sending.status === 'preparing' ? 'Preparing emails' : 'Sending emails',
- detail: [progress, estimate].filter(Boolean).join(' · ') || null,
+ phase,
+ fractionComplete: total > 0 ? completed / total : null,
+ text: [phase === 'preparing' ? 'Preparing emails' : 'Sending emails', progressText, estimate]
+ .filter(Boolean)
+ .join(' · '),
};
}
diff --git a/apps/admin/src/posts/email-sending-status/email-sending-status-icon.tsx b/apps/admin/src/posts/email-sending-status/email-sending-status-icon.tsx
new file mode 100644
index 00000000000..c508d5a9f0f
--- /dev/null
+++ b/apps/admin/src/posts/email-sending-status/email-sending-status-icon.tsx
@@ -0,0 +1,68 @@
+import { cn } from '@tryghost/shade/utils';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { EmailSendingPhase } from '@tryghost/admin-x-framework/api/emails';
+
+const RING_RADIUS = 6;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+
+const RingCircle = ({ className, ...props }: ComponentPropsWithoutRef<'circle'>) => (
+
+);
+
+interface EmailSendingStatusIconProps {
+ phase: EmailSendingPhase;
+ /** 0 to 1. Only used while submitting. */
+ fractionComplete?: number | null;
+ className?: string;
+}
+
+export function EmailSendingStatusIcon({
+ phase,
+ fractionComplete,
+ className,
+}: EmailSendingStatusIconProps) {
+ if (phase === 'preparing') {
+ return (
+
+
+ {/* The mask fades the ring into a tail; its colour just needs to be opaque. */}
+
+
+ );
+ }
+
+ const drawnFraction = Math.min(1, Math.max(0, fractionComplete ?? 0));
+
+ return (
+
+ );
+}
diff --git a/apps/admin/src/posts/email-sending-status/email-sending-status-line.test.tsx b/apps/admin/src/posts/email-sending-status/email-sending-status-line.test.tsx
new file mode 100644
index 00000000000..7b96c0427e9
--- /dev/null
+++ b/apps/admin/src/posts/email-sending-status/email-sending-status-line.test.tsx
@@ -0,0 +1,64 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+ EMAIL_SENDING_LEAVE_DURATION_MS,
+ EmailSendingStatusLine,
+} from './email-sending-status-line';
+import { getEmailSendingLine } from './email-sending-status-copy';
+
+const sending = getEmailSendingLine({
+ status: 'submitting',
+ progress: { completed: 250, total: 1000, estimated_seconds_remaining: null },
+});
+
+describe('EmailSendingStatusLine', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it('keeps the last line up while a settled send leaves, then removes it', () => {
+ const { rerender } = render();
+ expect(screen.getByRole('status')).toHaveTextContent('Sending emails · 250 of 1,000');
+
+ rerender();
+ expect(screen.getByRole('status')).toHaveTextContent('Sending emails · 250 of 1,000');
+
+ act(() => {
+ vi.advanceTimersByTime(EMAIL_SENDING_LEAVE_DURATION_MS);
+ });
+ expect(screen.queryByRole('status')).not.toBeInTheDocument();
+ });
+
+ it('replays the reveal on every phase change', () => {
+ const preparing = getEmailSendingLine({ status: 'preparing' });
+ const { rerender } = render();
+
+ rerender();
+ const region = screen.getByRole('status');
+ const preparingLine = screen.getByTestId('line');
+ rerender();
+
+ expect(screen.getByTestId('line')).not.toBe(preparingLine);
+ expect(screen.getByRole('status')).toBe(region);
+ });
+
+ it('only animates in on mount when the line is appearing', () => {
+ const { unmount } = render();
+ expect(screen.getByTestId('line').parentElement).not.toHaveClass('animate-in');
+ unmount();
+
+ render();
+ expect(screen.getByTestId('line').parentElement).toHaveClass('animate-in');
+ });
+
+ it('is silent when told not to announce', () => {
+ render();
+
+ expect(screen.queryByRole('status')).not.toBeInTheDocument();
+ expect(screen.getByText(/Sending emails/)).toBeInTheDocument();
+ });
+});
diff --git a/apps/admin/src/posts/email-sending-status/email-sending-status-line.tsx b/apps/admin/src/posts/email-sending-status/email-sending-status-line.tsx
new file mode 100644
index 00000000000..160d539f2fb
--- /dev/null
+++ b/apps/admin/src/posts/email-sending-status/email-sending-status-line.tsx
@@ -0,0 +1,86 @@
+import { Grid, Inline } from '@tryghost/shade/primitives';
+import { cn } from '@tryghost/shade/utils';
+import { EmailSendingStatusIcon } from './email-sending-status-icon';
+import { useChangeCount } from './use-change-count';
+import { useEffect, useState } from 'react';
+import type { EmailSendingLine } from './email-sending-status-copy';
+
+/** Covers the 250ms fade and the 400ms collapse that starts 150ms in. */
+export const EMAIL_SENDING_LEAVE_DURATION_MS = 600;
+
+// Use `fade-in-0`, not `fade-in`: Ember's ghost.css has its own `.fade-in`
+// that leaves content at opacity 0.
+const REVEAL =
+ 'animate-in fade-in-0 slide-in-from-bottom-1 duration-300 ease-out motion-reduce:animate-none';
+
+const isSameLine = (a: EmailSendingLine | null, b: EmailSendingLine | null) =>
+ a?.phase === b?.phase && a?.fractionComplete === b?.fractionComplete && a?.text === b?.text;
+
+interface EmailSendingStatusLineProps {
+ /** Null once the send has settled, which fades the last line out. */
+ line: EmailSendingLine | null;
+ /** Animates in on mount, for a line that replaces other content after load. */
+ appear?: boolean;
+ /** False while loading, so the initial state doesn't animate in. */
+ ready?: boolean;
+ /** Off in the posts list, where every polling row would be announced. */
+ announce?: boolean;
+ className?: string;
+ 'data-testid'?: string;
+}
+
+export function EmailSendingStatusLine({
+ line,
+ appear = false,
+ ready = true,
+ announce = true,
+ className,
+ 'data-testid': testId,
+}: EmailSendingStatusLineProps) {
+ // Keeps the last line around so it can fade out.
+ const [shownLine, setShownLine] = useState(line);
+ if (line && !isSameLine(line, shownLine)) {
+ setShownLine(line);
+ }
+ const isLeaving = !line && shownLine !== null;
+ const changeCount = useChangeCount(shownLine?.phase ?? null, ready);
+
+ useEffect(() => {
+ if (!isLeaving) {
+ return;
+ }
+ const timeout = setTimeout(() => setShownLine(null), EMAIL_SENDING_LEAVE_DURATION_MS);
+ return () => clearTimeout(timeout);
+ }, [isLeaving]);
+
+ if (!shownLine) {
+ return null;
+ }
+
+ return (
+
+ {/* Remounts on each phase change to replay the reveal, inside a live
+ region that stays put so the new phase is still announced. */}
+ 0) && REVEAL)}
+ >
+
+
+ {shownLine.text}
+
+
+
+ );
+}
diff --git a/apps/admin/src/posts/email-sending-status/use-change-count.test.ts b/apps/admin/src/posts/email-sending-status/use-change-count.test.ts
new file mode 100644
index 00000000000..3d43ac734b5
--- /dev/null
+++ b/apps/admin/src/posts/email-sending-status/use-change-count.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useChangeCount } from './use-change-count';
+
+describe('useChangeCount', () => {
+ it('starts at zero and increments only when the value changes', () => {
+ const { result, rerender } = renderHook(({ value }) => useChangeCount(value), {
+ initialProps: { value: 'preparing' },
+ });
+
+ expect(result.current).toBe(0);
+
+ rerender({ value: 'submitting' });
+ expect(result.current).toBe(1);
+
+ rerender({ value: 'submitting' });
+ expect(result.current).toBe(1);
+
+ rerender({ value: 'failed' });
+ expect(result.current).toBe(2);
+ });
+
+ it('ignores changes while the value is still loading in', () => {
+ const { result, rerender } = renderHook(({ value, ready }) => useChangeCount(value, ready), {
+ initialProps: { value: 'published-and-sent', ready: false },
+ });
+
+ rerender({ value: 'published', ready: true });
+ expect(result.current).toBe(0);
+
+ rerender({ value: 'published-and-sent', ready: true });
+ expect(result.current).toBe(1);
+ });
+});
diff --git a/apps/admin/src/posts/email-sending-status/use-change-count.ts b/apps/admin/src/posts/email-sending-status/use-change-count.ts
new file mode 100644
index 00000000000..5702c402185
--- /dev/null
+++ b/apps/admin/src/posts/email-sending-status/use-change-count.ts
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+/**
+ * Counts changes after the first ready value; zero suppresses the initial animation.
+ */
+export function useChangeCount(value: unknown, ready = true): number {
+ const [settledValue, setSettledValue] = useState<{ value: unknown } | null>(null);
+ const [changeCount, setChangeCount] = useState(0);
+
+ // Set during render so the new state never paints without the animation.
+ if (ready && (settledValue === null || settledValue.value !== value)) {
+ if (settledValue !== null) {
+ setChangeCount(changeCount + 1);
+ }
+ setSettledValue({ value });
+ }
+
+ return changeCount;
+}
diff --git a/apps/admin/src/posts/list/components/post-list-row-email-status-state.ts b/apps/admin/src/posts/list/components/post-list-row-email-status-state.ts
index 25d6c8d3c98..fb7504eafae 100644
--- a/apps/admin/src/posts/list/components/post-list-row-email-status-state.ts
+++ b/apps/admin/src/posts/list/components/post-list-row-email-status-state.ts
@@ -1,10 +1,10 @@
import type { PostListItem } from '@/posts/list/hooks/use-posts-list';
import type { PostResource } from '@/posts/list/post-resource';
-import type { EmailSendingProgressCopy } from '@/posts/email-sending-status/email-sending-status-copy';
+import type { EmailSendingLine } from '@/posts/email-sending-status/email-sending-status-copy';
export type PostListRowEmailStatusState =
| { status: 'settled' }
- | { status: 'sending'; copy: EmailSendingProgressCopy }
+ | { status: 'sending'; line: EmailSendingLine }
| { status: 'failed' };
export const SETTLED_POST_LIST_ROW_EMAIL_STATUS: PostListRowEmailStatusState = {
diff --git a/apps/admin/src/posts/list/components/post-list-row-email-status.tsx b/apps/admin/src/posts/list/components/post-list-row-email-status.tsx
index 7e6fbd42ab6..8c31ebd2204 100644
--- a/apps/admin/src/posts/list/components/post-list-row-email-status.tsx
+++ b/apps/admin/src/posts/list/components/post-list-row-email-status.tsx
@@ -1,7 +1,7 @@
import { postsDataType } from '@tryghost/admin-x-framework/api/posts';
import { useQueryClient } from '@tanstack/react-query';
import { useEffect, useState, type ReactNode } from 'react';
-import { getEmailSendingProgressCopy } from '@/posts/email-sending-status/email-sending-status-copy';
+import { getEmailSendingLine } from '@/posts/email-sending-status/email-sending-status-copy';
import { useEmailSendingStatusPolling } from '@/posts/email-sending-status/use-email-sending-status';
import { useSendingEta } from '@/posts/email-sending-status/use-sending-eta';
import type { PostListItem } from '@/posts/list/hooks/use-posts-list';
@@ -77,7 +77,7 @@ export function PostListRowEmailStatus({ post, children }: PostListRowEmailStatu
<>
{children({
status: 'sending',
- copy: getEmailSendingProgressCopy(sending, estimate),
+ line: getEmailSendingLine(sending, { estimate }),
})}
);
@@ -88,10 +88,9 @@ export function PostListRowEmailStatus({ post, children }: PostListRowEmailStatu
<>
{children({
status: 'sending',
- copy: {
- title: emailStatus === 'pending' ? 'Preparing emails' : 'Sending emails',
- detail: null,
- },
+ line: getEmailSendingLine({
+ status: emailStatus === 'pending' ? 'preparing' : 'submitting',
+ }),
})}
);
diff --git a/apps/admin/src/posts/list/components/post-list-row.tsx b/apps/admin/src/posts/list/components/post-list-row.tsx
index 5e09f6cd3b3..74bc788b325 100644
--- a/apps/admin/src/posts/list/components/post-list-row.tsx
+++ b/apps/admin/src/posts/list/components/post-list-row.tsx
@@ -14,6 +14,7 @@ import {
import { hasPostAnalyticsPage, type PostMetricsSettings } from '@/posts/list/post-metrics';
import { PostMetricsCells } from '@/posts/list/components/post-metrics-cells';
import { PostListRowEmailStatus } from '@/posts/list/components/post-list-row-email-status';
+import { EmailSendingStatusLine } from '@/posts/email-sending-status/email-sending-status-line';
import {
hasInProgressEmail,
SETTLED_POST_LIST_ROW_EMAIL_STATUS,
@@ -272,12 +273,11 @@ const PostListRowComponent = forwardRef
- {emailSendingState.copy.title}
- {emailSendingState.copy.detail && (
- {` · ${emailSendingState.copy.detail}`}
- )}
-