feat(pbi-dialog): conform aan dialog-pattern + DemoTooltip + dirty-guard

Story 3 van PBI "Alle dialogen conform docs/patterns/dialog.md".

- lib/schemas/pbi.ts — gedeeld zod-schema (createPbiSchema/updatePbiSchema)
- actions/pbis.ts — returnen nu code+fieldErrors (422) en code: 403 voor
  auth/demo errors
- PbiDialog adopt useDirtyCloseGuard, useDialogSubmitShortcut,
  entityDialog* layout-classes; submit-knop + Annuleren in DemoTooltip
- isDemo-prop toegevoegd, pbi-list geeft 'm door
- docs/specs/dialogs/pbi.md — "Bekende gaps" weggewerkt; alleen bewuste
  uitsluitingen blijven

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/backlog/pbi-dialog.tsx

@@ -2,21 +2,29 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { useActionState } from 'react'
-import { useFormStatus } from 'react-dom'
 import { toast } from 'sonner'
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogFooter,
-  DialogClose,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 import { PrioritySelect } from '@/components/shared/priority-select'
 import { PbiStatusSelect } from '@/components/shared/pbi-status-select'
+import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import {
+  useDirtyCloseGuard,
+  DirtyCloseGuardDialog,
+} from '@/components/shared/use-dirty-close-guard'
+import { useDialogSubmitShortcut } from '@/components/shared/use-dialog-submit-shortcut'
+import {
+  entityDialogBodyClasses,
+  entityDialogContentClasses,
+  entityDialogFooterClasses,
+  entityDialogHeaderClasses,
+} from '@/components/shared/entity-dialog-layout'
 import { createPbiAction, updatePbiAction } from '@/actions/pbis'
 import type { PbiStatusApi } from '@/lib/task-status'
 
@@ -36,18 +44,18 @@ export type PbiDialogState = CreateState | EditState
 interface PbiDialogProps {
   state: PbiDialogState | null
   onClose: () => void
+  isDemo?: boolean
 }
 
-function SubmitButton({ label }: { label: string }) {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" disabled={pending}>
-      {pending ? '…' : label}
-    </Button>
-  )
+interface ActionResult {
+  success?: boolean
+  error?: string
+  code?: number
+  fieldErrors?: Record<string, string[]>
+  pbi?: unknown
 }
 
-export function PbiDialog({ state, onClose }: PbiDialogProps) {
+export function PbiDialog({ state, onClose, isDemo = false }: PbiDialogProps) {
   const isEdit = state?.mode === 'edit'
   const pbi = isEdit ? state.pbi : null
 
@@ -57,43 +65,43 @@ export function PbiDialog({ state, onClose }: PbiDialogProps) {
   const initialStatus: PbiStatusApi = isEdit ? (pbi!.status ?? 'ready') : 'ready'
   const [status, setStatus] = useState<PbiStatusApi>(initialStatus)
 
-  // Sync priority + status when dialog opens for a different PBI or switches create/edit mode
+  const [dirty, setDirty] = useState(false)
+  const formRef = useRef<HTMLFormElement>(null)
+
+  // Sync priority + status + reset dirty when dialog opens for a different PBI or switches mode
   useEffect(() => {
     if (state) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setPriority(isEdit ? (state as EditState).pbi.priority : ((state as CreateState).defaultPriority ?? 2))
-       
       setStatus(isEdit ? ((state as EditState).pbi.status ?? 'ready') : 'ready')
+      setDirty(false)
     }
   }, [state, isEdit])
 
-  const [createState, createAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await createPbiAction(_prev, fd)
+  const [createState, createAction, createPending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await createPbiAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('PBI aangemaakt'); onClose() }
-      else if (typeof result?.error === 'string') toast.error(result.error)
+      else if (result?.code !== 422 && result?.error) toast.error(result.error)
       return result
     },
-    undefined
+    undefined,
   )
 
-  const [updateState, updateAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await updatePbiAction(_prev, fd)
+  const [updateState, updateAction, updatePending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await updatePbiAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('PBI opgeslagen'); onClose() }
-      else if (typeof result?.error === 'string') toast.error(result.error)
+      else if (result?.code !== 422 && result?.error) toast.error(result.error)
       return result
     },
-    undefined
+    undefined,
   )
 
+  const pending = isEdit ? updatePending : createPending
+
   const activeState = isEdit ? updateState : createState
-  const error = typeof activeState?.error === 'string' ? activeState.error : null
-  const fieldError = (field: string) => {
-    const err = activeState?.error
-    if (!err || typeof err === 'string') return undefined
-    return (err as Record<string, string[]>)[field]?.[0]
-  }
+  const fieldError = (field: string) => activeState?.fieldErrors?.[field]?.[0]
 
   const titleRef = useRef<HTMLInputElement>(null)
   useEffect(() => {
@@ -102,84 +110,112 @@ export function PbiDialog({ state, onClose }: PbiDialogProps) {
     }
   }, [state])
 
