@prenta/admin 2.6.1 → 2.8.0

package/src/views/Forms.tsx

@@ -23,6 +23,13 @@ import {
 } from '../lib/forms-service.js'
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
+import {
+  cardCell,
+  cardColumnHeader,
+  cardRow,
+  cardRowGroup,
+  cardTable,
+} from '../components/ui/card-table.js'
 import { FormSchemaPane } from '../components/forms/FormSchemaPane.js'
 import {
   FieldTypeBadge,
@@ -31,10 +38,10 @@ import {
   FormsErrorState,
   FormsLoading,
   FormsPagination,
-  SummaryChip,
   UnreadBadge,
   btnPrimary,
 } from '../components/forms/primitives.js'
+import { CountChip } from '../components/ui/CountChip.js'
 
 const PAGE_SIZE = 10
 
@@ -171,24 +178,30 @@ export function Forms({ onNavigate }: FormsProps) {
               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>
+          {/* Below 769px the create action floats above the tab bar. */}
+          <div data-header-actions="" className="flex items-center gap-2">
+            <button
+              type="button"
+              className={btnPrimary}
+              onClick={() => onNavigate?.('/forms/new')}
+              data-variant="primary"
+              data-fab=""
+            >
+              <Plus className="h-4 w-4" aria-hidden />
+              New Form
+            </button>
+          </div>
         </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}
+          <div className="flex flex-wrap gap-1.5">
+            <CountChip n={stats.totalForms} label={stats.totalForms === 1 ? 'form' : 'forms'} />
+            <CountChip n={stats.activeForms} label="active" tone="ok" />
+            <CountChip n={stats.totalEntries} label="total entries" />
+            <CountChip
+              n={stats.unreadEntries}
               label="unread"
-              tone={stats.unreadEntries > 0 ? 'destructive' : 'neutral'}
+              tone={stats.unreadEntries > 0 ? 'bad' : undefined}
             />
           </div>
         )}
