@actuate-media/cms-admin 0.66.0 → 0.68.0

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 */}