@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/lib/post-types-service.ts

@@ -0,0 +1,129 @@
+import { cmsApi } from './api.js'
+
+/**
+ * Detail metadata for one post type (collection), sourced from the public
+ * `GET /collections` introspection endpoint. Read-only by design: collection
+ * schemas are file-defined in `actuate.config.ts`, so the Post Type editor
+ * inspects the live schema and generates config snippets for changes.
+ */
+export interface PostTypeFieldSummary {
+  name: string
+  type: string
+  required: boolean
+  relationTo?: string | string[]
+  options?: unknown[]
+}
+
+export interface PostTypeDetail {
+  slug: string
+  singular: string
+  plural: string
+  description: string | null
+  urlPrefix: string
+  icon: string | null
+  color: string | null
+  fields: PostTypeFieldSummary[]
+}
+
+interface CollectionDetailRow {
+  slug: string
+  labels: { singular: string; plural: string }
+  type: string
+  urlPrefix: string
+  description: string | null
+  icon: string | null
+  color: string | null
+  hidden: boolean
+  fields: PostTypeFieldSummary[]
+}
+
+export async function fetchPostTypeDetail(slug: string): Promise<PostTypeDetail | null> {
+  const res = await cmsApi<CollectionDetailRow[]>('/collections')
+  if (res.error || !res.data) {
+    throw new Error(res.error ?? 'Failed to load collections')
+  }
+  const row = res.data.find((c) => c.slug === slug)
+  if (!row) return null
+  return {
+    slug: row.slug,
+    singular: row.labels?.singular ?? slug,
+    plural: row.labels?.plural ?? slug,
+    description: row.description ?? null,
+    urlPrefix: row.urlPrefix || slug,
+    icon: row.icon ?? null,
+    color: row.color ?? null,
+    fields: Array.isArray(row.fields) ? row.fields : [],
+  }
+}
+
+/** Friendly display names for cms-core field types (design's type badges). */
+export const FIELD_TYPE_LABELS: Record<string, string> = {
+  text: 'Short Text',
+  richText: 'Rich Text',
+  number: 'Number',
+  boolean: 'Boolean',
+  date: 'Date',
+  slug: 'Slug',
+  select: 'Select',
+  relationship: 'Relation',
+  media: 'Media',
+  json: 'JSON',
+  color: 'Color',
+  url: 'URL',
+  email: 'Email',
+  array: 'List',
+  blocks: 'Blocks',
+}
+
+export function fieldTypeLabel(type: string): string {
+  return FIELD_TYPE_LABELS[type] ?? type
+}
+
+/** "clientName" / "client_name" → "Client Name" for display. */
+export function humanizeFieldName(name: string): string {
+  return name
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+/** "Client Name" → "clientName" for generated field keys. */
+export function fieldKeyFromName(name: string): string {
+  const words = name
+    .replace(/[^a-zA-Z0-9]+/g, ' ')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+  if (words.length === 0) return ''
+  return words
+    .map((w, i) => (i === 0 ? w.toLowerCase() : w[0]!.toUpperCase() + w.slice(1).toLowerCase()))
+    .join('')
+}
+
+export interface FieldSnippetInput {
+  key: string
+  label: string
+  type: string
+  required: boolean
+  helpText?: string
+}
+
+/**
+ * Paste-ready field entry for the collection's `fields` map in
+ * `actuate.config.ts` — same escape rules as the New Post Type snippet.
+ */
+export function renderFieldSnippet(input: FieldSnippetInput): string {
+  const esc = (s: string) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+  const parts = [`type: '${input.type}'`, `label: '${esc(input.label)}'`]
+  if (input.required) parts.push('required: true')
+  if (input.helpText?.trim()) parts.push(`admin: { description: '${esc(input.helpText.trim())}' }`)
+  if (input.type === 'select') {
+    parts.push(`options: [{ label: 'Option A', value: 'option-a' }]`)
+  }
+  if (input.type === 'relationship') {
+    parts.push(`relationTo: 'posts'`)
+  }
+  return `${input.key}: { ${parts.join(', ')} },`
+}

package/src/views/CollectionList.tsx

@@ -15,6 +15,8 @@ import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc, newPathForCollection } from '../lib/collection-routes.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
+import { EntryDetailPane } from '../components/collections/EntryDetailPane.js'
 
 export interface CollectionListProps {
   collectionSlug: string
@@ -164,6 +166,8 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   const [sort, setSort] = useState<SortField | null>(null)
   const [order, setOrder] = useState<SortOrder>('asc')
   const [selected, setSelected] = useState<Set<string>>(new Set())
+  // Row selected into the inline detail pane (design Entries split-pane).
+  const [detailId, setDetailId] = useState<string | null>(null)
   const [filters, setFilters] = useState<Record<string, string>>({})
   // In-use values per `values`-sourced facet, fetched once per collection.
   const [facetValues, setFacetValues] = useState<Record<string, string[]>>({})
@@ -196,6 +200,7 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   useEffect(() => {
     setPage(1)
     setSelected(new Set())
+    setDetailId(null)
     setSearch('')
     setFilters({})
     setFacetValues({})
@@ -242,6 +247,12 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     })
   }, [])
 
