@growth-labs/cms 0.1.0

package/src/ui/components/SharePickers.tsx

@@ -0,0 +1,790 @@
+// src/ui/components/SharePickers.tsx — Social Share pickers (Task 7).
+//
+// Three pickers wired into SocialShareScreen (and ShareModal):
+//
+//   ContentPicker   — GET /admin/api/content?q=... (LibraryRow shape)
+//                     On select → dispatches destinationUrl + contentSlug + contentType
+//                     pre-fill via publicUrlFor.
+//
+//   AuthorPicker    — GET /api/share-links (once) → reads `authors`.
+//                     Supports inline-create (create:true + displayName).
+//
+//   HandlePicker    — GET /api/share-links (once) → reads `handles`.
+//                     For owned-social: filters to isBrandAccount handles.
+//                     Supports inline-create (create:true + username).
+//                     Empty seed → honest "No brand handles yet — add one" affordance.
+//
+// SCOPE GUARDS:
+//   - No @growth-labs/analytics import — pickers hit the HTTP contract via fetch.
+//   - The author/handle picker hits GET /api/share-links (analytics route).
+//   - The content picker hits GET /admin/api/content (CMS route).
+//   - Empty handle list renders honest empty + inline-create, never a fabricated list.
+//
+// Presentation: Broadsheet idiom — .field-label labels, .input fields, .btn / .btn.sm
+// controls, .panel result lists, .kicker micro-labels, and .pill .pdot status chips.
+// All data wiring (fetch/dispatch/debounce/inline-create) is unchanged.
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Icon } from '../icons.js'
+import { publicUrlFor } from '../screens/public-url.js'
+import type {
+	AuthorRef,
+	HandleRef,
+	ShareFormAction,
+	ShareMode,
+} from '../screens/social-share-data.js'
+
+// ---------------------------------------------------------------------------
+// Local type mirrors (UI-owned — do not import from @growth-labs/analytics)
+// SOURCE OF TRUTH: @growth-labs/analytics src/routes/share-links.ts GET response
+// ---------------------------------------------------------------------------
+
+interface AuthorEntry {
+	id: string
+	slug: string
+	displayName: string
+}
+
+interface HandleEntry {
+	id: string
+	platform: string
+	username: string
+	url: string
+	isBrandAccount: boolean
+	active: boolean
+}
+
+interface ShareLinksListResponse {
+	authors: AuthorEntry[]
+	handles: HandleEntry[]
+	links: unknown[]
+}
+
+// LibraryRow subset — only what the content picker needs.
+// SOURCE OF TRUTH: packages/cms/src/ui/screens/library-data.ts LibraryRow
+interface ContentRow {
+	id: string
+	type: 'article' | 'video' | 'podcast' | 'newsletter'
+	slug: string
+	title: string
+	authorId: string | null
+	authorSlug: string | null
+	authorName: string | null
+}
+
+// ---------------------------------------------------------------------------
+// FieldLabel — broadsheet .field-label with an optional required marker
+// ---------------------------------------------------------------------------
+
+function FieldLabel({ children, required }: { children: React.ReactNode; required?: boolean }) {
+	return (
+		<div className="field-label">
+			{children}
+			{required && <span className="req">*</span>}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ContentPicker
+// ---------------------------------------------------------------------------
+
+export interface ContentPickerProps {
+	siteBase?: string
+	dispatch: React.Dispatch<ShareFormAction>
+}
+
+/**
+ * Searches the CMS content library (GET /admin/api/content?q=...) and on
+ * select dispatches a pre-fill: destinationUrl (via publicUrlFor), contentSlug,
+ * and contentType.
+ *
+ * Mirrors the LibraryScreen fetch pattern; loading/error/empty are honest.
+ */
+export function ContentPicker({ siteBase, dispatch }: ContentPickerProps) {
+	const [q, setQ] = useState('')
+	const [open, setOpen] = useState(false)
+	const [loading, setLoading] = useState(false)
+	const [error, setError] = useState<string | null>(null)
+	const [results, setResults] = useState<ContentRow[]>([])
+	const [selected, setSelected] = useState<ContentRow | null>(null)
+	const ref = useRef<HTMLDivElement>(null)
+	const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+	// Close dropdown on outside click
+	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 search = useCallback(async (query: string) => {
+		setLoading(true)
+		setError(null)
+		try {
+			const params = new URLSearchParams({ limit: '20' })
+			if (query.trim()) params.set('q', query.trim())
+			const res = await fetch(`/admin/api/content?${params.toString()}`)
+			if (!res.ok) {
+				setError(`Search error ${res.status}`)
+				setResults([])
+				return
+			}
+			const data = (await res.json()) as { items?: ContentRow[] }
+			setResults(data.items ?? [])
+		} catch (err) {
+			setError(String(err))
+			setResults([])
+		} finally {
+			setLoading(false)
+		}
+	}, [])
+
+	const handleInput = (val: string) => {
+		setQ(val)
+		setOpen(true)
+		if (debounceRef.current) clearTimeout(debounceRef.current)
+		debounceRef.current = setTimeout(() => void search(val), 280)
+	}
+
+	const handleFocus = () => {
+		setOpen(true)
+		if (results.length === 0 && !loading) void search(q)
+	}
+
+	const handleSelect = (row: ContentRow) => {
+		setSelected(row)
+		setQ(row.title || row.slug)
+		setOpen(false)
+		// Pre-fill the form
+		const destinationUrl = publicUrlFor(row, siteBase)
+		const authorSlug = row.authorSlug?.trim() || row.authorId?.trim()
+		const author =
+			row.authorId || row.authorName
+				? {
+						...(row.authorId ? { id: row.authorId } : {}),
+						...(authorSlug ? { slug: authorSlug } : {}),
+						...(row.authorName ? { displayName: row.authorName } : {}),
+					}
+				: undefined
+		dispatch({
+			type: 'prefill-content',
+			destinationUrl,
+			contentSlug: row.slug,
+			contentType: row.type,
+			...(author ? { author } : {}),
+		})
+	}
+
+	const handleClear = () => {
+		setSelected(null)
+		setQ('')
+		setResults([])
+	}
+
+	return (
+		<div>
+			<FieldLabel>Content (pre-fill)</FieldLabel>
+			<div ref={ref} style={{ position: 'relative' }}>
+				<div style={{ display: 'flex', gap: 8 }}>
+					<div style={{ position: 'relative', flex: 1 }}>
+						<Icon
+							name="search"
+							size={14}
+							style={{
+								position: 'absolute',
+								left: 11,
+								top: '50%',
+								transform: 'translateY(-50%)',
+								color: 'var(--ink-muted)',
+								pointerEvents: 'none',
+							}}
+						/>
+						<input
+							type="text"
+							className="input"
+							value={q}
+							placeholder="Search content to pre-fill…"
+							onChange={(e) => handleInput(e.target.value)}
+							onFocus={handleFocus}
+							style={{ paddingLeft: 32 }}
+						/>
+					</div>
+					{selected && (
+						<button
+							type="button"
+							className="btn sm"
+							onClick={handleClear}
+							title="Clear content selection"
+						>
+							<Icon name="x" size={13} />
+						</button>
+					)}
+				</div>
+
+				{open && (
+					<div
+						className="panel"
+						style={{
+							position: 'absolute',
+							top: 'calc(100% + 4px)',
+							left: 0,
+							right: 0,
+							boxShadow: 'var(--shadow-md)',
+							zIndex: 200,
+							maxHeight: 220,
+							overflowY: 'auto',
+							overflowX: 'hidden',
+						}}
+					>
+						{loading && (
+							<div className="help" style={{ padding: '12px 14px', margin: 0 }}>
+								Searching…
+							</div>
+						)}
+						{!loading && error && (
+							<div style={{ padding: '12px 14px', fontSize: 12.5, color: 'var(--red)' }}>
+								{error}
+							</div>
+						)}
+						{!loading && !error && results.length === 0 && (
+							<div className="help" style={{ padding: '12px 14px', margin: 0 }}>
+								{q.trim() ? 'No results.' : 'Type to search content…'}
+							</div>
+						)}
+						{!loading &&
+							!error &&
+							results.map((row) => (
+								<button
+									key={row.id}
+									type="button"
+									onClick={() => handleSelect(row)}
+									style={dropdownItemStyle}
+								>
+									<Icon
+										name={
+											(row.type === 'article'
+												? 'doc'
+												: row.type === 'video'
+													? 'video'
+													: row.type === 'podcast'
+														? 'mic'
+														: 'mail') as Parameters<typeof Icon>[0]['name']
+										}
+										size={13}
+										style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
+									/>
+									<div style={{ minWidth: 0 }}>
+										<div
+											style={{
+												fontSize: 13,
+												fontWeight: 500,
+												color: 'var(--ink)',
+												overflow: 'hidden',
+												textOverflow: 'ellipsis',
+												whiteSpace: 'nowrap',
+											}}
+										>
+											{row.title || '(Untitled)'}
+										</div>
+										<div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>
+											/{row.slug}
+										</div>
+									</div>
+								</button>
+							))}
+					</div>
+				)}
+			</div>
+			{selected && (
+				<p className="help" style={{ color: 'var(--green)' }}>
+					Pre-filled: {selected.type} /{selected.slug}
+				</p>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// useShareLinksData — shared hook for author + handle picker
+// ---------------------------------------------------------------------------
+
+/**
+ * Fetches GET /api/share-links once and returns authors + handles.
+ * Both pickers share this data (the screen fetches it once and passes it down,
+ * or each picker fetches independently — here each picker fetches independently
+ * so the component is self-contained; in practice the two fetches are identical
+ * and the browser deduplicates via HTTP cache / same-tick coalescing).
+ */
+function useShareLinksData(): {
+	authors: AuthorEntry[]
+	handles: HandleEntry[]
+	loading: boolean
+	error: string | null
+} {
+	const [authors, setAuthors] = useState<AuthorEntry[]>([])
+	const [handles, setHandles] = useState<HandleEntry[]>([])
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	useEffect(() => {
+		let cancelled = false
+		async function load() {
+			try {
+				const res = await fetch('/api/share-links')
+				if (!res.ok) {
+					if (!cancelled) setError(`Error ${res.status}`)
+					return
+				}
+				const data = (await res.json()) as ShareLinksListResponse
+				if (!cancelled) {
+					setAuthors(data.authors ?? [])
+					setHandles(data.handles ?? [])
+				}
+			} catch (err) {
+				if (!cancelled) setError(String(err))
+			} finally {
+				if (!cancelled) setLoading(false)
+			}
+		}
+		void load()
+		return () => {
+			cancelled = true
+		}
+	}, [])
+
+	return { authors, handles, loading, error }
+}
+
+// ---------------------------------------------------------------------------
+// SelectionChip — the chosen author/handle, shown as an accent-tinted chip
+// ---------------------------------------------------------------------------
+
+function SelectionChip({
+	icon,
+	label,
+	tags,
+	onClear,
+	clearTitle,
+}: {
+	icon: Parameters<typeof Icon>[0]['name']
+	label: string
+	tags?: string[]
+	onClear: () => void
+	clearTitle: string
+}) {
+	return (
+		<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+			<div
+				style={{
+					flex: 1,
+					padding: '8px 12px',
+					fontSize: 13,
+					background: 'var(--accent-tint)',
+					border: '1px solid var(--accent-ring)',
+					borderRadius: 'var(--radius-sm)',
+					color: 'var(--ink)',
+					display: 'flex',
+					alignItems: 'center',
+					gap: 7,
+				}}
+			>
+				<Icon name={icon} size={13} style={{ color: 'var(--ink-muted)', flexShrink: 0 }} />
+				<span style={{ fontWeight: 600 }}>{label}</span>
+				{tags?.map((t) => (
+					<span key={t} className="kicker" style={{ letterSpacing: '0.08em' }}>
+						{t}
+					</span>
+				))}
+			</div>
+			<button type="button" className="btn sm" onClick={onClear} title={clearTitle}>
+				<Icon name="x" size={13} />
+			</button>
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// AuthorPicker
+// ---------------------------------------------------------------------------
+
+export interface AuthorPickerProps {
+	ref: AuthorRef
+	dispatch: React.Dispatch<ShareFormAction>
+	mode: ShareMode
+}
+
+/**
+ * Author picker — reads the `authors` list from GET /api/share-links.
+ * Supports inline-create via `create:true` + `displayName`.
+ * Required for author-social; optional for newsletter/youtube.
+ */
+export function AuthorPicker({ ref: authorRef, dispatch, mode }: AuthorPickerProps) {
+	const { authors, loading, error } = useShareLinksData()
+	const isRequired = mode === 'author-social'
+	const [addNew, setAddNew] = useState(false)
+	const [newName, setNewName] = useState('')
+
+	// If an existing author ref (with id/slug) is set, show a chip
+	const selectedExisting = authorRef.id
+		? (authors.find((a) => a.id === authorRef.id) ?? null)
+		: null
+
+	const handleSelectExisting = (author: AuthorEntry) => {
+		dispatch({
+			type: 'set-author',
+			ref: { id: author.id, slug: author.slug, displayName: author.displayName },
+		})
+		setAddNew(false)
+		setNewName('')
+	}
+
+	const handleAddNew = () => {
+		if (!newName.trim()) return
+		dispatch({ type: 'set-author', ref: { displayName: newName.trim(), create: true } })
+		setAddNew(false)
+		setNewName('')
+	}
+
+	const handleClear = () => {
+		dispatch({ type: 'set-author', ref: {} })
+		setAddNew(false)
+		setNewName('')
+	}
+
+	const isCreate = !!authorRef.create
+	const displayValue = selectedExisting?.displayName ?? authorRef.displayName ?? ''
+
+	return (
+		<div>
+			<FieldLabel required={isRequired}>{isRequired ? 'Author' : 'Author (optional)'}</FieldLabel>
+
+			{/* Show current selection as a chip */}
+			{displayValue ? (
+				<SelectionChip
+					icon="users"
+					label={displayValue}
+					tags={isCreate ? ['new'] : undefined}
+					onClear={handleClear}
+					clearTitle="Clear author"
+				/>
+			) : (
+				<>
+					{/* Existing authors list */}
+					{loading && (
+						<div className="help" style={{ margin: '6px 0 0' }}>
+							Loading authors…
+						</div>
+					)}
+					{!loading && error && (
+						<div style={{ fontSize: 12.5, color: 'var(--red)', padding: '6px 0' }}>{error}</div>
+					)}
+					{!loading && !error && authors.length > 0 && (
+						<div
+							className="panel"
+							style={{ overflow: 'hidden', margin: '0 0 8px', maxHeight: 160, overflowY: 'auto' }}
+						>
+							{authors.map((author) => (
+								<button
+									key={author.id}
+									type="button"
+									onClick={() => handleSelectExisting(author)}
+									style={dropdownItemStyle}
+								>
+									<Icon
+										name="users"
+										size={13}
+										style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
+									/>
+									<div>
+										<div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>
+											{author.displayName}
+										</div>
+										{author.slug && (
+											<div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>
+												@{author.slug}
+											</div>
+										)}
+									</div>
+								</button>
+							))}
+						</div>
+					)}
+					{!loading && !error && authors.length === 0 && !addNew && (
+						<div
+							className="panel panel-pad help"
+							style={{ margin: '0 0 8px', padding: '10px 12px' }}
+						>
+							No authors yet — add one below.
+						</div>
+					)}
+
+					{/* Inline add new */}
+					{addNew ? (
+						<div style={{ display: 'flex', gap: 8 }}>
+							<input
+								type="text"
+								className="input"
+								value={newName}
+								onChange={(e) => setNewName(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter') {
+										e.preventDefault()
+										handleAddNew()
+									}
+									if (e.key === 'Escape') setAddNew(false)
+								}}
+								placeholder="Display name…"
+								style={{ flex: 1 }}
+							/>
+							<button
+								type="button"
+								className="btn"
+								onClick={handleAddNew}
+								disabled={!newName.trim()}
+							>
+								Add
+							</button>
+							<button type="button" className="btn sm" onClick={() => setAddNew(false)}>
+								<Icon name="x" size={13} />
+							</button>
+						</div>
+					) : (
+						<button
+							type="button"
+							className="btn sm ghost"
+							onClick={() => setAddNew(true)}
+							style={{ color: 'var(--accent)' }}
+						>
+							<Icon name="plus" size={13} />
+							Add new author
+						</button>
+					)}
+				</>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// HandlePicker
+// ---------------------------------------------------------------------------
+
+export interface HandlePickerProps {
+	ref: HandleRef
+	dispatch: React.Dispatch<ShareFormAction>
+	mode: ShareMode
+}
+
+/**
+ * Handle (brand/personal) picker — reads `handles` from GET /api/share-links.
+ * - owned-social: filters to `isBrandAccount` handles only.
+ * - author-social / youtube / newsletter: shows all handles.
+ * Supports inline-create via `create:true` + `username` (the batch route creates it).
+ * Empty `gl_social_handles` (seed pending per §11) → honest "No brand handles yet — add one"
+ * affordance; never a fabricated list.
+ */
+export function HandlePicker({ ref: handleRef, dispatch, mode }: HandlePickerProps) {
+	const { handles, loading, error } = useShareLinksData()
+	const isRequired = mode === 'author-social' || mode === 'owned-social'
+	const [addNew, setAddNew] = useState(false)
+	const [newUsername, setNewUsername] = useState('')
+
+	// For owned-social, only brand account handles are relevant
+	const filteredHandles =
+		mode === 'owned-social' ? handles.filter((h) => h.isBrandAccount) : handles
+
+	const selectedExisting = handleRef.id
+		? (handles.find((h) => h.id === handleRef.id) ?? null)
+		: null
+
+	const handleSelectExisting = (handle: HandleEntry) => {
+		dispatch({
+			type: 'set-handle',
+			ref: {
+				id: handle.id,
+				username: handle.username,
+				url: handle.url,
+				isBrandAccount: handle.isBrandAccount,
+			},
+		})
+		setAddNew(false)
+		setNewUsername('')
+	}
+
+	const handleAddNew = () => {
+		if (!newUsername.trim()) return
+		dispatch({
+			type: 'set-handle',
+			ref: {
+				username: newUsername.trim(),
+				isBrandAccount: mode === 'owned-social',
+				create: true,
+			},
+		})
+		setAddNew(false)
+		setNewUsername('')
+	}
+
+	const handleClear = () => {
+		dispatch({ type: 'set-handle', ref: {} })
+		setAddNew(false)
+		setNewUsername('')
+	}
+
+	const isCreate = !!handleRef.create
+	const displayValue = selectedExisting?.username ?? handleRef.username ?? ''
+	const isBrand = selectedExisting?.isBrandAccount ?? handleRef.isBrandAccount ?? false
+
+	const emptyLabel =
+		mode === 'owned-social'
+			? 'No brand handles yet — add one below.'
+			: 'No handles yet — add one below.'
+	const placeholder = mode === 'owned-social' ? '@brand-handle' : '@username'
+
+	return (
+		<div>
+			<FieldLabel required={isRequired}>{isRequired ? 'Handle' : 'Handle (optional)'}</FieldLabel>
+
+			{/* Show current selection as a chip */}
+			{displayValue ? (
+				<SelectionChip
+					icon="share"
+					label={`@${displayValue}`}
+					tags={[...(isBrand ? ['brand'] : []), ...(isCreate ? ['new'] : [])]}
+					onClear={handleClear}
+					clearTitle="Clear handle"
+				/>
+			) : (
+				<>
+					{/* Loading / error */}
+					{loading && (
+						<div className="help" style={{ margin: '6px 0 0' }}>
+							Loading handles…
+						</div>
+					)}
+					{!loading && error && (
+						<div style={{ fontSize: 12.5, color: 'var(--red)', padding: '6px 0' }}>{error}</div>
+					)}
+
+					{/* Existing handles list */}
+					{!loading && !error && filteredHandles.length > 0 && (
+						<div
+							className="panel"
+							style={{ overflow: 'hidden', margin: '0 0 8px', maxHeight: 160, overflowY: 'auto' }}
+						>
+							{filteredHandles.map((handle) => (
+								<button
+									key={handle.id}
+									type="button"
+									onClick={() => handleSelectExisting(handle)}
+									style={{ ...dropdownItemStyle, opacity: handle.active ? 1 : 0.5 }}
+								>
+									<Icon
+										name="share"
+										size={13}
+										style={{ color: 'var(--ink-muted)', flexShrink: 0 }}
+									/>
+									<div>
+										<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+											<span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>
+												@{handle.username}
+											</span>
+											{handle.isBrandAccount && (
+												<span className="kicker" style={{ letterSpacing: '0.08em' }}>
+													brand
+												</span>
+											)}
+											{!handle.active && (
+												<span className="kicker" style={{ letterSpacing: '0.08em' }}>
+													inactive
+												</span>
+											)}
+										</div>
+										<div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>
+											{handle.platform}
+										</div>
+									</div>
+								</button>
+							))}
+						</div>
+					)}
+
+					{/* Honest empty state */}
+					{!loading && !error && filteredHandles.length === 0 && !addNew && (
+						<div
+							className="panel panel-pad help"
+							style={{ margin: '0 0 8px', padding: '10px 12px' }}
+						>
+							{emptyLabel}
+						</div>
+					)}
+
+					{/* Inline add new */}
+					{addNew ? (
+						<div style={{ display: 'flex', gap: 8 }}>
+							<input
+								type="text"
+								className="input"
+								value={newUsername}
+								onChange={(e) => setNewUsername(e.target.value)}
+								onKeyDown={(e) => {
+									if (e.key === 'Enter') {
+										e.preventDefault()
+										handleAddNew()
+									}
+									if (e.key === 'Escape') setAddNew(false)
+								}}
+								placeholder={placeholder}
+								style={{ flex: 1 }}
+							/>
+							<button
+								type="button"
+								className="btn"
+								onClick={handleAddNew}
+								disabled={!newUsername.trim()}
+							>
+								Add
+							</button>
+							<button type="button" className="btn sm" onClick={() => setAddNew(false)}>
+								<Icon name="x" size={13} />
+							</button>
+						</div>
+					) : (
+						<button
+							type="button"
+							className="btn sm ghost"
+							onClick={() => setAddNew(true)}
+							style={{ color: 'var(--accent)' }}
+						>
+							<Icon name="plus" size={13} />
+							Add new handle
+						</button>
+					)}
+				</>
+			)}
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown row — the one shared inline style the broadsheet vocabulary has no
+// class for (a full-width, left-aligned, hoverable list button inside a .panel).
+// ---------------------------------------------------------------------------
+
+const dropdownItemStyle: React.CSSProperties = {
+	width: '100%',
+	display: 'flex',
+	alignItems: 'center',
+	gap: 9,
+	padding: '9px 12px',
+	background: 'transparent',
+	borderBottom: '1px solid var(--border-soft)',
+	cursor: 'pointer',
+	fontSize: 13,
+	color: 'var(--ink)',
+	textAlign: 'left',
+}