@growth-labs/cms 0.1.0

package/src/ui/screens/LibraryScreen.tsx

@@ -0,0 +1,1350 @@
+// src/ui/screens/LibraryScreen.tsx — content library: list/board/filters/bulk/import.
+//
+// Status tabs (counts from GET /content/counts), type segment, search box,
+// list table + BoardView (kanban columns), selection/bulk bar (POST /content/bulk),
+// Import button (parse flow), New Content (→ openDoc({id:null, contentType})).
+//
+// Ported from the library.jsx design surface.  All data logic lives in the
+// pure helpers in library-data.ts; this file is the React shell.
+//
+// NOTE: the per-row Share action is a STUB (P6 feature) — it renders as an
+// icon button that is currently a no-op.
+
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
+import type { ContentStatus, ContentType } from '../../schema/types.js'
+import { buildSharePrefill, ShareModal } from '../components/ShareModal.js'
+import { Icon } from '../icons.js'
+import { useWorkspace } from '../workspace-context.js'
+import {
+	deriveStatusCounts,
+	filterRows,
+	groupByStatus,
+	type LibraryRow,
+	type StatusCounts,
+} from './library-data.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface LibraryScreenProps {
+	openDoc: (id: string | null, contentType?: ContentType) => void
+}
+
+// ---------------------------------------------------------------------------
+// Status tab metadata
+// ---------------------------------------------------------------------------
+
+const STATUS_TABS: Array<{ key: keyof StatusCounts; label: string }> = [
+	{ key: 'all', label: 'All' },
+	{ key: 'draft', label: 'Draft' },
+	{ key: 'review', label: 'Review' },
+	{ key: 'scheduled', label: 'Scheduled' },
+	{ key: 'published', label: 'Published' },
+	{ key: 'processing', label: 'Processing' },
+]
+
+const TYPE_OPTIONS: Array<{ value: ContentType | ''; label: string }> = [
+	{ value: '', label: 'All types' },
+	{ value: 'article', label: 'Article' },
+	{ value: 'video', label: 'Video' },
+	{ value: 'podcast', label: 'Podcast' },
+	{ value: 'newsletter', label: 'Newsletter' },
+]
+
+const CONTENT_TYPE_ICONS: Record<ContentType, string> = {
+	article: 'doc',
+	video: 'video',
+	podcast: 'mic',
+	newsletter: 'mail',
+}
+
+// ---------------------------------------------------------------------------
+// Internal state for this screen
+// ---------------------------------------------------------------------------
+
+interface LibraryState {
+	rows: LibraryRow[]
+	counts: StatusCounts
+	loading: boolean
+	error: string | null
+	/** The currently active status tab filter. */
+	statusFilter: ContentStatus | 'all' | 'processing'
+	typeFilter: ContentType | ''
+	q: string
+	view: 'list' | 'board'
+	/** Row IDs currently selected. */
+	selected: Set<string>
+	/** Whether the import modal is open. */
+	importOpen: boolean
+	/** The row currently being shared (opens ShareModal). Null = closed. */
+	shareRow: LibraryRow | null
+	/** Cursor for next-page load. */
+	cursor: string | null
+	hasMore: boolean
+}
+
+type LibraryAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; rows: LibraryRow[]; counts: StatusCounts; cursor: string | null }
+	| { type: 'fetch-error'; error: string }
+	| { type: 'set-status-filter'; status: ContentStatus | 'all' | 'processing' }
+	| { type: 'set-type-filter'; contentType: ContentType | '' }
+	| { type: 'set-q'; q: string }
+	| { type: 'set-view'; view: 'list' | 'board' }
+	| { type: 'toggle-select'; id: string }
+	| { type: 'select-all' }
+	| { type: 'clear-selection' }
+	| { type: 'toggle-import' }
+	| { type: 'close-import' }
+	| { type: 'open-share'; row: LibraryRow }
+	| { type: 'close-share' }
+	| { type: 'bulk-done'; removedIds?: string[] }
+
+function initLibrary(): LibraryState {
+	return {
+		rows: [],
+		counts: { all: 0, draft: 0, review: 0, scheduled: 0, published: 0, processing: 0 },
+		loading: true,
+		error: null,
+		statusFilter: 'all',
+		typeFilter: '',
+		q: '',
+		view: 'list',
+		selected: new Set(),
+		importOpen: false,
+		shareRow: null,
+		cursor: null,
+		hasMore: false,
+	}
+}
+
+function libraryReducer(state: LibraryState, action: LibraryAction): LibraryState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return {
+				...state,
+				loading: false,
+				rows: action.rows,
+				counts: action.counts,
+				cursor: action.cursor,
+				hasMore: action.cursor !== null,
+			}
+		case 'fetch-error':
+			return { ...state, loading: false, error: action.error }
+		case 'set-status-filter':
+			return { ...state, statusFilter: action.status, selected: new Set() }
+		case 'set-type-filter':
+			return { ...state, typeFilter: action.contentType, selected: new Set() }
+		case 'set-q':
+			return { ...state, q: action.q }
+		case 'set-view':
+			return { ...state, view: action.view, selected: new Set() }
+		case 'toggle-select': {
+			const next = new Set(state.selected)
+			if (next.has(action.id)) {
+				next.delete(action.id)
+			} else {
+				next.add(action.id)
+			}
+			return { ...state, selected: next }
+		}
+		case 'select-all': {
+			const visible = getVisibleRows(state)
+			return { ...state, selected: new Set(visible.map((r) => r.id)) }
+		}
+		case 'clear-selection':
+			return { ...state, selected: new Set() }
+		case 'toggle-import':
+			return { ...state, importOpen: !state.importOpen }
+		case 'close-import':
+			return { ...state, importOpen: false }
+		case 'open-share':
+			return { ...state, shareRow: action.row }
+		case 'close-share':
+			return { ...state, shareRow: null }
+		case 'bulk-done': {
+			const removed = action.removedIds ?? []
+			const next = state.rows.filter((r) => !removed.includes(r.id))
+			return {
+				...state,
+				rows: next,
+				counts: deriveStatusCounts(next),
+				selected: new Set(),
+			}
+		}
+		default:
+			return state
+	}
+}
+
+/** Returns the currently visible rows after applying client-side filter. */
+function getVisibleRows(state: LibraryState): LibraryRow[] {
+	return filterRows(state.rows, {
+		status:
+			state.statusFilter !== 'all' && state.statusFilter !== 'processing'
+				? (state.statusFilter as ContentStatus)
+				: undefined,
+		type: state.typeFilter !== '' ? state.typeFilter : undefined,
+		q: state.q || undefined,
+	})
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function LibraryScreen({ openDoc }: LibraryScreenProps) {
+	const { state: ws } = useWorkspace()
+	const [lib, dispatch] = useReducer(libraryReducer, undefined, initLibrary)
+	const searchRef = useRef<HTMLInputElement>(null)
+
+	// Build the API base URL from the workspace active id
+	const baseUrl = `/admin/api`
+
+	const fetchContent = useCallback(async () => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			// Fetch list + counts in parallel
+			const params = new URLSearchParams({ limit: '50' })
+			if (lib.statusFilter !== 'all' && lib.statusFilter !== 'processing') {
+				params.set('status', lib.statusFilter)
+			}
+			if (lib.typeFilter) params.set('types', lib.typeFilter)
+			if (lib.q) params.set('q', lib.q)
+
+			const [listRes, countsRes] = await Promise.all([
+				fetch(`${baseUrl}/content?${params.toString()}`),
+				fetch(`${baseUrl}/content/counts`),
+			])
+
+			if (!listRes.ok || !countsRes.ok) {
+				const msg = !listRes.ok
+					? `List error ${listRes.status}`
+					: `Counts error ${countsRes.status}`
+				dispatch({ type: 'fetch-error', error: msg })
+				return
+			}
+
+			const listJson = (await listRes.json()) as {
+				items: LibraryRow[]
+				nextCursor?: string | null
+			}
+			const countsJson = (await countsRes.json()) as { counts: StatusCounts }
+
+			dispatch({
+				type: 'fetch-ok',
+				rows: listJson.items ?? [],
+				counts: countsJson.counts ?? deriveStatusCounts(listJson.items ?? []),
+				cursor: listJson.nextCursor ?? null,
+			})
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [lib.statusFilter, lib.typeFilter, lib.q]) // fetchContent identity changes when filters change → useEffect re-runs
+
+	// Initial fetch + refetch when filters change
+	useEffect(() => {
+		void fetchContent()
+	}, [fetchContent])
+
+	const visible = getVisibleRows(lib)
+	const allVisibleSelected = visible.length > 0 && visible.every((r) => lib.selected.has(r.id))
+
+	return (
+		<div className="page page-wide library-screen fade-in" style={{ maxWidth: 1340 }}>
+			{/* Header */}
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Content</h1>
+					<div className="page-sub">
+						{lib.counts.all} items across articles, video, podcasts and newsletters.
+					</div>
+				</div>
+				<div style={{ display: 'flex', gap: 8 }}>
+					{/* Import */}
+					<button type="button" className="btn" onClick={() => dispatch({ type: 'toggle-import' })}>
+						<Icon name="upload" size={16} />
+						<span>Import</span>
+					</button>
+
+					{/* New content dropdown stub — opens a menu per type */}
+					<NewContentMenu openDoc={openDoc} />
+				</div>
+			</div>
+
+			{/* Status tabs */}
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 4,
+					borderBottom: '1px solid var(--border)',
+					marginBottom: 16,
+				}}
+			>
+				{STATUS_TABS.map((tab) => {
+					const active = lib.statusFilter === tab.key
+					const count =
+						tab.key === 'all'
+							? lib.counts.all
+							: tab.key === 'processing'
+								? lib.counts.processing
+								: lib.counts[tab.key as keyof Omit<StatusCounts, 'all' | 'processing'>]
+					return (
+						<button
+							key={tab.key}
+							type="button"
+							onClick={() =>
+								dispatch({
+									type: 'set-status-filter',
+									status: tab.key as LibraryState['statusFilter'],
+								})
+							}
+							style={{
+								...tabStyle,
+								color: active ? 'var(--ink)' : 'var(--ink-muted)',
+								borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
+							}}
+						>
+							{tab.label}
+							<span
+								className="tnum"
+								style={{
+									fontSize: 11,
+									color: 'var(--ink-faint)',
+									background: 'var(--hover)',
+									padding: '1px 7px',
+									borderRadius: 12,
+								}}
+							>
+								{count}
+							</span>
+						</button>
+					)
+				})}
+			</div>
+
+			{/* Filter row */}
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 10,
+					marginBottom: 14,
+					flexWrap: 'wrap',
+				}}
+			>
+				{/* Search */}
+				<div className="search" style={{ maxWidth: 300, height: 34 }}>
+					<Icon name="search" size={15} />
+					<input
+						ref={searchRef}
+						type="search"
+						placeholder="Title or slug…"
+						value={lib.q}
+						onChange={(e) => dispatch({ type: 'set-q', q: e.currentTarget.value })}
+					/>
+				</div>
+
+				{/* Type filter — segmented control */}
+				<div className="seg">
+					{TYPE_OPTIONS.map((o) => (
+						<button
+							key={o.value || 'all'}
+							type="button"
+							className={lib.typeFilter === o.value ? 'on' : ''}
+							onClick={() => dispatch({ type: 'set-type-filter', contentType: o.value })}
+						>
+							{o.value !== '' && (
+								<Icon
+									name={CONTENT_TYPE_ICONS[o.value] as Parameters<typeof Icon>[0]['name']}
+									size={14}
+								/>
+							)}
+							{o.label}
+						</button>
+					))}
+				</div>
+
+				<div style={{ flex: 1 }} />
+
+				{/* View toggle — segmented control */}
+				<div className="seg">
+					<button
+						type="button"
+						title="List view"
+						className={lib.view === 'list' ? 'on' : ''}
+						onClick={() => dispatch({ type: 'set-view', view: 'list' })}
+					>
+						<Icon name="rows" size={15} />
+					</button>
+					<button
+						type="button"
+						title="Board view"
+						className={lib.view === 'board' ? 'on' : ''}
+						onClick={() => dispatch({ type: 'set-view', view: 'board' })}
+					>
+						<Icon name="columns" size={15} />
+					</button>
+				</div>
+			</div>
+
+			{/* Bulk action bar */}
+			{lib.selected.size > 0 && (
+				<BulkBar
+					selectedIds={Array.from(lib.selected)}
+					workspaceId={ws.activeId}
+					onDone={(removedIds) => dispatch({ type: 'bulk-done', removedIds })}
+					onCancel={() => dispatch({ type: 'clear-selection' })}
+				/>
+			)}
+
+			{/* Content area */}
+			{lib.loading && (
+				<div className="panel panel-pad" style={{ textAlign: 'center', color: 'var(--ink-muted)' }}>
+					Loading…
+				</div>
+			)}
+
+			{!lib.loading && lib.error && (
+				<div className="panel panel-pad" style={{ textAlign: 'center', color: 'var(--red)' }}>
+					{lib.error}
+					<button
+						type="button"
+						className="btn sm"
+						onClick={() => void fetchContent()}
+						style={{ marginLeft: 12 }}
+					>
+						Retry
+					</button>
+				</div>
+			)}
+
+			{!lib.loading && !lib.error && visible.length === 0 && (
+				<div
+					className="panel panel-pad"
+					style={{ padding: 60, textAlign: 'center', color: 'var(--ink-muted)' }}
+				>
+					<Icon
+						name="doc"
+						size={32}
+						style={{ opacity: 0.3, display: 'block', margin: '0 auto 12px' }}
+					/>
+					<div style={{ fontSize: 14 }}>No content found.</div>
+					{lib.q && (
+						<button
+							type="button"
+							className="btn sm"
+							onClick={() => dispatch({ type: 'set-q', q: '' })}
+							style={{ marginTop: 8 }}
+						>
+							Clear search
+						</button>
+					)}
+				</div>
+			)}
+
+			{!lib.loading &&
+				!lib.error &&
+				visible.length > 0 &&
+				(lib.view === 'list' ? (
+					<ListView
+						rows={visible}
+						selected={lib.selected}
+						allSelected={allVisibleSelected}
+						onToggleSelect={(id) => dispatch({ type: 'toggle-select', id })}
+						onSelectAll={() =>
+							allVisibleSelected
+								? dispatch({ type: 'clear-selection' })
+								: dispatch({ type: 'select-all' })
+						}
+						onOpen={(row) => openDoc(row.id, row.type)}
+						onShare={(row) => dispatch({ type: 'open-share', row })}
+					/>
+				) : (
+					<BoardView rows={visible} onOpen={(row) => openDoc(row.id, row.type)} />
+				))}
+
+			{/* Import modal */}
+			{lib.importOpen && (
+				<ImportModal
+					workspaceId={ws.activeId}
+					onClose={() => dispatch({ type: 'close-import' })}
+					onImported={() => {
+						dispatch({ type: 'close-import' })
+						void fetchContent()
+					}}
+				/>
+			)}
+
+			{/* Share modal — opened by the per-row Share button */}
+			{lib.shareRow && (
+				<ShareModal
+					prefill={buildSharePrefill(lib.shareRow)}
+					onClose={() => dispatch({ type: 'close-share' })}
+				/>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// New content menu
+// ---------------------------------------------------------------------------
+
+function NewContentMenu({ openDoc }: { openDoc: LibraryScreenProps['openDoc'] }) {
+	const [open, setOpen] = useState(false)
+	const ref = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (!open) return
+		function handler(e: MouseEvent) {
+			if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+		}
+		document.addEventListener('mousedown', handler)
+		return () => document.removeEventListener('mousedown', handler)
+	}, [open])
+
+	const types: ContentType[] = ['article', 'video', 'podcast', 'newsletter']
+
+	return (
+		<div ref={ref} style={{ position: 'relative' }}>
+			<button type="button" className="btn primary" onClick={() => setOpen((v) => !v)}>
+				<Icon name="plus" size={16} />
+				<span>New content</span>
+				<Icon name="chevDown" size={13} />
+			</button>
+
+			{open && (
+				<div
+					className="panel"
+					style={{
+						position: 'absolute',
+						top: 'calc(100% + 4px)',
+						right: 0,
+						boxShadow: 'var(--shadow-md)',
+						minWidth: 160,
+						zIndex: 100,
+						overflow: 'hidden',
+					}}
+				>
+					{types.map((t) => (
+						<button
+							key={t}
+							type="button"
+							onClick={() => {
+								setOpen(false)
+								openDoc(null, t)
+							}}
+							style={{
+								width: '100%',
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+								padding: '9px 14px',
+								background: 'transparent',
+								border: 'none',
+								cursor: 'pointer',
+								fontSize: 13,
+								color: 'var(--ink)',
+								textAlign: 'left',
+							}}
+						>
+							<Icon
+								name={CONTENT_TYPE_ICONS[t] as Parameters<typeof Icon>[0]['name']}
+								size={15}
+								style={{ color: 'var(--ink-muted)' }}
+							/>
+							{t.charAt(0).toUpperCase() + t.slice(1)}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// List view
+// ---------------------------------------------------------------------------
+
+function ListView({
+	rows,
+	selected,
+	allSelected,
+	onToggleSelect,
+	onSelectAll,
+	onOpen,
+	onShare,
+}: {
+	rows: LibraryRow[]
+	selected: Set<string>
+	allSelected: boolean
+	onToggleSelect: (id: string) => void
+	onSelectAll: () => void
+	onOpen: (row: LibraryRow) => void
+	onShare: (row: LibraryRow) => void
+}) {
+	return (
+		<div className="panel" style={{ overflow: 'hidden' }}>
+			<div style={{ overflowX: 'auto' }}>
+				<table className="tbl" style={{ minWidth: 820 }}>
+					<thead>
+						<tr>
+							<th style={{ paddingLeft: 16, width: 34 }}>
+								<input
+									type="checkbox"
+									checked={allSelected}
+									onChange={onSelectAll}
+									aria-label="Select all"
+								/>
+							</th>
+							<th>Title</th>
+							<th style={{ width: 110 }}>Type</th>
+							<th style={{ width: 120 }}>Status</th>
+							<th style={{ width: 150 }}>Author</th>
+							<th style={{ width: 130 }}>Updated</th>
+							<th style={{ width: 60 }} />
+						</tr>
+					</thead>
+					<tbody>
+						{rows.map((row) => (
+							<ListRow
+								key={row.id}
+								row={row}
+								isSelected={selected.has(row.id)}
+								onSelect={() => onToggleSelect(row.id)}
+								onOpen={() => onOpen(row)}
+								onShare={() => onShare(row)}
+							/>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	)
+}
+
+function ListRow({
+	row,
+	isSelected,
+	onSelect,
+	onOpen,
+	onShare,
+}: {
+	row: LibraryRow
+	isSelected: boolean
+	onSelect: () => void
+	onOpen: () => void
+	onShare: () => void
+}) {
+	return (
+		<tr style={isSelected ? { background: 'var(--accent-tint)' } : undefined} onClick={onOpen}>
+			<td
+				style={{ paddingLeft: 16, width: 34 }}
+				onClick={(e) => {
+					e.stopPropagation()
+					onSelect()
+				}}
+				onKeyUp={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.stopPropagation()
+						onSelect()
+					}
+				}}
+			>
+				<span
+					style={{
+						width: 17,
+						height: 17,
+						borderRadius: 4,
+						border: '1.5px solid var(--field-border)',
+						display: 'grid',
+						placeItems: 'center',
+						background: isSelected ? 'var(--accent)' : 'transparent',
+						borderColor: isSelected ? 'var(--accent)' : 'var(--field-border)',
+					}}
+				>
+					{isSelected && <Icon name="check" size={12} style={{ color: '#fff' }} />}
+				</span>
+			</td>
+
+			<td style={{ maxWidth: 380 }}>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+					<div
+						style={{
+							width: 34,
+							height: 34,
+							borderRadius: 7,
+							flex: 'none',
+							display: 'grid',
+							placeItems: 'center',
+							background: 'var(--panel-2)',
+							color: 'var(--ink-muted)',
+						}}
+					>
+						<Icon
+							name={CONTENT_TYPE_ICONS[row.type] as Parameters<typeof Icon>[0]['name']}
+							size={16}
+						/>
+					</div>
+					<div style={{ minWidth: 0 }}>
+						<div
+							style={{
+								fontWeight: 600,
+								color: 'var(--ink)',
+								whiteSpace: 'nowrap',
+								overflow: 'hidden',
+								textOverflow: 'ellipsis',
+								display: 'flex',
+								alignItems: 'center',
+								gap: 7,
+							}}
+						>
+							{row.title || '(Untitled)'}
+							{row.featured && (
+								<span title="Premium" style={{ color: 'var(--gold)', flex: 'none' }}>
+									<Icon name="star" size={13} />
+								</span>
+							)}
+						</div>
+						<div
+							className="mono"
+							style={{
+								fontSize: 11.5,
+								color: 'var(--ink-faint)',
+								whiteSpace: 'nowrap',
+								overflow: 'hidden',
+								textOverflow: 'ellipsis',
+							}}
+						>
+							/{row.slug}
+						</div>
+					</div>
+				</div>
+			</td>
+
+			<td>
+				<span className="type-tag">
+					<Icon
+						name={CONTENT_TYPE_ICONS[row.type] as Parameters<typeof Icon>[0]['name']}
+						size={14}
+					/>{' '}
+					{row.type.charAt(0).toUpperCase() + row.type.slice(1)}
+				</span>
+			</td>
+
+			<td>
+				<StatusPill row={row} />
+			</td>
+
+			<td>
+				<span style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>{row.authorName ?? '—'}</span>
+			</td>
+
+			<td className="tnum" style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
+				{row.updatedAt ? formatDate(row.updatedAt) : '—'}
+			</td>
+
+			{/* Actions column */}
+			<td onClick={(e) => e.stopPropagation()} onKeyUp={(e) => e.stopPropagation()}>
+				<div style={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+					{/* Share — opens the ShareModal pre-filled from this row */}
+					<button
+						type="button"
+						className="icon-btn"
+						title="Share"
+						onClick={(e) => {
+							e.stopPropagation()
+							onShare()
+						}}
+						style={{ width: 28, height: 28 }}
+					>
+						<Icon name="share" size={14} />
+					</button>
+					<button
+						type="button"
+						className="icon-btn"
+						title="Open"
+						onClick={onOpen}
+						style={{ width: 28, height: 28 }}
+					>
+						<Icon name="chevRight" size={14} />
+					</button>
+				</div>
+			</td>
+		</tr>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Status pill
+// ---------------------------------------------------------------------------
+
+/** Maps a content status (or the derived 'processing' pseudo-state) to its
+ *  broadsheet `.pill` modifier class + human label. */
+const STATUS_PILL: Record<ContentStatus | 'processing', { cls: string; label: string }> = {
+	published: { cls: 'published', label: 'Published' },
+	draft: { cls: 'draft', label: 'Draft' },
+	review: { cls: 'review', label: 'In review' },
+	scheduled: { cls: 'scheduled', label: 'Scheduled' },
+	processing: { cls: 'processing', label: 'Processing' },
+	// archived has no prototype pill state — fall back to the muted draft idiom.
+	archived: { cls: 'draft', label: 'Archived' },
+}
+
+function StatusPill({ row }: { row: LibraryRow }) {
+	// `!= null` (not `!== null`) so an absent field (undefined) is treated as
+	// not-processing — otherwise every non-video row mis-renders as PROCESSING.
+	const isProcessing =
+		row.processingState != null && !['ready', 'failed'].includes(row.processingState ?? '')
+	const { cls, label } = isProcessing ? STATUS_PILL.processing : STATUS_PILL[row.status]
+
+	return (
+		<span className={`pill ${cls}`}>
+			<span className="pdot" />
+			{label}
+		</span>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Board view (kanban)
+// ---------------------------------------------------------------------------
+
+const BOARD_COLUMNS: Array<{
+	key: keyof ReturnType<typeof groupByStatus>
+	label: string
+}> = [
+	{ key: 'draft', label: 'Draft' },
+	{ key: 'review', label: 'Review' },
+	{ key: 'scheduled', label: 'Scheduled' },
+	{ key: 'processing', label: 'Processing' },
+	{ key: 'published', label: 'Published' },
+]
+
+const BOARD_PILL: Record<(typeof BOARD_COLUMNS)[number]['key'], string> = {
+	draft: 'draft',
+	review: 'review',
+	scheduled: 'scheduled',
+	processing: 'processing',
+	published: 'published',
+}
+
+function BoardView({ rows, onOpen }: { rows: LibraryRow[]; onOpen: (row: LibraryRow) => void }) {
+	const columns = groupByStatus(rows)
+
+	return (
+		<div
+			style={{
+				display: 'grid',
+				gridTemplateColumns: 'repeat(5, minmax(232px, 1fr))',
+				gap: 14,
+				overflowX: 'auto',
+				paddingBottom: 8,
+			}}
+		>
+			{BOARD_COLUMNS.map((col) => {
+				const colRows = columns[col.key]
+				return (
+					<div key={col.key} style={{ minWidth: 232 }}>
+						<div
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+								marginBottom: 10,
+								padding: '0 2px',
+							}}
+						>
+							<span className={`pill ${BOARD_PILL[col.key]}`}>
+								<span className="pdot" />
+								{col.label}
+							</span>
+							<span className="tnum" style={{ fontSize: 12, color: 'var(--ink-faint)' }}>
+								{colRows.length}
+							</span>
+						</div>
+
+						<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+							{colRows.length === 0 && (
+								<div
+									style={{
+										padding: '16px 0',
+										textAlign: 'center',
+										fontSize: 11,
+										color: 'var(--ink-faint)',
+									}}
+								>
+									Empty
+								</div>
+							)}
+							{colRows.map((row) => (
+								<BoardCard key={row.id} row={row} onOpen={() => onOpen(row)} />
+							))}
+						</div>
+					</div>
+				)
+			})}
+		</div>
+	)
+}
+
+function BoardCard({ row, onOpen }: { row: LibraryRow; onOpen: () => void }) {
+	const isProcessing =
+		row.processingState != null && !['ready', 'failed'].includes(row.processingState ?? '')
+
+	return (
+		<button
+			type="button"
+			className="panel"
+			aria-label={`Open ${row.title ?? 'library item'}`}
+			style={{
+				padding: 12,
+				cursor: 'pointer',
+				display: 'block',
+				width: '100%',
+				textAlign: 'left',
+				font: 'inherit',
+				color: 'inherit',
+			}}
+			onClick={onOpen}
+			onMouseEnter={(e) => {
+				e.currentTarget.style.borderColor = 'var(--accent-ring)'
+			}}
+			onMouseLeave={(e) => {
+				e.currentTarget.style.borderColor = 'var(--border)'
+			}}
+		>
+			{/* Hero band: type-tag overlay + (honest) indeterminate processing bar */}
+			<div
+				style={{
+					height: 78,
+					borderRadius: 7,
+					background: 'var(--panel-2)',
+					marginBottom: 10,
+					position: 'relative',
+					display: 'grid',
+					placeItems: 'center',
+				}}
+			>
+				<Icon
+					name={CONTENT_TYPE_ICONS[row.type] as Parameters<typeof Icon>[0]['name']}
+					size={22}
+					style={{ color: 'var(--ink-faint)' }}
+				/>
+				<span style={{ position: 'absolute', top: 8, left: 8 }}>
+					<span
+						style={{
+							display: 'inline-flex',
+							alignItems: 'center',
+							gap: 5,
+							background: 'rgba(0,0,0,.4)',
+							color: '#fff',
+							padding: '3px 8px',
+							borderRadius: 20,
+							fontSize: 10.5,
+							fontFamily: 'var(--mono)',
+						}}
+					>
+						<Icon
+							name={CONTENT_TYPE_ICONS[row.type] as Parameters<typeof Icon>[0]['name']}
+							size={12}
+						/>{' '}
+						{row.type.charAt(0).toUpperCase() + row.type.slice(1)}
+					</span>
+				</span>
+				{isProcessing && (
+					<span
+						className="skeleton-shimmer"
+						title={`Processing: ${row.processingState}`}
+						style={{
+							position: 'absolute',
+							bottom: 8,
+							left: 8,
+							right: 8,
+							height: 4,
+							borderRadius: 3,
+							overflow: 'hidden',
+						}}
+					/>
+				)}
+			</div>
+			<div
+				style={{
+					fontSize: 13.5,
+					fontWeight: 600,
+					color: 'var(--ink)',
+					lineHeight: 1.35,
+					marginBottom: 8,
+				}}
+			>
+				{row.title || '(Untitled)'}
+			</div>
+			<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+				<span style={{ fontSize: 11.5, color: 'var(--ink-muted)' }}>
+					{row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—')}
+				</span>
+				{row.featured && (
+					<span style={{ marginLeft: 'auto', color: 'var(--gold)' }}>
+						<Icon name="star" size={12} />
+					</span>
+				)}
+			</div>
+		</button>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Bulk action bar
+// ---------------------------------------------------------------------------
+
+const BULK_OPS = [
+	{ op: 'trash', label: 'Trash', icon: 'trash' as const, danger: true },
+	{ op: 'review', label: 'Move to Review', icon: 'flag' as const, danger: false },
+] as const
+
+function BulkBar({
+	selectedIds,
+	workspaceId: _workspaceId,
+	onDone,
+	onCancel,
+}: {
+	selectedIds: string[]
+	workspaceId: string
+	onDone: (removedIds?: string[]) => void
+	onCancel: () => void
+}) {
+	const [busy, setBusy] = useState(false)
+
+	async function runBulk(op: string) {
+		setBusy(true)
+		try {
+			const res = await fetch(`/admin/api/content/bulk`, {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ ids: selectedIds, op }),
+			})
+			if (!res.ok) {
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+					error?: string
+				}
+				alert(`Bulk ${op} failed: ${err.error ?? res.statusText}`)
+				setBusy(false)
+				return
+			}
+			// For trash, the rows are gone; for others we just refresh
+			onDone(op === 'trash' ? selectedIds : undefined)
+		} catch (err) {
+			alert(String(err))
+			setBusy(false)
+		}
+	}
+
+	return (
+		<div
+			className="panel fade-only"
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				gap: 12,
+				padding: '10px 14px',
+				marginBottom: 12,
+				background: 'var(--accent-tint)',
+				borderColor: 'var(--accent-ring)',
+			}}
+		>
+			<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent)' }}>
+				{selectedIds.length} selected
+			</span>
+
+			<div style={{ flex: 1 }} />
+
+			{BULK_OPS.map(({ op, label, icon, danger }) => (
+				<button
+					key={op}
+					type="button"
+					className={danger ? 'btn sm danger' : 'btn sm'}
+					disabled={busy}
+					onClick={() => void runBulk(op)}
+					style={busy ? { opacity: 0.6 } : undefined}
+				>
+					<Icon name={icon} size={14} />
+					<span>{label}</span>
+				</button>
+			))}
+
+			<button type="button" className="icon-btn" onClick={onCancel} title="Cancel selection">
+				<Icon name="x" size={16} />
+			</button>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Import modal
+// ---------------------------------------------------------------------------
+
+type ImportSource = 'markdown' | 'ghost' | 'substack'
+
+const IMPORT_SOURCES: Array<{ value: ImportSource; label: string }> = [
+	{ value: 'markdown', label: 'Markdown file' },
+	{ value: 'ghost', label: 'Ghost JSON export' },
+	{ value: 'substack', label: 'Substack CSV export' },
+]
+
+interface ImportPreviewItem {
+	title: string
+	slug: string
+	excerpt?: string
+}
+
+interface ParseResult {
+	importId: string
+	items: ImportPreviewItem[]
+}
+
+function ImportModal({
+	workspaceId: _workspaceId,
+	onClose,
+	onImported,
+}: {
+	workspaceId: string
+	onClose: () => void
+	onImported: () => void
+}) {
+	const [step, setStep] = useState<'pick' | 'preview' | 'confirming'>('pick')
+	const [source, setSource] = useState<ImportSource>('markdown')
+	const [payload, setPayload] = useState('')
+	const [parseResult, setParseResult] = useState<ParseResult | null>(null)
+	const [error, setError] = useState<string | null>(null)
+
+	async function handleParse() {
+		setError(null)
+		try {
+			const res = await fetch('/admin/api/content/import/parse', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ source, payload }),
+			})
+			if (!res.ok) {
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+					error?: string
+				}
+				setError(err.error ?? 'Parse failed')
+				return
+			}
+			const data = (await res.json()) as ParseResult
+			setParseResult(data)
+			setStep('preview')
+		} catch (err) {
+			setError(String(err))
+		}
+	}
+
+	async function handleConfirm() {
+		if (!parseResult) return
+		setStep('confirming')
+		setError(null)
+		try {
+			const res = await fetch('/admin/api/content/import/confirm', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify({ importId: parseResult.importId }),
+			})
+			if (!res.ok) {
+				const err = (await res.json().catch(() => ({ error: res.statusText }))) as {
+					error?: string
+				}
+				setError(err.error ?? 'Confirm failed')
+				setStep('preview')
+				return
+			}
+			onImported()
+		} catch (err) {
+			setError(String(err))
+			setStep('preview')
+		}
+	}
+
+	return (
+		<dialog
+			open
+			aria-label="Import content"
+			className="scrim"
+			style={{ display: 'grid', placeItems: 'center', border: 'none', padding: 16 }}
+			onClose={onClose}
+			onClick={(e) => {
+				if (e.target === e.currentTarget) onClose()
+			}}
+			onKeyUp={(e) => {
+				if (e.key === 'Escape') onClose()
+			}}
+		>
+			<div
+				className="panel panel-pad fade-in"
+				style={{ width: '100%', maxWidth: 540, boxShadow: 'var(--shadow-lg)' }}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'flex-start',
+						justifyContent: 'space-between',
+						gap: 12,
+					}}
+				>
+					<div className="kicker">Import</div>
+					<button type="button" className="icon-btn" onClick={onClose} title="Close">
+						<Icon name="x" size={18} />
+					</button>
+				</div>
+				<h2 className="card-title">Import content</h2>
+				<div className="masthead-rule" style={{ marginBottom: 16 }} />
+
+				{step === 'pick' && (
+					<>
+						<div style={{ marginBottom: 14 }}>
+							<label htmlFor="import-source" className="field-label">
+								Source format
+							</label>
+							<select
+								id="import-source"
+								className="selectbox"
+								value={source}
+								onChange={(e) => setSource(e.currentTarget.value as ImportSource)}
+							>
+								{IMPORT_SOURCES.map((s) => (
+									<option key={s.value} value={s.value}>
+										{s.label}
+									</option>
+								))}
+							</select>
+						</div>
+
+						<div style={{ marginBottom: 16 }}>
+							<label htmlFor="import-payload" className="field-label">
+								Paste content
+							</label>
+							<textarea
+								id="import-payload"
+								className="textarea mono"
+								value={payload}
+								onChange={(e) => setPayload(e.currentTarget.value)}
+								rows={10}
+								placeholder={`Paste your ${source} content here…`}
+								style={{ fontSize: 12 }}
+							/>
+						</div>
+
+						{error && (
+							<div style={{ marginBottom: 12, color: 'var(--red)', fontSize: 12 }}>{error}</div>
+						)}
+
+						<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+							<button type="button" className="btn" onClick={onClose}>
+								Cancel
+							</button>
+							<button
+								type="button"
+								className="btn primary"
+								onClick={() => void handleParse()}
+								disabled={!payload.trim()}
+								style={payload.trim() ? undefined : { opacity: 0.5 }}
+							>
+								Parse
+							</button>
+						</div>
+					</>
+				)}
+
+				{step === 'preview' && parseResult && (
+					<>
+						<div style={{ marginBottom: 12, fontSize: 13, color: 'var(--ink-muted)' }}>
+							Found {parseResult.items.length} item
+							{parseResult.items.length !== 1 ? 's' : ''} to import.
+						</div>
+
+						<div className="panel" style={{ maxHeight: 240, overflow: 'auto', marginBottom: 16 }}>
+							{parseResult.items.map((item) => (
+								<div
+									key={item.slug}
+									style={{
+										padding: '8px 12px',
+										borderBottom: '1px solid var(--border-soft)',
+									}}
+								>
+									<div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>
+										{item.title}
+									</div>
+									<div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)' }}>
+										/{item.slug}
+									</div>
+								</div>
+							))}
+						</div>
+
+						{error && (
+							<div style={{ marginBottom: 12, color: 'var(--red)', fontSize: 12 }}>{error}</div>
+						)}
+
+						<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+							<button type="button" className="btn" onClick={() => setStep('pick')}>
+								Back
+							</button>
+							<button type="button" className="btn primary" onClick={() => void handleConfirm()}>
+								Import {parseResult.items.length} item{parseResult.items.length !== 1 ? 's' : ''}
+							</button>
+						</div>
+					</>
+				)}
+
+				{step === 'confirming' && (
+					<div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--ink-muted)' }}>
+						Importing…
+					</div>
+				)}
+			</div>
+		</dialog>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatDate(iso: string): string {
+	try {
+		const d = new Date(iso)
+		const now = new Date()
+		const diff = now.getTime() - d.getTime()
+		if (diff < 60_000) return 'just now'
+		if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+		if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+		return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+	} catch {
+		return iso
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Micro-style tokens (inline — the broadsheet status-tab underline pattern,
+// which has no dedicated class in broadsheet.css).
+// ---------------------------------------------------------------------------
+
+const tabStyle: React.CSSProperties = {
+	border: 0,
+	background: 'transparent',
+	padding: '10px 12px 12px',
+	fontSize: 13.5,
+	fontWeight: 600,
+	marginBottom: -1,
+	cursor: 'pointer',
+	display: 'inline-flex',
+	alignItems: 'center',
+	gap: 7,
+	whiteSpace: 'nowrap',
+	transition: 'color 120ms',
+}