feat(story-dialog): conform aan dialog-pattern + AlertDialog delete

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

- lib/schemas/story.ts — gedeeld zod-schema
- actions/stories.ts — code+fieldErrors voor 422; code: 403 voor auth/demo
- StoryDialog adopt useDirtyCloseGuard, useDialogSubmitShortcut,
  entityDialog* layout-classes
- Inline delete-confirm vervangen door AlertDialog (§10.4)
- docs/specs/dialogs/story.md — gaps weggewerkt; alleen bewuste
  afwijkingen blijven (header met badges, geen char-counter)

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

components/backlog/story-dialog.tsx

@@ -1,17 +1,24 @@
 'use client'
 
 import { useEffect, useRef, useState, useTransition } from 'react'
-import { Markdown } from '@/components/markdown'
 import { useActionState } from 'react'
-import { useFormStatus } from 'react-dom'
+import { Markdown } from '@/components/markdown'
 import { toast } from 'sonner'
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogClose,
 } from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -19,6 +26,16 @@ import { Badge } from '@/components/ui/badge'
 import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { StoryLog } from '@/components/shared/story-log'
 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 {
+  entityDialogContentClasses,
+  entityDialogFooterClasses,
+  entityDialogHeaderClasses,
+} from '@/components/shared/entity-dialog-layout'
 import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
 import type { Story } from './story-panel'
@@ -33,6 +50,14 @@ interface StoryDialogProps {
   isDemo?: boolean
 }
 
