@growth-labs/cms 0.8.19 → 0.8.23

package/src/ui/inspector/PublishTab.tsx

@@ -10,7 +10,8 @@
 // Compile-gated (tsc, jsx: react-jsx). No vitest — pure shapers are in
 // inspector-data.ts and tested there.
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { formatInstantInZone, PUBLISH_TIMEZONE_FALLBACK } from '../../lib/publish-timezone.js'
 import type { ContentStatus } from '../../schema/types.js'
 import { apiErrorMessage } from '../api-error.js'
 import { Icon } from '../icons.js'
@@ -40,6 +41,12 @@ export interface PublishTabProps {
 	authorId: string | null
 	/** Current scheduled publish time (ISO string, null if not scheduled). */
 	publishAt: string | null
+	/**
+	 * Timezone the editor schedules in. The same zone is used to DISPLAY the
+	 * stored instant and to SAVE what is typed, so a resave of untouched fields
+	 * is a true no-op. Defaults to the publication timezone.
+	 */
+	publishTimezone?: string
 	/** Called after a status/field change so the parent can refresh. */
 	onChanged?: () => void
 }
@@ -85,6 +92,7 @@ export function PublishTab({
 	visibility,
 	authorId,
 	publishAt,
+	publishTimezone = PUBLISH_TIMEZONE_FALLBACK,
 	onChanged,
 }: PublishTabProps): React.ReactElement {
 	const [saving, setSaving] = useState(false)
@@ -92,16 +100,20 @@ export function PublishTab({
 	const [actionError, setActionError] = useState<string | null>(null)
 
 	// Local schedule date/time inputs.
-	const [schedDate, setSchedDate] = useState(() => {
-		if (!publishAt) return ''
-		// publishAt is an ISO string; extract the date part.
-		return publishAt.slice(0, 10)
-	})
-	const [schedTime, setSchedTime] = useState(() => {
-		if (!publishAt) return '12:00'
-		// Extract HH:MM from ISO.
-		return publishAt.slice(11, 16) || '12:00'
-	})
+	// The editor thinks in publication-local wall clock, so that is what these
+	// inputs show. Falling back to the raw UTC slice keeps an unusable zone
+	// readable rather than blank.
+	const scheduled = useMemo(() => {
+		if (!publishAt) return null
+		const ms = Date.parse(publishAt)
+		if (!Number.isFinite(ms)) return null
+		return formatInstantInZone(ms, publishTimezone)
+	}, [publishAt, publishTimezone])
+
+	const [schedDate, setSchedDate] = useState(() => scheduled?.date ?? publishAt?.slice(0, 10) ?? '')
+	const [schedTime, setSchedTime] = useState(
+		() => scheduled?.time ?? publishAt?.slice(11, 16) ?? '12:00',
+	)
 
 	// Author list (fetched once on mount).
 	const [authors, setAuthors] = useState<AuthorOption[]>([])
@@ -172,18 +184,14 @@ export function PublishTab({
 		setSaving(true)
 		setActionError(null)
 		try {
-			// schedDate/schedTime are sliced directly from the UTC ISO publishAt
-			// (no zone conversion happens anywhere in this component -- see their
-			// initializers above), so the digits shown here already ARE UTC. Tag
-			// them 'UTC' on save, not a hardcoded zone: sending literal UTC digits
-			// under a non-UTC zone label (this used 'Europe/Paris' unconditionally
-			// until the Falklands P0, 2026-09-08) made the server reinterpret them
-			// in that zone's offset, silently shifting publish_at by that zone's
-			// current UTC offset on every resave -- including an incidental
-			// resave that never touched these fields. 'UTC' makes display and
-			// save agree, so a resave of untouched fields is a true no-op.
+			// These digits are publication-local wall clock (see the initializers),
+			// so they are saved under that SAME zone. Display and save must agree:
+			// sending digits under a zone they were not rendered in made the server
+			// reinterpret them and shift publish_at by that zone's offset on every
+			// resave, including an incidental one that never touched these fields
+			// (the 2026-09-08 P0). Agreement is what keeps a resave a no-op.
 			const localDateTime = `${schedDate}T${schedTime}`
-			const body = buildScheduleBody(localDateTime, 'UTC')
+			const body = buildScheduleBody(localDateTime, publishTimezone)
 			await runAction(docId, 'schedule', body as unknown as Record<string, unknown>)
 			setSelectedStatus('scheduled')
 			onChanged?.()
@@ -192,7 +200,7 @@ export function PublishTab({
 		} finally {
 			setSaving(false)
 		}
-	}, [docId, schedDate, schedTime, saving, onChanged])
+	}, [docId, schedDate, schedTime, saving, onChanged, publishTimezone])
 
 	const handleVisibilityChange = useCallback(
 		async (newVis: 'free' | 'premium') => {
@@ -317,7 +325,7 @@ export function PublishTab({
 				{/* Scheduled date + time inputs */}
 				{showScheduleControls && (
 					<div style={schedGrid} className="fade-only">
-						<Field label="Date (UTC)">
+						<Field label={`Date (${publishTimezone})`}>
 							<input
 								className="input"
 								type="date"
@@ -325,7 +333,7 @@ export function PublishTab({
 								onChange={(e) => setSchedDate(e.target.value)}
 							/>
 						</Field>
-						<Field label="Time (UTC)">
+						<Field label={`Time (${publishTimezone})`}>
 							<input
 								className="input"
 								type="time"

package/src/ui/nav.ts

@@ -26,6 +26,7 @@ export const NAV_MODEL: NavGroup[] = [
 			{ id: 'calendar', label: 'Calendar', icon: 'calendar' },
 			{ id: 'media', label: 'Media', icon: 'media' },
 			{ id: 'analytics', label: 'Analytics', icon: 'chart' },
+			{ id: 'podcasts', label: 'Podcasts', icon: 'mic' },
 		],
 	},
 	{

package/src/ui/screens/AnalyticsScreen.tsx

@@ -32,7 +32,9 @@ import {
 	normalizeAnalyticsData,
 	normalizeArticleAnalyticsDetail,
 	type ReadsPoint,
+	TRAFFIC_SOURCES_CAPTION,
 	type TrafficSource,
+	uniqueVisitorsKpiLabel,
 } from './analytics-data.js'
 import {
 	formatKpi,
@@ -201,7 +203,9 @@ export function AnalyticsScreen() {
 				</div>
 			)}
 
-			{!s.loading && !s.error && s.data && <AnalyticsBody data={s.data} isPartial={isPartial} />}
+			{!s.loading && !s.error && s.data && (
+				<AnalyticsBody data={s.data} isPartial={isPartial} rangeDays={Number.parseInt(range, 10)} />
+			)}
 		</div>
 	)
 }
@@ -579,7 +583,15 @@ function RangeSegment({
 // AnalyticsBody
 // ---------------------------------------------------------------------------
 
-function AnalyticsBody({ data, isPartial }: { data: AnalyticsData; isPartial: boolean }) {
+function AnalyticsBody({
+	data,
+	isPartial,
+	rangeDays,
+}: {
+	data: AnalyticsData
+	isPartial: boolean
+	rangeDays: number
+}) {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
 			{isPartial && (
@@ -587,7 +599,7 @@ function AnalyticsBody({ data, isPartial }: { data: AnalyticsData; isPartial: bo
 			)}
 
 			{/* KPI cards */}
-			<KpiCards kpis={data.kpis} />
+			<KpiCards kpis={data.kpis} rangeDays={rangeDays} />
 
 			{/* Reads over time + traffic sources */}
 			<div className="grid-split-wide">
@@ -638,7 +650,13 @@ const KPI_DEFS: Array<{
 	},
 ]
 
-export function KpiCards({ kpis }: { kpis: ProviderResult<Record<string, number | null>> }) {
+export function KpiCards({
+	kpis,
+	rangeDays = 7,
+}: {
+	kpis: ProviderResult<Record<string, number | null>>
+	rangeDays?: number
+}) {
 	const kpiStatus = selectKpiState(kpis)
 
 	if (kpiStatus === 'empty') {
@@ -666,7 +684,7 @@ export function KpiCards({ kpis }: { kpis: ProviderResult<Record<string, number
 				return (
 					<KpiCard
 						key={def.key}
-						label={def.label}
+						label={def.key === 'uniqueVisitors' ? uniqueVisitorsKpiLabel(rangeDays) : def.label}
 						status={isUnmeasured ? 'partial' : kpiStatus}
 						value={displayValue}
 						note={displayNote}
@@ -813,7 +831,7 @@ function ReadsChart({ series }: { series: ProviderResult<ReadsPoint[]> }) {
 // TrafficSources
 // ---------------------------------------------------------------------------
 
-function TrafficSources({ result }: { result: ProviderResult<TrafficSource[]> }) {
+export function TrafficSources({ result }: { result: ProviderResult<TrafficSource[]> }) {
 	if (!result || result.status === 'empty' || !result.data || result.data.length === 0) {
 		return <EmptyPanel icon="globe" message="No traffic source data yet." />
 	}
@@ -836,6 +854,16 @@ function TrafficSources({ result }: { result: ProviderResult<TrafficSource[]> })
 					<span style={{ fontSize: 11, fontWeight: 600, color: 'var(--amber)' }}>Partial</span>
 				)}
 			</div>
+			<div
+				style={{
+					fontSize: 11,
+					color: 'var(--ink-faint)',
+					marginTop: -10,
+					marginBottom: 14,
+				}}
+			>
+				{TRAFFIC_SOURCES_CAPTION}
+			</div>
 			{sources.map((src) => {
 				const pct = (src.sessions / maxSessions) * 100
 				return (