@actuate-media/cms-admin 0.67.0 → 0.68.0

package/src/views/Forms.tsx

@@ -5,7 +5,8 @@
  * Forms list screenshot: summary chips, search + status filter pills, and a
  * compact table (Form / Fields / Status / Entries / Last Entry / Notify /
  * Schema). All data flows through `lib/forms-service.ts`; the Schema action
- * opens the right-side `FormSchemaDrawer`.
+ * opens the inline `FormSchemaPane` beside the table (design's 390px schema
+ * panel — previously an overlay drawer).
  */
 import { ChevronRight, ClipboardList, Plus, Search, Settings2 } from 'lucide-react'
 import { Toggle } from '../components/ui/Toggle.js'
@@ -21,7 +22,8 @@ import {
   type FormStatus,
 } from '../lib/forms-service.js'
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
-import { FormSchemaDrawer } from '../components/forms/FormSchemaDrawer.js'
+import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
+import { FormSchemaPane } from '../components/forms/FormSchemaPane.js'
 import {
   FieldTypeBadge,
   FormStatusBadge,
@@ -76,8 +78,9 @@ export function Forms({ onNavigate }: FormsProps) {
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<StatusFilter>('all')
   const [page, setPage] = useState(1)
-  const [schemaForm, setSchemaForm] = useState<FormListItem | null>(null)
-  const [schemaOpen, setSchemaOpen] = useState(false)
+  // Form whose schema pane is open. Derived against `forms` so a list refetch
+  // (e.g. after saving) keeps the pane's header data fresh.
+  const [schemaFormId, setSchemaFormId] = useState<string | null>(null)
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -137,9 +140,13 @@ export function Forms({ onNavigate }: FormsProps) {
     [filtered, page],
   )
 
-  const openSchema = useCallback((form: FormListItem) => {
-    setSchemaForm(form)
-    setSchemaOpen(true)
+  const schemaForm = useMemo(
+    () => (schemaFormId ? (forms.find((f) => f.id === schemaFormId) ?? null) : null),
+    [forms, schemaFormId],
+  )
+
+  const toggleSchema = useCallback((form: FormListItem) => {
+    setSchemaFormId((prev) => (prev === form.id ? null : form.id))
   }, [])
 
   const handleNotifyToggle = useCallback(async (form: FormListItem, next: boolean) => {
@@ -155,139 +162,154 @@ export function Forms({ onNavigate }: FormsProps) {
   }, [])
 
   return (
-    <div className="space-y-5 p-6">
-      <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h1 className="text-foreground">Forms</h1>
-          <p className="text-muted-foreground mt-1 text-sm">
-            Manage forms and view incoming submissions
-          </p>
-        </div>
-        <button className={btnPrimary} onClick={() => onNavigate?.('/forms/new')}>
-          <Plus className="h-4 w-4" aria-hidden />
-          New Form
-        </button>
-      </header>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="space-y-5 p-6 pb-4">
+        <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <h1 className="text-foreground">Forms</h1>
+            <p className="text-muted-foreground mt-1 text-sm">
+              Manage forms and view incoming submissions
+            </p>
+          </div>
+          <button className={btnPrimary} onClick={() => onNavigate?.('/forms/new')}>
+            <Plus className="h-4 w-4" aria-hidden />
+            New Form
+          </button>
+        </header>
 
-      {stats && (
-        <div className="flex flex-wrap gap-2">
-          <SummaryChip value={stats.totalForms} label={stats.totalForms === 1 ? 'form' : 'forms'} />
-          <SummaryChip value={stats.activeForms} label="active" tone="success" />
-          <SummaryChip value={stats.totalEntries} label="total entries" />
-          <SummaryChip
-            value={stats.unreadEntries}
-            label="unread"
-            tone={stats.unreadEntries > 0 ? 'destructive' : 'neutral'}
-          />
-        </div>
-      )}
+        {stats && (
+          <div className="flex flex-wrap gap-2">
+            <SummaryChip
+              value={stats.totalForms}
+              label={stats.totalForms === 1 ? 'form' : 'forms'}
+            />
+            <SummaryChip value={stats.activeForms} label="active" tone="success" />
+            <SummaryChip value={stats.totalEntries} label="total entries" />
+            <SummaryChip
+              value={stats.unreadEntries}
+              label="unread"
+              tone={stats.unreadEntries > 0 ? 'destructive' : 'neutral'}
+            />
+          </div>
+        )}
 
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="relative w-full sm:max-w-xs">
-          <Search
-            className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-            aria-hidden
-          />
-          <input
-            type="search"
-            placeholder="Search forms…"
-            value={search}
-            onChange={(e) => {
-              setSearch(e.target.value)
-              setPage(1)
-            }}
-            aria-label="Search forms"
-            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus-visible:ring-2 focus-visible:outline-none"
-          />
-        </div>
-        <div className="flex gap-1" role="group" aria-label="Filter by status">
-          {FILTERS.map((f) => (
-            <button
-              key={f.id}
-              type="button"
-              onClick={() => {
-                setFilter(f.id)
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="relative w-full sm:max-w-xs">
+            <Search
+              className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+              aria-hidden
+            />
+            <input
+              type="search"
+              placeholder="Search forms…"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value)
                 setPage(1)
               }}
-              aria-pressed={filter === f.id}
-              className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
-                filter === f.id
-                  ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-              }`}
-            >
-              {f.label}
-            </button>
-          ))}
+              aria-label="Search forms"
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+          </div>
+          <div className="flex gap-1" role="group" aria-label="Filter by status">
+            {FILTERS.map((f) => (
+              <button
+                key={f.id}
+                type="button"
+                onClick={() => {
+                  setFilter(f.id)
+                  setPage(1)
+                }}
+                aria-pressed={filter === f.id}
+                className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                  filter === f.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 
-      {error ? (
-        <FormsErrorState message={error} onRetry={load} />
-      ) : loading ? (
-        <FormsLoading label="Loading forms…" />
-      ) : forms.length === 0 ? (
-        <FormsEmptyState
-          icon={<ClipboardList className="h-6 w-6" aria-hidden />}
-          title="No forms yet"
-          description="Create your first form to start collecting submissions."
-          action={
-            <button className={btnPrimary} onClick={() => onNavigate?.('/forms/new')}>
-              <Plus className="h-4 w-4" aria-hidden />
-              Create New Form
-            </button>
-          }
-        />
-      ) : filtered.length === 0 ? (
-        <FormsEmptyState
-          title="No forms match your filters"
-          description="Try a different search term or status filter."
-          action={
-            <button
-              type="button"
-              onClick={() => {
-                setSearch('')
-                setFilter('all')
-                setPage(1)
-              }}
-              className="text-primary text-sm font-medium hover:underline"
-            >
-              Clear filters
-            </button>
-          }
-        />
-      ) : (
-        <FormsTable
-          forms={paged}
-          onOpenForm={(id) => onNavigate?.(`/forms/${id}/edit`)}
-          onOpenEntries={(id) => onNavigate?.(`/forms/${id}/submissions`)}
-          onOpenSchema={openSchema}
-          onNotifyToggle={handleNotifyToggle}
-          footer={
-            <FormsPagination
-              page={page}
-              pageSize={PAGE_SIZE}
-              total={filtered.length}
-              onPageChange={setPage}
-              noun="form"
-              label="Forms pagination"
+      <SplitPaneLayout>
+        <SplitPaneList className="px-6 pb-6">
+          {error ? (
+            <FormsErrorState message={error} onRetry={load} />
+          ) : loading ? (
+            <FormsLoading label="Loading forms…" />
+          ) : forms.length === 0 ? (
+            <FormsEmptyState
+              icon={<ClipboardList className="h-6 w-6" aria-hidden />}
+              title="No forms yet"
+              description="Create your first form to start collecting submissions."
+              action={
+                <button className={btnPrimary} onClick={() => onNavigate?.('/forms/new')}>
+                  <Plus className="h-4 w-4" aria-hidden />
+                  Create New Form
+                </button>
+              }
             />
-          }
-        />
-      )}
+          ) : filtered.length === 0 ? (
+            <FormsEmptyState
+              title="No forms match your filters"
+              description="Try a different search term or status filter."
+              action={
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearch('')
+                    setFilter('all')
+                    setPage(1)
+                  }}
+                  className="text-primary text-sm font-medium hover:underline"
+                >
+                  Clear filters
+                </button>
+              }
+            />
+          ) : (
+            <FormsTable
+              forms={paged}
+              selectedId={schemaFormId}
+              onOpenForm={(id) => onNavigate?.(`/forms/${id}/edit`)}
+              onOpenEntries={(id) => onNavigate?.(`/forms/${id}/submissions`)}
+              onOpenSchema={toggleSchema}
+              onNotifyToggle={handleNotifyToggle}
+              footer={
+                <FormsPagination
+                  page={page}
+                  pageSize={PAGE_SIZE}
+                  total={filtered.length}
+                  onPageChange={setPage}
+                  noun="form"
+                  label="Forms pagination"
+                />
+              }
+            />
+          )}
+        </SplitPaneList>
 
-      <FormSchemaDrawer
-        form={schemaForm}
-        open={schemaOpen}
-        onOpenChange={setSchemaOpen}
-        onSaved={load}
-      />
+        <InspectorPane open={schemaForm !== null} width={390} aria-label="Form schema">
+          {schemaForm && (
+            <FormSchemaPane
+              key={schemaForm.id}
+              form={schemaForm}
+              onClose={() => setSchemaFormId(null)}
+              onSaved={load}
+            />
+          )}
+        </InspectorPane>
+      </SplitPaneLayout>
     </div>
   )
 }
 
 function FormsTable({
   forms,
+  selectedId,
   onOpenForm,
   onOpenEntries,
   onOpenSchema,
@@ -295,6 +317,8 @@ function FormsTable({
   footer,
 }: {
   forms: FormListItem[]
+  /** Form whose schema pane is currently open (row highlight). */
+  selectedId: string | null
   onOpenForm: (id: string) => void
   onOpenEntries: (id: string) => void
   onOpenSchema: (form: FormListItem) => void
@@ -335,10 +359,13 @@ function FormsTable({
               const fieldCount = form.fieldCount ?? form.fields.length
               const unread = form.unreadEntries ?? 0
               const muted = form.status === 'archived'
+              const isSelected = form.id === selectedId
               return (
                 <tr
                   key={form.id}
-                  className={`border-border hover:bg-accent/40 border-b transition-colors last:border-b-0 ${muted ? 'opacity-60' : ''}`}
+                  className={`border-border border-b transition-colors last:border-b-0 ${
+                    isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-accent/40'
+                  } ${muted ? 'opacity-60' : ''}`}
                 >
                   <td className="px-4 py-3">
                     <button
@@ -393,6 +420,7 @@ function FormsTable({
                     <button
                       type="button"
                       onClick={() => onOpenSchema(form)}
+                      aria-expanded={isSelected}
                       className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
                     >
                       <Settings2 className="h-3.5 w-3.5" aria-hidden />