@growth-labs/cms 0.1.0

package/src/ui/inspector/PublishTab.tsx

@@ -0,0 +1,626 @@
+// src/ui/inspector/PublishTab.tsx — Publish inspector tab.
+//
+// Sections:
+//   - Status & visibility: status radios (draft/review/scheduled/published) +
+//     date+time inputs when scheduled + free/premium segment
+//   - Address: slug input (Task 2 records the redirect server-side)
+//   - Ownership: author picker (fetches from authors route)
+//   - Trash: Move to trash button → ?action=trash (Task 7 route)
+//
+// 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 type { ContentStatus } from '../../schema/types.js'
+import { Icon } from '../icons.js'
+import { Field } from './Field.js'
+import {
+	buildScheduleBody,
+	patchContent,
+	publishActionPayload,
+	runAction,
+	shouldShowScheduleControls,
+} from './inspector-data.js'
+import { Section } from './Section.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PublishTabProps {
+	docId: string
+	/** Current status of the content item. */
+	status: ContentStatus
+	/** Current slug. */
+	slug: string
+	/** Current visibility: 'free' | 'premium'. */
+	visibility: 'free' | 'premium'
+	/** Current author id (may be null). */
+	authorId: string | null
+	/** Current scheduled publish time (ISO string, null if not scheduled). */
+	publishAt: string | null
+	/** Called after a status/field change so the parent can refresh. */
+	onChanged?: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Status radio options (mirrors the design)
+// ---------------------------------------------------------------------------
+
+const STATUS_OPTS: Array<{ id: ContentStatus; label: string; desc: string }> = [
+	{ id: 'draft', label: 'Draft', desc: 'Only visible to editors' },
+	{ id: 'review', label: 'In review', desc: 'Awaiting editorial sign-off' },
+	{ id: 'scheduled', label: 'Scheduled', desc: 'Auto-publishes at a set time' },
+	{ id: 'published', label: 'Published', desc: 'Live on the site' },
+]
+
+// ---------------------------------------------------------------------------
+// Author shape (fetched from GET /admin/api/authors)
+// ---------------------------------------------------------------------------
+
+interface AuthorOption {
+	id: string
+	name: string
+}
+
+interface AuthorsListResponse {
+	items?: AuthorOption[]
+	authors?: AuthorOption[]
+}
+
+interface CreatedAuthorResponse {
+	id: string
+	slug?: string
+}
+
+// ---------------------------------------------------------------------------
+// PublishTab
+// ---------------------------------------------------------------------------
+
+export function PublishTab({
+	docId,
+	status,
+	slug,
+	visibility,
+	authorId,
+	publishAt,
+	onChanged,
+}: PublishTabProps): React.ReactElement {
+	const [saving, setSaving] = useState(false)
+	const [selectedStatus, setSelectedStatus] = useState<ContentStatus | null>(null)
+	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'
+	})
+
+	// Author list (fetched once on mount).
+	const [authors, setAuthors] = useState<AuthorOption[]>([])
+	const [authorError, setAuthorError] = useState<string | null>(null)
+	const [addAuthorOpen, setAddAuthorOpen] = useState(false)
+	const [newAuthorName, setNewAuthorName] = useState('')
+	const [addingAuthor, setAddingAuthor] = useState(false)
+	const loadAuthors = useCallback(async () => {
+		try {
+			const res = await fetch('/admin/api/authors?limit=50')
+			if (!res.ok) throw new Error('Could not load authors')
+			const d = (await res.json()) as AuthorsListResponse
+			const next = Array.isArray(d.items) ? d.items : Array.isArray(d.authors) ? d.authors : []
+			setAuthors(next)
+			setAuthorError(null)
+		} catch (err) {
+			setAuthorError(err instanceof Error ? err.message : 'Could not load authors')
+		}
+	}, [])
+
+	useEffect(() => {
+		void loadAuthors()
+	}, [loadAuthors])
+
+	useEffect(() => {
+		setSelectedStatus((current) => (current === status ? current : null))
+	}, [status])
+
+	// Current author name (for display).
+	const currentAuthor = authors.find((a) => a.id === authorId)
+
+	// -------------------------------------------------------------------------
+	// Handlers
+	// -------------------------------------------------------------------------
+
+	const handleStatusChange = useCallback(
+		async (newStatus: ContentStatus) => {
+			if (saving) return
+			if (newStatus === 'scheduled') {
+				setSelectedStatus('scheduled')
+				return
+			}
+			setSaving(true)
+			setActionError(null)
+			try {
+				if (newStatus === 'draft' && status === 'published') {
+					await runAction(docId, 'unpublish', null)
+					setSelectedStatus('draft')
+					onChanged?.()
+					return
+				}
+				const { action, body } = publishActionPayload(newStatus)
+				await runAction(docId, action, body)
+				setSelectedStatus(newStatus)
+				onChanged?.()
+			} catch (err) {
+				setActionError(err instanceof Error ? err.message : 'Status update failed')
+			} finally {
+				setSaving(false)
+			}
+		},
+		[docId, saving, status, onChanged],
+	)
+
+	const handleSchedule = useCallback(async () => {
+		if (!schedDate || !schedTime) return
+		if (saving) return
+		setSaving(true)
+		setActionError(null)
+		try {
+			const localDateTime = `${schedDate}T${schedTime}`
+			const body = buildScheduleBody(localDateTime, 'Europe/Paris')
+			await runAction(docId, 'schedule', body as unknown as Record<string, unknown>)
+			setSelectedStatus('scheduled')
+			onChanged?.()
+		} catch (err) {
+			setActionError(err instanceof Error ? err.message : 'Schedule update failed')
+		} finally {
+			setSaving(false)
+		}
+	}, [docId, schedDate, schedTime, saving, onChanged])
+
+	const handleVisibilityChange = useCallback(
+		async (newVis: 'free' | 'premium') => {
+			try {
+				await patchContent(docId, { visibility: newVis })
+				onChanged?.()
+			} catch {
+				// non-fatal
+			}
+		},
+		[docId, onChanged],
+	)
+
+	const handleSlugChange = useCallback(
+		async (newSlug: string) => {
+			if (!newSlug || newSlug.length < 3) return
+			try {
+				await patchContent(docId, { slug: newSlug })
+				onChanged?.()
+			} catch {
+				// non-fatal
+			}
+		},
+		[docId, onChanged],
+	)
+
+	const handleAuthorChange = useCallback(
+		async (e: React.ChangeEvent<HTMLSelectElement>) => {
+			const newAuthorId = e.target.value || null
+			try {
+				await patchContent(docId, { authorId: newAuthorId })
+				onChanged?.()
+			} catch {
+				// non-fatal
+			}
+		},
+		[docId, onChanged],
+	)
+
+	const handleAddAuthor = useCallback(async () => {
+		const name = newAuthorName.trim()
+		if (!name || addingAuthor) return
+		setAddingAuthor(true)
+		setAuthorError(null)
+		try {
+			const res = await fetch('/admin/api/authors', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ name }),
+			})
+			if (!res.ok) {
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+					error?: string
+				}
+				throw new Error(err.error ?? 'Could not add author')
+			}
+			const created = (await res.json()) as CreatedAuthorResponse
+			const nextAuthor = { id: created.id, name }
+			setAuthors((prev) =>
+				[...prev.filter((a) => a.id !== created.id), nextAuthor].sort((a, b) =>
+					a.name.localeCompare(b.name),
+				),
+			)
+			await patchContent(docId, { authorId: created.id })
+			setNewAuthorName('')
+			setAddAuthorOpen(false)
+			onChanged?.()
+		} catch (err) {
+			setAuthorError(err instanceof Error ? err.message : 'Could not add author')
+		} finally {
+			setAddingAuthor(false)
+		}
+	}, [addingAuthor, docId, newAuthorName, onChanged])
+
+	const handleTrash = useCallback(async () => {
+		if (!window.confirm('Move this item to trash?')) return
+		try {
+			await runAction(docId, 'trash', null)
+			onChanged?.()
+		} catch {
+			// non-fatal
+		}
+	}, [docId, onChanged])
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+	const displayStatus = selectedStatus ?? status
+	const showScheduleControls = shouldShowScheduleControls(status, selectedStatus)
+
+	return (
+		<div>
+			{/* Status & visibility */}
+			<Section title="Status & visibility" icon="target">
+				{/* Status radios */}
+				<div style={statusList}>
+					{STATUS_OPTS.map((opt) => (
+						<button
+							key={opt.id}
+							type="button"
+							onClick={() => void handleStatusChange(opt.id)}
+							disabled={saving && opt.id === displayStatus}
+							style={statusBtn(displayStatus === opt.id)}
+							aria-pressed={displayStatus === opt.id}
+						>
+							<span style={radioCircle(displayStatus === opt.id)}>
+								{displayStatus === opt.id && <span style={radioDot} />}
+							</span>
+							<span style={{ flex: 1 }}>
+								<span style={statusLabel}>{opt.label}</span>
+								<span style={statusDesc}>{statusDescription(opt, displayStatus)}</span>
+							</span>
+						</button>
+					))}
+				</div>
+				{actionError && (
+					<div role="alert" style={publishErrorText}>
+						{actionError}
+					</div>
+				)}
+
+				{/* Scheduled date + time inputs */}
+				{showScheduleControls && (
+					<div style={schedGrid} className="fade-only">
+						<Field label="Date">
+							<input
+								className="input"
+								type="date"
+								value={schedDate}
+								onChange={(e) => setSchedDate(e.target.value)}
+							/>
+						</Field>
+						<Field label="Time">
+							<input
+								className="input"
+								type="time"
+								value={schedTime}
+								onChange={(e) => setSchedTime(e.target.value)}
+							/>
+						</Field>
+						<div style={{ gridColumn: '1 / -1' }}>
+							<button
+								type="button"
+								className="btn primary sm"
+								style={{ width: '100%' }}
+								onClick={() => void handleSchedule()}
+								disabled={!schedDate || !schedTime}
+							>
+								Save schedule
+							</button>
+						</div>
+					</div>
+				)}
+
+				{/* Access: free / premium */}
+				<Field label="Access">
+					<div className="seg" style={{ width: '100%' }}>
+						<button
+							type="button"
+							className={visibility === 'free' ? 'on' : ''}
+							style={{ flex: 1, justifyContent: 'center' }}
+							onClick={() => void handleVisibilityChange('free')}
+							aria-pressed={visibility === 'free'}
+						>
+							<Icon name="globe" size={14} />
+							Free
+						</button>
+						<button
+							type="button"
+							className={visibility === 'premium' ? 'on' : ''}
+							style={{ flex: 1, justifyContent: 'center' }}
+							onClick={() => void handleVisibilityChange('premium')}
+							aria-pressed={visibility === 'premium'}
+						>
+							<Icon name="star" size={14} />
+							Premium
+						</button>
+					</div>
+				</Field>
+			</Section>
+
+			{/* Address */}
+			<Section title="Address" icon="link">
+				<Field label="URL slug" help="The permanent address for this content.">
+					<SlugInput defaultValue={slug} onCommit={handleSlugChange} />
+				</Field>
+			</Section>
+
+			{/* Ownership */}
+			<Section title="Ownership" icon="users">
+				<Field label="Author" help="Choose or add the primary byline for this article.">
+					<select
+						value={authorId ?? ''}
+						onChange={handleAuthorChange}
+						className="selectbox"
+						aria-label="Author"
+					>
+						<option value="">— unassigned —</option>
+						{authors.map((a) => (
+							<option key={a.id} value={a.id}>
+								{a.name}
+							</option>
+						))}
+					</select>
+					{currentAuthor && (
+						<div style={authorHint}>
+							<Icon name="checkCircle" size={13} style={{ color: 'var(--green)' }} />
+							{currentAuthor.name}
+						</div>
+					)}
+					<div style={authorActions}>
+						<button
+							type="button"
+							className="btn sm"
+							onClick={() => setAddAuthorOpen((open) => !open)}
+							aria-expanded={addAuthorOpen}
+						>
+							<Icon name="plus" size={14} />
+							Add author
+						</button>
+						<button type="button" className="btn ghost sm" onClick={() => void loadAuthors()}>
+							<Icon name="refresh" size={14} />
+							Refresh
+						</button>
+					</div>
+					{addAuthorOpen && (
+						<div style={addAuthorBox}>
+							<input
+								className="input"
+								type="text"
+								value={newAuthorName}
+								onChange={(e) => setNewAuthorName(e.currentTarget.value)}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter') {
+										e.preventDefault()
+										void handleAddAuthor()
+									}
+								}}
+								placeholder="Author name"
+								aria-label="Author name"
+							/>
+							<button
+								type="button"
+								className="btn primary sm"
+								onClick={() => void handleAddAuthor()}
+								disabled={!newAuthorName.trim() || addingAuthor}
+							>
+								{addingAuthor ? 'Adding…' : 'Add author'}
+							</button>
+						</div>
+					)}
+					{authorError && <div style={authorErrorText}>{authorError}</div>}
+				</Field>
+			</Section>
+
+			{/* Trash */}
+			<div style={{ padding: 16 }}>
+				<button
+					type="button"
+					className="btn danger sm"
+					style={{ width: '100%' }}
+					onClick={() => void handleTrash()}
+				>
+					<Icon name="trash" size={14} />
+					Move to trash
+				</button>
+			</div>
+		</div>
+	)
+}
+
+function statusDescription(
+	option: { id: ContentStatus; desc: string },
+	currentStatus: ContentStatus,
+): string {
+	if (option.id === 'draft' && currentStatus === 'published') {
+		return 'Unpublish and return to draft'
+	}
+	return option.desc
+}
+
+// ---------------------------------------------------------------------------
+// SlugInput — controlled input that fires onCommit on blur/Enter
+// ---------------------------------------------------------------------------
+
+function SlugInput({
+	defaultValue,
+	onCommit,
+}: {
+	defaultValue: string
+	onCommit: (slug: string) => void
+}): React.ReactElement {
+	const [value, setValue] = useState(defaultValue)
+
+	// Sync external changes (e.g. after a save).
+	useEffect(() => {
+		setValue(defaultValue)
+	}, [defaultValue])
+
+	return (
+		<div style={slugRow}>
+			<span className="mono" style={slugPrefix}>
+				/
+			</span>
+			<input
+				className="input"
+				value={value}
+				onChange={(e) => setValue(e.target.value)}
+				onBlur={() => onCommit(value)}
+				onKeyDown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault()
+						onCommit(value)
+					}
+				}}
+				style={{ border: 0, borderRadius: 0 }}
+				aria-label="URL slug"
+			/>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const statusList: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 7,
+	marginBottom: 14,
+}
+
+function statusBtn(active: boolean): React.CSSProperties {
+	return {
+		textAlign: 'left',
+		display: 'flex',
+		alignItems: 'center',
+		gap: 11,
+		padding: '10px 12px',
+		borderRadius: 8,
+		border: `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
+		background: active ? 'var(--accent-tint)' : 'var(--panel)',
+		cursor: 'pointer',
+		width: '100%',
+	}
+}
+
+function radioCircle(active: boolean): React.CSSProperties {
+	return {
+		width: 16,
+		height: 16,
+		borderRadius: '50%',
+		border: `2px solid ${active ? 'var(--accent)' : 'var(--field-border)'}`,
+		display: 'grid',
+		placeItems: 'center',
+		flexShrink: 0,
+	}
+}
+
+const radioDot: React.CSSProperties = {
+	width: 7,
+	height: 7,
+	borderRadius: '50%',
+	background: 'var(--accent)',
+}
+
+const statusLabel: React.CSSProperties = {
+	display: 'block',
+	fontSize: 13,
+	fontWeight: 600,
+	color: 'var(--ink)',
+}
+
+const statusDesc: React.CSSProperties = {
+	display: 'block',
+	fontSize: 11.5,
+	color: 'var(--ink-muted)',
+}
+
+const publishErrorText: React.CSSProperties = {
+	margin: '0 0 12px',
+	padding: '9px 10px',
+	border: '1px solid color-mix(in srgb, var(--red) 34%, transparent)',
+	borderRadius: 6,
+	background: 'color-mix(in srgb, var(--red) 8%, transparent)',
+	color: 'var(--red)',
+	fontSize: 11.5,
+	lineHeight: 1.45,
+}
+
+const schedGrid: React.CSSProperties = {
+	display: 'grid',
+	gridTemplateColumns: '1fr 1fr',
+	gap: 8,
+	marginBottom: 6,
+}
+
+const slugRow: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	border: '1px solid var(--field-border)',
+	borderRadius: 6,
+	overflow: 'hidden',
+	background: 'var(--field)',
+}
+
+const slugPrefix: React.CSSProperties = {
+	fontSize: 12,
+	color: 'var(--ink-faint)',
+	padding: '0 2px 0 11px',
+	whiteSpace: 'nowrap',
+}
+
+const authorHint: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 5,
+	fontSize: 11.5,
+	color: 'var(--ink-muted)',
+	marginTop: 5,
+}
+
+const authorActions: React.CSSProperties = {
+	display: 'flex',
+	gap: 8,
+	marginTop: 10,
+}
+
+const addAuthorBox: React.CSSProperties = {
+	display: 'grid',
+	gridTemplateColumns: '1fr auto',
+	gap: 8,
+	marginTop: 8,
+}
+
+const authorErrorText: React.CSSProperties = {
+	marginTop: 8,
+	fontSize: 11.5,
+	lineHeight: 1.4,
+	color: 'var(--red)',
+}

package/src/ui/inspector/Section.tsx

@@ -0,0 +1,81 @@
+// src/ui/inspector/Section.tsx — collapsible inspector section with a header button.
+//
+// Compile-gated (tsc, jsx: react-jsx). No vitest — the pure helpers are tested
+// separately and the design-port React components are Playwright-smoked only.
+
+import { useState } from 'react'
+import type { IconName } from '../icons.js'
+import { Icon } from '../icons.js'
+
+export interface SectionProps {
+	title: string
+	icon?: IconName
+	defaultOpen?: boolean
+	right?: React.ReactNode
+	children: React.ReactNode
+}
+
+export function Section({
+	title,
+	icon,
+	defaultOpen = true,
+	right,
+	children,
+}: SectionProps): React.ReactElement {
+	const [open, setOpen] = useState(defaultOpen)
+
+	return (
+		<div style={sectionWrap}>
+			<button
+				type="button"
+				onClick={() => setOpen((o) => !o)}
+				style={sectionHeader}
+				aria-expanded={open}
+			>
+				{icon && (
+					<Icon name={icon} size={16} style={{ color: 'var(--ink-muted)', flexShrink: 0 }} />
+				)}
+				<span style={sectionTitle}>{title}</span>
+				{right && <span style={{ marginLeft: 'auto' }}>{right}</span>}
+				<Icon
+					name="chevDown"
+					size={15}
+					style={{
+						marginLeft: right ? 6 : 'auto',
+						color: 'var(--ink-faint)',
+						transform: open ? 'none' : 'rotate(-90deg)',
+						transition: 'transform .15s',
+						flexShrink: 0,
+					}}
+				/>
+			</button>
+			{open && <div style={sectionBody}>{children}</div>}
+		</div>
+	)
+}
+
+const sectionWrap: React.CSSProperties = {
+	borderBottom: '1px solid var(--border)',
+}
+
+const sectionHeader: React.CSSProperties = {
+	width: '100%',
+	display: 'flex',
+	alignItems: 'center',
+	gap: 9,
+	padding: '14px 16px',
+	background: 'transparent',
+	border: 0,
+	cursor: 'pointer',
+	color: 'var(--ink)',
+}
+
+const sectionTitle: React.CSSProperties = {
+	fontSize: 13,
+	fontWeight: 700,
+	letterSpacing: '0.01em',
+}
+
+const sectionBody: React.CSSProperties = {
+	padding: '0 16px 18px',
+}