feat(product-dialog): conform aan dialog-pattern + entity-profile

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

- lib/schemas/product.ts — gedeeld zod-schema (Dialog API)
- actions/products.ts — createProductAction/updateProductAction returnen
  nu code+fieldErrors voor 422-validatie en code: 403 voor demo/auth
- ProductDialog adopt useDirtyCloseGuard, useDialogSubmitShortcut,
  entityDialog* layout-classes; 422-fieldErrors mappen naar form.setError
- docs/specs/dialogs/product.md — entity-profile

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

components/dialogs/product-dialog.tsx

@@ -3,35 +3,32 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
 import { toast } from 'sonner'
 import { cn } from '@/lib/utils'
 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 { 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 { productSchema, type ProductInput } from '@/lib/schemas/product'
 import { createProductAction, updateProductAction } from '@/actions/products'
 import { useProductsStore } from '@/stores/products-store'
 
-const formSchema = z.object({
-  name: z.string().min(1, 'Naam is verplicht').max(200),
-  code: z.string().max(20).optional(),
-  description: z.string().max(4000).optional(),
-  repo_url: z.string().max(200).optional(),
-  definition_of_done: z.string().max(4000).optional(),
-  auto_pr: z.boolean(),
-})
-
-type FormValues = z.infer<typeof formSchema>
-
 export interface ProductDialogProduct {
   id: string
   name: string
@@ -54,8 +51,9 @@ export function ProductDialog(props: Props) {
 
   const [isPending, setIsPending] = useState(false)
 
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
+  const form = useForm<ProductInput>({
+    resolver: zodResolver(productSchema),
+    mode: 'onTouched',
     defaultValues: {
       name: product?.name ?? '',
       code: product?.code ?? '',
@@ -66,7 +64,7 @@ export function ProductDialog(props: Props) {
     },
   })
 
-  // Reset form when dialog opens or switches product
+  // Reset when opening or switching product
   useEffect(() => {
     if (open) {
       form.reset({
@@ -81,14 +79,13 @@ export function ProductDialog(props: Props) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, product?.id])
 
-  async function onSubmit(values: FormValues) {
-    if (isDemo) {
-      toast.error('Niet beschikbaar in demo-modus')
-      return
-    }
+  const closeGuard = useDirtyCloseGuard(form.formState.isDirty, () => onOpenChange(false))
+  const handleKeyDown = useDialogSubmitShortcut(() => form.handleSubmit(onSubmit)())
+
+  async function onSubmit(values: ProductInput) {
     setIsPending(true)
     try {
-      const payload = {
+      const payload: ProductInput = {
         name: values.name,
         code: values.code || undefined,
         description: values.description || undefined,
@@ -97,14 +94,29 @@ export function ProductDialog(props: Props) {
         auto_pr: values.auto_pr,
       }
 
+      function applyError(result: { error: string; code?: number; fieldErrors?: Partial<Record<keyof ProductInput, string[]>> }) {
+        if (result.code === 422 && result.fieldErrors) {
+          for (const [field, errors] of Object.entries(result.fieldErrors)) {
+            if (errors && errors.length > 0) {
+              form.setError(field as keyof ProductInput, { message: errors[0] })
+            }
+          }
+          const firstError = Object.keys(result.fieldErrors)[0] as keyof ProductInput | undefined
+          if (firstError) form.setFocus(firstError)
+          return
+        }
+        toast.error(result.error)
+      }
+
       if (mode === 'create') {
         const result = await createProductAction(payload)
         if ('error' in result) {
-          toast.error(result.error)
+          applyError(result)
           return
         }
+        const productId = result.productId
         addProduct({
-          id: result.productId,
+          id: productId,
           name: values.name,
           code: values.code ?? null,
           description: values.description ?? null,
@@ -114,11 +126,11 @@ export function ProductDialog(props: Props) {
         })
         toast.success('Product aangemaakt')
         onOpenChange(false)
-        props.onSaved?.(result.productId)
+        props.onSaved?.(productId)
       } else {
         const result = await updateProductAction(product!.id, payload)
         if ('error' in result) {
-          toast.error(result.error)
+          applyError(result)
           return
         }
         updateProduct(product!.id, {
@@ -141,130 +153,156 @@ export function ProductDialog(props: Props) {
   const autoPr = form.watch('auto_pr')
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{mode === 'edit' ? 'Product bewerken' : 'Nieuw product'}</DialogTitle>
-        </DialogHeader>
-
-        <form
-          id="product-form"
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="grid gap-4"
+    <>
+      <Dialog open={open} onOpenChange={(v) => { if (!v) closeGuard.attemptClose(); else onOpenChange(v) }}>
+        <DialogContent
+          showCloseButton={false}
+          onKeyDown={handleKeyDown}
+          className={entityDialogContentClasses}
         >
-          <div className="grid gap-1.5">
-            <label htmlFor="product-name" className="text-sm font-medium">
-              Naam <span className="text-error">*</span>
-            </label>
-            <Input
-              id="product-name"
-              autoFocus={mode === 'create'}
-              disabled={isDemo}
-              maxLength={200}
-              {...form.register('name')}
-              className={form.formState.errors.name ? 'border-error' : ''}
-            />
-            {form.formState.errors.name && (
-              <p className="text-xs text-error">{form.formState.errors.name.message}</p>
-            )}
+          <div className={entityDialogHeaderClasses}>
+            <DialogTitle className="text-xl font-semibold">
+              {mode === 'edit' ? 'Product bewerken' : 'Nieuw product'}
+            </DialogTitle>
           </div>
 
-          <div className="grid gap-1.5">
-            <label htmlFor="product-code" className="text-sm font-medium">
-              Code <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Input
-              id="product-code"
-              disabled={isDemo}
-              maxLength={20}
-              placeholder="korte slug, bv. SCRUM4ME"
-              className="font-mono text-sm"
-              {...form.register('code')}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="product-description" className="text-sm font-medium">
-              Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Textarea
-              id="product-description"
-              disabled={isDemo}
-              rows={3}
-              maxLength={4000}
-              className="resize-none"
-              {...form.register('description')}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="product-repo-url" className="text-sm font-medium">
-              Repository URL <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Input
-              id="product-repo-url"
-              disabled={isDemo}
-              placeholder="https://github.com/owner/repo"
-              {...form.register('repo_url')}
-            />
-          </div>
-
-          <div className="grid gap-1.5">
-            <label htmlFor="product-dod" className="text-sm font-medium">
-              Definition of Done <span className="text-muted-foreground font-normal">(optioneel)</span>
-            </label>
-            <Textarea
-              id="product-dod"
-              disabled={isDemo}
-              rows={4}
-              maxLength={4000}
-              className="resize-none"
-              {...form.register('definition_of_done')}
-            />
-          </div>
-
-          <div className="flex items-start gap-3">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={autoPr}
-              disabled={isDemo}
-              onClick={() => form.setValue('auto_pr', !autoPr)}
-              className={cn(
-                'relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
-                'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                'disabled:cursor-not-allowed disabled:opacity-50',
-                autoPr ? 'bg-primary' : 'bg-input',
-              )}
-            >
-              <span
-                className={cn(
-                  'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm',
-                  'transition-transform duration-200',
-                  autoPr ? 'translate-x-4' : 'translate-x-0',
-                )}
+          <form
+            id="product-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className={entityDialogBodyClasses}
+          >
+            <div className="grid gap-1.5">
+              <label htmlFor="product-name" className="text-sm font-medium">
+                Naam <span className="text-error">*</span>
+              </label>
+              <Input
+                id="product-name"
+                autoFocus={mode === 'create'}
+                disabled={isDemo}
+                maxLength={200}
+                aria-invalid={!!form.formState.errors.name}
+                {...form.register('name')}
+                className={form.formState.errors.name ? 'border-error' : ''}
               />
-            </button>
-            <div className="grid gap-0.5">
-              <span className="text-sm font-medium">Automatisch PR aanmaken na voltooide story</span>
-              <span className="text-xs text-muted-foreground">
-                Bij elke voltooide story automatisch een PR aanmaken in <code>repo_url</code>
-              </span>
+              {form.formState.errors.name && (
+                <p className="text-xs text-error">{form.formState.errors.name.message}</p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-code" className="text-sm font-medium">
+                Code <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Input
+                id="product-code"
+                disabled={isDemo}
+                maxLength={20}
+                placeholder="korte slug, bv. SCRUM4ME"
+                aria-invalid={!!form.formState.errors.code}
+                className={cn('font-mono text-sm', form.formState.errors.code && 'border-error')}
+                {...form.register('code')}
+              />
+              {form.formState.errors.code && (
+                <p className="text-xs text-error">{form.formState.errors.code.message}</p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-description" className="text-sm font-medium">
+                Beschrijving <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Textarea
+                id="product-description"
+                disabled={isDemo}
+                rows={3}
+                maxLength={4000}
+                className="resize-none"
+                {...form.register('description')}
+              />
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-repo-url" className="text-sm font-medium">
+                Repository URL <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Input
+                id="product-repo-url"
+                disabled={isDemo}
+                placeholder="https://github.com/owner/repo"
+                aria-invalid={!!form.formState.errors.repo_url}
+                {...form.register('repo_url')}
+                className={form.formState.errors.repo_url ? 'border-error' : ''}
+              />
+              {form.formState.errors.repo_url && (
+                <p className="text-xs text-error">{form.formState.errors.repo_url.message}</p>
+              )}
+            </div>
+
+            <div className="grid gap-1.5">
+              <label htmlFor="product-dod" className="text-sm font-medium">
+                Definition of Done <span className="text-muted-foreground font-normal">(optioneel)</span>
+              </label>
+              <Textarea
+                id="product-dod"
+                disabled={isDemo}
+                rows={4}
+                maxLength={4000}
+                className="resize-none"
+                {...form.register('definition_of_done')}
+              />
+            </div>
+
+            <div className="flex items-start gap-3">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={autoPr}
+                disabled={isDemo}
+                onClick={() => form.setValue('auto_pr', !autoPr, { shouldDirty: true })}
+                className={cn(
+                  'relative mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
+                  'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  'disabled:cursor-not-allowed disabled:opacity-50',
+                  autoPr ? 'bg-primary' : 'bg-input',
+                )}
+              >
+                <span
+                  className={cn(
+                    'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm',
+                    'transition-transform duration-200',
+                    autoPr ? 'translate-x-4' : 'translate-x-0',
+                  )}
+                />
+              </button>
+              <div className="grid gap-0.5">
+                <span className="text-sm font-medium">Automatisch PR aanmaken na voltooide story</span>
+                <span className="text-xs text-muted-foreground">
+                  Bij elke voltooide story automatisch een PR aanmaken in <code>repo_url</code>
+                </span>
+              </div>
+            </div>
+          </form>
+
+          <div className={entityDialogFooterClasses}>
+            <div className="flex items-center justify-end gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={closeGuard.attemptClose}
+                disabled={isPending}
+              >
+                Annuleren
+              </Button>
+              <DemoTooltip show={isDemo}>
+                <Button type="submit" form="product-form" disabled={isPending || isDemo}>
+                  {isPending ? '…' : mode === 'edit' ? 'Opslaan' : 'Aanmaken'}
+                </Button>
+              </DemoTooltip>
             </div>
           </div>
-        </form>
-
-        <DialogFooter>
-          <DialogClose render={<Button type="button" variant="outline" />}>
-            Annuleren
-          </DialogClose>
-          <DemoTooltip show={isDemo}>
-            <Button type="submit" form="product-form" disabled={isPending || isDemo}>
-              {isPending ? '…' : mode === 'edit' ? 'Opslaan' : 'Aanmaken'}
-            </Button>
-          </DemoTooltip>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
+      <DirtyCloseGuardDialog guard={closeGuard} />
+    </>
   )
 }