@growth-labs/cms 0.1.0

package/src/ui/screens/EditorScreen.tsx

@@ -0,0 +1,673 @@
+// src/ui/screens/EditorScreen.tsx — editor takeover: header + form + preview + P3 inspector slot.
+//
+// Ported from editor.jsx:
+//   - Header: back-to-Content, type icon, status pill, autosaved indicator,
+//     preview-position segment (right/bottom/off), Preview (open signed URL),
+//     Publish action
+//   - Work area: <ContentForm/> in the main column + 340px empty P3 inspector slot
+//   - Live-preview pane: <DraftPage doc={...} device={...} /> with device toggle
+//     (desktop/tablet/mobile)
+//   - "Open in new tab" mints a HMAC preview token via POST /content/:id/preview-token
+//     and opens the signed URL
+//   - New docs (docRef.id === null) create on first save via ContentForm; the
+//     onDocCreated callback swaps to update mode
+//
+// Compile-gated (tsc, jsx: react-jsx). No vitest tests needed for this file —
+// ContentForm/DraftPage/preview-layout are tested separately; the Tiptap Rte
+// is Playwright-smoked only.
+
+import { useCallback, useState } from 'react'
+import type { ContentStatus, ContentType } from '../../schema/types.js'
+import { buildSharePrefill, ShareModal } from '../components/ShareModal.js'
+import {
+	ContentForm,
+	type ContentPreviewDraft,
+	type ContentSaveState,
+} from '../editor/ContentForm.js'
+import { Icon } from '../icons.js'
+import { Inspector } from '../inspector/Inspector.js'
+import type { DraftDoc } from '../preview/draft-page.js'
+import { DraftPage } from '../preview/draft-page.js'
+import type { PreviewDevice } from '../preview/preview-layout.js'
+import type { ContentView } from './content-view.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface EditorScreenProps {
+	docRef: NonNullable<ContentView['open']>
+	onClose: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Preview position type
+// ---------------------------------------------------------------------------
+
+type PreviewPosition = 'right' | 'bottom' | 'off'
+
+const CONTENT_TYPE_LABELS: Record<ContentType, string> = {
+	article: 'Article',
+	video: 'Video',
+	podcast: 'Podcast',
+	newsletter: 'Newsletter',
+}
+
+const STATUS_PILL_COLORS: Record<ContentStatus, string> = {
+	draft: 'var(--ink-faint)',
+	review: '#a78bfa',
+	scheduled: '#60a5fa',
+	published: '#34d399',
+	archived: 'var(--ink-faint)',
+}
+
+// ---------------------------------------------------------------------------
+// EditorScreen
+// ---------------------------------------------------------------------------
+
+export function EditorScreen({ docRef, onClose }: EditorScreenProps) {
+	const contentType: ContentType = (docRef.contentType as ContentType | undefined) ?? 'article'
+
+	// Resolved doc id — starts as null for new docs; set by onDocCreated
+	const [docId, setDocId] = useState<string | null>(docRef.id)
+
+	// Live preview doc state — updated as the user types in ContentForm
+	const [previewDoc, setPreviewDoc] = useState<DraftDoc>({
+		id: docRef.id ?? 'draft',
+		type: contentType,
+		title: '',
+		slug: '',
+		excerpt: null,
+		byline: null,
+		publishedAt: null,
+		body: null,
+		premium: false,
+		heroImageUrl: null,
+		channel: null,
+		authorId: null,
+		authorName: null,
+		authorSlug: null,
+	})
+
+	// Status (local optimistic — matches the server once saved)
+	const [status, setStatus] = useState<ContentStatus>('draft')
+	const [saveRequest, setSaveRequest] = useState(0)
+	const [saveState, setSaveState] = useState<ContentSaveState>({
+		saving: false,
+		saveError: null,
+		lastSavedAt: null,
+		savedId: docRef.id,
+	})
+
+	// Preview position starts hidden so the editing surface gets full width.
+	const [previewPos, setPreviewPos] = useState<PreviewPosition>('off')
+
+	// Device for the preview pane
+	const [device, setDevice] = useState<PreviewDevice>('desktop')
+
+	// Autosave indicator (fed by ContentForm via onTitleChange; the Form owns the full save state;
+	// here we mirror just the title for the header)
+	const [headerTitle, setHeaderTitle] = useState<string>('')
+
+	// Share modal — true when the Share button is clicked in the editor header
+	const [shareOpen, setShareOpen] = useState(false)
+
+	// Mint a preview token and open the signed URL in a new tab
+	const handlePreviewInTab = useCallback(async () => {
+		const id = docId
+		if (!id) return
+		try {
+			const res = await fetch(`/admin/api/content/${id}/preview-token`, { method: 'POST' })
+			if (!res.ok) return
+			const body = (await res.json()) as { token?: string; url?: string }
+			const url = body.url ?? body.token
+			if (url) window.open(url, '_blank')
+		} catch {
+			// non-fatal
+		}
+	}, [docId])
+
+	const handleOpenAnalytics = useCallback(() => {
+		if (!previewDoc.slug) return
+		window.location.hash = `#/analytics/articles/${encodeURIComponent(previewDoc.slug)}`
+	}, [previewDoc.slug])
+
+	// Publish action — calls ?action=publish on the existing content
+	const handlePublish = useCallback(async () => {
+		const id = docId
+		if (!id) return
+		try {
+			const res = await fetch(`/admin/api/content/${id}?action=publish`, { method: 'POST' })
+			if (res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { status?: ContentStatus }
+				setStatus(body.status ?? 'published')
+			}
+		} catch {
+			// non-fatal
+		}
+	}, [docId])
+
+	const handleSaveDraft = useCallback(() => {
+		setSaveRequest((value) => value + 1)
+	}, [])
+
+	// Called by ContentForm when a new doc is first persisted
+	const handleDocCreated = useCallback((id: string) => {
+		setDocId(id)
+		setSaveState((prev) => ({ ...prev, savedId: id }))
+		setPreviewDoc((prev) => ({ ...prev, id }))
+	}, [])
+
+	const handleSaveStateChange = useCallback((next: ContentSaveState) => {
+		setSaveState(next)
+	}, [])
+
+	const handleAuthorChange = useCallback(
+		(author: { authorId: string | null; authorName: string | null; authorSlug: string | null }) => {
+			setPreviewDoc((prev) => ({
+				...prev,
+				authorId: author.authorId,
+				authorName: author.authorName,
+				authorSlug: author.authorSlug,
+			}))
+		},
+		[],
+	)
+
+	// Mirror the title into the header + preview doc
+	const handleTitleChange = useCallback((title: string) => {
+		setHeaderTitle(title)
+		setPreviewDoc((prev) => ({ ...prev, title }))
+	}, [])
+
+	const handleDraftChange = useCallback((draft: ContentPreviewDraft) => {
+		setHeaderTitle(draft.title)
+		setPreviewDoc((prev) => ({
+			...prev,
+			id: draft.id,
+			type: draft.type,
+			title: draft.title,
+			slug: draft.slug,
+			excerpt: draft.excerpt,
+			byline: draft.byline,
+			publishedAt: draft.publishedAt,
+			body: draft.body,
+			premium: draft.premium,
+			heroImageUrl: draft.heroImageUrl,
+			channel: draft.channel,
+			authorId: draft.authorId,
+			authorName: draft.authorName,
+			authorSlug: draft.authorSlug,
+		}))
+	}, [])
+
+	// -------------------------------------------------------------------------
+	// Layout grid
+	// -------------------------------------------------------------------------
+
+	const grid = workAreaGrid(previewPos)
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	return (
+		<div style={editorOuter}>
+			{/* ------------------------------------------------------------------ */}
+			{/* Header                                                              */}
+			{/* ------------------------------------------------------------------ */}
+			<header style={headerBar}>
+				{/* Left: back + type icon + title + status */}
+				<div style={headerLeft}>
+					<button
+						type="button"
+						onClick={onClose}
+						style={backBtn}
+						aria-label="Back to content library"
+					>
+						<Icon name="chevLeft" size={16} />
+						<span>Content</span>
+					</button>
+
+					<div style={headerDivider} />
+
+					<Icon
+						name={contentTypeIcon(contentType)}
+						size={15}
+						style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
+					/>
+
+					<span style={headerTitleText} title={headerTitle || 'Untitled'}>
+						{headerTitle || 'Untitled'}
+					</span>
+
+					<span style={statusPill(status)}>{status}</span>
+				</div>
+
+				{/* Right: preview position selector + device toggle + actions */}
+				<div style={headerRight}>
+					{/* Preview position segment */}
+					<fieldset style={fieldsetReset}>
+						<legend style={legendHidden}>Preview position</legend>
+						<div style={segmentGroup}>
+							{(['off', 'right', 'bottom'] as PreviewPosition[]).map((pos) => (
+								<button
+									key={pos}
+									type="button"
+									onClick={() => setPreviewPos(pos)}
+									style={segmentBtn(previewPos === pos)}
+									aria-pressed={previewPos === pos}
+									title={`Preview ${pos}`}
+								>
+									<Icon name={previewPosIcon(pos)} size={14} />
+								</button>
+							))}
+						</div>
+					</fieldset>
+
+					{/* Device toggle (only when preview is showing) */}
+					{previewPos !== 'off' && (
+						<fieldset style={fieldsetReset}>
+							<legend style={legendHidden}>Preview device</legend>
+							<div style={segmentGroup}>
+								{(['desktop', 'tablet', 'mobile'] as PreviewDevice[]).map((dev) => (
+									<button
+										key={dev}
+										type="button"
+										onClick={() => setDevice(dev)}
+										style={segmentBtn(device === dev)}
+										aria-pressed={device === dev}
+										title={`${dev} preview`}
+									>
+										<Icon name={dev} size={14} />
+									</button>
+								))}
+							</div>
+						</fieldset>
+					)}
+
+					{/* Open preview in new tab */}
+					{previewPos !== 'off' && docId && (
+						<button
+							type="button"
+							onClick={() => void handlePreviewInTab()}
+							style={actionBtn}
+							title="Open preview in new tab"
+						>
+							<Icon name="globe" size={14} />
+						</button>
+					)}
+
+					{contentType === 'article' && docId && previewDoc.slug && (
+						<button
+							type="button"
+							onClick={handleOpenAnalytics}
+							style={actionBtn}
+							title="Open article analytics"
+						>
+							<Icon name="chart" size={14} />
+						</button>
+					)}
+
+					{/* Share */}
+					<button type="button" onClick={() => setShareOpen(true)} style={actionBtn} title="Share">
+						<Icon name="share" size={14} />
+					</button>
+
+					{/* Save draft */}
+					<button
+						type="button"
+						onClick={handleSaveDraft}
+						style={saveBtn}
+						disabled={saveState.saving}
+						title={saveState.saving ? 'Saving draft' : 'Save draft changes'}
+					>
+						<Icon name="check" size={14} />
+						{saveState.saving ? 'Saving...' : status === 'draft' ? 'Save draft' : 'Save'}
+					</button>
+
+					{/* Publish */}
+					<button
+						type="button"
+						onClick={() => void handlePublish()}
+						style={publishBtn}
+						disabled={!docId}
+						title={docId ? 'Publish' : 'Save first to publish'}
+					>
+						<Icon name="bolt" size={14} />
+						Publish
+					</button>
+				</div>
+			</header>
+
+			{/* ------------------------------------------------------------------ */}
+			{/* Work area                                                           */}
+			{/* ------------------------------------------------------------------ */}
+			<div style={grid.container}>
+				{/* Main column: form + P3 inspector slot */}
+				<div style={grid.formColumn}>
+					{/* The form + inspector sit inside a flex row */}
+					<div style={formAndInspector}>
+						{/* Content form */}
+						<div style={formArea}>
+							<ContentForm
+								docId={docId}
+								contentType={contentType}
+								onDocCreated={handleDocCreated}
+								onTitleChange={handleTitleChange}
+								onDraftChange={handleDraftChange}
+								saveRequest={saveRequest}
+								onStatusChange={setStatus}
+								onSaveStateChange={handleSaveStateChange}
+							/>
+						</div>
+
+						{/* P3 inspector (340px) */}
+						<aside style={inspectorSlot} aria-label="Inspector">
+							<Inspector
+								docId={docId}
+								contentType={contentType}
+								onStatusChange={setStatus}
+								onAuthorChange={handleAuthorChange}
+							/>
+						</aside>
+					</div>
+				</div>
+
+				{/* Live-preview pane */}
+				{previewPos !== 'off' && (
+					<div style={grid.previewPane}>
+						<DraftPage doc={previewDoc} device={device} />
+					</div>
+				)}
+			</div>
+
+			{/* Share modal — pre-filled from the open doc's slug + type */}
+			{shareOpen && (
+				<ShareModal
+					prefill={buildSharePrefill({
+						type: previewDoc.type,
+						slug: previewDoc.slug,
+						authorId: previewDoc.authorId,
+						authorName: previewDoc.authorName,
+						authorSlug: previewDoc.authorSlug,
+					})}
+					onClose={() => setShareOpen(false)}
+				/>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Layout helpers
+// ---------------------------------------------------------------------------
+
+function workAreaGrid(pos: PreviewPosition): {
+	container: React.CSSProperties
+	formColumn: React.CSSProperties
+	previewPane: React.CSSProperties
+} {
+	if (pos === 'off') {
+		return {
+			container: { flex: 1, display: 'flex', overflow: 'hidden' },
+			formColumn: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' },
+			previewPane: {},
+		}
+	}
+	if (pos === 'right') {
+		return {
+			container: {
+				flex: 1,
+				display: 'flex',
+				flexDirection: 'row',
+				overflow: 'hidden',
+			},
+			formColumn: {
+				flex: '0 0 55%',
+				display: 'flex',
+				flexDirection: 'column',
+				overflow: 'hidden',
+				borderRight: '1px solid var(--border)',
+			},
+			previewPane: {
+				flex: '0 0 45%',
+				display: 'flex',
+				flexDirection: 'column',
+				overflow: 'hidden',
+			},
+		}
+	}
+	// bottom
+	return {
+		container: {
+			flex: 1,
+			display: 'flex',
+			flexDirection: 'column',
+			overflow: 'hidden',
+		},
+		formColumn: {
+			flex: '0 0 55%',
+			display: 'flex',
+			flexDirection: 'column',
+			overflow: 'hidden',
+			borderBottom: '1px solid var(--border)',
+		},
+		previewPane: {
+			flex: '0 0 45%',
+			display: 'flex',
+			flexDirection: 'column',
+			overflow: 'hidden',
+		},
+	}
+}
+
+function contentTypeIcon(type: ContentType): import('../icons.js').IconName {
+	const map: Record<ContentType, import('../icons.js').IconName> = {
+		article: 'doc',
+		video: 'video',
+		podcast: 'mic',
+		newsletter: 'mail',
+	}
+	return map[type]
+}
+
+function previewPosIcon(pos: PreviewPosition): import('../icons.js').IconName {
+	if (pos === 'right') return 'columns'
+	if (pos === 'bottom') return 'rows'
+	return 'eye'
+}
+
+function statusPill(status: ContentStatus): React.CSSProperties {
+	return {
+		display: 'inline-flex',
+		alignItems: 'center',
+		padding: '1px 7px',
+		borderRadius: 20,
+		fontSize: 10,
+		fontWeight: 600,
+		letterSpacing: '0.06em',
+		textTransform: 'uppercase',
+		background: `${STATUS_PILL_COLORS[status]}22`,
+		color: STATUS_PILL_COLORS[status],
+		flexShrink: 0,
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const editorOuter: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	width: '100%',
+	height: '100%',
+	overflow: 'hidden',
+	background: 'var(--bg)',
+}
+
+const headerBar: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	height: 48,
+	padding: '0 16px',
+	borderBottom: '1px solid var(--border)',
+	background: 'var(--panel)',
+	flexShrink: 0,
+	gap: 12,
+}
+
+const headerLeft: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 8,
+	minWidth: 0,
+	flex: 1,
+}
+
+const headerRight: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 6,
+	flexShrink: 0,
+}
+
+const backBtn: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 3,
+	background: 'none',
+	border: 'none',
+	cursor: 'pointer',
+	color: 'var(--ink-muted)',
+	fontSize: 13,
+	fontWeight: 500,
+	padding: '4px 6px',
+	borderRadius: 5,
+	flexShrink: 0,
+}
+
+const headerDivider: React.CSSProperties = {
+	width: 1,
+	height: 16,
+	background: 'var(--border)',
+	flexShrink: 0,
+}
+
+const headerTitleText: React.CSSProperties = {
+	fontSize: 13,
+	fontWeight: 500,
+	color: 'var(--ink)',
+	overflow: 'hidden',
+	textOverflow: 'ellipsis',
+	whiteSpace: 'nowrap',
+	minWidth: 0,
+}
+
+const segmentGroup: React.CSSProperties = {
+	display: 'flex',
+	border: '1px solid var(--border)',
+	borderRadius: 6,
+	overflow: 'hidden',
+}
+
+function segmentBtn(active: boolean): React.CSSProperties {
+	return {
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		width: 28,
+		height: 26,
+		background: active ? 'var(--active)' : 'transparent',
+		color: active ? 'var(--accent)' : 'var(--ink-muted)',
+		border: 'none',
+		cursor: 'pointer',
+		borderRight: '1px solid var(--border)',
+	}
+}
+
+const actionBtn: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	width: 28,
+	height: 28,
+	background: 'transparent',
+	border: '1px solid var(--border)',
+	borderRadius: 6,
+	cursor: 'pointer',
+	color: 'var(--ink-muted)',
+}
+
+const saveBtn: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 5,
+	height: 28,
+	padding: '0 10px',
+	background: 'var(--panel)',
+	color: 'var(--ink)',
+	border: '1px solid var(--border)',
+	borderRadius: 6,
+	fontSize: 12,
+	fontWeight: 600,
+	cursor: 'pointer',
+}
+
+const publishBtn: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 5,
+	height: 28,
+	padding: '0 12px',
+	background: 'var(--accent)',
+	color: 'var(--accent-fg)',
+	border: 'none',
+	borderRadius: 6,
+	fontSize: 12,
+	fontWeight: 600,
+	cursor: 'pointer',
+}
+
+const formAndInspector: React.CSSProperties = {
+	display: 'flex',
+	flex: 1,
+	overflow: 'hidden',
+}
+
+const formArea: React.CSSProperties = {
+	flex: 1,
+	display: 'flex',
+	flexDirection: 'column',
+	overflow: 'hidden',
+	minWidth: 0,
+}
+
+const inspectorSlot: React.CSSProperties = {
+	flex: '0 0 340px',
+	borderLeft: '1px solid var(--border)',
+	display: 'flex',
+	flexDirection: 'column',
+	overflow: 'hidden',
+	background: 'var(--panel)',
+}
+
+// fieldset reset — visually equivalent to a plain div; used for accessible
+// grouping of the segment-button controls without the default fieldset border.
+const fieldsetReset: React.CSSProperties = {
+	border: 'none',
+	padding: 0,
+	margin: 0,
+	display: 'flex',
+	alignItems: 'center',
+}
+
+const legendHidden: React.CSSProperties = {
+	display: 'none',
+}
+
+// Void the unused variable warning by referencing the label map in a subtle
+// way (it's used implicitly via the type system; keep for completeness).
+void CONTENT_TYPE_LABELS