@growth-labs/cms 0.5.7 → 0.5.8

package/src/ui/screens/LibraryScreen.tsx

@@ -20,6 +20,7 @@ import {
 	filterRows,
 	groupByStatus,
 	type LibraryRow,
+	primaryCategoryLabel,
 	type StatusCounts,
 } from './library-data.js'
 
@@ -30,6 +31,7 @@ import {
 export interface LibraryScreenProps {
 	openDoc: (id: string | null, contentType?: ContentType) => void
 	allowInlineAuthorCreation?: boolean
+	primaryCategories?: Array<{ slug: string; label: string }>
 }
 
 // ---------------------------------------------------------------------------
@@ -74,6 +76,7 @@ interface LibraryState {
 	/** The currently active status tab filter. */
 	statusFilter: ContentStatus | 'all' | 'processing'
 	typeFilter: ContentType | ''
+	channelFilter: string
 	q: string
 	view: 'list' | 'board'
 	/** Row IDs currently selected. */
@@ -93,6 +96,7 @@ type LibraryAction =
 	| { type: 'fetch-error'; error: string }
 	| { type: 'set-status-filter'; status: ContentStatus | 'all' | 'processing' }
 	| { type: 'set-type-filter'; contentType: ContentType | '' }
+	| { type: 'set-channel-filter'; channel: string }
 	| { type: 'set-q'; q: string }
 	| { type: 'set-view'; view: 'list' | 'board' }
 	| { type: 'toggle-select'; id: string }
@@ -112,6 +116,7 @@ function initLibrary(): LibraryState {
 		error: null,
 		statusFilter: 'all',
 		typeFilter: '',
+		channelFilter: '',
 		q: '',
 		view: 'list',
 		selected: new Set(),
@@ -141,6 +146,8 @@ function libraryReducer(state: LibraryState, action: LibraryAction): LibraryStat
 			return { ...state, statusFilter: action.status, selected: new Set() }
 		case 'set-type-filter':
 			return { ...state, typeFilter: action.contentType, selected: new Set() }
+		case 'set-channel-filter':
+			return { ...state, channelFilter: action.channel, selected: new Set() }
 		case 'set-q':
 			return { ...state, q: action.q }
 		case 'set-view':
@@ -191,6 +198,7 @@ function getVisibleRows(state: LibraryState): LibraryRow[] {
 				? (state.statusFilter as ContentStatus)
 				: undefined,
 		type: state.typeFilter !== '' ? state.typeFilter : undefined,
+		channel: state.channelFilter || undefined,
 		q: state.q || undefined,
 	})
 }
@@ -199,7 +207,11 @@ function getVisibleRows(state: LibraryState): LibraryRow[] {
 // Main component
 // ---------------------------------------------------------------------------
 
-export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: LibraryScreenProps) {
+export function LibraryScreen({
+	openDoc,
+	allowInlineAuthorCreation = true,
+	primaryCategories = [],
+}: LibraryScreenProps) {
 	const { state: ws } = useWorkspace()
 	const siteBase = typeof window !== 'undefined' ? window.location.origin : undefined
 	const [lib, dispatch] = useReducer(libraryReducer, undefined, initLibrary)
@@ -217,6 +229,7 @@ export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: Lib
 				params.set('status', lib.statusFilter)
 			}
 			if (lib.typeFilter) params.set('types', lib.typeFilter)
+			if (lib.channelFilter) params.set('channel', lib.channelFilter)
 			if (lib.q) params.set('q', lib.q)
 
 			const [listRes, countsRes] = await Promise.all([
@@ -247,7 +260,7 @@ export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: Lib
 		} catch (err) {
 			dispatch({ type: 'fetch-error', error: String(err) })
 		}
-	}, [lib.statusFilter, lib.typeFilter, lib.q]) // fetchContent identity changes when filters change → useEffect re-runs
+	}, [lib.statusFilter, lib.typeFilter, lib.channelFilter, lib.q]) // fetchContent identity changes when filters change → useEffect re-runs
 
 	// Initial fetch + refetch when filters change
 	useEffect(() => {
@@ -373,6 +386,24 @@ export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: Lib
 					))}
 				</div>
 