@@ -326,35 +339,38 @@ function FormsTable({
   footer?: ReactNode
 }) {
   return (
-    <div className="flex min-h-0 flex-col overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
+    <div className="mobile:rounded-none mobile:border-0 mobile:bg-transparent flex min-h-0 flex-col overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
       <div className="min-h-0 flex-1 overflow-auto">
-        <table className="w-full min-w-[760px] text-sm" aria-label="Forms">
-          <thead>
-            <tr className="border-b border-[var(--bdr)] text-left text-xs text-[var(--sub)]">
-              <th scope="col" className="px-4 py-2.5 font-medium">
+        <table {...cardTable} className="w-full min-w-[760px] text-sm" aria-label="Forms">
+          <thead {...cardRowGroup}>
+            <tr
+              {...cardRow}
+              className="border-b border-[var(--bdr)] text-left text-xs text-[var(--sub)]"
+            >
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 font-medium">
                 Form
               </th>
-              <th scope="col" className="px-4 py-2.5 font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 font-medium">
                 Fields
               </th>
-              <th scope="col" className="px-4 py-2.5 font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 font-medium">
                 Status
               </th>
-              <th scope="col" className="px-4 py-2.5 font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 font-medium">
                 Entries
               </th>
-              <th scope="col" className="px-4 py-2.5 font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 font-medium">
                 Last Entry
               </th>
-              <th scope="col" className="px-4 py-2.5 text-center font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 text-center font-medium">
                 Notify
               </th>
-              <th scope="col" className="px-4 py-2.5 text-right font-medium">
+              <th {...cardColumnHeader} scope="col" className="px-4 py-2.5 text-right font-medium">
                 <span className="sr-only">Schema</span>
               </th>
             </tr>
           </thead>
-          <tbody>
+          <tbody {...cardRowGroup}>
             {forms.map((form) => {
               const fieldCount = form.fieldCount ?? form.fields.length
               const unread = form.unreadEntries ?? 0
@@ -363,11 +379,13 @@ function FormsTable({
               return (
                 <tr
                   key={form.id}
+                  {...cardRow}
+                  data-state={isSelected ? 'selected' : undefined}
                   className={`border-b border-[var(--bdr)] transition-colors last:border-b-0 ${
                     isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                   } ${muted ? 'opacity-60' : ''}`}
                 >
-                  <td className="px-4 py-3">
+                  <td {...cardCell({ role: 'title' })} className="px-4 py-3">
                     <button
                       type="button"
                       onClick={() => onOpenForm(form.id)}
@@ -382,7 +400,7 @@ function FormsTable({
                       </span>
                     </button>
                   </td>
-                  <td className="px-4 py-3">
+                  <td {...cardCell({ label: 'Fields' })} className="px-4 py-3">
                     <div className="flex flex-wrap items-center gap-1">
                       {form.fields.slice(0, 4).map((field) => (
                         <FieldTypeBadge key={field.id} type={field.type} />
@@ -390,10 +408,10 @@ function FormsTable({
                       <span className="text-xs text-[var(--sub)]">{fieldCount} fields</span>
                     </div>
                   </td>
-                  <td className="px-4 py-3">
+                  <td {...cardCell({ label: 'Status' })} className="px-4 py-3">
                     <FormStatusBadge status={form.status} />
                   </td>
-                  <td className="px-4 py-3">
+                  <td {...cardCell({ label: 'Entries' })} className="px-4 py-3">
                     <button
                       type="button"
                       onClick={() => onOpenEntries(form.id)}
@@ -405,10 +423,13 @@ function FormsTable({
                       <ChevronRight className="h-3.5 w-3.5 text-[var(--sub)]" aria-hidden />
                     </button>
                   </td>
-                  <td className="px-4 py-3 whitespace-nowrap text-[var(--sub)]">
+                  <td
+                    {...cardCell({ label: 'Last Entry' })}
+                    className="px-4 py-3 whitespace-nowrap text-[var(--sub)]"
+                  >
                     {formatRelative(form.lastEntryAt)}
                   </td>
-                  <td className="px-4 py-3 text-center">
+                  <td {...cardCell({ label: 'Notify' })} className="px-4 py-3 text-center">
                     <Toggle
                       checked={form.notifyEnabled ?? false}
                       onCheckedChange={(v) => onNotifyToggle(form, v)}
@@ -416,7 +437,7 @@ function FormsTable({
                       variant="enabled"
                     />
                   </td>
-                  <td className="px-4 py-3 text-right">
+                  <td {...cardCell({ role: 'actions' })} className="px-4 py-3 text-right">
                     <button
                       type="button"
                       onClick={() => onOpenSchema(form)}

package/src/views/FormsSettings.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  DEFAULT_ATTRIBUTION_WINDOWS,
+  validateAttributionWindows,
+  type AttributionWindows,
+} from '@prenta/core/forms/attribution-settings'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { UnderlineTabs } from '../components/ui/UnderlineTabs.js'
+import { UnsavedBar } from '../components/ui/UnsavedBar.js'
+
+const TABS = [
+  { id: 'spam', label: 'Spam protection' },
+  { id: 'defaults', label: 'Defaults' },
+  { id: 'retention', label: 'Retention' },
+  { id: 'attribution', label: 'Attribution' },
+  { id: 'email', label: 'Email delivery' },
+]
+
+export function FormsSettings() {
+  const [tab, setTab] = useState('attribution')
+  const [saved, setSaved] = useState<AttributionWindows>(DEFAULT_ATTRIBUTION_WINDOWS)
+  const [draft, setDraft] = useState<AttributionWindows>(DEFAULT_ATTRIBUTION_WINDOWS)
+  const [message, setMessage] = useState<string | null>(null)
+  const dirty = JSON.stringify(draft) !== JSON.stringify(saved)
+  const validation = validateAttributionWindows(draft)
+
+  function save() {
+    if (!validation.ok) {
+      setMessage(validation.message)
+      return
+    }
+    setSaved(draft)
+    setMessage('Saved')
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <PageHeader
+        flush
+        title="Form Settings"
+        subtitle="Site-wide defaults for every form."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: 'Forms', path: '/forms' },
+              { label: 'Form Settings' },
+            ]}
+          />
+        }
+      />
+      <UnderlineTabs tabs={TABS} value={tab} onChange={setTab} label="Form settings" />
+      {tab === 'attribution' ? (
+        <div className="flex max-w-md flex-col gap-4">
+          <label className="flex flex-col gap-1 text-base">
+            First touch (days)
+            <input
+              type="number"
+              value={draft.firstTouchDays}
+              onChange={(event) =>
+                setDraft({ ...draft, firstTouchDays: Number(event.target.value) })
+              }
+              className="border-border rounded-md border px-3 py-2"
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-base">
+            Last touch (hours)
+            <input
+              type="number"
+              value={draft.lastTouchHours}
+              onChange={(event) =>
+                setDraft({ ...draft, lastTouchHours: Number(event.target.value) })
+              }
+              className="border-border rounded-md border px-3 py-2"
+            />
+          </label>
+          {!validation.ok ? <p className="text-destructive text-sm">{validation.message}</p> : null}
+          {message ? <p className="text-muted-foreground text-sm">{message}</p> : null}
+        </div>
+      ) : (
+        <p className="text-muted-foreground text-base">Settings for {tab}.</p>
+      )}
+      <UnsavedBar
+        dirty={dirty}
+        onDiscard={() => setDraft(saved)}
+        onSave={save}
+        label="Unsaved changes"
+      />
+    </div>
+  )
+}

package/src/views/Jobs/BusyButton.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { forwardRef, type MouseEvent } from 'react'
+import { Button, type ButtonProps } from '../../components/ui/Button.js'
+
+export interface BusyButtonProps extends Omit<ButtonProps, 'loading'> {
+  /** A request this button started is out. */
+  busy?: boolean
+}
+
+/**
+ * A Button that stays focusable while its request runs. `Button`'s `loading`
+ * sets `disabled`, and Chromium moves focus from a focused button to the
+ * body the moment it's disabled, and doesn't put it back. So while busy this
+ * one is `aria-disabled` and `aria-busy`, ignores clicks, and shows the
+ * spinner in place of its icon (an icon-only button keeps one icon). It
+ * forwards its ref, so it can be a menu's trigger.
+ */
+export const BusyButton = forwardRef<HTMLButtonElement, BusyButtonProps>(function BusyButton(
+  { busy = false, leftIcon, onClick, className = '', ...rest },
+  ref,
+) {
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      aria-disabled={busy || rest['aria-disabled'] || undefined}
+      aria-busy={busy || undefined}
+      leftIcon={busy ? <Spinner /> : leftIcon}
+      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+        if (busy) {
+          event.preventDefault()
+          return
+        }
+        onClick?.(event)
+      }}
+      className={`aria-disabled:pointer-events-none aria-disabled:opacity-50 ${className}`}
+    />
+  )
+})
+
+/** The spinner `Button` shows while loading. */
+function Spinner() {
+  return (
+    <svg
+      className="h-3.5 w-3.5 shrink-0 motion-safe:animate-spin"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      data-testid="busy-spinner"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+    </svg>
+  )
+}

package/src/views/Jobs/CancelJobDialog.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { Button } from '../../components/ui/Button.js'
+import { jobType, type JobRow } from '../../lib/job-view.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+import { BusyButton } from './BusyButton.js'
+import { useReturnFocus } from './focus.js'
+import { JobIcons } from './icons.js'
+
+/** A running job whose worker stopped mid-slice: the next tick, not this slice, ends it. */
+export function staleRunning(j: JobRow): boolean {
+  return j.status === 'running' && j.state !== 'running'
+}
+
+/**
+ * jobs-view.jsx `CancelDlg` copy: what stops, and what happens to the work
+ * done so far. A stale lock gets its own first sentence: the server only flags
+ * a running job, and the next worker run finishes the cancel.
+ */
+function cancelCopy(j: JobRow): string {
+  let first: string
+  if (j.state === 'running')
+    first =
+      'It’s in the middle of a slice. It will stop when that slice finishes, usually within 20 seconds.'
+  else if (staleRunning(j))
+    first =
+      'Its last slice stopped without finishing. It stops on the next worker run, within a minute.'
+  else first = 'It hasn’t started its next slice, so it stops right away.'
+  let second: string
+  if (j.type === 'batch-ai') {
+    second =
+      j.review === 'review'
+        ? `The ${j.done} changes already made stay in review. Nothing is applied unless you approve it.`
+        : `The ${j.done} documents already changed keep their changes. You can undo them from each document’s history.`
+  } else {
+    second = `Progress so far is kept. The next ${jobType(j.type).who.toLowerCase()} run starts fresh.`
+  }
+  return `${first} ${second}`
+}
+
+export interface CancelJobDialogProps {
+  /** The job to cancel; null keeps the dialog closed. */
+  job: JobRow | null
+  onClose: () => void
+  /** Resolves once the request is answered; the dialog then closes. */
+  onConfirm: (job: JobRow) => Promise<void>
+  /**
+   * Where focus goes on close when the button that opened the dialog is gone,
+   * as it is once a cancel goes through, or never had focus.
+   */
+  onFocusFallback: () => void
+  /**
+   * The dialog has gone and focus is back. A cancel's outcome is reported
+   * from here: while the dialog is open, screen readers are kept inside it.
+   */
+  onClosed?: () => void
+}
+
+/**
+ * The cancel confirmation (jobs-view.jsx `CancelDlg`, JOBS.md "Cancel
+ * dialog"): 460px, radius 14, padding 20. Radix traps focus and closes on Esc.
+ * It opens from a row or over the drawer; Esc and the backdrop close only it.
+ */
+export function CancelJobDialog({
+  job,
+  onClose,
+  onConfirm,
+  onFocusFallback,
+  onClosed,
+}: CancelJobDialogProps) {
+  const [busy, setBusy] = useState(false)
+  /** Set before the first await, so a second click can't post a second cancel. */
+  const sending = useRef(false)
+  const returnFocus = useReturnFocus(onFocusFallback)
+
+  return (
+    <Dialog.Root
+      open={job !== null}
+      onOpenChange={(open) => {
+        if (!open && !busy) onClose()
+      }}
+    >
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="bg-scrim fixed inset-0 z-[var(--z-modal)]" />
+        <Dialog.Content
+          {...returnFocus}
+          onCloseAutoFocus={(event) => {
+            returnFocus.onCloseAutoFocus(event)
+            onClosed?.()
+          }}
+          // Radix makes the rest of the page inert but doesn't say so on the dialog.
+          aria-modal="true"
+          className="bg-card border-bdr rounded-14 shadow-shd2 fixed top-1/2 left-1/2 z-[var(--z-modal)] flex w-[min(460px,calc(100%-32px))] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 border p-5 leading-[normal]"
+        >
+          {job ? (
+            <>
+              <Dialog.Title className="text-txt m-0 text-[length:var(--fs-drawer)] leading-[normal] font-bold">
+                Cancel “{job.title}”?
+              </Dialog.Title>
+              <Dialog.Description className="text-body text-sub m-0 leading-[1.55] text-pretty">
+                {cancelCopy(job)}
+              </Dialog.Description>
+              <div className="mt-1 flex justify-end gap-2">
+                {/* aria-disabled, not disabled: see BusyButton. */}
+                <Dialog.Close asChild>
+                  <Button
+                    variant="secondary"
+                    aria-disabled={busy || undefined}
+                    className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
+                    onClick={(event) => {
+                      if (busy) event.preventDefault()
+                    }}
+                  >
+                    Keep running
+                  </Button>
+                </Dialog.Close>
+                <BusyButton
+                  variant="danger"
+                  busy={busy}
+                  leftIcon={<JobIcons.stop size={12} />}
+                  onClick={async () => {
+                    if (sending.current) return
+                    sending.current = true
+                    setBusy(true)
+                    try {
+                      await onConfirm(job)
+                    } finally {
+                      sending.current = false
+                      setBusy(false)
+                    }
+                    onClose()
+                  }}
+                >
+                  Cancel job
+                </BusyButton>
+              </div>
+            </>
+          ) : null}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/views/Jobs/DrawerActivity.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { Fragment, useRef, useState } from 'react'
+import type { Job } from '@prenta/core'
+import {
+  foldIds,
+  formatEventTime,
+  timeline,
+  type FoldMemory,
+  type TimelineEntry,
+  type TimelineTone,
+} from '../../lib/job-drawer.js'
+import type { JobRow } from '../../lib/job-view.js'
+import type { JobEventsState } from './useJobDetail.js'
+
+/** The events endpoint returns at most this many. */
+const EVENTS_SHOWN = 50
+
+/** `.jd-tl i` per tone. */
+const NODE_CLASS: Record<TimelineTone, string> = {
+  ok: 'border-suc bg-suc-l',
+  err: 'border-err bg-err-l',
+  warn: 'border-warn bg-warn-l',
+  run: 'border-acc bg-acc',
+  none: 'border-bdr bg-card',
+}
+
+const ITEM_CLASS =
+  'relative grid grid-cols-[14px_minmax(0,1fr)_auto] gap-2.5 pb-3.5 before:absolute before:top-[14px] before:bottom-0 before:left-1.5 before:w-0.5 before:bg-bdr last:before:hidden'
+
+function Node({ tone }: { tone: TimelineTone }) {
+  return (
+    <i
+      aria-hidden="true"
+      className={`mt-0.5 block size-3.5 rounded-full border-2 ${NODE_CLASS[tone]}`}
+    />
+  )
+}
+
+function Entry({ entry, now }: { entry: TimelineEntry; now: number }) {
+  return (
+    <li className={ITEM_CLASS}>
+      <Node tone={entry.tone} />
+      <div className="min-w-0">
+        {/* The kit's title sits in its 16px body's line box: 1.6 × 13px. */}
+        <b className="text-body text-txt block leading-[1.6] font-semibold">{entry.title}</b>
+        {entry.detail ? (
+          <small className="text-meta text-sub mt-px block break-words">{entry.detail}</small>
+        ) : null}
+      </div>
+      {entry.at ? (
+        <time
+          dateTime={entry.at}
+          title={new Date(entry.at).toLocaleString()}
+          className="text-hint text-faint whitespace-nowrap"
+        >
+          {formatEventTime(entry.at, now)}
+        </time>
+      ) : (
+        <span />
+      )}
+    </li>
+  )
+}
+
+export interface DrawerActivityProps {
+  events: JobEventsState
+  job: Job
+  row: JobRow
+  now: number
+}
+
+/**
+ * jobs-drawer.jsx Activity: a timeline, newest first, of slices, yields,
+ * failures, retry waits and who queued the job. Older finished slices
+ * collapse into a row that opens them.
+ */
+export function DrawerActivity({ events, job, row, now }: DrawerActivityProps) {
+  /** Open folds, by the lasting id `foldIds` gives them. */
+  const [open, setOpen] = useState<ReadonlySet<string>>(() => new Set())
+  const folds = useRef<FoldMemory>({ entries: new Map(), next: 0 })
+  if (events.status !== 'ready') {
+    return (
+      <p role="status" className="text-body text-sub m-0 px-4 py-10 text-center">
+        {events.status === 'error'
+          ? `Couldn’t load the activity: ${events.error}.`
+          : 'Loading activity…'}
+      </p>
+    )
+  }
+  const rows = timeline(events.events, job, row)
+  // The same fold keeps its id (so its React key, and whether it's open) as
+  // the events refresh. Assigning is idempotent, so a repeated render agrees.
+  const ids = foldIds(rows, folds.current, open)
+  let fold = 0
+  return (
+    <>
+      <ol className="m-0 flex list-none flex-col p-0">
+        {rows.map((item) => {
+          if (item.kind === 'entry')
+            return <Entry key={item.entry.key} entry={item.entry} now={now} />
+          const id = ids[fold++]!
+          const expanded = open.has(id)
+          const count = item.entries.length
+          return (
+            <Fragment key={id}>
+              <li className={ITEM_CLASS}>
+                <Node tone="none" />
+                <div className="min-w-0">
+                  <button
+                    type="button"
+                    aria-expanded={expanded}
+                    onClick={() =>
+                      setOpen((prev) => {
+                        const next = new Set(prev)
+                        if (expanded) next.delete(id)
+                        else next.add(id)
+                        return next
+                      })
+                    }
+                    className="text-body text-txt cursor-pointer border-0 bg-transparent p-0 text-left leading-[1.6] font-semibold"
+                  >
+                    {count} earlier slice{count === 1 ? '' : 's'}
+                  </button>
+                </div>
+                <span aria-hidden="true" className="text-hint text-faint">
+                  …
+                </span>
+              </li>
+              {expanded
+                ? item.entries.map((entry) => <Entry key={entry.key} entry={entry} now={now} />)
+                : null}
+            </Fragment>
+          )
+        })}
+      </ol>
+      {events.events.length >= EVENTS_SHOWN ? (
+        <p className="text-meta text-faint m-0">Showing the newest {EVENTS_SHOWN} events.</p>
+      ) : null}
+    </>
+  )
+}