+interface ActionResult {
+  success?: boolean
+  error?: string
+  code?: number
+  fieldErrors?: Record<string, string[]>
+  story?: unknown
+}
+
 const STATUS_COLORS: Record<string, string> = {
   OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
   IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
@@ -44,15 +69,6 @@ const STATUS_LABELS: Record<string, string> = {
   DONE: 'Klaar',
 }
 
-function SubmitButton({ label, disabled }: { label: string; disabled?: boolean }) {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" disabled={disabled || pending}>
-      {pending ? '…' : label}
-    </Button>
-  )
-}
-
 export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps) {
   const isEdit = state?.mode === 'edit'
   const story = isEdit ? (state as Extract<StoryDialogState, { mode: 'edit' }>).story : null
@@ -62,52 +78,50 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [isDeleting, startDeleteTransition] = useTransition()
   const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
+  const [dirty, setDirty] = useState(false)
+  const formRef = useRef<HTMLFormElement>(null)
 
   useEffect(() => {
     if (!state) return
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setConfirmDelete(false)
+    setDirty(false)
     if (state.mode === 'edit') {
-       
       setPriority(state.story.priority)
-       
       setLogs(null)
       getStoryLogsAction(state.story.id).then(setLogs)
     } else {
-       
       setPriority(state.defaultPriority ?? 2)
     }
   }, [state])
 
-  const [createResult, createAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await createStoryAction(_prev, fd)
+  const [createResult, createAction, createPending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await createStoryAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('Story 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 [updateResult, updateAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await updateStoryAction(_prev, fd)
+  const [updateResult, updateAction, updatePending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await updateStoryAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('Story 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 fieldError = (field: string) => {
-    const result = isEdit ? updateResult : createResult
-    const err = result?.error
-    if (!err || typeof err === 'string') return undefined
-    return (err as Record<string, string[]>)[field]?.[0]
-  }
+  const pending = isEdit ? updatePending : createPending
+  const activeResult = isEdit ? updateResult : createResult
+  const fieldError = (field: string) => activeResult?.fieldErrors?.[field]?.[0]
 
   function handleDelete() {
     if (!story) return
+    setConfirmDelete(false)
     startDeleteTransition(async () => {
       const result = await deleteStoryAction(story.id)
       if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
@@ -121,49 +135,61 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
     if (state) setTimeout(() => titleRef.current?.focus(), 50)
   }, [state])
 
+  const closeGuard = useDirtyCloseGuard(dirty, onClose)
+  const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit())
+
   const showForm = !isDemo || !isEdit
 
   return (
-    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
-      <DialogContent className="sm:max-w-lg flex flex-col gap-0 p-0 max-h-[90vh] overflow-hidden">
-        <DialogHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 pr-14">
-          <div className="flex items-start gap-2">
-            <DialogTitle className="flex-1">{isEdit ? story!.title : 'Nieuwe story'}</DialogTitle>
-            {isEdit && story!.code && (
-              <span className="font-mono text-[11px] text-muted-foreground border border-border rounded-md bg-surface-container px-1.5 py-0.5 shrink-0 mt-0.5">
-                {story!.code}
-              </span>
+    <>
+      <Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
+        <DialogContent
+          showCloseButton={false}
+          onKeyDown={handleKeyDown}
+          className={entityDialogContentClasses}
+        >
+          <div className={cn(entityDialogHeaderClasses, 'flex-col items-stretch gap-1')}>
+            <div className="flex items-start gap-2">
+              <DialogTitle className="flex-1 text-xl font-semibold">
+                {isEdit ? story!.title : 'Nieuwe story'}
+              </DialogTitle>
+              {isEdit && story!.code && (
+                <span className="font-mono text-[11px] text-muted-foreground border border-border rounded-md bg-surface-container px-1.5 py-0.5 shrink-0 mt-0.5">
+                  {story!.code}
+                </span>
+              )}
+            </div>
+            {isEdit && (
+              <div className="flex gap-2">
+                <Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
+                  {PRIORITY_LABELS[priority]}
+                </Badge>
+                <Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
+                  {STATUS_LABELS[story!.status]}
+                </Badge>
+              </div>
             )}
           </div>
-          {isEdit && (
-            <div className="flex gap-2 mt-1">
-              <Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
-                {PRIORITY_LABELS[priority]}
-              </Badge>
-              <Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
-                {STATUS_LABELS[story!.status]}
-              </Badge>
-            </div>
-          )}
-        </DialogHeader>
 
-        <form
-          key={isEdit ? story!.id : 'create'}
-          action={isEdit ? updateAction : createAction}
-          className="flex flex-col min-h-0 flex-1"
-        >
-          {isEdit && <input type="hidden" name="id" value={story!.id} />}
-          {!isEdit && (
-            <>
-              <input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
-              <input type="hidden" name="productId" value={createState_?.productId ?? ''} />
-            </>
-          )}
-          <input type="hidden" name="priority" value={priority} />
+          <form
+            ref={formRef}
+            id="story-form"
+            key={isEdit ? story!.id : 'create'}
+            action={isEdit ? updateAction : createAction}
+            onChange={() => setDirty(true)}
+            className="flex-1 overflow-y-auto"
+          >
+            {isEdit && <input type="hidden" name="id" value={story!.id} />}
+            {!isEdit && (
+              <>
+                <input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
+                <input type="hidden" name="productId" value={createState_?.productId ?? ''} />
+              </>
+            )}
+            <input type="hidden" name="priority" value={priority} />
 
-          <div className="flex-1 overflow-y-auto">
             {showForm ? (
-              <div className="p-5 space-y-4">
+              <div className="px-6 py-6 space-y-6">
                 <div className="grid grid-cols-[6rem_1fr] gap-3">
                   <div className="space-y-1.5">
                     <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Code</label>
@@ -172,18 +198,24 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                       defaultValue={story?.code ?? ''}
                       placeholder={isEdit ? '' : 'auto'}
                       maxLength={30}
+                      disabled={isDemo}
+                      aria-invalid={!!fieldError('code')}
                       className={cn('font-mono text-sm', fieldError('code') ? 'border-error' : '')}
                     />
                     {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
                   </div>
                   <div className="space-y-1.5">
-                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
+                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      Titel <span className="text-error">*</span>
+                    </label>
                     <Input
                       ref={titleRef}
                       name="title"
                       defaultValue={story?.title ?? ''}
                       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>}
@@ -192,7 +224,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
 
                 <div className="space-y-1.5">
                   <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Prioriteit</label>
-                  <PrioritySelect value={priority} onChange={setPriority} />
+                  <PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
                 </div>
 
                 <div className="space-y-1.5">
@@ -204,6 +236,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                     rows={3}
                     defaultValue={story?.description ?? ''}
                     placeholder="Als… wil ik… zodat…"
+                    disabled={isDemo}
                     className="resize-none"
                   />
                 </div>
@@ -217,18 +250,13 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                     rows={3}
                     defaultValue={story?.acceptance_criteria ?? ''}
                     placeholder="- Gegeven… Als… Dan…"
+                    disabled={isDemo}
                     className="resize-none"
                   />
                 </div>
-
-                {typeof (isEdit ? updateResult?.error : createResult?.error) === 'string' && (
-                  <p className="text-xs text-error">
-                    {String(isEdit ? updateResult?.error : createResult?.error)}
-                  </p>
-                )}
               </div>
             ) : (
-              <div className="p-5 space-y-4">
+              <div className="px-6 py-6 space-y-6">
                 {story?.description && (
                   <div>
                     <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
@@ -245,7 +273,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
             )}
 
             {isEdit && (
-              <div className="px-5 py-4 border-t border-border">
+              <div className="px-6 py-4 border-t border-outline-variant">
                 <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
                 {logs && 'logs' in logs && logs.logs ? (
                   <StoryLog
@@ -262,49 +290,59 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                 )}
               </div>
             )}
-          </div>
+          </form>
 
-          {isEdit && (
-            <div className="px-5 py-3 border-t border-border shrink-0">
-              {!isDemo && confirmDelete ? (
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-muted-foreground flex-1">
-                    Weet je het zeker? Taken worden ook verwijderd.
-                  </span>
-                  <Button type="button" variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
-                    {isDeleting ? 'Bezig…' : 'Verwijderen'}
-                  </Button>
-                  <Button type="button" variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>
-                    Annuleren
-                  </Button>
-                </div>
-              ) : (
+          <div className={entityDialogFooterClasses}>
+            <div className="flex items-center justify-between gap-2">
+              {isEdit ? (
                 <DemoTooltip show={isDemo}>
                   <Button
                     type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="text-error hover:bg-error/10"
-                    disabled={isDemo}
-                    onClick={() => !isDemo && setConfirmDelete(true)}
+                    variant="destructive"
+                    disabled={isDemo || isDeleting || pending}
+                    onClick={() => setConfirmDelete(true)}
                   >
-                    Story verwijderen
+                    Verwijderen
                   </Button>
                 </DemoTooltip>
+              ) : (
+                <div />
               )}
+              <div className="flex gap-2">
+                <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
+                  Annuleren
+                </Button>
+                <DemoTooltip show={isDemo}>
+                  <Button type="submit" form="story-form" disabled={pending || isDemo}>
+                    {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
+                  </Button>
+                </DemoTooltip>
+              </div>
             </div>
-          )}
-
-          <div className="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0 rounded-b-xl bg-muted/50">
-            <DialogClose render={<Button type="button" variant="outline" />}>
-              Annuleren
-            </DialogClose>
-            <DemoTooltip show={isDemo}>
-              <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} disabled={isDemo} />
-            </DemoTooltip>
           </div>
-        </form>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      <DirtyCloseGuardDialog guard={closeGuard} />
+
+      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Story verwijderen</AlertDialogTitle>
+            <AlertDialogDescription>
+              Weet je het zeker? Bijbehorende taken worden ook verwijderd. Dit kan niet ongedaan worden.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setConfirmDelete(false)}>
+              Annuleren
+            </AlertDialogCancel>
+            <AlertDialogAction variant="destructive" disabled={isDeleting} onClick={handleDelete}>
+              {isDeleting ? 'Bezig…' : 'Verwijderen'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   )
 }