+  const closeGuard = useDirtyCloseGuard(dirty, onClose)
+  const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit())
+
   return (
-    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>{isEdit ? 'PBI bewerken' : 'Nieuw PBI'}</DialogTitle>
-        </DialogHeader>
+    <>
+      <Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
+        <DialogContent
+          showCloseButton={false}
+          onKeyDown={handleKeyDown}
+          className={entityDialogContentClasses}
+        >
+          <div className={entityDialogHeaderClasses}>
+            <DialogTitle className="text-xl font-semibold">
+              {isEdit ? 'PBI bewerken' : 'Nieuw PBI'}
+            </DialogTitle>
+          </div>
 
-        <form key={isEdit ? pbi!.id : 'create'} action={isEdit ? updateAction : createAction} className="grid gap-4">
-          {isEdit && <input type="hidden" name="id" value={pbi!.id} />}
-          {!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
-          <input type="hidden" name="priority" value={priority} />
-          <input type="hidden" name="status" value={status} />
+          <form
+            ref={formRef}
+            id="pbi-form"
+            key={isEdit ? pbi!.id : 'create'}
+            action={isEdit ? updateAction : createAction}
+            onChange={() => setDirty(true)}
+            className={entityDialogBodyClasses}
+          >
+            {isEdit && <input type="hidden" name="id" value={pbi!.id} />}
+            {!isEdit && <input type="hidden" name="productId" value={(state as CreateState | null)?.productId ?? ''} />}
+            <input type="hidden" name="priority" value={priority} />
+            <input type="hidden" name="status" value={status} />
+
+            <div className="grid grid-cols-[6rem_1fr] gap-3">
+              <div className="grid gap-1.5">
+                <label htmlFor="pbi-code" className="text-sm font-medium">Code</label>
+                <Input
+                  id="pbi-code"
+                  name="code"
+                  defaultValue={pbi?.code ?? ''}
+                  placeholder={isEdit ? '' : 'auto'}
+                  maxLength={30}
+                  disabled={isDemo}
+                  aria-invalid={!!fieldError('code')}
+                  className={fieldError('code') ? 'font-mono text-sm border-error' : 'font-mono text-sm'}
+                />
+                {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
+              </div>
+              <div className="grid gap-1.5">
+                <label htmlFor="pbi-title" className="text-sm font-medium">Titel <span className="text-error">*</span></label>
+                <Input
+                  id="pbi-title"
+                  ref={titleRef}
+                  name="title"
+                  defaultValue={pbi?.title ?? ''}
+                  placeholder="PBI-titel…"
+                  required
+                  maxLength={200}
+                  disabled={isDemo}
+                  aria-invalid={!!fieldError('title')}
+                  className={fieldError('title') ? 'border-error' : ''}
+                />
+                {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="grid gap-1.5">
+                <label className="text-sm font-medium">Prioriteit</label>
+                <PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
+              </div>
+              <div className="grid gap-1.5">
+                <label className="text-sm font-medium">Status</label>
+                <PbiStatusSelect value={status} onChange={(v) => { setStatus(v); setDirty(true) }} />
+              </div>
+            </div>
 
-          <div className="grid grid-cols-[6rem_1fr] gap-3">
             <div className="grid gap-1.5">
-              <label htmlFor="pbi-code" className="text-sm font-medium">Code</label>
-              <Input
-                id="pbi-code"
-                name="code"
-                defaultValue={pbi?.code ?? ''}
-                placeholder={isEdit ? '' : 'auto'}
-                maxLength={30}
-                className={fieldError('code') ? 'font-mono text-sm border-error' : 'font-mono text-sm'}
+              <label htmlFor="pbi-description" className="text-sm font-medium">
+                Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Textarea
+                id="pbi-description"
+                name="description"
+                defaultValue={pbi?.description ?? ''}
+                placeholder="Korte omschrijving van het PBI…"
+                rows={3}
+                maxLength={2000}
+                disabled={isDemo}
+                className="resize-none"
               />
-              {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
             </div>
-            <div className="grid gap-1.5">
-              <label htmlFor="pbi-title" className="text-sm font-medium">Titel</label>
-              <Input
-                id="pbi-title"
-                ref={titleRef}
-                name="title"
-                defaultValue={pbi?.title ?? ''}
-                placeholder="PBI-titel…"
-                required
-                maxLength={200}
-                className={fieldError('title') ? 'border-error' : ''}
-              />
-              {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
+          </form>
+
+          <div className={entityDialogFooterClasses}>
+            <div className="flex items-center justify-end gap-2">
+              <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
+                Annuleren
+              </Button>
+              <DemoTooltip show={isDemo}>
+                <Button type="submit" form="pbi-form" disabled={pending || isDemo}>
+                  {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
+                </Button>
+              </DemoTooltip>
             </div>
           </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div className="grid gap-1.5">
-              <label className="text-sm font-medium">Prioriteit</label>
-              <PrioritySelect value={priority} onChange={setPriority} />
-            </div>
-            <div className="grid gap-1.5">
-              <label className="text-sm font-medium">Status</label>
-              <PbiStatusSelect value={status} onChange={setStatus} />
-            </div>
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="pbi-description" className="text-sm font-medium">
-              Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Textarea
-              id="pbi-description"
-              name="description"
-              defaultValue={pbi?.description ?? ''}
-              placeholder="Korte omschrijving van het PBI…"
-              rows={3}
-              maxLength={2000}
-              className="resize-none"
-            />
-          </div>
-
-          {error && <p className="text-xs text-error">{error}</p>}
-
-          <DialogFooter>
-            <DialogClose render={<Button type="button" variant="outline" />}>
-              Annuleren
-            </DialogClose>
-            <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
+      <DirtyCloseGuardDialog guard={closeGuard} />
+    </>
   )
 }