@nuasite/collections-admin 0.43.0-beta.4 → 0.43.0-beta.8

package/src/app.tsx

@@ -1,10 +1,15 @@
 /**
- * collections-admin SPA (cms-headless F3.1 read-only + F3.2 editing).
+ * collections-admin SPA — a standalone CMS admin.
  *
- * Host-agnostic: driven only by an `apiBase` prop, with internal view-state
- * navigation (list → entries → editor/create) via React state — never the host
- * router. That keeps the same component usable as a webmaster tab today and at
- * `/_nua/admin` for local dev later (F7).
+ * Layout: a persistent left **sidebar of content types** (collections) and a main
+ * pane that shows the selected collection's entries list, the entry editor, or the
+ * create form. Navigation is **hash-routed** (`#/c/<collection>/e/<slug>`), so
+ * reloads and deep links work and back/forward behave.
+ *
+ * Host-agnostic: driven only by an `apiBase` prop, and the hash router keeps it
+ * self-contained for its standalone consumers (cms-studio, the F7 `/_nua/admin`
+ * page) without reaching for a host router. The webmaster Collections tab ships
+ * its own UI, so hijacking the URL hash here is safe.
  *
  * Browse collections, list entries (sparse projection + cursor pagination), and
  * edit an entry: a field→widget form built from `FieldDefinition[]` with debounced
@@ -19,7 +24,7 @@ import { EntryEditor } from './entry-editor'
 import './styles.css'
 
 // ============================================================================
-// View state
+// View state + hash routing
 // ============================================================================
 
 type View =
@@ -28,6 +33,32 @@ type View =
 	| { view: 'detail'; collection: string; slug: string }
 	| { view: 'create'; collection: string }
 
+/**
+ * Parse the URL hash into a view. Slugs may contain `/` (nested glob entries),
+ * so they are carried URL-encoded in a single `…/e/<slug>` segment.
+ */
+function parseRoute(hash: string): View {
+	const parts = hash.replace(/^#\/?/, '').split('/').filter(Boolean)
+	if (parts[0] !== 'c' || parts[1] === undefined) return { view: 'list' }
+	const collection = decodeURIComponent(parts[1])
+	if (parts[2] === 'new') return { view: 'create', collection }
+	if (parts[2] === 'e' && parts[3] !== undefined) return { view: 'detail', collection, slug: decodeURIComponent(parts[3]) }
+	return { view: 'entries', collection }
+}
+
+function routeToHash(view: View): string {
+	switch (view.view) {
+		case 'list':
+			return '#/'
+		case 'entries':
+			return `#/c/${encodeURIComponent(view.collection)}`
+		case 'create':
+			return `#/c/${encodeURIComponent(view.collection)}/new`
+		case 'detail':
+			return `#/c/${encodeURIComponent(view.collection)}/e/${encodeURIComponent(view.slug)}`
+	}
+}
+
 // ============================================================================
 // Shared async-load hook
 // ============================================================================
@@ -100,32 +131,60 @@ function EmptyState({ label }: { label: string }) {
 }
 
 // ============================================================================
-// Collection list
+// Sidebar — content-type menu
 // ============================================================================
 
-function CollectionList({ client, onOpen }: { client: CmsClient; onOpen: (collection: string) => void }) {
-	const { data, error, loading, reload } = useAsync(() => client.getCollections(), [client])
-
-	if (loading) return <Spinner label="Loading collections…" />
-	if (error) return <ErrorState error={error} onRetry={reload} />
-	if (!data || data.length === 0) return <EmptyState label="No collections found in this project." />
+function Sidebar({ collections, loading, error, activeCollection, onSelect, onReload, onClose }: {
+	collections: CollectionDefinition[]
+	loading: boolean
+	error: CmsClientError | Error | null
+	activeCollection: string | undefined
+	onSelect: (collection: string) => void
+	onReload: () => void
+	onClose?: () => void
+}) {
+	// Group glob-nested collections (e.g. `jsem-otazky` under `jsem`) below their
+	// parent, indented, so the menu mirrors the content structure.
+	const childrenByParent = new Map<string, CollectionDefinition[]>()
+	for (const c of collections) {
+		if (!c.parentCollection) continue
+		const arr = childrenByParent.get(c.parentCollection) ?? []
+		arr.push(c)
+		childrenByParent.set(c.parentCollection, arr)
+	}
+	const topLevel = collections.filter((c) => !c.parentCollection)
+
+	const item = (c: CollectionDefinition, depth: number) => (
+		<button
+			key={c.name}
+			type="button"
+			className={`nua-cadmin-nav-item${c.name === activeCollection ? ' is-active' : ''}`}
+			style={depth > 0 ? { paddingLeft: 12 + depth * 14 } : undefined}
+			onClick={() => onSelect(c.name)}
+			title={c.name}
+		>
+			<span className="nua-cadmin-nav-label">{c.label || c.name}</span>
+			<span className="nua-cadmin-nav-count">{c.entryCount}</span>
+		</button>
+	)
 
 	return (
-		<div className="nua-cadmin-list">
-			{data.map((collection) => (
-				<button key={collection.name} type="button" className="nua-cadmin-card" onClick={() => onOpen(collection.name)}>
-					<span className="nua-cadmin-card-main">
-						<span className="nua-cadmin-card-label">{collection.label || collection.name}</span>
-						<span className="nua-cadmin-card-sub">
-							{collection.name}
-							{collection.type ? ` · ${collection.type}` : ''}
-							{` · ${collection.fileExtension}`}
-						</span>
-					</span>
-					<span className="nua-cadmin-badge">{collection.entryCount} {collection.entryCount === 1 ? 'entry' : 'entries'}</span>
-				</button>
-			))}
-		</div>
+		<aside className="nua-cadmin-sidebar">
+			<div className="nua-cadmin-sidebar-head">
+				<span className="nua-cadmin-brand">Collections</span>
+				{onClose ? <button type="button" className="nua-cadmin-close" aria-label="Close" onClick={onClose}>×</button> : null}
+			</div>
+			<nav className="nua-cadmin-nav">
+				{loading ? <div className="nua-cadmin-nav-state">Loading…</div> : null}
+				{error
+					? <button type="button" className="nua-cadmin-nav-state nua-cadmin-nav-error" onClick={onReload}>Failed to load — retry</button>
+					: null}
+				{!loading && !error && collections.length === 0 ? <div className="nua-cadmin-nav-state">No content types</div> : null}
+				{!loading && !error
+					? topLevel.flatMap((c) => [item(c, 0), ...(childrenByParent.get(c.name) ?? []).map((child) => item(child, 1))])
+					: null}
+			</nav>
+		</aside>
 	)
 }
 
@@ -243,100 +302,113 @@ export interface CollectionsAdminAppProps {
 	 * prefix). In webmaster this is `/app/project/:slug/session/:sessionId/cms`.
 	 */
 	apiBase: string
-	/** Optional close affordance shown in the header (e.g. to collapse the WM tab). */
+	/** Optional close affordance shown in the sidebar (e.g. to collapse the WM tab). */
 	onClose?: () => void
 }
 
 export function CollectionsAdminApp({ apiBase, onClose }: CollectionsAdminAppProps) {
 	const client = useMemo(() => createClient(apiBase), [apiBase])
-	const [state, setState] = useState<View>({ view: 'list' })
+	const [state, setState] = useState<View>(() => typeof window !== 'undefined' ? parseRoute(window.location.hash) : { view: 'list' })
+
+	// The hash is the source of truth for navigation: writing it fires `hashchange`,
+	// which syncs React state — so back/forward, reload and deep links all work.
+	useEffect(() => {
+		const onHash = () => setState(parseRoute(window.location.hash))
+		window.addEventListener('hashchange', onHash)
+		onHash()
+		return () => window.removeEventListener('hashchange', onHash)
+	}, [])
+
+	const navigate = useCallback((view: View) => {
+		const hash = routeToHash(view)
+		if (typeof window !== 'undefined' && window.location.hash !== hash) {
+			window.location.hash = hash
+		} else {
+			setState(view)
+		}
+	}, [])
 
-	// The collection definitions drive the editor's field rendering; load them once
-	// at the root and pass the active one down.
+	// Collection definitions drive both the sidebar menu and the editor's field
+	// rendering; load them once at the root and pass the active one down.
 	const collectionsState = useAsync(() => client.getCollections(), [client])
 	const collections = collectionsState.data ?? []
 
-	const goList = useCallback(() => setState({ view: 'list' }), [])
-	const goEntries = useCallback((collection: string) => setState({ view: 'entries', collection }), [])
-	const goDetail = useCallback((collection: string, slug: string) => setState({ view: 'detail', collection, slug }), [])
-	const goCreate = useCallback((collection: string) => setState({ view: 'create', collection }), [])
+	const activeCollectionName = state.view !== 'list' ? state.collection : undefined
+	const activeCollection = activeCollectionName ? collections.find((c) => c.name === activeCollectionName) : undefined
+	const collectionLabel = activeCollection ? (activeCollection.label || activeCollection.name) : (activeCollectionName ?? '')
 
-	const activeCollection = state.view !== 'list'
-		? collections.find((c) => c.name === state.collection)
-		: undefined
-	const collectionLabel = activeCollection ? (activeCollection.label || activeCollection.name) : (state.view !== 'list' ? state.collection : '')
-
-	const isEntryView = state.view === 'detail' || state.view === 'create'
+	const goEntries = useCallback((collection: string) => navigate({ view: 'entries', collection }), [navigate])
+	const goDetail = useCallback((collection: string, slug: string) => navigate({ view: 'detail', collection, slug }), [navigate])
+	const goCreate = useCallback((collection: string) => navigate({ view: 'create', collection }), [navigate])
 
 	return (
 		<div className="nua-cadmin">
-			<div className="nua-cadmin-header">
-				{state.view === 'entries' ? <button type="button" className="nua-cadmin-back" onClick={goList}>← Collections</button> : null}
-				{isEntryView
-					? <button type="button" className="nua-cadmin-back" onClick={() => goEntries(state.collection)}>← {collectionLabel}</button>
-					: null}
-
-				{state.view === 'list' ? <h2 className="nua-cadmin-title">Collections</h2> : null}
-				{state.view === 'entries' ? <h2 className="nua-cadmin-title">{collectionLabel}</h2> : null}
-				{state.view === 'detail'
-					? (
-						<h2 className="nua-cadmin-title">
-							{collectionLabel}
-							<span className="nua-cadmin-crumb">/ {state.slug}</span>
-						</h2>
-					)
-					: null}
-				{state.view === 'create'
-					? (
-						<h2 className="nua-cadmin-title">
-							{collectionLabel}
-							<span className="nua-cadmin-crumb">/ new entry</span>
-						</h2>
-					)
-					: null}
-
-				<span className="nua-cadmin-spacer" />
-				{onClose ? <button type="button" className="nua-cadmin-close" aria-label="Close" onClick={onClose}>×</button> : null}
-			</div>
-
-			<div className="nua-cadmin-body">
-				{state.view === 'list' ? <CollectionList client={client} onOpen={goEntries} /> : null}
-				{state.view === 'entries'
-					? (
-						<EntriesTable
-							client={client}
-							collection={state.collection}
-							onOpen={(slug) => goDetail(state.collection, slug)}
-							onCreate={() => goCreate(state.collection)}
-						/>
-					)
-					: null}
-				{state.view === 'detail'
-					? (
-						<EntryEditor
-							// Remount the editor when the slug changes so its draft/baseHash reset cleanly.
-							key={`${state.collection}/${state.slug}`}
-							client={client}
-							definition={activeCollection}
-							collection={state.collection}
-							slug={state.slug}
-							onDeleted={() => goEntries(state.collection)}
-							onRenamed={(newSlug) => goDetail(state.collection, newSlug)}
-						/>
-					)
-					: null}
-				{state.view === 'create'
-					? (
-						<EntryCreate
-							client={client}
-							definition={activeCollection}
-							collection={state.collection}
-							onCreated={(slug) => goDetail(state.collection, slug)}
-							onCancel={() => goEntries(state.collection)}
-						/>
-					)
-					: null}
-			</div>
+			<Sidebar
+				collections={collections}
+				loading={collectionsState.loading}
+				error={collectionsState.error}
+				activeCollection={activeCollectionName}
+				onSelect={goEntries}
+				onReload={collectionsState.reload}
+				onClose={onClose}
+			/>
+
+			<main className="nua-cadmin-main">
+				<div className="nua-cadmin-header">
+					{state.view === 'detail' || state.view === 'create'
+						? <button type="button" className="nua-cadmin-back" onClick={() => goEntries(state.collection)}>← {collectionLabel}</button>
+						: null}
+					<h2 className="nua-cadmin-title">
+						{state.view === 'list' ? 'Content' : collectionLabel}
+						{state.view === 'detail' ? <span className="nua-cadmin-crumb">/ {state.slug}</span> : null}
+						{state.view === 'create' ? <span className="nua-cadmin-crumb">/ new entry</span> : null}
+					</h2>
+					<span className="nua-cadmin-spacer" />
+				</div>
+
+				<div className="nua-cadmin-body">
+					{state.view === 'list'
+						? (collectionsState.error
+							? <ErrorState error={collectionsState.error} onRetry={collectionsState.reload} />
+							: <EmptyState label="Pick a content type from the left to browse its entries." />)
+						: null}
+					{state.view === 'entries'
+						? (
+							<EntriesTable
+								client={client}
+								collection={state.collection}
+								onOpen={(slug) => goDetail(state.collection, slug)}
+								onCreate={() => goCreate(state.collection)}
+							/>
+						)
+						: null}
+					{state.view === 'detail'
+						? (
+							<EntryEditor
+								// Remount the editor when the slug changes so its draft/baseHash reset cleanly.
+								key={`${state.collection}/${state.slug}`}
+								client={client}
+								definition={activeCollection}
+								collection={state.collection}
+								slug={state.slug}
+								onDeleted={() => goEntries(state.collection)}
+								onRenamed={(newSlug) => goDetail(state.collection, newSlug)}
+							/>
+						)
+						: null}
+					{state.view === 'create'
+						? (
+							<EntryCreate
+								client={client}
+								definition={activeCollection}
+								collection={state.collection}
+								onCreated={(slug) => goDetail(state.collection, slug)}
+								onCancel={() => goEntries(state.collection)}
+							/>
+						)
+						: null}
+				</div>
+			</main>
 		</div>
 	)
 }