+  const detailDoc = useMemo(
+    () => (detailId ? (docs.find((d: any) => String(d.id) === detailId) ?? null) : null),
+    [docs, detailId],
+  )
+  const toggleDetail = (id: string) => setDetailId((prev) => (prev === id ? null : id))
+
   const toggleSelect = (id: string) =>
     setSelected((prev) => {
       const s = new Set(prev)
@@ -454,120 +465,157 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
           </button>
         </div>
       ) : (
-        <div
-          className="flex-1 overflow-auto rounded-lg border"
-          style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
-        >
-          <table className="w-full text-sm">
-            <thead
-              className="sticky top-0"
-              style={{
-                background: 'var(--actuate-surface-alt, #f9fafb)',
-                borderBottom: '1px solid var(--actuate-border, #d1d5db)',
-              }}
+        <SplitPaneLayout>
+          <SplitPaneList>
+            <div
+              className="h-full overflow-auto rounded-lg border"
+              style={{ borderColor: 'var(--actuate-border, #d1d5db)' }}
             >
-              <tr>
-                <th className="w-10 px-3 py-2 text-left">
-                  <input
-                    type="checkbox"
-                    checked={selected.size === docs.length && docs.length > 0}
-                    onChange={(e) => toggleAll(e.target.checked)}
-                    className="rounded"
-                  />
-                </th>
-                <th className="px-3 py-2 text-left">
-                  <SortCol field="title">Title</SortCol>
-                </th>
-                {facets.map((facet) => (
-                  <th
-                    key={facet.name}
-                    className="px-3 py-2 text-left text-xs font-medium"
-                    style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
-                  >
-                    {facet.label}
-                  </th>
-                ))}
-                <th className="px-3 py-2 text-left">
-                  <SortCol field="status">Status</SortCol>
-                </th>
-                <th className="px-3 py-2 text-left">
-                  <SortCol field="updatedAt">Updated</SortCol>
-                </th>
-                <th
-                  className="px-3 py-2 text-left text-xs font-medium"
-                  style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+              <table className="w-full text-sm">
+                <thead
+                  className="sticky top-0"
+                  style={{
+                    background: 'var(--actuate-surface-alt, #f9fafb)',
+                    borderBottom: '1px solid var(--actuate-border, #d1d5db)',
+                  }}
                 >
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {docs.map((doc: any) => (
-                <tr
-                  key={doc.id}
-                  className="transition-colors hover:opacity-95"
-                  style={{ borderBottom: '1px solid var(--actuate-border, #e5e7eb)' }}
-                >
-                  <td className="px-3 py-2">
-                    <input
-                      type="checkbox"
-                      checked={selected.has(String(doc.id))}
-                      onChange={() => toggleSelect(String(doc.id))}
-                      className="rounded"
-                    />
-                  </td>
-                  <td className="px-3 py-2">
-                    <button
-                      type="button"
-                      onClick={() => onNavigate(editPath(doc.id))}
-                      className="text-left font-medium hover:underline"
-                      style={{ color: 'var(--actuate-text, #111827)' }}
-                    >
-                      {doc.title || doc.name || `#${doc.id}`}
-                    </button>
-                  </td>
-                  {facets.map((facet) => (
-                    <td
-                      key={facet.name}
-                      className="max-w-[200px] truncate px-3 py-2"
+                  <tr>
+                    <th className="w-10 px-3 py-2 text-left">
+                      <input
+                        type="checkbox"
+                        checked={selected.size === docs.length && docs.length > 0}
+                        onChange={(e) => toggleAll(e.target.checked)}
+                        className="rounded"
+                      />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortCol field="title">Title</SortCol>
+                    </th>
+                    {facets.map((facet) => (
+                      <th
+                        key={facet.name}
+                        className="px-3 py-2 text-left text-xs font-medium"
+                        style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                      >
+                        {facet.label}
+                      </th>
+                    ))}
+                    <th className="px-3 py-2 text-left">
+                      <SortCol field="status">Status</SortCol>
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortCol field="updatedAt">Updated</SortCol>
+                    </th>
+                    <th
+                      className="px-3 py-2 text-left text-xs font-medium"
                       style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
-                      title={facetCellValue(doc, facet) || undefined}
-                    >
-                      {facetCellValue(doc, facet) || '—'}
-                    </td>
-                  ))}
-                  <td className="px-3 py-2">
-                    <span
-                      className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"
-                      style={{ background: statusColor(doc.status), color: statusText(doc.status) }}
                     >
-                      {doc.status ?? 'DRAFT'}
-                    </span>
-                  </td>
-                  <td
-                    className="px-3 py-2"
-                    style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
-                  >
-                    {formatDate(doc.updatedAt)}
-                  </td>
-                  <td className="px-3 py-2">
-                    <button
-                      type="button"
-                      onClick={() => onNavigate(editPath(doc.id))}
-                      className="rounded p-1.5 transition-opacity hover:opacity-75"
-                      title="Edit"
-                    >
-                      <MoreHorizontal
-                        className="h-4 w-4"
-                        style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
-                      />
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {docs.map((doc: any) => {
+                    const isDetail = detailId === String(doc.id)
+                    return (
+                      <tr
+                        key={doc.id}
+                        className={`cursor-pointer transition-colors ${isDetail ? 'bg-[var(--acc-l)]' : 'hover:opacity-95'}`}
+                        style={{ borderBottom: '1px solid var(--actuate-border, #e5e7eb)' }}
+                        onClick={() => toggleDetail(String(doc.id))}
+                        onDoubleClick={() => onNavigate(editPath(doc.id))}
+                      >
+                        <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
+                          <input
+                            type="checkbox"
+                            checked={selected.has(String(doc.id))}
+                            onChange={() => toggleSelect(String(doc.id))}
+                            className="rounded"
+                          />
+                        </td>
+                        <td className="px-3 py-2">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              toggleDetail(String(doc.id))
+                            }}
+                            aria-expanded={isDetail}
+                            className="text-left font-medium hover:underline"
+                            style={{ color: 'var(--actuate-text, #111827)' }}
+                          >
+                            {doc.title || doc.name || `#${doc.id}`}
+                          </button>
+                        </td>
+                        {facets.map((facet) => (
+                          <td
+                            key={facet.name}
+                            className="max-w-[200px] truncate px-3 py-2"
+                            style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                            title={facetCellValue(doc, facet) || undefined}
+                          >
+                            {facetCellValue(doc, facet) || '—'}
+                          </td>
+                        ))}
+                        <td className="px-3 py-2">
+                          <span
+                            className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"
+                            style={{
+                              background: statusColor(doc.status),
+                              color: statusText(doc.status),
+                            }}
+                          >
+                            {doc.status ?? 'DRAFT'}
+                          </span>
+                        </td>
+                        <td
+                          className="px-3 py-2"
+                          style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                        >
+                          {formatDate(doc.updatedAt)}
+                        </td>
+                        <td className="px-3 py-2">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onNavigate(editPath(doc.id))
+                            }}
+                            className="rounded p-1.5 transition-opacity hover:opacity-75"
+                            title="Edit"
+                            aria-label={`Edit ${doc.title || doc.name || `#${doc.id}`}`}
+                          >
+                            <MoreHorizontal
+                              className="h-4 w-4"
+                              style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                            />
+                          </button>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </SplitPaneList>
+
+          <InspectorPane
+            open={detailDoc !== null}
+            width={400}
+            aria-label={`${labels.singular} details`}
+          >
+            {detailDoc && (
+              <EntryDetailPane
+                key={String(detailDoc.id)}
+                doc={detailDoc}
+                collection={collectionDef}
+                singularLabel={labels.singular}
+                onClose={() => setDetailId(null)}
+                onOpenEditor={() => onNavigate(editPath(detailDoc.id))}
+              />
+            )}
+          </InspectorPane>
+        </SplitPaneLayout>
       )}
 
       {/* Pagination */}