feat(ST-108/ST-208): replace inline forms with PBI and story dialogs

- PbiDialog: create/edit with priority select and optional description
- StoryDialog: create/edit with priority, description, acceptance criteria, activity log, and delete
- PrioritySelect: reusable controlled select component
- Edit icons always visible on PBI rows and story blocks
- Dialog backdrop uses 40% opacity blur

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/backlog/pbi-dialog.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+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 { createPbiAction, updatePbiAction } from '@/actions/pbis'
+
+export interface PbiDialogPbi {
+  id: string
+  title: string
+  priority: number
+  description?: string | null
+}
+
+type CreateState = { mode: 'create'; productId: string; defaultPriority?: number }
+type EditState = { mode: 'edit'; pbi: PbiDialogPbi; productId: string }
+export type PbiDialogState = CreateState | EditState
+
+interface PbiDialogProps {
+  state: PbiDialogState | null
+  onClose: () => void
+}
+
+function SubmitButton({ label }: { label: string }) {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? '…' : label}
+    </Button>
+  )
+}
+
+export function PbiDialog({ state, onClose }: PbiDialogProps) {
+  const isEdit = state?.mode === 'edit'
+  const pbi = isEdit ? state.pbi : null
+
+  const initialPriority = isEdit ? pbi!.priority : (state?.defaultPriority ?? 2)
+  const [priority, setPriority] = useState<number>(initialPriority)
+
+  // Sync priority when dialog opens for a different PBI or switches create/edit 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))
+    }
+  }, [state, isEdit])
+
+  const [createState, createAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await createPbiAction(_prev, fd)
+      if (result?.success) { toast.success('PBI aangemaakt'); onClose() }
+      else if (typeof result?.error === 'string') toast.error(result.error)
+      return result
+    },
+    undefined
+  )
+
+  const [updateState, updateAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await updatePbiAction(_prev, fd)
+      if (result?.success) { toast.success('PBI opgeslagen'); onClose() }
+      else if (typeof result?.error === 'string') toast.error(result.error)
+      return result
+    },
+    undefined
+  )
+
+  const error = isEdit
+    ? (typeof updateState?.error === 'string' ? updateState.error : null)
+    : (typeof createState?.error === 'string' ? createState.error : null)
+
+  const titleRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (state) {
+      setTimeout(() => titleRef.current?.focus(), 50)
+    }
+  }, [state])
+
+  return (
+    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? 'PBI bewerken' : 'Nieuw PBI'}</DialogTitle>
+        </DialogHeader>
+
+        <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} />
+
+          <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}
+            />
+          </div>
+
+          <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 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>
+  )
+}