+				{primaryCategories.length > 0 && (
+					<select
+						value={lib.channelFilter}
+						onChange={(event) =>
+							dispatch({ type: 'set-channel-filter', channel: event.currentTarget.value })
+						}
+						aria-label="Content grouping"
+						className="input"
+					>
+						<option value="">All groupings</option>
+						{primaryCategories.map((category) => (
+							<option key={category.slug} value={category.slug}>
+								{category.label}
+							</option>
+						))}
+					</select>
+				)}
+
 				<div style={{ flex: 1 }} />
 
 				{/* View toggle — segmented control */}
@@ -457,6 +488,7 @@ export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: Lib
 				(lib.view === 'list' ? (
 					<ListView
 						rows={visible}
+						primaryCategories={primaryCategories}
 						selected={lib.selected}
 						allSelected={allVisibleSelected}
 						onToggleSelect={(id) => dispatch({ type: 'toggle-select', id })}
@@ -469,7 +501,11 @@ export function LibraryScreen({ openDoc, allowInlineAuthorCreation = true }: Lib
 						onShare={(row) => dispatch({ type: 'open-share', row })}
 					/>
 				) : (
-					<BoardView rows={visible} onOpen={(row) => openDoc(row.id, row.type)} />
+					<BoardView
+						rows={visible}
+						primaryCategories={primaryCategories}
+						onOpen={(row) => openDoc(row.id, row.type)}
+					/>
 				))}
 
 			{/* Import modal */}
