Adopt shared WebUI layout primitives

webui/src/features/records/RecordCatalogDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type FormEvent } from "react";
-import {
+import { DialogForm,
   Button,
   Dialog,
   DismissibleAlert,
@@ -146,7 +146,7 @@ export function RecordCatalogDialog({
       footer={<><Button type="button" variant="ghost" onClick={onClose} disabled={saving}>Cancel</Button><Button type="submit" form="records-catalog-form" variant="primary" disabledReason={saving ? "The catalog revision is being saved." : !isValid ? "Complete all required catalog fields." : undefined}>{saving ? "Saving" : "Save revision"}</Button></>}
     >
       {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
-      <form id="records-catalog-form" className="records-dialog-form" onSubmit={submit}>
+      <DialogForm id="records-catalog-form" className="records-dialog-form" onSubmit={submit}>
         <FormField label="Catalog object">
           <select value={kind} onChange={(event) => { setKind(event.target.value as typeof kind); setSelectedId(""); }}>
             <option value="file-plan">File-plan node</option>
@@ -164,7 +164,7 @@ export function RecordCatalogDialog({
         <FormField label="Label"><input value={label} onChange={(event) => setLabel(event.target.value)} required /></FormField>
         {kind === "file-plan" ? <FormField label="Parent node"><select value={parentId} onChange={(event) => setParentId(event.target.value)}><option value="">Top level</option>{catalog.file_plan.filter((item) => item.node_id !== identifier).map((item) => <option key={item.node_id} value={item.node_id}>{item.code} · {item.label}</option>)}</select></FormField> : <><FormField label="File-plan node"><select value={filePlanNodeId} onChange={(event) => setFilePlanNodeId(event.target.value)} required>{catalog.file_plan.map((item) => <option key={item.node_id} value={item.node_id}>{item.code} · {item.label}</option>)}</select></FormField><FormField label="Retention period (days)"><input type="number" min="0" value={retentionDays} onChange={(event) => setRetentionDays(event.target.value)} /></FormField><FormField label="Retention trigger"><select value={closureTrigger} onChange={(event) => setClosureTrigger(event.target.value)}><option value="record_closed">Record closure</option><option value="calendar_month_end">End of closure month</option><option value="calendar_year_end">End of closure year</option><option value="explicit">Explicit date at closure</option></select></FormField></>}
         <FormField label="Description"><textarea rows={4} value={description} onChange={(event) => setDescription(event.target.value)} /></FormField>
-      </form>
+      </DialogForm>
     </Dialog>
   );
 }

webui/src/features/records/RecordLifecyclePanel.tsx

@@ -10,7 +10,7 @@ import {
   RotateCcw
 } from "lucide-react";
 import { useEffect, useMemo, useState, type FormEvent } from "react";
-import {
+import { DialogForm,
   Button,
   Dialog,
   DismissibleAlert,
@@ -286,7 +286,7 @@ export function RecordLifecyclePanel({
       >
         {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
         {action === "recovery" ? <RecoveryResult value={recovery} loading={saving} /> : (
-          <form id="records-lifecycle-form" className="records-dialog-form" onSubmit={submit}>
+          <DialogForm id="records-lifecycle-form" className="records-dialog-form" onSubmit={submit}>
             {action === "volume" && <FormField label="Volume label" helpContextId="records.field.volume-label"><input value={label} onChange={(event) => setLabel(event.target.value)} required /></FormField>}
             {["appraise", "disposition"].includes(action ?? "") && <FormField label="Disposition" helpContextId="records.field.disposition"><select value={outcome} onChange={(event) => setOutcome(event.target.value as typeof outcome)}><option value="retain">Retain</option><option value="transfer">Transfer</option><option value="destroy">Destroy</option><option value="reclassify">Reclassify</option></select></FormField>}
             {action === "hold" && <FormField label="Authority" helpContextId="records.field.hold-authority"><input value={authority} onChange={(event) => setAuthority(event.target.value)} required /></FormField>}
@@ -296,7 +296,7 @@ export function RecordLifecyclePanel({
             {action === "finalize" && currentDisposition?.approval_request_id && <DismissibleAlert tone="info" dismissible={false} compact>Approval request <a href="/approvals">{currentDisposition.approval_request_id}</a> must be approved by another account.</DismissibleAlert>}
             {requiresReason(action) && <FormField label="Reason" helpContextId="records.field.lifecycle-reason"><textarea value={reason} onChange={(event) => setReason(event.target.value)} rows={4} required /></FormField>}
             <FormField label="Purpose"><input value={purpose} onChange={(event) => setPurpose(event.target.value)} required /></FormField>
-          </form>
+          </DialogForm>
         )}
       </Dialog>
     </>

webui/src/features/records/RecordsPage.tsx

@@ -15,7 +15,7 @@ import {
   type FormEvent
 } from "react";
 import { useSearchParams } from "react-router";
-import {
+import { DialogForm, ActionToolbar,
   Button,
   DataGrid,
   Dialog,
@@ -233,7 +233,7 @@ export default function RecordsPage({ settings, auth }: PlatformRouteContext) {
   return (
     <main className="records-page" data-help-context-id="records.workspace">
       <div className="records-shell">
-        <div className="records-toolbar">
+        <ActionToolbar className="records-toolbar">
           <Button
             type="button"
             variant="primary"
@@ -273,7 +273,7 @@ export default function RecordsPage({ settings, auth }: PlatformRouteContext) {
             />
           )}
           <DocumentationHelpLink reference={RECORDS_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
 
         {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
         {filingPreset &&
@@ -664,7 +664,7 @@ function RecordDialog({
       }
     >
       {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
-      <form id="records-record-form" className="records-dialog-form" onSubmit={submit}>
+      <DialogForm id="records-record-form" className="records-dialog-form" onSubmit={submit}>
         <FormField label="Record number" helpContextId="records.field.record-number">
           <input value={recordNumber} onChange={(event) => setRecordNumber(event.target.value)} disabled={mode === "edit"} required />
         </FormField>
@@ -698,7 +698,7 @@ function RecordDialog({
         <FormField label="Change reason" helpContextId="records.field.change-reason">
           <textarea value={changeReason} onChange={(event) => setChangeReason(event.target.value)} rows={3} required />
         </FormField>
-      </form>
+      </DialogForm>
     </Dialog>
   );
 }
@@ -810,7 +810,7 @@ function FilingDialog({
       <DismissibleAlert tone="info" dismissible={false} compact>
         The source module verifies your current access and resolves this exact revision before Records stores the reference.
       </DismissibleAlert>
-      <form id="records-filing-form" className="records-dialog-form" onSubmit={submit}>
+      <DialogForm id="records-filing-form" className="records-dialog-form" onSubmit={submit}>
         <FormField label="Source module" helpContextId="records.field.source-module">
           <select value={sourceModule} onChange={(event) => setSourceModule(event.target.value)} required>
             {providers.map((item) => <option key={item.source_module} value={item.source_module}>{humanize(item.source_module)}</option>)}
@@ -839,7 +839,7 @@ function FilingDialog({
         <FormField label="Filing reason" documentation={RECORDS_FIELD_DOCUMENTATION.filingReason}>
           <textarea value={filingReason} onChange={(event) => setFilingReason(event.target.value)} rows={4} required />
         </FormField>
-      </form>
+      </DialogForm>
     </Dialog>
   );
 }