@growth-labs/cms 0.1.0

package/src/ui/screens/TopicsScreen.tsx

@@ -0,0 +1,912 @@
+// src/ui/screens/TopicsScreen.tsx — Topics & tags taxonomy screen (P7).
+//
+// PROTOTYPE SOURCE: /tmp/proto_55229cdd.jsx -> function Taxonomies()
+// (Topics list + topic detail + tag cloud). This is the honest, data-backed
+// realisation of that prototype.
+//
+// DATA TRUTH (what is actually mounted in this CMS):
+//   - Tags ARE a first-class, fully-backed taxonomy:
+//       GET    /admin/api/tags            -> { tags: TagSummary[] }   (list, count desc)
+//       GET    /admin/api/tags?q=<query>  -> { tags: TagSummary[] }   (slug-prefix search)
+//       DELETE /admin/api/tags/:id        -> { deleted: boolean }     (cascades links)
+//     TagSummary = { id, slug, label, count } — see src/engine/tags.ts.
+//   - Topics are backed by existing content_items.primary_topic values:
+//       GET   /admin/api/topics      -> { topics: TopicSummary[] } (list, count desc)
+//       POST  /admin/api/topics      -> { topic: TopicSummary }    (standalone zero-count topic)
+//       PATCH /admin/api/topics/:id  -> { topic: TopicSummary }    (rename rows)
+//     TopicSummary = { slug, label, count } — see src/engine/topics.ts.
+//     Standalone rows live in cms_topics; counts are derived from content rows.
+//
+// Honesty conventions:
+//   - tags load failure -> error row with Retry (matches CalendarScreen).
+//   - zero tags         -> honest empty panel, no mock chips.
+//   - search no-match   -> honest "no tags match" within the panel.
+//   - delete            -> real DELETE; on success the list refetches.
+//
+// Presentation: Broadsheet idiom only — page-head/page-title/page-sub, .panel/
+// .panel-pad, .card-title with the .masthead-rule hairline, .kicker labels,
+// .input search, .btn/.btn.primary/.btn.ghost.sm/.btn.danger, .tnum counts,
+// .mono slugs, .pill.pdot status chips, and the .scrim + .panel.panel-pad
+// confirm dialog. NO classes outside the broadsheet vocabulary.
+
+import { useCallback, useEffect, useReducer, useState } from 'react'
+import { Icon } from '../icons.js'
+import {
+	buildTopicCreateBody,
+	buildTopicRenameBody,
+	formatTopicSlug,
+	initTopicsState,
+	type TopicSummary,
+	type TopicsState,
+	topicAssignmentTotal,
+	topicsReducer,
+} from './topics-data.js'
+
+// ---------------------------------------------------------------------------
+// Data shape — mirrors src/engine/tags.ts TagSummary
+// ---------------------------------------------------------------------------
+
+interface TagSummary {
+	id: string
+	slug: string
+	label: string
+	count: number
+}
+
+// ---------------------------------------------------------------------------
+// Reducer
+// ---------------------------------------------------------------------------
+
+interface TagsState {
+	loading: boolean
+	error: string | null
+	tags: TagSummary[]
+	loaded: boolean
+}
+
+type TagsAction =
+	| { type: 'fetch-start' }
+	| { type: 'fetch-ok'; tags: TagSummary[] }
+	| { type: 'fetch-error'; error: string }
+
+function initTagsState(): TagsState {
+	return { loading: true, error: null, tags: [], loaded: false }
+}
+
+function tagsReducer(state: TagsState, action: TagsAction): TagsState {
+	switch (action.type) {
+		case 'fetch-start':
+			return { ...state, loading: true, error: null }
+		case 'fetch-ok':
+			return { loading: false, error: null, tags: action.tags, loaded: true }
+		case 'fetch-error':
+			return { ...state, loading: false, error: action.error }
+		default:
+			return state
+	}
+}
+
+// ---------------------------------------------------------------------------
+// TopicsScreen
+// ---------------------------------------------------------------------------
+
+export function TopicsScreen() {
+	const [s, dispatch] = useReducer(tagsReducer, undefined, initTagsState)
+	const [topicsState, dispatchTopics] = useReducer(topicsReducer, undefined, initTopicsState)
+	const [query, setQuery] = useState('')
+	const [pendingDelete, setPendingDelete] = useState<TagSummary | null>(null)
+	const [creatingTopic, setCreatingTopic] = useState(false)
+	const [createLabel, setCreateLabel] = useState('')
+	const [createError, setCreateError] = useState<string | null>(null)
+	const [pendingRename, setPendingRename] = useState<TopicSummary | null>(null)
+	const [renameLabel, setRenameLabel] = useState('')
+	const [renameError, setRenameError] = useState<string | null>(null)
+	const [deleting, setDeleting] = useState(false)
+	const [creating, setCreating] = useState(false)
+	const [renaming, setRenaming] = useState(false)
+
+	const fetchTags = useCallback(async (q: string) => {
+		dispatch({ type: 'fetch-start' })
+		try {
+			const url = q.trim() ? `/admin/api/tags?q=${encodeURIComponent(q.trim())}` : '/admin/api/tags'
+			const res = await fetch(url)
+			if (!res.ok) {
+				dispatch({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const body = (await res.json()) as { tags?: TagSummary[] }
+			dispatch({ type: 'fetch-ok', tags: body.tags ?? [] })
+		} catch (err) {
+			dispatch({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	const fetchTopics = useCallback(async () => {
+		dispatchTopics({ type: 'fetch-start' })
+		try {
+			const res = await fetch('/admin/api/topics')
+			if (!res.ok) {
+				dispatchTopics({ type: 'fetch-error', error: `${res.status} ${res.statusText}` })
+				return
+			}
+			const body = (await res.json()) as { topics?: TopicSummary[] }
+			dispatchTopics({ type: 'fetch-ok', topics: body.topics ?? [] })
+		} catch (err) {
+			dispatchTopics({ type: 'fetch-error', error: String(err) })
+		}
+	}, [])
+
+	// Debounce the search so each keystroke doesn't fire a request.
+	useEffect(() => {
+		const handle = setTimeout(() => void fetchTags(query), query ? 220 : 0)
+		return () => clearTimeout(handle)
+	}, [fetchTags, query])
+
+	useEffect(() => {
+		void fetchTopics()
+	}, [fetchTopics])
+
+	const confirmDelete = async () => {
+		if (!pendingDelete) return
+		setDeleting(true)
+		try {
+			const res = await fetch(`/admin/api/tags/${encodeURIComponent(pendingDelete.id)}`, {
+				method: 'DELETE',
+			})
+			// Refetch on a successful delete; a 404 / { deleted:false } simply
+			// leaves the list as-is after the dialog closes.
+			if (res.ok) {
+				const body = (await res.json().catch(() => ({}))) as { deleted?: boolean }
+				if (body.deleted) void fetchTags(query)
+			}
+		} finally {
+			setDeleting(false)
+			setPendingDelete(null)
+		}
+	}
+
+	const beginRename = (topic: TopicSummary) => {
+		setPendingRename(topic)
+		setRenameLabel(formatTopicSlug(topic))
+		setRenameError(null)
+	}
+
+	const beginCreateTopic = () => {
+		setCreatingTopic(true)
+		setCreateLabel('')
+		setCreateError(null)
+	}
+
+	const confirmCreateTopic = async () => {
+		setCreating(true)
+		setCreateError(null)
+		try {
+			const res = await fetch('/admin/api/topics', {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify(buildTopicCreateBody(createLabel)),
+			})
+			const body = (await res.json().catch(() => ({}))) as {
+				topic?: TopicSummary
+				error?: string
+			}
+			if (!res.ok || !body.topic) {
+				setCreateError(body.error || `${res.status} ${res.statusText}`)
+				return
+			}
+			dispatchTopics({ type: 'create-ok', topic: body.topic })
+			setCreatingTopic(false)
+			setCreateLabel('')
+		} catch (err) {
+			setCreateError(String(err))
+		} finally {
+			setCreating(false)
+		}
+	}
+
+	const confirmRename = async () => {
+		if (!pendingRename) return
+		setRenaming(true)
+		setRenameError(null)
+		try {
+			const res = await fetch(`/admin/api/topics/${encodeURIComponent(pendingRename.slug)}`, {
+				method: 'PATCH',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify(buildTopicRenameBody(renameLabel)),
+			})
+			const body = (await res.json().catch(() => ({}))) as {
+				topic?: TopicSummary
+				error?: string
+			}
+			if (!res.ok || !body.topic) {
+				setRenameError(body.error || `${res.status} ${res.statusText}`)
+				return
+			}
+			dispatchTopics({ type: 'rename-ok', fromSlug: pendingRename.slug, topic: body.topic })
+			setPendingRename(null)
+			setRenameLabel('')
+		} catch (err) {
+			setRenameError(String(err))
+		} finally {
+			setRenaming(false)
+		}
+	}
+
+	const searching = query.trim().length > 0
+
+	return (
+		<div className="page page-wide topics-screen fade-in" style={{ maxWidth: 1340 }}>
+			<div className="page-head">
+				<div>
+					<h1 className="page-title">Topics &amp; tags</h1>
+					<div className="page-sub">
+						The taxonomy that powers navigation, discovery and related content.
+					</div>
+				</div>
+				<div style={{ display: 'flex', gap: 8 }}>
+					<button
+						type="button"
+						className="btn"
+						disabled
+						title="Tags are created automatically when assigned to content; standalone creation isn't available yet."
+						style={{ opacity: 0.5, cursor: 'not-allowed' }}
+					>
+						<Icon name="tag" size={16} /> New tag
+					</button>
+					<button type="button" className="btn primary" onClick={beginCreateTopic}>
+						<Icon name="plus" size={16} /> New topic
+					</button>
+				</div>
+			</div>
+
+			<div className="grid-split-wide">
+				<TopicsPanel
+					state={topicsState}
+					onRetry={() => void fetchTopics()}
+					onRename={beginRename}
+				/>
+				<TopicDetailPanel topics={topicsState.topics} />
+			</div>
+
+			{/* Tags — the real, data-backed taxonomy */}
+			<div className="panel" style={{ marginTop: 'var(--gap)', overflow: 'hidden' }}>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'space-between',
+						gap: 12,
+						padding: '15px 18px 12px',
+					}}
+				>
+					<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+						<div className="card-title">Tags</div>
+						{s.loaded && !s.error && (
+							<span className="kicker">
+								{s.tags.length} {searching ? 'matching' : 'total'}
+							</span>
+						)}
+					</div>
+					<div style={{ position: 'relative', maxWidth: 240, flex: 1 }}>
+						<input
+							className="input"
+							type="search"
+							value={query}
+							onChange={(e) => setQuery(e.target.value)}
+							placeholder="Find a tag…"
+							style={{ paddingLeft: 34, height: 34 }}
+						/>
+						<Icon
+							name="search"
+							size={14}
+							style={{
+								position: 'absolute',
+								left: 11,
+								top: '50%',
+								transform: 'translateY(-50%)',
+								color: 'var(--ink-faint)',
+								pointerEvents: 'none',
+							}}
+						/>
+					</div>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+
+				<TagsBody
+					state={s}
+					searching={searching}
+					onRetry={() => void fetchTags(query)}
+					onDelete={(t) => setPendingDelete(t)}
+				/>
+			</div>
+
+			{pendingDelete && (
+				<DeleteTagDialog
+					tag={pendingDelete}
+					deleting={deleting}
+					onCancel={() => setPendingDelete(null)}
+					onConfirm={() => void confirmDelete()}
+				/>
+			)}
+
+			{pendingRename && (
+				<RenameTopicDialog
+					topic={pendingRename}
+					label={renameLabel}
+					error={renameError}
+					renaming={renaming}
+					onLabelChange={setRenameLabel}
+					onCancel={() => {
+						setPendingRename(null)
+						setRenameError(null)
+					}}
+					onConfirm={() => void confirmRename()}
+				/>
+			)}
+
+			{creatingTopic && (
+				<CreateTopicDialog
+					label={createLabel}
+					error={createError}
+					creating={creating}
+					onLabelChange={setCreateLabel}
+					onCancel={() => {
+						setCreatingTopic(false)
+						setCreateError(null)
+					}}
+					onConfirm={() => void confirmCreateTopic()}
+				/>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// TagsBody — chip cloud over real TagSummary data
+// ---------------------------------------------------------------------------
+
+function TagsBody({
+	state,
+	searching,
+	onRetry,
+	onDelete,
+}: {
+	state: TagsState
+	searching: boolean
+	onRetry: () => void
+	onDelete: (tag: TagSummary) => void
+}) {
+	if (state.loading && !state.loaded) {
+		return (
+			<div className="kicker" style={{ padding: 18 }}>
+				Loading tags…
+			</div>
+		)
+	}
+
+	if (state.error) {
+		return (
+			<div
+				style={{
+					padding: 18,
+					display: 'flex',
+					alignItems: 'center',
+					gap: 12,
+					color: 'var(--red)',
+					fontSize: 13.5,
+				}}
+			>
+				<span>Couldn’t load tags — {state.error}</span>
+				<button type="button" className="btn sm" onClick={onRetry}>
+					<Icon name="refresh" size={14} /> Retry
+				</button>
+			</div>
+		)
+	}
+
+	if (state.tags.length === 0) {
+		return (
+			<EmptyPanel
+				icon="tag"
+				message={
+					searching
+						? 'No tags match this search.'
+						: 'No tags yet — tags appear here once they’re assigned to published content.'
+				}
+			/>
+		)
+	}
+
+	return (
+		<div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, padding: 18 }}>
+			{state.tags.map((tag) => (
+				<TagChip key={tag.id} tag={tag} onDelete={() => onDelete(tag)} />
+			))}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// TagChip — one .tag-chip-equivalent: label · count · delete
+// ---------------------------------------------------------------------------
+
+function TagChip({ tag, onDelete }: { tag: TagSummary; onDelete: () => void }) {
+	return (
+		<span
+			title={`/${tag.slug}`}
+			style={{
+				display: 'inline-flex',
+				alignItems: 'center',
+				gap: 8,
+				padding: '6px 7px 6px 13px',
+				border: '1px solid var(--border)',
+				borderRadius: 20,
+				background: 'var(--panel-2)',
+				color: 'var(--ink-soft)',
+				fontSize: 13,
+			}}
+		>
+			<span style={{ fontWeight: 500, color: 'var(--ink)' }}>{tag.label}</span>
+			<span
+				className="tnum"
+				style={{
+					fontSize: 11,
+					color: 'var(--ink-muted)',
+					background: 'var(--hover)',
+					padding: '1px 7px',
+					borderRadius: 12,
+				}}
+			>
+				{tag.count.toLocaleString('en-US')}
+			</span>
+			<button
+				type="button"
+				className="icon-btn"
+				onClick={onDelete}
+				title={`Delete “${tag.label}”`}
+				aria-label={`Delete tag ${tag.label}`}
+				style={{ width: 22, height: 22, color: 'var(--ink-faint)' }}
+			>
+				<Icon name="x" size={13} />
+			</button>
+		</span>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// TopicsPanel — real primary_topic values with rename affordance.
+// ---------------------------------------------------------------------------
+
+function TopicsPanel({
+	state,
+	onRetry,
+	onRename,
+}: {
+	state: TopicsState
+	onRetry: () => void
+	onRename: (topic: TopicSummary) => void
+}) {
+	return (
+		<div className="panel" style={{ overflow: 'hidden' }}>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					padding: '15px 18px 12px',
+				}}
+			>
+				<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+					<div className="card-title">Topics</div>
+					{state.loaded && !state.error && (
+						<span className="kicker">
+							{state.topics.length} values · {topicAssignmentTotal(state.topics)} assignments
+						</span>
+					)}
+				</div>
+				<span className="kicker">primary_topic</span>
+			</div>
+			<hr className="masthead-rule" style={{ margin: '0 18px' }} />
+			<TopicsBody state={state} onRetry={onRetry} onRename={onRename} />
+		</div>
+	)
+}
+
+function TopicsBody({
+	state,
+	onRetry,
+	onRename,
+}: {
+	state: TopicsState
+	onRetry: () => void
+	onRename: (topic: TopicSummary) => void
+}) {
+	if (state.loading && !state.loaded) {
+		return (
+			<div className="kicker" style={{ padding: 18 }}>
+				Loading topics…
+			</div>
+		)
+	}
+
+	if (state.error) {
+		return (
+			<div
+				style={{
+					padding: 18,
+					display: 'flex',
+					alignItems: 'center',
+					gap: 12,
+					color: 'var(--red)',
+					fontSize: 13.5,
+				}}
+			>
+				<span>Couldn’t load topics — {state.error}</span>
+				<button type="button" className="btn sm" onClick={onRetry}>
+					<Icon name="refresh" size={14} /> Retry
+				</button>
+			</div>
+		)
+	}
+
+	if (state.topics.length === 0) {
+		return (
+			<div style={{ padding: 18 }}>
+				<EmptyPanel
+					icon="layers"
+					message="No topics yet — assign primary topics on content to populate this list."
+				/>
+			</div>
+		)
+	}
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
+			{state.topics.map((topic) => (
+				<TopicRow key={topic.slug} topic={topic} onRename={() => onRename(topic)} />
+			))}
+		</div>
+	)
+}
+
+function TopicRow({ topic, onRename }: { topic: TopicSummary; onRename: () => void }) {
+	const label = formatTopicSlug(topic)
+	return (
+		<div
+			style={{
+				display: 'grid',
+				gridTemplateColumns: 'minmax(0, 1fr) auto',
+				alignItems: 'center',
+				gap: 12,
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius)',
+				background: 'var(--panel-2)',
+				padding: '11px 12px',
+			}}
+		>
+			<div style={{ minWidth: 0 }}>
+				<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{label}</div>
+				<div className="mono" style={{ marginTop: 4, fontSize: 12, color: 'var(--ink-faint)' }}>
+					/{topic.slug}
+				</div>
+			</div>
+			<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+				<span
+					className="tnum"
+					style={{
+						fontSize: 11,
+						color: 'var(--ink-muted)',
+						background: 'var(--hover)',
+						padding: '2px 8px',
+						borderRadius: 12,
+					}}
+				>
+					{topic.count.toLocaleString('en-US')}
+				</span>
+				<button type="button" className="btn sm" onClick={onRename}>
+					<Icon name="edit" size={14} /> Rename
+				</button>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// TopicDetailPanel — companion model summary for the current schema.
+// ---------------------------------------------------------------------------
+
+function TopicDetailPanel({ topics }: { topics: TopicSummary[] }) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
+			<div className="panel panel-pad">
+				<div className="card-title" style={{ marginBottom: 12 }}>
+					Topic model
+				</div>
+				<hr className="masthead-rule" style={{ margin: '0 0 14px' }} />
+				<div style={{ display: 'grid', gap: 12 }}>
+					<div style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
+						Topics can be created ahead of content. Assignment counts are derived from content rows;
+						rename updates every matching content item.
+					</div>
+					<div
+						style={{
+							display: 'grid',
+							gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+							gap: 10,
+						}}
+					>
+						<MetricTile label="Values" value={topics.length} />
+						<MetricTile label="Assignments" value={topicAssignmentTotal(topics)} />
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function MetricTile({ label, value }: { label: string; value: number }) {
+	return (
+		<div
+			style={{
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius)',
+				background: 'var(--panel-2)',
+				padding: '12px 13px',
+			}}
+		>
+			<div className="kicker" style={{ marginBottom: 6 }}>
+				{label}
+			</div>
+			<div className="tnum" style={{ fontSize: 24, color: 'var(--ink)' }}>
+				{value.toLocaleString('en-US')}
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// CreateTopicDialog — .scrim + .panel.panel-pad create dialog
+// ---------------------------------------------------------------------------
+
+function CreateTopicDialog({
+	label,
+	error,
+	creating,
+	onLabelChange,
+	onCancel,
+	onConfirm,
+}: {
+	label: string
+	error: string | null
+	creating: boolean
+	onLabelChange: (label: string) => void
+	onCancel: () => void
+	onConfirm: () => void
+}) {
+	return (
+		<div className="scrim" style={{ placeItems: 'center', zIndex: 100 }}>
+			<div className="panel panel-pad" style={{ width: 420, boxShadow: 'var(--shadow-lg)' }}>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+					<Icon name="plus" size={18} style={{ color: 'var(--accent)' }} />
+					<div className="card-title">New topic</div>
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ marginLeft: 'auto' }}
+						onClick={onCancel}
+						aria-label="Close"
+					>
+						<Icon name="x" size={16} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '6px 0 16px' }} />
+
+				<label className="kicker" htmlFor="topic-create-label">
+					Label
+				</label>
+				<input
+					id="topic-create-label"
+					className="input"
+					value={label}
+					onChange={(e) => onLabelChange(e.target.value)}
+					placeholder="e.g. Indo Pacific"
+					style={{ marginTop: 7, width: '100%' }}
+				/>
+				{error && <div style={{ marginTop: 12, color: 'var(--red)', fontSize: 13.5 }}>{error}</div>}
+
+				<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+					<button type="button" className="btn" onClick={onCancel} disabled={creating}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="btn primary"
+						onClick={onConfirm}
+						disabled={creating || label.trim().length === 0}
+						style={{ opacity: creating || label.trim().length === 0 ? 0.6 : 1 }}
+					>
+						{creating ? 'Creating…' : 'Create topic'}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// RenameTopicDialog — .scrim + .panel.panel-pad edit dialog
+// ---------------------------------------------------------------------------
+
+function RenameTopicDialog({
+	topic,
+	label,
+	error,
+	renaming,
+	onLabelChange,
+	onCancel,
+	onConfirm,
+}: {
+	topic: TopicSummary
+	label: string
+	error: string | null
+	renaming: boolean
+	onLabelChange: (label: string) => void
+	onCancel: () => void
+	onConfirm: () => void
+}) {
+	return (
+		<div className="scrim" style={{ placeItems: 'center', zIndex: 100 }}>
+			<div className="panel panel-pad" style={{ width: 420, boxShadow: 'var(--shadow-lg)' }}>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+					<Icon name="edit" size={18} style={{ color: 'var(--accent)' }} />
+					<div className="card-title">Rename topic</div>
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ marginLeft: 'auto' }}
+						onClick={onCancel}
+						aria-label="Close"
+					>
+						<Icon name="x" size={16} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '6px 0 16px' }} />
+
+				<label className="kicker" htmlFor="topic-rename-label">
+					Label
+				</label>
+				<input
+					id="topic-rename-label"
+					className="input"
+					value={label}
+					onChange={(e) => onLabelChange(e.target.value)}
+					style={{ marginTop: 7, width: '100%' }}
+				/>
+				<div className="mono" style={{ marginTop: 8, fontSize: 12, color: 'var(--ink-faint)' }}>
+					Current slug: /{topic.slug}
+				</div>
+				{error && <div style={{ marginTop: 12, color: 'var(--red)', fontSize: 13.5 }}>{error}</div>}
+
+				<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+					<button type="button" className="btn" onClick={onCancel} disabled={renaming}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="btn primary"
+						onClick={onConfirm}
+						disabled={renaming || label.trim().length === 0}
+						style={{ opacity: renaming || label.trim().length === 0 ? 0.6 : 1 }}
+					>
+						{renaming ? 'Renaming…' : 'Rename topic'}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// DeleteTagDialog — .scrim + .panel.panel-pad confirm
+// ---------------------------------------------------------------------------
+
+function DeleteTagDialog({
+	tag,
+	deleting,
+	onCancel,
+	onConfirm,
+}: {
+	tag: TagSummary
+	deleting: boolean
+	onCancel: () => void
+	onConfirm: () => void
+}) {
+	return (
+		<div className="scrim" style={{ placeItems: 'center', zIndex: 100 }}>
+			<div className="panel panel-pad" style={{ width: 420, boxShadow: 'var(--shadow-lg)' }}>
+				<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+					<Icon name="trash" size={18} style={{ color: 'var(--red)' }} />
+					<div className="card-title">Delete tag</div>
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ marginLeft: 'auto' }}
+						onClick={onCancel}
+						aria-label="Close"
+					>
+						<Icon name="x" size={16} />
+					</button>
+				</div>
+				<hr className="masthead-rule" style={{ margin: '6px 0 16px' }} />
+
+				<div style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
+					Delete <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{tag.label}</span>{' '}
+					<span className="mono" style={{ fontSize: 12, color: 'var(--ink-faint)' }}>
+						/{tag.slug}
+					</span>
+					?{' '}
+					{tag.count > 0 ? (
+						<>
+							It’s used on{' '}
+							<span className="tnum" style={{ fontWeight: 600, color: 'var(--ink)' }}>
+								{tag.count.toLocaleString('en-US')}
+							</span>{' '}
+							{tag.count === 1 ? 'piece' : 'pieces'}; those links will be removed.
+						</>
+					) : (
+						<>This tag isn’t used on any content.</>
+					)}{' '}
+					This can’t be undone.
+				</div>
+
+				<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+					<button type="button" className="btn" onClick={onCancel} disabled={deleting}>
+						Cancel
+					</button>
+					<button
+						type="button"
+						className="btn danger"
+						onClick={onConfirm}
+						disabled={deleting}
+						style={{ opacity: deleting ? 0.6 : 1 }}
+					>
+						{deleting ? 'Deleting…' : 'Delete tag'}
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// EmptyPanel — shared honest empty/unavailable state
+// ---------------------------------------------------------------------------
+
+function EmptyPanel({
+	icon,
+	message,
+}: {
+	icon: Parameters<typeof Icon>[0]['name']
+	message: string
+}) {
+	return (
+		<div
+			style={{
+				border: '1px solid var(--border)',
+				borderRadius: 'var(--radius)',
+				padding: '28px 20px',
+				textAlign: 'center',
+				fontSize: 13,
+				color: 'var(--ink-muted)',
+				background: 'var(--panel-2)',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				gap: 8,
+			}}
+		>
+			<Icon name={icon} size={22} style={{ color: 'var(--border)', opacity: 0.7 }} />
+			<span style={{ maxWidth: 360 }}>{message}</span>
+		</div>
+	)
+}