@growth-labs/cms 0.1.0

package/src/ui/screens/AuthorsScreen.tsx

@@ -0,0 +1,524 @@
+// src/ui/screens/AuthorsScreen.tsx — Authors & bylines screen (P7).
+//
+// Renders the newsroom roster backed entirely by the live authors adapter:
+//   - GET   /admin/api/authors        → list   (createAuthorRoutes.list → { items })
+//   - POST  /admin/api/authors        → create (createAuthorRoutes.create → { id, slug })
+//   - PATCH /admin/api/authors/:id    → update (createAuthorRoutes.update → { id, slug })
+//
+// Presentation: Broadsheet idiom per the prototype's Authors()/SimplePage()
+// (proto_e630b6e6.jsx) — page-head/page-title "Authors & bylines", a card grid
+// of .panel.panel-pad author cards (.avatar + serif name + byline/role), and an
+// "Add author" + per-card "Edit" affordance as .btn. The create/edit form is a
+// .scrim + .panel.panel-pad dialog with .field-label/.input/.btn.
+//
+// Honesty conventions (real data only — no mock numbers):
+//   - The list adapter payload does NOT carry a published-article count, so the
+//     article-count stat renders an honest "—" (never the prototype's fabricated
+//     a.articles / avg-reads). When the count seam ships server-side, swap "—"
+//     for author.articleCount.
+//   - Empty roster → the SimplePage()-style centered empty panel (no placeholder
+//     rows), with the same "Add author" affordance to seed the first author.
+//   - Network/HTTP failure → inline error + Retry, matching SubscriptionsScreen.
+
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import { Icon } from '../icons.js'
+
+// ---------------------------------------------------------------------------
+// Data shape — mirrors serializeAuthor() in src/routes/authors.ts
+// ---------------------------------------------------------------------------
+
+interface Author {
+	id: string
+	name: string
+	slug: string
+	bio: string | null
+	avatar: string | null
+	email: string | null
+	social: Record<string, string>
+	updatedAt: string | null
+}
+
+/** GET /admin/api/authors → { items } */
+interface AuthorsListResponse {
+	items: Author[]
+}
+
+// ---------------------------------------------------------------------------
+// Reducer — loading / error / data (same pattern as SubscriptionsScreen)
+// ---------------------------------------------------------------------------
+
+interface AuthorsState {
+	loading: boolean
+	error: string | null
+	authors: Author[] | null
+}
+
+type AuthorsAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; authors: Author[] }
+	| { type: 'fetch-error'; error: string }
+
+function init(): AuthorsState {
+	return { loading: true, error: null, authors: null }
+}
+
+function reducer(state: AuthorsState, action: AuthorsAction): AuthorsState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, authors: action.authors }
+		case 'fetch-error':
+			return { loading: false, error: action.error, authors: null }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Editor (create/edit) form state
+// ---------------------------------------------------------------------------
+
+interface EditorState {
+	open: boolean
+	/** null → create; an Author → edit that author. */
+	editing: Author | null
+	name: string
+	slug: string
+	role: string
+	email: string
+	bio: string
+	submitting: boolean
+	error: string | null
+}
+
+const EMPTY_EDITOR: EditorState = {
+	open: false,
+	editing: null,
+	name: '',
+	slug: '',
+	role: '',
+	email: '',
+	bio: '',
+	submitting: false,
+	error: null,
+}
+
+// ---------------------------------------------------------------------------
+// AuthorsScreen
+// ---------------------------------------------------------------------------
+
+export function AuthorsScreen() {
+	const [s, dispatch] = useReducer(reducer, undefined, init)
+	const [editor, setEditor] = useState<EditorState>(EMPTY_EDITOR)
+
+	const fetchAuthors = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/authors')
+			if (!res.ok) {
+				dispatch({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const body = (await res.json()) as AuthorsListResponse
+			dispatch({ type: 'fetch-ok', authors: body.items ?? [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	useEffect(() => {
+		void fetchAuthors()
+	}, [fetchAuthors])
+
+	const openCreate = () => setEditor({ ...EMPTY_EDITOR, open: true })
+
+	const openEdit = (author: Author) =>
+		setEditor({
+			open: true,
+			editing: author,
+			name: author.name,
+			slug: author.slug,
+			// "role" is presentational — the schema has no role column, so we derive
+			// the byline from the bio (the closest honest field) when editing.
+			role: '',
+			email: author.email ?? '',
+			bio: author.bio ?? '',
+			submitting: false,
+			error: null,
+		})
+
+	const closeEditor = () => setEditor(EMPTY_EDITOR)
+
+	const handleSubmit = async () => {
+		const name = editor.name.trim()
+		if (!name) {
+			setEditor((e) => ({ ...e, error: 'Name is required.' }))
+			return
+		}
+		setEditor((e) => ({ ...e, submitting: true, error: null }))
+
+		// Only send fields the adapter accepts (CreateSchema / UpdateSchema):
+		// name, slug, bio, email. slug is optional (server derives from name).
+		const payload: Record<string, string> = { name }
+		const slug = editor.slug.trim()
+		if (slug) payload.slug = slug
+		const email = editor.email.trim()
+		if (email) payload.email = email
+		const bio = editor.bio.trim()
+		if (bio) payload.bio = bio
+
+		try {
+			const res = editor.editing
+				? await fetch(`/admin/api/authors/${encodeURIComponent(editor.editing.id)}`, {
+						method: 'PATCH',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(payload),
+					})
+				: await fetch('/admin/api/authors', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(payload),
+					})
+
+			if (!res.ok) {
+				const detail = (await res.json().catch(() => null)) as { error?: string } | null
+				setEditor((e) => ({
+					...e,
+					submitting: false,
+					error: detail?.error ?? `${res.status} ${res.statusText}`,
+				}))
+				return
+			}
+
+			closeEditor()
+			void fetchAuthors()
+		} catch (err) {
+			setEditor((e) => ({ ...e, submitting: false, error: String(err) }))
+		}
+	}
+
+	return (
+		<div className="page fade-in">
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Authors &amp; bylines</h1>
+					<div className="page-sub">The newsroom and its contributors.</div>
+				</div>
+				<button type="button" className="btn primary" onClick={openCreate}>
+					<Icon name="plus" size={16} /> Add author
+				</button>
+			</div>
+
+			{s.loading && <div style={{ color: 'var(--ink-muted)', fontSize: 14 }}>Loading authors…</div>}
+
+			{!s.loading && s.error && (
+				<div style={{ color: 'var(--red)', fontSize: 14, display: 'flex', alignItems: 'center' }}>
+					{s.error}
+					<button
+						type="button"
+						className="btn sm"
+						style={{ marginLeft: 12 }}
+						onClick={() => void fetchAuthors()}
+					>
+						Retry
+					</button>
+				</div>
+			)}
+
+			{!s.loading && !s.error && s.authors && s.authors.length === 0 && (
+				<EmptyAuthors onAdd={openCreate} />
+			)}
+
+			{!s.loading && !s.error && s.authors && s.authors.length > 0 && (
+				<div
+					style={{
+						display: 'grid',
+						gridTemplateColumns: 'repeat(auto-fill, minmax(260px,1fr))',
+						gap: 'var(--gap)',
+					}}
+				>
+					{s.authors.map((author) => (
+						<AuthorCard key={author.id} author={author} onEdit={() => openEdit(author)} />
+					))}
+				</div>
+			)}
+
+			{editor.open && (
+				<AuthorEditor
+					editor={editor}
+					onChange={(field, value) => setEditor((e) => ({ ...e, [field]: value }))}
+					onSubmit={() => void handleSubmit()}
+					onClose={closeEditor}
+				/>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// AuthorCard — .panel.panel-pad card with .avatar + serif name + byline + stat
+// ---------------------------------------------------------------------------
+
+function AuthorCard({ author, onEdit }: { author: Author; onEdit: () => void }) {
+	// Byline: prefer the author's bio (the honest descriptive field); fall back to
+	// the email handle. No fabricated "role" string.
+	const byline = author.bio?.trim() || author.email || '—'
+
+	return (
+		<div className="panel panel-pad" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+			<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+				<div
+					className="avatar"
+					style={{ background: avatarColor(author.id), width: 46, height: 46, fontSize: 16 }}
+				>
+					{initialsFor(author.name)}
+				</div>
+				<div style={{ minWidth: 0 }}>
+					<div
+						className="serif"
+						style={{
+							fontSize: 15,
+							fontWeight: 700,
+							color: 'var(--ink)',
+							overflow: 'hidden',
+							textOverflow: 'ellipsis',
+							whiteSpace: 'nowrap',
+						}}
+					>
+						{author.name}
+					</div>
+					<div
+						style={{
+							fontSize: 12.5,
+							color: 'var(--ink-muted)',
+							overflow: 'hidden',
+							textOverflow: 'ellipsis',
+							whiteSpace: 'nowrap',
+						}}
+					>
+						{byline}
+					</div>
+				</div>
+			</div>
+
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'flex-end',
+					gap: 16,
+					paddingTop: 10,
+					borderTop: '1px solid var(--border-soft)',
+				}}
+			>
+				<div>
+					{/* Article count is not in the list payload — honest "—" until the
+					    count seam ships server-side. Never a fabricated number. */}
+					<div
+						className="serif tnum"
+						style={{ fontSize: 20, fontWeight: 600, color: 'var(--ink-faint)' }}
+					>
+						—
+					</div>
+					<div className="kicker">Published</div>
+				</div>
+				<div style={{ flex: 1 }} />
+				<button type="button" className="btn sm" onClick={onEdit}>
+					<Icon name="edit" size={14} /> Edit
+				</button>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// EmptyAuthors — SimplePage()-style centered empty panel
+// ---------------------------------------------------------------------------
+
+function EmptyAuthors({ onAdd }: { onAdd: () => void }) {
+	return (
+		<div
+			className="panel"
+			style={{ display: 'grid', placeItems: 'center', padding: '80px 20px', textAlign: 'center' }}
+		>
+			<div
+				style={{
+					width: 56,
+					height: 56,
+					borderRadius: 14,
+					background: 'var(--accent-tint)',
+					color: 'var(--accent)',
+					display: 'grid',
+					placeItems: 'center',
+					marginBottom: 16,
+				}}
+			>
+				<Icon name="users" size={26} />
+			</div>
+			<div className="card-title" style={{ marginBottom: 6 }}>
+				No authors yet
+			</div>
+			<div style={{ fontSize: 13.5, color: 'var(--ink-muted)', maxWidth: 380, marginBottom: 18 }}>
+				The newsroom is empty. Add your first contributor to start assigning bylines to articles and
+				videos.
+			</div>
+			<button type="button" className="btn primary" onClick={onAdd}>
+				<Icon name="plus" size={16} /> Add author
+			</button>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// AuthorEditor — .scrim + .panel.panel-pad create/edit dialog
+// ---------------------------------------------------------------------------
+
+function AuthorEditor({
+	editor,
+	onChange,
+	onSubmit,
+	onClose,
+}: {
+	editor: EditorState
+	onChange: (field: 'name' | 'slug' | 'email' | 'bio', value: string) => void
+	onSubmit: () => void
+	onClose: () => void
+}) {
+	const isEdit = editor.editing !== null
+	return (
+		<div
+			className="scrim"
+			style={{ placeItems: 'center', zIndex: 100 }}
+			role="dialog"
+			aria-modal="true"
+			aria-label={isEdit ? 'Edit author' : 'Add author'}
+			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 panel-pad fade-only"
+				role="document"
+				style={{ width: 440, boxShadow: 'var(--shadow-lg)' }}
+				onClick={(e) => e.stopPropagation()}
+			>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+					<Icon name="users" size={18} style={{ color: 'var(--accent)' }} />
+					<div className="card-title">{isEdit ? 'Edit author' : 'Add author'}</div>
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ marginLeft: 'auto' }}
+						onClick={onClose}
+					>
+						<Icon name="x" size={16} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '6px 0 18px' }} />
+
+				<label style={{ display: 'block', marginBottom: 16 }}>
+					<span className="field-label">
+						Name <span className="req">*</span>
+					</span>
+					<input
+						className="input"
+						type="text"
+						value={editor.name}
+						onChange={(e) => onChange('name', e.target.value)}
+						placeholder="Jane Doe"
+					/>
+				</label>
+
+				<label style={{ display: 'block', marginBottom: 16 }}>
+					<span className="field-label">Slug</span>
+					<input
+						className="input"
+						type="text"
+						value={editor.slug}
+						onChange={(e) => onChange('slug', e.target.value)}
+						placeholder="Auto-generated from name if left blank"
+					/>
+				</label>
+
+				<label style={{ display: 'block', marginBottom: 16 }}>
+					<span className="field-label">Email</span>
+					<input
+						className="input"
+						type="email"
+						value={editor.email}
+						onChange={(e) => onChange('email', e.target.value)}
+						placeholder="jane@example.com"
+					/>
+				</label>
+
+				<label style={{ display: 'block', marginBottom: 16 }}>
+					<span className="field-label">Bio / byline</span>
+					<textarea
+						className="textarea"
+						value={editor.bio}
+						onChange={(e) => onChange('bio', e.target.value)}
+						placeholder="Short biography shown on author pages."
+						rows={3}
+						style={{ resize: 'vertical', minHeight: 72 }}
+					/>
+				</label>
+
+				{editor.error && (
+					<div
+						style={{
+							fontSize: 12,
+							color: 'var(--red)',
+							padding: '6px 10px',
+							background: 'color-mix(in srgb, var(--red) 8%, transparent)',
+							borderRadius: 'var(--radius-sm)',
+							marginBottom: 16,
+						}}
+					>
+						{editor.error}
+					</div>
+				)}
+
+				<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
+					<button type="button" className="btn" onClick={onClose}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="btn primary"
+						onClick={onSubmit}
+						disabled={editor.submitting || !editor.name.trim()}
+						style={{ opacity: editor.submitting || !editor.name.trim() ? 0.5 : 1 }}
+					>
+						{editor.submitting
+							? isEdit
+								? 'Saving…'
+								: 'Adding…'
+							: isEdit
+								? 'Save changes'
+								: 'Add author'}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Avatar helpers — derive initials + a stable tint from the author identity
+// ---------------------------------------------------------------------------
+
+function initialsFor(name: string): string {
+	const parts = name.trim().split(/\s+/).filter(Boolean)
+	if (parts.length >= 2) return (parts[0]![0]! + parts[1]![0]!).toUpperCase()
+	return (name.trim().slice(0, 2) || '—').toUpperCase()
+}
+
+const AVATAR_COLORS = ['#0c4a6e', '#1f6b4a', '#5b4bc4', '#8c6d14', '#075985', '#475569']
+
+function avatarColor(seed: string): string {
+	let h = 0
+	for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0
+	return AVATAR_COLORS[h % AVATAR_COLORS.length]!
+}