@@ -578,6 +614,7 @@ function NewContentMenu({ openDoc }: { openDoc: LibraryScreenProps['openDoc'] })
 
 function ListView({
 	rows,
+	primaryCategories,
 	selected,
 	allSelected,
 	onToggleSelect,
@@ -586,6 +623,7 @@ function ListView({
 	onShare,
 }: {
 	rows: LibraryRow[]
+	primaryCategories: Array<{ slug: string; label: string }>
 	selected: Set<string>
 	allSelected: boolean
 	onToggleSelect: (id: string) => void
@@ -609,6 +647,7 @@ function ListView({
 							</th>
 							<th>Title</th>
 							<th style={{ width: 110 }}>Type</th>
+							<th style={{ width: 120 }}>Grouping</th>
 							<th style={{ width: 120 }}>Status</th>
 							<th style={{ width: 150 }}>Author</th>
 							<th style={{ width: 130 }}>Updated</th>
@@ -620,6 +659,7 @@ function ListView({
 							<ListRow
 								key={row.id}
 								row={row}
+								primaryCategories={primaryCategories}
 								isSelected={selected.has(row.id)}
 								onSelect={() => onToggleSelect(row.id)}
 								onOpen={() => onOpen(row)}
@@ -635,12 +675,14 @@ function ListView({
 
 function ListRow({
 	row,
+	primaryCategories,
 	isSelected,
 	onSelect,
 	onOpen,
 	onShare,
 }: {
 	row: LibraryRow
+	primaryCategories: Array<{ slug: string; label: string }>
 	isSelected: boolean
 	onSelect: () => void
 	onOpen: () => void
@@ -742,6 +784,10 @@ function ListRow({
 				</span>
 			</td>
 
+			<td style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>
+				{primaryCategoryLabel(row.channel, primaryCategories)}
+			</td>
+
 			<td>
 				<StatusPill row={row} />
 			</td>
@@ -839,7 +885,15 @@ const BOARD_PILL: Record<(typeof BOARD_COLUMNS)[number]['key'], string> = {
 	published: 'published',
 }
 
-function BoardView({ rows, onOpen }: { rows: LibraryRow[]; onOpen: (row: LibraryRow) => void }) {
+function BoardView({
+	rows,
+	primaryCategories,
+	onOpen,
+}: {
+	rows: LibraryRow[]
+	primaryCategories: Array<{ slug: string; label: string }>
+	onOpen: (row: LibraryRow) => void
+}) {
 	const columns = groupByStatus(rows)
 
 	return (
@@ -888,7 +942,12 @@ function BoardView({ rows, onOpen }: { rows: LibraryRow[]; onOpen: (row: Library
 								</div>
 							)}
 							{colRows.map((row) => (
-								<BoardCard key={row.id} row={row} onOpen={() => onOpen(row)} />
+								<BoardCard
+									key={row.id}
+									row={row}
+									primaryCategories={primaryCategories}
+									onOpen={() => onOpen(row)}
+								/>
 							))}
 						</div>
 					</div>
@@ -898,7 +957,15 @@ function BoardView({ rows, onOpen }: { rows: LibraryRow[]; onOpen: (row: Library
 	)
 }
 
-function BoardCard({ row, onOpen }: { row: LibraryRow; onOpen: () => void }) {
+function BoardCard({
+	row,
+	primaryCategories,
+	onOpen,
+}: {
+	row: LibraryRow
+	primaryCategories: Array<{ slug: string; label: string }>
+	onOpen: () => void
+}) {
 	const isProcessing =
 		row.processingState != null && !['ready', 'failed'].includes(row.processingState ?? '')
 
@@ -990,6 +1057,9 @@ function BoardCard({ row, onOpen }: { row: LibraryRow; onOpen: () => void }) {
 				{row.title || '(Untitled)'}
 			</div>
 			<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+				<span style={{ fontSize: 11.5, color: 'var(--ink-muted)' }}>
+					{primaryCategoryLabel(row.channel, primaryCategories)}
+				</span>
 				<span style={{ fontSize: 11.5, color: 'var(--ink-muted)' }}>
 					{row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—')}
 				</span>

package/src/ui/screens/library-data.ts

@@ -25,6 +25,7 @@ export interface LibraryRow {
 	status: ContentStatus
 	slug: string
 	title: string
+	channel: string | null
 	visibility: 'free' | 'premium'
 	featured: boolean
 	publishAt: string | null
@@ -62,10 +63,19 @@ export interface BoardColumns {
 export interface RowFilter {
 	status?: ContentStatus
 	type?: ContentType
+	channel?: string
 	/** Case-insensitive substring match against title and slug. */
 	q?: string
 }
 
+export function primaryCategoryLabel(
+	channel: string | null,
+	categories: Array<{ slug: string; label: string }>,
+): string {
+	if (!channel) return '—'
+	return categories.find((category) => category.slug === channel)?.label ?? channel
+}
+
 const NON_PROCESSING_STATES = new Set(['ready', 'failed'])
 
 /** Returns true when this row represents a video mid-flight in Foundry. */
@@ -161,12 +171,13 @@ export function groupByStatus(rows: LibraryRow[]): BoardColumns {
  * matching the server-side LIKE behaviour so the list result is consistent.
  */
 export function filterRows(rows: LibraryRow[], filter: RowFilter): LibraryRow[] {
-	const { status, type, q } = filter
+	const { status, type, channel, q } = filter
 	const lowerQ = q ? q.toLowerCase() : null
 
 	return rows.filter((row) => {
 		if (status !== undefined && row.status !== status) return false
 		if (type !== undefined && row.type !== type) return false
+		if (channel !== undefined && row.channel !== channel) return false
 		if (lowerQ !== null) {
 			const titleMatch = row.title.toLowerCase().includes(lowerQ)
 			const slugMatch = row.slug.toLowerCase().includes(lowerQ)

package/src/ui/screens/registry.tsx

@@ -41,13 +41,20 @@ function CalendarRoute() {
 
 export function createCmsScreens({
 	allowInlineAuthorCreation = true,
+	primaryCategories = [],
 	surveyId,
 }: {
 	allowInlineAuthorCreation?: boolean
+	primaryCategories?: Array<{ slug: string; label: string }>
 	surveyId?: string
 } = {}): ScreenRegistry {
 	return {
-		content: () => <ContentRoute allowInlineAuthorCreation={allowInlineAuthorCreation} />,
+		content: () => (
+			<ContentRoute
+				allowInlineAuthorCreation={allowInlineAuthorCreation}
+				primaryCategories={primaryCategories}
+			/>
+		),
 		'content-insights': () => <ContentInsightsScreen />,
 		dashboard: () => <DashboardRoute />,
 		calendar: () => <CalendarRoute />,