@growth-labs/cms 0.1.0

package/src/ui/screens/CalendarScreen.tsx

@@ -0,0 +1,694 @@
+// src/ui/screens/CalendarScreen.tsx — Editorial calendar screen (P5 Task 12).
+//
+// Renders a Monday-start month grid driven by GET /admin/api/calendar?from=&to=.
+// buildCalendarMonth() (Task 2) handles the pure bucketing; this file is the
+// React shell: month navigation, cell rendering, openDoc on item click, and the
+// schedule-from-calendar affordance (POSTs the existing /content/:id?action=schedule).
+//
+// Data is first-party D1 (content_items by publish_at / published_at). No provider
+// injection needed. No BData / CONTENT mock placement.
+//
+// Empty month → honest "Nothing scheduled" state.
+//
+// Re-skinned to the Broadsheet idiom: .page.page-wide / .page-head / .page-title,
+// a single .panel housing the month nav bar (.icon-btn prev/next, .serif month
+// label, .btn.ghost.sm Today) over a 7-col grid with .kicker weekday headers and
+// type-colour legend. The reschedule overlay uses the .scrim modal idiom.
+
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import { Icon } from '../icons.js'
+import { buildCalendarMonth, type CalendarCell, type CalendarItem } from './calendar-data.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface CalendarScreenProps {
+	/** Open a content item in the editor. Passed from the registry. */
+	openDoc: (id: string | null) => void
+}
+
+// ---------------------------------------------------------------------------
+// Reducer
+// ---------------------------------------------------------------------------
+
+interface CalendarState {
+	loading: boolean
+	error: string | null
+	items: CalendarItem[]
+}
+
+type CalendarAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; items: CalendarItem[] }
+	| { type: 'fetch-error'; error: string }
+
+function init(): CalendarState {
+	return { loading: true, error: null, items: [] }
+}
+
+function reducer(state: CalendarState, action: CalendarAction): CalendarState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, items: action.items }
+		case 'fetch-error':
+			return { loading: false, error: action.error, items: [] }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Schedule-from-calendar: POST /content/:id?action=schedule
+// ---------------------------------------------------------------------------
+
+async function scheduleItem(id: string, dateIso: string): Promise<boolean> {
+	try {
+		const res = await fetch(`/admin/api/content/${id}?action=schedule`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ publishAt: dateIso }),
+		})
+		return res.ok
+	} catch {
+		return false
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Month navigation helpers
+// ---------------------------------------------------------------------------
+
+function toMonthRange(year: number, month: number): { from: number; to: number } {
+	// month is 1-based
+	const start = new Date(year, month - 1, 1)
+	const end = new Date(year, month, 0, 23, 59, 59)
+	return {
+		from: Math.floor(start.getTime() / 1000),
+		to: Math.floor(end.getTime() / 1000),
+	}
+}
+
+function monthLabel(year: number, month: number): string {
+	return new Date(year, month - 1, 1).toLocaleDateString(undefined, {
+		month: 'long',
+		year: 'numeric',
+	})
+}
+
+function prevMonth(year: number, month: number): { year: number; month: number } {
+	if (month === 1) return { year: year - 1, month: 12 }
+	return { year, month: month - 1 }
+}
+
+function nextMonth(year: number, month: number): { year: number; month: number } {
+	if (month === 12) return { year: year + 1, month: 1 }
+	return { year, month: month + 1 }
+}
+
+// ---------------------------------------------------------------------------
+// CalendarScreen
+// ---------------------------------------------------------------------------
+
+const WEEKDAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+// Type-colour swatch per content type (mirrors the broadsheet calendar legend).
+const TYPE_COLOR: Record<string, string> = {
+	article: 'var(--accent)',
+	video: 'var(--blue-tint)',
+	podcast: 'var(--amber)',
+	newsletter: 'var(--green)',
+}
+
+const TYPE_LABEL: Record<string, string> = {
+	article: 'Article',
+	video: 'Video',
+	podcast: 'Podcast',
+	newsletter: 'Newsletter',
+}
+
+export function CalendarScreen({ openDoc }: CalendarScreenProps) {
+	const now = new Date()
+	const [year, setYear] = useState(now.getFullYear())
+	const [month, setMonth] = useState(now.getMonth() + 1) // 1-based
+	const [s, dispatch] = useReducer(reducer, undefined, init)
+	// scheduleTarget: the item id being rescheduled, plus the chosen day
+	const [scheduleTarget, setScheduleTarget] = useState<{
+		id: string
+		title: string
+		day: number
+	} | null>(null)
+
+	const fetchData = useCallback(async (y: number, mo: number) => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const { from, to } = toMonthRange(y, mo)
+			const res = await fetch(`/admin/api/calendar?from=${from}&to=${to}`)
+			if (!res.ok) {
+				dispatch({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const body = (await res.json()) as { items: CalendarItem[] }
+			dispatch({ type: 'fetch-ok', items: body.items ?? [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		void fetchData(year, month)
+	}, [fetchData, year, month])
+
+	const goToPrev = () => {
+		const p = prevMonth(year, month)
+		setYear(p.year)
+		setMonth(p.month)
+	}
+
+	const goToNext = () => {
+		const n = nextMonth(year, month)
+		setYear(n.year)
+		setMonth(n.month)
+	}
+
+	const goToToday = () => {
+		const t = new Date()
+		setYear(t.getFullYear())
+		setMonth(t.getMonth() + 1)
+	}
+
+	// Build the grid (pass a stable "now" reference for testability via the Date)
+	const cells = buildCalendarMonth(s.items, year, month)
+
+	// Schedule-from-calendar: open the picker for an item
+	const openSchedule = (item: CalendarItem) => {
+		setScheduleTarget({ id: item.id, title: item.title, day: Number(item.date.slice(8, 10)) })
+	}
+
+	const confirmSchedule = async (day: number) => {
+		if (!scheduleTarget) return
+		const dateIso = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+		const ok = await scheduleItem(scheduleTarget.id, dateIso)
+		setScheduleTarget(null)
+		if (ok) void fetchData(year, month)
+	}
+
+	return (
+		<div className="page page-wide calendar-screen fade-in" style={{ maxWidth: 1340 }}>
+			{/* Header */}
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Editorial calendar</h1>
+					<div className="page-sub">
+						Scheduled and published content by date — plan the publishing pipeline.
+					</div>
+				</div>
+				<div className="seg">
+					<button type="button" className="on">
+						Month
+					</button>
+				</div>
+			</div>
+
+			{/* Body */}
+			{s.loading && <div className="kicker">Loading calendar…</div>}
+
+			{!s.loading && s.error && (
+				<div style={{ color: 'var(--red)', fontSize: 13.5 }}>
+					{s.error}
+					<button
+						type="button"
+						className="btn sm"
+						onClick={() => void fetchData(year, month)}
+						style={{ marginLeft: 12 }}
+					>
+						Retry
+					</button>
+				</div>
+			)}
+
+			{!s.loading && !s.error && (
+				<div className="panel" style={{ overflow: 'hidden' }}>
+					{/* Month nav bar */}
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: 12,
+							padding: '14px 18px',
+							borderBottom: '1px solid var(--border)',
+						}}
+					>
+						<button
+							type="button"
+							className="icon-btn"
+							onClick={goToPrev}
+							aria-label="Previous month"
+						>
+							<Icon name="chevLeft" size={17} />
+						</button>
+						<div className="serif" style={{ fontSize: 20, fontWeight: 600, color: 'var(--ink)' }}>
+							{monthLabel(year, month)}
+						</div>
+						<button type="button" className="icon-btn" onClick={goToNext} aria-label="Next month">
+							<Icon name="chevRight" size={17} />
+						</button>
+						<button type="button" className="btn ghost sm" onClick={goToToday}>
+							Today
+						</button>
+						<div style={{ flex: 1 }} />
+						{Object.entries(TYPE_LABEL).map(([t, label]) => (
+							<span
+								key={t}
+								style={{
+									display: 'inline-flex',
+									alignItems: 'center',
+									gap: 6,
+									fontSize: 11.5,
+									color: 'var(--ink-muted)',
+								}}
+							>
+								<span style={{ width: 9, height: 9, borderRadius: 2, background: TYPE_COLOR[t] }} />
+								{label}
+							</span>
+						))}
+					</div>
+
+					<CalendarGrid cells={cells} onItemClick={openDoc} onScheduleClick={openSchedule} />
+				</div>
+			)}
+
+			{/* Schedule picker overlay */}
+			{scheduleTarget && (
+				<SchedulePicker
+					target={scheduleTarget}
+					year={year}
+					month={month}
+					cells={cells}
+					onConfirm={confirmSchedule}
+					onClose={() => setScheduleTarget(null)}
+				/>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// CalendarGrid — the 7-column Mon-start grid
+// ---------------------------------------------------------------------------
+
+function CalendarGrid({
+	cells,
+	onItemClick,
+	onScheduleClick,
+}: {
+	cells: CalendarCell[]
+	onItemClick: (id: string | null) => void
+	onScheduleClick: (item: CalendarItem) => void
+}) {
+	const hasAnyItems = cells.some((c) => !c.blank && c.items.length > 0)
+	// Column position of each cell in the 7-wide grid is its source-order index
+	// (leading blanks then day cells), so we count blanks once and derive the
+	// weekday column for borders / weekend shading without mutating the data layer.
+	const leadingBlanks = cells.filter((c) => c.blank).length
+
+	return (
+		<>
+			<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)' }}>
+				{/* Weekday headers */}
+				{WEEKDAY_LABELS.map((d) => (
+					<div
+						key={d}
+						className="kicker"
+						style={{
+							padding: '10px 12px',
+							borderBottom: '1px solid var(--border)',
+							textAlign: 'left',
+						}}
+					>
+						{d}
+					</div>
+				))}
+
+				{/* Leading blank cells — display-only positional slots, count fixed per month */}
+				{cells
+					.filter((c) => c.blank)
+					.map((_c, blankIdx) => {
+						return (
+							<div
+								// biome-ignore lint/suspicious/noArrayIndexKey: display-only positional slots, count is fixed per month
+								key={`blank-${blankIdx}`}
+								style={{
+									minHeight: 116,
+									borderRight: blankIdx % 7 !== 6 ? '1px solid var(--border-soft)' : 0,
+									borderBottom: '1px solid var(--border-soft)',
+									background: 'var(--panel-2)',
+								}}
+							/>
+						)
+					})}
+
+				{/* Day cells — keyed by day number (unique within a month) */}
+				{cells
+					.filter((c): c is CalendarCell & { blank: false } => !c.blank)
+					.map((cell) => {
+						// weekday column: 0=Mon … 5=Sat, 6=Sun
+						const col = (leadingBlanks + cell.day - 1) % 7
+						return (
+							<DayCell
+								key={cell.day}
+								cell={cell}
+								col={col}
+								onItemClick={onItemClick}
+								onScheduleClick={onScheduleClick}
+							/>
+						)
+					})}
+			</div>
+
+			{/* Empty state */}
+			{!hasAnyItems && (
+				<div
+					style={{
+						textAlign: 'center',
+						fontSize: 13,
+						color: 'var(--ink-muted)',
+						padding: '28px 0',
+						borderTop: '1px solid var(--border-soft)',
+					}}
+				>
+					<Icon
+						name="calendar"
+						size={28}
+						style={{ color: 'var(--border)', display: 'block', margin: '0 auto 10px' }}
+					/>
+					Nothing scheduled this month. Draft and schedule content to see it here.
+				</div>
+			)}
+		</>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// DayCell
+// ---------------------------------------------------------------------------
+
+// Status icon hint
+const STATUS_ICON: Record<string, Parameters<typeof Icon>[0]['name']> = {
+	scheduled: 'clock',
+	review: 'eye',
+	published: 'checkCircle',
+}
+
+const STATUS_ICON_COLOR: Record<string, string> = {
+	scheduled: 'var(--accent)',
+	review: 'var(--amber)',
+	published: 'var(--green)',
+}
+
+function DayCell({
+	cell,
+	col,
+	onItemClick,
+	onScheduleClick,
+}: {
+	cell: CalendarCell & { blank: false }
+	/** 0=Mon … 5=Sat, 6=Sun — the grid column this day occupies. */
+	col: number
+	onItemClick: (id: string | null) => void
+	onScheduleClick: (item: CalendarItem) => void
+}) {
+	const isWeekend = col === 5 || col === 6
+
+	return (
+		<div
+			style={{
+				minHeight: 116,
+				padding: 7,
+				borderRight: col !== 6 ? '1px solid var(--border-soft)' : 0,
+				borderBottom: '1px solid var(--border-soft)',
+				background: cell.today
+					? 'var(--accent-tint)'
+					: isWeekend
+						? 'var(--panel-2)'
+						: 'transparent',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			{/* Day number */}
+			<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
+				<span
+					className="tnum"
+					style={{
+						fontSize: 12,
+						fontWeight: cell.today ? 700 : 500,
+						color: cell.today ? 'var(--accent)' : 'var(--ink-muted)',
+					}}
+				>
+					{cell.today ? 'Today' : cell.day}
+				</span>
+			</div>
+
+			{/* Items */}
+			<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+				{cell.items.map((item) => (
+					<CalendarItemChip
+						key={item.id}
+						item={item}
+						onClick={() => onItemClick(item.id)}
+						onScheduleClick={() => onScheduleClick(item)}
+					/>
+				))}
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// CalendarItemChip
+// ---------------------------------------------------------------------------
+
+function CalendarItemChip({
+	item,
+	onClick,
+	onScheduleClick,
+}: {
+	item: CalendarItem
+	onClick: () => void
+	onScheduleClick: () => void
+}) {
+	const border = TYPE_COLOR[item.type] ?? 'var(--accent)'
+	const statusIcon = STATUS_ICON[item.status]
+	const statusColor = STATUS_ICON_COLOR[item.status] ?? 'var(--ink-faint)'
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				gap: 6,
+				padding: '4px 7px',
+				borderRadius: 6,
+				background: 'var(--panel)',
+				border: '1px solid var(--border)',
+				borderLeft: `3px solid ${border}`,
+				cursor: 'pointer',
+				minWidth: 0,
+			}}
+		>
+			<button
+				type="button"
+				onClick={onClick}
+				style={{
+					flex: 1,
+					minWidth: 0,
+					fontSize: 11,
+					fontWeight: 600,
+					color: 'var(--ink)',
+					overflow: 'hidden',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+					textAlign: 'left',
+					background: 'none',
+					border: 'none',
+					padding: 0,
+					cursor: 'pointer',
+				}}
+			>
+				{item.title || '(Untitled)'}
+			</button>
+			{statusIcon &&
+				(item.status === 'scheduled' ? (
+					<button
+						type="button"
+						title="Reschedule"
+						onClick={(e) => {
+							e.stopPropagation()
+							onScheduleClick()
+						}}
+						style={{
+							flex: 'none',
+							marginLeft: 'auto',
+							padding: 0,
+							background: 'none',
+							border: 'none',
+							cursor: 'pointer',
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						<Icon name={statusIcon} size={11} style={{ color: statusColor }} />
+					</button>
+				) : (
+					<Icon
+						name={statusIcon}
+						size={11}
+						style={{ color: statusColor, flex: 'none', marginLeft: 'auto' }}
+					/>
+				))}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// SchedulePicker — day-picker overlay for reschedule-from-calendar
+// ---------------------------------------------------------------------------
+
+function SchedulePicker({
+	target,
+	year,
+	month,
+	cells,
+	onConfirm,
+	onClose,
+}: {
+	target: { id: string; title: string; day: number }
+	year: number
+	month: number
+	cells: CalendarCell[]
+	onConfirm: (day: number) => Promise<void>
+	onClose: () => void
+}) {
+	const [selectedDay, setSelectedDay] = useState<number | null>(null)
+	const [submitting, setSubmitting] = useState(false)
+
+	const handleConfirm = async () => {
+		if (selectedDay === null) return
+		setSubmitting(true)
+		await onConfirm(selectedDay)
+		setSubmitting(false)
+	}
+
+	return (
+		<div
+			className="scrim"
+			style={{ placeItems: 'center', zIndex: 100 }}
+			role="dialog"
+			aria-modal="true"
+			aria-label="Reschedule"
+			onClick={onClose}
+			onKeyUp={(e) => {
+				if (e.key === 'Escape') onClose()
+			}}
+		>
+			{/* biome-ignore lint/a11y/useKeyWithClickEvents: onClick only stops the backdrop close from bubbling; it is not a user-facing action and needs no keyboard handler. The dialog scrim above owns click-away + Escape. */}
+			<div
+				className="panel"
+				role="document"
+				style={{ padding: '24px 28px', width: 360, boxShadow: 'var(--shadow-lg)' }}
+				onClick={(e) => e.stopPropagation()}
+			>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+					<Icon name="calendar" size={18} style={{ color: 'var(--accent)' }} />
+					<h2 className="card-title" style={{ margin: 0 }}>
+						Reschedule
+					</h2>
+					<button
+						type="button"
+						className="icon-btn"
+						onClick={onClose}
+						style={{ marginLeft: 'auto' }}
+						aria-label="Close"
+					>
+						<Icon name="x" size={18} style={{ color: 'var(--ink-muted)' }} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ marginBottom: 16 }} />
+
+				<p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--ink-muted)' }}>
+					Pick a new publish day for{' '}
+					<strong style={{ color: 'var(--ink)' }}>{target.title || '(Untitled)'}</strong> in{' '}
+					{monthLabel(year, month)}.
+				</p>
+
+				{/* Mini day grid */}
+				<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
+					{WEEKDAY_LABELS.map((d) => (
+						<div
+							key={d}
+							className="kicker"
+							style={{ fontSize: 9, textAlign: 'center', paddingBottom: 4 }}
+						>
+							{d}
+						</div>
+					))}
+					{cells
+						.filter((c) => c.blank)
+						.map((_c, bi) => {
+							// biome-ignore lint/suspicious/noArrayIndexKey: display-only positional slots, count is fixed per month
+							return <div key={`b-${bi}`} />
+						})}
+					{cells
+						.filter((c): c is CalendarCell & { blank: false } => !c.blank)
+						.map((cell) => {
+							const isSelected = selectedDay === cell.day
+							const isToday = cell.today
+							return (
+								<button
+									key={cell.day}
+									type="button"
+									className="tnum"
+									onClick={() => setSelectedDay(cell.day)}
+									style={{
+										padding: '4px 2px',
+										fontSize: 12,
+										borderRadius: 5,
+										border: isSelected ? '2px solid var(--accent)' : '1px solid var(--border-soft)',
+										background: isSelected
+											? 'color-mix(in srgb, var(--accent) 12%, var(--panel))'
+											: isToday
+												? 'color-mix(in srgb, var(--accent) 5%, var(--panel))'
+												: 'var(--panel)',
+										color: isSelected ? 'var(--accent)' : 'var(--ink)',
+										fontWeight: isSelected || isToday ? 600 : 400,
+										cursor: 'pointer',
+										textAlign: 'center',
+									}}
+								>
+									{cell.day}
+								</button>
+							)
+						})}
+				</div>
+
+				<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 18 }}>
+					<button type="button" className="btn ghost sm" onClick={onClose}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="btn primary sm"
+						onClick={() => void handleConfirm()}
+						disabled={selectedDay === null || submitting}
+						style={{ opacity: selectedDay === null || submitting ? 0.5 : 1 }}
+					>
+						{submitting ? 'Scheduling…' : 'Confirm'}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}