@growth-labs/cms 0.1.0

package/src/ui/inspector/OrganizeTab.tsx

@@ -0,0 +1,534 @@
+// src/ui/inspector/OrganizeTab.tsx — Organize inspector tab.
+//
+// Sections:
+//   - Topic: primaryTopic picker → PATCH { primaryTopic }.
+//   - Tags: chip list + typeahead search (GET /tags?q=) + add/remove → PATCH { tags }.
+//   - Co-authors: list from Task 3 contributors routes (GET/PUT /content/:id/contributors).
+//   - Key takeaways: read-only display of editor_takeaways / ai_takeaways from the
+//     content payload. "Regenerate" button is disabled (P4).
+//
+// Compile-gated (tsc, jsx: react-jsx). No vitest — pure helpers (tagsToPatchBody,
+// contributorsToPutBody) are tested in organize-data.test.ts.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Icon } from '../icons.js'
+import { Field } from './Field.js'
+import { patchContent, regenerateTakeaways } from './inspector-data.js'
+import { contributorsToPutBody, tagsToPatchBody } from './organize-data.js'
+import { Section } from './Section.js'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface TagItem {
+	id: string
+	slug: string
+	label: string
+	count: number
+}
+
+interface ContributorRow {
+	authorId: string
+	role: string | null
+	position: number
+	name?: string
+}
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface OrganizeTabProps {
+	docId: string
+	/** Current primaryTopic slug (may be empty). */
+	primaryTopic: string | null
+	/** Current tag slugs assigned to this item. */
+	tags: string[]
+	/** Optional: array of { editor_takeaways } strings from the content payload. */
+	editorTakeaways?: string[] | null
+	/** Optional: array of AI-generated takeaway strings from the content payload. */
+	aiTakeaways?: string[] | null
+	/** Called after any persisted change so the parent can refresh. */
+	onChanged?: () => void
+}
+
+// ---------------------------------------------------------------------------
+// OrganizeTab
+// ---------------------------------------------------------------------------
+
+export function OrganizeTab({
+	docId,
+	primaryTopic: initialTopic,
+	tags: initialTags,
+	editorTakeaways,
+	aiTakeaways,
+	onChanged,
+}: OrganizeTabProps): React.ReactElement {
+	// --- Topic state
+	const [topic, setTopic] = useState(initialTopic ?? '')
+	useEffect(() => setTopic(initialTopic ?? ''), [initialTopic])
+
+	// --- Takeaways regen state
+	const [regenState, setRegenState] = useState<'idle' | 'loading' | 'locked' | 'error'>('idle')
+	const [localAiTakeaways, setLocalAiTakeaways] = useState<string[] | null | undefined>(aiTakeaways)
+	useEffect(() => setLocalAiTakeaways(aiTakeaways), [aiTakeaways])
+
+	// --- Tags state
+	const [tags, setTags] = useState<string[]>(initialTags)
+	useEffect(() => setTags(initialTags), [initialTags])
+	const [tagQuery, setTagQuery] = useState('')
+	const [tagSuggestions, setTagSuggestions] = useState<TagItem[]>([])
+	const [loadingSuggestions, setLoadingSuggestions] = useState(false)
+	const suggestDebounce = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	// --- Contributors state
+	const [contributors, setContributors] = useState<ContributorRow[]>([])
+	const [loadingContributors, setLoadingContributors] = useState(false)
+
+	// Fetch contributors on mount / docId change.
+	const fetchContributors = useCallback(async () => {
+		if (!docId) return
+		setLoadingContributors(true)
+		try {
+			const res = await fetch(`/admin/api/content/${docId}/contributors`)
+			if (!res.ok) return
+			const data = (await res.json()) as { contributors: ContributorRow[] }
+			setContributors(data.contributors ?? [])
+		} catch {
+			// non-fatal
+		} finally {
+			setLoadingContributors(false)
+		}
+	}, [docId])
+
+	useEffect(() => {
+		void fetchContributors()
+	}, [fetchContributors])
+
+	// --- Topic handlers
+	const handleTopicChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		setTopic(e.target.value)
+	}, [])
+
+	const handleTopicBlur = useCallback(async () => {
+		try {
+			await patchContent(docId, { primaryTopic: topic || null })
+			onChanged?.()
+		} catch {
+			// non-fatal
+		}
+	}, [docId, topic, onChanged])
+
+	// --- Tag handlers
+	const fetchSuggestions = useCallback((q: string) => {
+		if (suggestDebounce.current) clearTimeout(suggestDebounce.current)
+		if (!q.trim()) {
+			setTagSuggestions([])
+			return
+		}
+		suggestDebounce.current = setTimeout(async () => {
+			setLoadingSuggestions(true)
+			try {
+				const res = await fetch(`/admin/api/tags?q=${encodeURIComponent(q)}`)
+				if (!res.ok) return
+				const data = (await res.json()) as { tags: TagItem[] }
+				setTagSuggestions(data.tags ?? [])
+			} catch {
+				// non-fatal
+			} finally {
+				setLoadingSuggestions(false)
+			}
+		}, 250)
+	}, [])
+
+	const handleTagQueryChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const val = e.target.value
+			setTagQuery(val)
+			fetchSuggestions(val)
+		},
+		[fetchSuggestions],
+	)
+
+	const addTag = useCallback(
+		async (slug: string) => {
+			if (tags.includes(slug)) return
+			const next = [...tags, slug]
+			setTags(next)
+			setTagQuery('')
+			setTagSuggestions([])
+			try {
+				await patchContent(docId, tagsToPatchBody(next) as unknown as Record<string, unknown>)
+				onChanged?.()
+			} catch {
+				// non-fatal — revert
+				setTags(tags)
+			}
+		},
+		[docId, tags, onChanged],
+	)
+
+	const removeTag = useCallback(
+		async (slug: string) => {
+			const next = tags.filter((t) => t !== slug)
+			setTags(next)
+			try {
+				await patchContent(docId, tagsToPatchBody(next) as unknown as Record<string, unknown>)
+				onChanged?.()
+			} catch {
+				// non-fatal — revert
+				setTags(tags)
+			}
+		},
+		[docId, tags, onChanged],
+	)
+
+	// --- Contributors handlers
+	const removeContributor = useCallback(
+		async (authorId: string) => {
+			const next = contributors.filter((c) => c.authorId !== authorId)
+			setContributors(next)
+			try {
+				const res = await fetch(`/admin/api/content/${docId}/contributors`, {
+					method: 'PUT',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(contributorsToPutBody(next)),
+				})
+				if (!res.ok) throw new Error('PUT contributors failed')
+				onChanged?.()
+			} catch {
+				// non-fatal — revert
+				void fetchContributors()
+			}
+		},
+		[docId, contributors, onChanged, fetchContributors],
+	)
+
+	// --- Takeaways regen handler
+	const handleRegenerateTakeaways = useCallback(async () => {
+		if (!docId || regenState === 'loading') return
+		setRegenState('loading')
+		try {
+			const result = await regenerateTakeaways(docId)
+			if (result.locked) {
+				setRegenState('locked')
+			} else {
+				setRegenState('idle')
+				setLocalAiTakeaways(result.takeaways)
+				onChanged?.()
+			}
+		} catch {
+			setRegenState('error')
+		}
+	}, [docId, regenState, onChanged])
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	const displayTakeaways = editorTakeaways?.length
+		? editorTakeaways
+		: localAiTakeaways?.length
+			? localAiTakeaways
+			: null
+
+	return (
+		<div>
+			{/* Topic */}
+			<Section title="Topic" icon="tag">
+				<Field label="Primary topic" htmlFor="organize-topic">
+					<input
+						id="organize-topic"
+						className="input"
+						type="text"
+						value={topic}
+						placeholder="e.g. analytics"
+						onChange={handleTopicChange}
+						onBlur={() => void handleTopicBlur()}
+					/>
+				</Field>
+			</Section>
+
+			{/* Tags */}
+			<Section title="Tags" icon="tag">
+				{/* Current tag chips */}
+				{tags.length > 0 && (
+					<div style={chipRow}>
+						{tags.map((slug) => (
+							<span key={slug} className="tag-chip">
+								{slug}
+								<button
+									type="button"
+									aria-label={`Remove tag ${slug}`}
+									onClick={() => void removeTag(slug)}
+									className="x"
+									style={chipRemove}
+								>
+									<Icon name="x" size={11} />
+								</button>
+							</span>
+						))}
+					</div>
+				)}
+
+				{/* Tag search input */}
+				<div style={{ position: 'relative' }}>
+					<input
+						className="input"
+						type="text"
+						value={tagQuery}
+						placeholder="Search or add a tag…"
+						onChange={handleTagQueryChange}
+						style={{ marginTop: 8 }}
+					/>
+					{(loadingSuggestions || tagSuggestions.length > 0) && (
+						<ul style={suggestionList}>
+							{loadingSuggestions && (
+								<li style={suggestionItem}>
+									<span style={{ color: 'var(--ink-faint)', fontSize: 12 }}>Searching…</span>
+								</li>
+							)}
+							{!loadingSuggestions &&
+								tagSuggestions
+									.filter((s) => !tags.includes(s.slug))
+									.map((s) => (
+										<li key={s.id} style={suggestionItem}>
+											<button
+												type="button"
+												style={suggestionBtn}
+												onClick={() => void addTag(s.slug)}
+											>
+												{s.label}
+												{s.count > 0 && <span style={suggestionCount}>{s.count}</span>}
+											</button>
+										</li>
+									))}
+							{!loadingSuggestions &&
+								tagSuggestions.filter((s) => !tags.includes(s.slug)).length === 0 &&
+								tagQuery.trim().length > 0 && (
+									<li style={suggestionItem}>
+										<span style={{ color: 'var(--ink-faint)', fontSize: 12 }}>
+											No matching tags
+										</span>
+									</li>
+								)}
+						</ul>
+					)}
+				</div>
+			</Section>
+
+			{/* Co-authors */}
+			<Section title="Co-authors" icon="users">
+				{loadingContributors && <p style={emptyNote}>Loading…</p>}
+				{!loadingContributors && contributors.length === 0 && (
+					<p style={emptyNote}>No co-authors added yet.</p>
+				)}
+				{!loadingContributors && contributors.length > 0 && (
+					<ul style={contributorList}>
+						{contributors.map((c) => (
+							<li key={c.authorId} style={contributorRow}>
+								<span style={contributorName}>{c.name ?? c.authorId}</span>
+								{c.role && <span style={contributorRole}>{c.role}</span>}
+								<button
+									type="button"
+									aria-label={`Remove co-author ${c.name ?? c.authorId}`}
+									onClick={() => void removeContributor(c.authorId)}
+									style={removeBtn}
+								>
+									<Icon name="x" size={12} />
+								</button>
+							</li>
+						))}
+					</ul>
+				)}
+			</Section>
+
+			{/* Key takeaways */}
+			<Section title="Key takeaways" icon="flag">
+				{displayTakeaways ? (
+					<ul style={takeawayList}>
+						{displayTakeaways.map((t, i) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: display-only ordered list
+							<li key={i} style={takeawayItem}>
+								<Icon
+									name="checkCircle"
+									size={13}
+									style={{ color: 'var(--green, #22c55e)', flexShrink: 0, marginTop: 1 }}
+								/>
+								<span style={takeawayText}>{t}</span>
+							</li>
+						))}
+					</ul>
+				) : (
+					<p style={emptyNote}>No takeaways yet.</p>
+				)}
+
+				{regenState === 'locked' && (
+					<p style={regenLockedHint}>Takeaways field locked — AI cannot overwrite.</p>
+				)}
+				{regenState === 'error' && <p style={regenErrorHint}>Generation failed. Try again.</p>}
+
+				{/* Regenerate button — enabled in P4. */}
+				<button
+					type="button"
+					className="btn sm"
+					style={{ width: '100%', opacity: regenState === 'loading' ? 0.6 : 1 }}
+					disabled={regenState === 'loading'}
+					onClick={() => void handleRegenerateTakeaways()}
+				>
+					<Icon name="sparkle" size={14} />
+					{regenState === 'loading' ? 'Generating…' : 'Regenerate takeaways'}
+				</button>
+			</Section>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const chipRow: React.CSSProperties = {
+	display: 'flex',
+	flexWrap: 'wrap',
+	gap: 6,
+	marginBottom: 4,
+}
+
+const chipRemove: React.CSSProperties = {
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	padding: 0,
+	background: 'none',
+	border: 'none',
+	cursor: 'pointer',
+	lineHeight: 1,
+}
+
+const suggestionList: React.CSSProperties = {
+	position: 'absolute',
+	top: '100%',
+	left: 0,
+	right: 0,
+	zIndex: 20,
+	listStyle: 'none',
+	margin: 0,
+	padding: '4px 0',
+	background: 'var(--panel)',
+	border: '1px solid var(--border)',
+	borderRadius: 6,
+	boxShadow: 'var(--shadow-md)',
+	maxHeight: 180,
+	overflowY: 'auto' as const,
+}
+
+const suggestionItem: React.CSSProperties = {
+	padding: '2px 4px',
+}
+
+const suggestionBtn: React.CSSProperties = {
+	display: 'flex',
+	width: '100%',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	padding: '5px 8px',
+	background: 'none',
+	border: 'none',
+	borderRadius: 4,
+	cursor: 'pointer',
+	fontSize: 13,
+	color: 'var(--ink)',
+	textAlign: 'left' as const,
+}
+
+const suggestionCount: React.CSSProperties = {
+	fontSize: 11,
+	color: 'var(--ink-faint)',
+}
+
+const contributorList: React.CSSProperties = {
+	listStyle: 'none',
+	margin: 0,
+	padding: 0,
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 6,
+}
+
+const contributorRow: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	gap: 8,
+	padding: '5px 0',
+	borderBottom: '1px solid var(--border)',
+}
+
+const contributorName: React.CSSProperties = {
+	flex: 1,
+	fontSize: 13,
+	fontWeight: 500,
+	color: 'var(--ink)',
+}
+
+const contributorRole: React.CSSProperties = {
+	fontSize: 11,
+	color: 'var(--ink-faint)',
+	background: 'var(--field)',
+	borderRadius: 10,
+	padding: '2px 7px',
+}
+
+const removeBtn: React.CSSProperties = {
+	display: 'inline-flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	padding: 3,
+	background: 'none',
+	border: 'none',
+	cursor: 'pointer',
+	color: 'var(--ink-faint)',
+	borderRadius: 4,
+}
+
+const takeawayList: React.CSSProperties = {
+	listStyle: 'none',
+	margin: 0,
+	padding: 0,
+	display: 'flex',
+	flexDirection: 'column',
+	gap: 6,
+	marginBottom: 10,
+}
+
+const takeawayItem: React.CSSProperties = {
+	display: 'flex',
+	alignItems: 'flex-start',
+	gap: 8,
+}
+
+const takeawayText: React.CSSProperties = {
+	fontSize: 13,
+	color: 'var(--ink)',
+	lineHeight: 1.5,
+}
+
+const emptyNote: React.CSSProperties = {
+	fontSize: 12,
+	color: 'var(--ink-faint)',
+	margin: 0,
+	marginBottom: 8,
+}
+
+const regenLockedHint: React.CSSProperties = {
+	fontSize: 11,
+	color: 'var(--amber, #f59e0b)',
+	margin: '0 0 6px',
+}
+
+const regenErrorHint: React.CSSProperties = {
+	fontSize: 11,
+	color: 'var(--red, #ef4444)',
+	margin: '0 0 6px',
+}