@growth-labs/cms 0.1.0

package/src/ui/inspector/Inspector.tsx

@@ -0,0 +1,328 @@
+// src/ui/inspector/Inspector.tsx — tabbed inspector rail.
+//
+// Mounts in the 340px EditorScreen inspector slot. Renders a tab strip
+// (Publish / SEO / Organize / History / Foundry, Foundry gated to
+// video/podcast) and the active tab's content.
+//
+// In P3, Publish / SEO / Organize are implemented. History and Foundry
+// render placeholder panels — their implementations land in Tasks 10–11.
+//
+// Compile-gated (tsc, jsx: react-jsx). No vitest — pure helpers are
+// tested in tab-visibility.test.ts / inspector-data.test.ts.
+
+import { useCallback, useEffect, useState } from 'react'
+import type { ContentStatus, ContentType } from '../../schema/types.js'
+import type { IconName } from '../icons.js'
+import { Icon } from '../icons.js'
+import { FoundryTab } from './FoundryTab.js'
+import { HistoryTab } from './HistoryTab.js'
+import { OrganizeTab } from './OrganizeTab.js'
+import { PublishTab } from './PublishTab.js'
+import { SeoTab } from './SeoTab.js'
+import { visibleTabs } from './tab-visibility.js'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface InspectorProps {
+	docId: string | null
+	contentType: ContentType
+	onStatusChange?: (status: ContentStatus) => void
+	onAuthorChange?: (author: {
+		authorId: string | null
+		authorName: string | null
+		authorSlug: string | null
+	}) => void
+}
+
+// ---------------------------------------------------------------------------
+// Content item shape (partial — what the inspector needs)
+// ---------------------------------------------------------------------------
+
+interface InspectorDoc {
+	status: ContentStatus
+	slug: string
+	visibility: 'free' | 'premium'
+	authorId: string | null
+	authorName: string | null
+	authorSlug: string | null
+	publishAt: string | null
+	// SEO fields (P3 Task 8)
+	title: string
+	seoTitle: string | null
+	description: string | null
+	seoFocusKeyword: string | null
+	excerpt: string | null
+	heroImageUrl: string | null
+	// Organize fields (P3 Task 9)
+	primaryTopic: string | null
+	tags: string[]
+	editorTakeaways: string[] | null
+	aiTakeaways: string[] | null
+}
+
+// ---------------------------------------------------------------------------
+// Inspector
+// ---------------------------------------------------------------------------
+
+export function Inspector({
+	docId,
+	contentType,
+	onStatusChange,
+	onAuthorChange,
+}: InspectorProps): React.ReactElement {
+	const tabs = visibleTabs(contentType)
+	const [activeTab, setActiveTab] = useState<string>(tabs[0].id)
+
+	// Fetch the content item fields needed by the Publish tab.
+	const [doc, setDoc] = useState<InspectorDoc | null>(null)
+
+	const fetchDoc = useCallback(async () => {
+		if (!docId) return
+		try {
+			const res = await fetch(`/admin/api/content/${docId}`)
+			if (!res.ok) return
+			const data = (await res.json()) as {
+				item?: {
+					status?: string
+					slug?: string
+					title?: string
+					visibility?: string
+					author_id?: string | null
+					author_name?: string | null
+					author_slug?: string | null
+					publish_at?: number | null
+					seo_title?: string | null
+					description?: string | null
+					seo_focus_keyword?: string | null
+					excerpt?: string | null
+					hero_image_id?: string | null
+					hero_image_url?: string | null
+					primary_topic?: string | null
+				}
+				tags?: unknown
+				content?: {
+					editor_takeaways?: unknown
+					ai_takeaways?: unknown
+				} | null
+			}
+			const item = data.item
+			if (!item) return
+			const nextDoc: InspectorDoc = {
+				status: (item.status ?? 'draft') as ContentStatus,
+				slug: item.slug ?? '',
+				visibility: (item.visibility ?? 'free') as 'free' | 'premium',
+				authorId: item.author_id ?? null,
+				authorName: item.author_name ?? null,
+				authorSlug: item.author_slug ?? null,
+				publishAt: item.publish_at ? new Date(item.publish_at * 1000).toISOString() : null,
+				title: item.title ?? '',
+				seoTitle: item.seo_title ?? null,
+				description: item.description ?? null,
+				seoFocusKeyword: item.seo_focus_keyword ?? null,
+				excerpt: item.excerpt ?? null,
+				// Hero image: build URL from id if available (the Astro adapter serves from /admin/api/media).
+				heroImageUrl:
+					item.hero_image_url ??
+					(item.hero_image_id ? `/admin/api/media/${item.hero_image_id}` : null),
+				// Organize fields (P3 Task 9)
+				primaryTopic: item.primary_topic ?? null,
+				tags: normalizeStringArray(data.tags),
+				editorTakeaways: normalizeStringArray(data.content?.editor_takeaways),
+				aiTakeaways: normalizeStringArray(data.content?.ai_takeaways),
+			}
+			setDoc(nextDoc)
+			onStatusChange?.(nextDoc.status)
+			onAuthorChange?.({
+				authorId: nextDoc.authorId,
+				authorName: nextDoc.authorName,
+				authorSlug: nextDoc.authorSlug,
+			})
+		} catch {
+			// non-fatal — inspector shows empty state
+		}
+	}, [docId, onAuthorChange, onStatusChange])
+
+	useEffect(() => {
+		void fetchDoc()
+	}, [fetchDoc])
+
+	// Keep the active tab in sync if tabs change (e.g. type changes).
+	useEffect(() => {
+		if (!tabs.find((t) => t.id === activeTab)) {
+			setActiveTab(tabs[0].id)
+		}
+	}, [tabs, activeTab])
+
+	// -------------------------------------------------------------------------
+	// Render
+	// -------------------------------------------------------------------------
+
+	return (
+		<div style={shellWrap}>
+			{/* Tab strip */}
+			<div style={tabStrip} role="tablist" aria-label="Inspector sections">
+				{tabs.map((tab) => (
+					<button
+						key={tab.id}
+						type="button"
+						role="tab"
+						aria-selected={activeTab === tab.id}
+						title={tab.label}
+						onClick={() => setActiveTab(tab.id)}
+						style={tabBtn(activeTab === tab.id)}
+					>
+						<Icon name={tab.icon as IconName} size={15} />
+						{tab.label}
+					</button>
+				))}
+			</div>
+
+			{/* Tab content */}
+			<div style={tabContent} role="tabpanel">
+				{activeTab === 'publish' && docId && doc && (
+					<PublishTab
+						docId={docId}
+						status={doc.status}
+						slug={doc.slug}
+						visibility={doc.visibility}
+						authorId={doc.authorId}
+						publishAt={doc.publishAt}
+						onChanged={() => void fetchDoc()}
+					/>
+				)}
+				{activeTab === 'publish' && (!docId || !doc) && (
+					<TabPlaceholder label="Save the document to see publish options." />
+				)}
+				{activeTab === 'seo' && docId && doc && (
+					<SeoTab
+						docId={docId}
+						seoTitle={doc.seoTitle}
+						description={doc.description}
+						seoFocusKeyword={doc.seoFocusKeyword}
+						title={doc.title}
+						excerpt={doc.excerpt}
+						heroImageUrl={doc.heroImageUrl}
+						onChanged={() => void fetchDoc()}
+					/>
+				)}
+				{activeTab === 'seo' && (!docId || !doc) && (
+					<TabPlaceholder label="Save the document to see SEO options." />
+				)}
+				{activeTab === 'organize' && docId && doc && (
+					<OrganizeTab
+						docId={docId}
+						primaryTopic={doc.primaryTopic}
+						tags={doc.tags}
+						editorTakeaways={doc.editorTakeaways}
+						aiTakeaways={doc.aiTakeaways}
+						onChanged={() => void fetchDoc()}
+					/>
+				)}
+				{activeTab === 'organize' && (!docId || !doc) && (
+					<TabPlaceholder label="Save the document to see organize options." />
+				)}
+				{activeTab === 'history' && docId && (
+					<HistoryTab docId={docId} onRestored={() => void fetchDoc()} />
+				)}
+				{activeTab === 'history' && !docId && (
+					<TabPlaceholder label="Save the document to see version history." />
+				)}
+				{activeTab === 'foundry' && docId && (
+					<FoundryTab docId={docId} contentType={contentType} onChanged={() => void fetchDoc()} />
+				)}
+				{activeTab === 'foundry' && !docId && (
+					<TabPlaceholder label="Save the document to see Foundry pipeline options." />
+				)}
+			</div>
+		</div>
+	)
+}
+
+function normalizeStringArray(value: unknown): string[] {
+	if (Array.isArray(value)) {
+		return value
+			.filter((item): item is string => typeof item === 'string')
+			.map((item) => item.trim())
+			.filter(Boolean)
+	}
+	if (typeof value === 'string') {
+		const trimmed = value.trim()
+		if (!trimmed) return []
+		try {
+			return normalizeStringArray(JSON.parse(trimmed))
+		} catch {
+			return [trimmed]
+		}
+	}
+	return []
+}
+
+// ---------------------------------------------------------------------------
+// TabPlaceholder — stub panel for not-yet-implemented tabs
+// ---------------------------------------------------------------------------
+
+function TabPlaceholder({ label }: { label: string }): React.ReactElement {
+	return (
+		<div style={placeholderWrap}>
+			<Icon name="flag" size={18} style={{ color: 'var(--ink-faint)', marginBottom: 8 }} />
+			<span style={{ fontSize: 12, color: 'var(--ink-faint)' }}>{label}</span>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const shellWrap: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	width: '100%',
+	height: '100%',
+	overflow: 'hidden',
+}
+
+const tabStrip: React.CSSProperties = {
+	display: 'flex',
+	padding: '8px 8px 0',
+	gap: 2,
+	borderBottom: '1px solid var(--border)',
+	overflowX: 'auto',
+	flexShrink: 0,
+}
+
+function tabBtn(active: boolean): React.CSSProperties {
+	return {
+		border: 0,
+		background: 'transparent',
+		padding: '8px 10px 11px',
+		display: 'flex',
+		alignItems: 'center',
+		gap: 6,
+		fontSize: 12.5,
+		fontWeight: 600,
+		whiteSpace: 'nowrap',
+		cursor: 'pointer',
+		color: active ? 'var(--ink)' : 'var(--ink-muted)',
+		borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
+		marginBottom: -1,
+	}
+}
+
+const tabContent: React.CSSProperties = {
+	flex: 1,
+	overflowY: 'auto',
+}
+
+const placeholderWrap: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	padding: 32,
+	textAlign: 'center',
+	opacity: 0.7,
+	gap: 8,
+}