From 4df83dcdbb584a1962f5c2b684fed247ccaba309 Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sat, 25 Apr 2026 22:53:26 +0200
Subject: [PATCH] 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>
---
 app/(app)/products/[id]/page.tsx      |   2 +-
 components/backlog/pbi-dialog.tsx     | 149 ++++++++++++++
 components/backlog/pbi-list.tsx       | 121 ++++-------
 components/backlog/story-dialog.tsx   | 282 ++++++++++++++++++++++++++
 components/backlog/story-panel.tsx    | 282 +++-----------------------
 components/shared/priority-select.tsx |  43 ++++
 components/ui/dialog.tsx              |   2 +-
 7 files changed, 538 insertions(+), 343 deletions(-)
 create mode 100644 components/backlog/pbi-dialog.tsx
 create mode 100644 components/backlog/story-dialog.tsx
 create mode 100644 components/shared/priority-select.tsx

diff --git a/app/(app)/products/[id]/page.tsx b/app/(app)/products/[id]/page.tsx
index cd31617..ecb1507 100644
--- a/app/(app)/products/[id]/page.tsx
+++ b/app/(app)/products/[id]/page.tsx
@@ -89,7 +89,7 @@ export default async function ProductBacklogPage({ params }: Props) {
           left={
             <PbiList
               productId={id}
-              pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, title: p.title, priority: p.priority }))}
+              pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, title: p.title, priority: p.priority, description: p.description }))}
               isDemo={isDemo}
             />
           }
diff --git a/components/backlog/pbi-dialog.tsx b/components/backlog/pbi-dialog.tsx
new file mode 100644
index 0000000..166bb12
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index a8e25cf..6e0450c 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -1,8 +1,6 @@
 'use client'
 
 import { useState, useTransition, useEffect } from 'react'
-import { useActionState } from 'react'
-import { useFormStatus } from 'react-dom'
 import {
   DndContext,
   DragEndEvent,
@@ -24,15 +22,15 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { useSelectionStore } from '@/stores/selection-store'
 import { usePlannerStore } from '@/stores/planner-store'
-import { createPbiAction, deletePbiAction } from '@/actions/pbis'
+import { deletePbiAction } from '@/actions/pbis'
 import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
+import { PbiDialog, type PbiDialogState } from './pbi-dialog'
 
 const PRIORITY_LABELS: Record<number, string> = {
   1: 'Kritiek',
@@ -52,6 +50,7 @@ interface Pbi {
   id: string
   title: string
   priority: number
+  description?: string | null
 }
 
 interface PbiListProps {
@@ -66,12 +65,14 @@ function SortablePbiRow({
   isSelected,
   isDemo,
   onSelect,
+  onEdit,
   onDelete,
 }: {
   pbi: Pbi
   isSelected: boolean
   isDemo: boolean
   onSelect: () => void
+  onEdit: () => void
   onDelete: () => void
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -107,69 +108,33 @@ function SortablePbiRow({
       )}
       <span className="text-sm truncate flex-1">{pbi.title}</span>
       {!isDemo && (
-        <button
-          onClick={(e) => { e.stopPropagation(); onDelete() }}
-          className="opacity-0 group-hover:opacity-100 ml-2 text-muted-foreground hover:text-error text-xs shrink-0"
-          aria-label="Verwijder PBI"
-        >
-          ×
-        </button>
+        <div className="flex items-center gap-1 ml-2 shrink-0">
+          <button
+            onClick={(e) => { e.stopPropagation(); onEdit() }}
+            className="border border-border rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors"
+            aria-label="Bewerk PBI"
+          >
+            ✎
+          </button>
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete() }}
+            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error text-xs"
+            aria-label="Verwijder PBI"
+          >
+            ×
+          </button>
+        </div>
       )}
     </div>
   )
 }
 
-// --- Inline create form ---
-function CreatePbiForm({
-  productId,
-  priority,
-  onDone,
-}: {
-  productId: string
-  priority: number
-  onDone: () => void
-}) {
-  const [state, formAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await createPbiAction(_prev, fd)
-      if (result?.success) { toast.success('PBI aangemaakt'); onDone() }
-      return result
-    },
-    undefined
-  )
-  const error = state?.error
-
-  return (
-    <form action={formAction} className="flex gap-2 p-2">
-      <input type="hidden" name="productId" value={productId} />
-      <input type="hidden" name="priority" value={priority} />
-      <Input name="title" autoFocus placeholder="PBI-titel…" className="h-7 text-sm" required />
-      <CreateSubmitButton />
-      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>
-        ×
-      </Button>
-      {typeof error === 'string' && (
-        <p className="text-xs text-error self-center">{error}</p>
-      )}
-    </form>
-  )
-}
-
-function CreateSubmitButton() {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" size="sm" className="h-7" disabled={pending}>
-      {pending ? '…' : 'Toevoegen'}
-    </Button>
-  )
-}
-
 // --- Main component ---
 export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
   const { selectedPbiId, selectPbi } = useSelectionStore()
   const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
   const [filterPriority, setFilterPriority] = useState<number | null>(null)
-  const [creatingForPriority, setCreatingForPriority] = useState<number | null>(null)
+  const [dialogState, setDialogState] = useState<PbiDialogState | null>(null)
   const [activeDragId, setActiveDragId] = useState<string | null>(null)
   const [, startTransition] = useTransition()
 
@@ -197,9 +162,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
     return acc
   }, {} as Record<number, Pbi[]>)
 
-  const visiblePriorities = [1, 2, 3, 4].filter(
-    p => grouped[p].length > 0 || creatingForPriority === p
-  )
+  const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -292,7 +255,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
               <Button
                 size="sm"
                 className="h-7 text-xs"
-                onClick={() => setCreatingForPriority(creatingForPriority ? null : 2)}
+                onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}
               >
                 + PBI
               </Button>
@@ -302,17 +265,18 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
       />
 
       <div className="flex-1 overflow-y-auto">
-        {pbis.length === 0 && creatingForPriority === null ? (
+        {pbis.length === 0 ? (
           <div className="p-8 text-center text-muted-foreground text-sm space-y-3">
             <p>Nog geen PBI&apos;s aangemaakt.</p>
             {!isDemo && (
-              <Button size="sm" variant="outline" onClick={() => setCreatingForPriority(2)}>
+              <Button size="sm" variant="outline" onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: 2 })}>
                 Maak je eerste PBI aan
               </Button>
             )}
           </div>
         ) : (
           <DndContext
+            id="pbi-list"
             sensors={sensors}
             collisionDetection={closestCenter}
             onDragStart={handleDragStart}
@@ -328,7 +292,7 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
                     <div className="flex-1 h-px bg-border" />
                     {!isDemo && (
                       <button
-                        onClick={() => setCreatingForPriority(priority)}
+                        onClick={() => setDialogState({ mode: 'create', productId, defaultPriority: priority })}
                         className="text-xs text-muted-foreground hover:text-foreground"
                       >
                         +
@@ -347,36 +311,14 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
                         isSelected={selectedPbiId === pbi.id}
                         isDemo={isDemo}
                         onSelect={() => selectPbi(pbi.id)}
+                        onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
                         onDelete={() => handleDelete(pbi.id)}
                       />
                     ))}
                   </SortableContext>
 
-                  {creatingForPriority === priority && (
-                    <CreatePbiForm
-                      productId={productId}
-                      priority={priority}
-                      onDone={() => setCreatingForPriority(null)}
-                    />
-                  )}
                 </div>
               ))}
-
-              {creatingForPriority !== null && !visiblePriorities.includes(creatingForPriority) && (
-                <div>
-                  <div className="flex items-center gap-2 px-4 py-1.5">
-                    <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingForPriority])}>
-                      {PRIORITY_LABELS[creatingForPriority]}
-                    </span>
-                    <div className="flex-1 h-px bg-border" />
-                  </div>
-                  <CreatePbiForm
-                    productId={productId}
-                    priority={creatingForPriority}
-                    onDone={() => setCreatingForPriority(null)}
-                  />
-                </div>
-              )}
             </div>
 
             <DragOverlay>
@@ -389,6 +331,11 @@ export function PbiList({ productId, pbis, isDemo }: PbiListProps) {
           </DndContext>
         )}
       </div>
+
+      <PbiDialog
+        state={dialogState}
+        onClose={() => setDialogState(null)}
+      />
     </div>
   )
 }
diff --git a/components/backlog/story-dialog.tsx b/components/backlog/story-dialog.tsx
new file mode 100644
index 0000000..5077d5d
--- /dev/null
+++ b/components/backlog/story-dialog.tsx
@@ -0,0 +1,282 @@
+'use client'
+
+import { useEffect, useRef, useState, useTransition } from 'react'
+import { useActionState } from 'react'
+import { useFormStatus } from 'react-dom'
+import { toast } from 'sonner'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogClose,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+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 { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
+import { cn } from '@/lib/utils'
+import type { Story } from './story-panel'
+
+export type StoryDialogState =
+  | { mode: 'create'; pbiId: string; productId: string; defaultPriority?: number }
+  | { mode: 'edit'; story: Story; productId: string }
+
+interface StoryDialogProps {
+  state: StoryDialogState | null
+  onClose: () => void
+  isDemo?: boolean
+}
+
+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',
+  DONE: 'bg-status-done/15 text-status-done border-status-done/30',
+}
+const STATUS_LABELS: Record<string, string> = {
+  OPEN: 'Open',
+  IN_SPRINT: 'In Sprint',
+  DONE: 'Klaar',
+}
+
+function SubmitButton({ label }: { label: string }) {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" 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
+  const createState_ = isEdit ? null : (state as Extract<StoryDialogState, { mode: 'create' }> | null)
+
+  const [priority, setPriority] = useState(story?.priority ?? createState_?.defaultPriority ?? 2)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [isDeleting, startDeleteTransition] = useTransition()
+  const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
+
+  useEffect(() => {
+    if (!state) return
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setConfirmDelete(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)
+      if (result?.success) { toast.success('Story aangemaakt'); onClose() }
+      else if (typeof result?.error === 'string') toast.error(result.error)
+      return result
+    },
+    undefined
+  )
+
+  const [updateResult, updateAction] = useActionState(
+    async (_prev: unknown, fd: FormData) => {
+      const result = await updateStoryAction(_prev, fd)
+      if (result?.success) { toast.success('Story opgeslagen'); onClose() }
+      else if (typeof result?.error === 'string') toast.error(result.error)
+      return result
+    },
+    undefined
+  )
+
+  const fieldError = (field: string) => {
+    const err = updateResult?.error
+    if (!err || typeof err === 'string') return undefined
+    return (err as Record<string, string[]>)[field]?.[0]
+  }
+
+  function handleDelete() {
+    if (!story) return
+    startDeleteTransition(async () => {
+      const result = await deleteStoryAction(story.id)
+      if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
+      else toast.success('Story verwijderd')
+      onClose()
+    })
+  }
+
+  const titleRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (state) setTimeout(() => titleRef.current?.focus(), 50)
+  }, [state])
+
+  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">
+          <DialogTitle>{isEdit ? story!.title : 'Nieuwe story'}</DialogTitle>
+          {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} />
+
+          <div className="flex-1 overflow-y-auto">
+            {showForm ? (
+              <div className="p-5 space-y-4">
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
+                  <Input
+                    ref={titleRef}
+                    name="title"
+                    defaultValue={story?.title ?? ''}
+                    required
+                    maxLength={200}
+                    className={fieldError('title') ? 'border-error' : ''}
+                  />
+                  {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
+                </div>
+
+                <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} />
+                </div>
+
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    Omschrijving <span className="normal-case font-normal">(optioneel)</span>
+                  </label>
+                  <Textarea
+                    name="description"
+                    rows={3}
+                    defaultValue={story?.description ?? ''}
+                    placeholder="Als… wil ik… zodat…"
+                    className="resize-none"
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    Acceptatiecriteria <span className="normal-case font-normal">(optioneel)</span>
+                  </label>
+                  <Textarea
+                    name="acceptance_criteria"
+                    rows={3}
+                    defaultValue={story?.acceptance_criteria ?? ''}
+                    placeholder="- Gegeven… Als… Dan…"
+                    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">
+                {story?.description && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
+                    <p className="text-sm">{story.description}</p>
+                  </div>
+                )}
+                {story?.acceptance_criteria && (
+                  <div>
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
+                    <p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {isEdit && (
+              <div className="px-5 py-4 border-t border-border">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
+                {logs && 'logs' in logs && logs.logs ? (
+                  <StoryLog
+                    logs={logs.logs.map(l => ({
+                      ...l,
+                      status: l.status ?? null,
+                      commit_hash: l.commit_hash ?? null,
+                      commit_message: l.commit_message ?? null,
+                    }))}
+                    repoUrl={logs.repoUrl}
+                  />
+                ) : (
+                  <p className="text-xs text-muted-foreground">Laden…</p>
+                )}
+              </div>
+            )}
+          </div>
+
+          {isEdit && !isDemo && (
+            <div className="px-5 py-3 border-t border-border shrink-0">
+              {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>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="text-error hover:bg-error/10"
+                  onClick={() => setConfirmDelete(true)}
+                >
+                  Story verwijderen
+                </Button>
+              )}
+            </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" />}>
+              {isDemo ? 'Sluiten' : 'Annuleren'}
+            </DialogClose>
+            {!isDemo && <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} />}
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/backlog/story-panel.tsx b/components/backlog/story-panel.tsx
index 8d647c4..054bebb 100644
--- a/components/backlog/story-panel.tsx
+++ b/components/backlog/story-panel.tsx
@@ -1,7 +1,6 @@
 'use client'
 
-import { useState, useTransition, useEffect, useActionState } from 'react'
-import { useFormStatus } from 'react-dom'
+import { useState, useTransition, useEffect } from 'react'
 import {
   DndContext,
   DragEndEvent,
@@ -23,16 +22,13 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
 import { Badge } from '@/components/ui/badge'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { useSelectionStore } from '@/stores/selection-store'
 import { usePlannerStore } from '@/stores/planner-store'
-import { createStoryAction, updateStoryAction, deleteStoryAction, reorderStoriesAction, getStoryLogsAction } from '@/actions/stories'
-import { StoryLog } from '@/components/shared/story-log'
+import { reorderStoriesAction } from '@/actions/stories'
+import { StoryDialog, type StoryDialogState } from './story-dialog'
 import { cn } from '@/lib/utils'
 
 const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
@@ -95,9 +91,17 @@ function SortableStoryBlock({
       {...listeners}
       onClick={onClick}
       title={story.title}
-      className="w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none"
+      className="relative w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none"
     >
-      <p className="text-xs font-medium text-foreground line-clamp-3 min-h-[3rem]">
+      <button
+        onClick={(e) => { e.stopPropagation(); onClick() }}
+        onPointerDown={(e) => e.stopPropagation()}
+        className="absolute top-1.5 right-2 border border-border rounded px-1 py-0.5 text-xs text-muted-foreground hover:text-foreground hover:bg-surface-container transition-colors leading-none"
+        aria-label="Bewerk story"
+      >
+        ✎
+      </button>
+      <p className="text-xs font-medium text-foreground line-clamp-3 min-h-[3rem] pr-4">
         {story.title}
       </p>
       <div className="flex flex-col gap-1">
@@ -112,213 +116,13 @@ function SortableStoryBlock({
   )
 }
 
-// --- Story detail slide-over ---
-function StoryDetailSheet({
-  story,
-  productId: _productId,
-  pbiId: _pbiId,
-  onClose,
-  isDemo,
-}: {
-  story: Story
-  productId: string
-  pbiId: string
-  onClose: () => void
-  isDemo: boolean
-}) {
-  const [confirmDelete, setConfirmDelete] = useState(false)
-  const [isDeleting, startDeleteTransition] = useTransition()
-  const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
-
-  useEffect(() => {
-    getStoryLogsAction(story.id).then(setLogs)
-  }, [story.id])
-
-  const [state, formAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await updateStoryAction(_prev, fd)
-      if (result?.success) { toast.success('Story opgeslagen'); onClose() }
-      return result
-    },
-    undefined
-  )
-
-  function handleDelete() {
-    startDeleteTransition(async () => {
-      const result = await deleteStoryAction(story.id)
-      if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
-      else toast.success('Story verwijderd')
-      onClose()
-    })
-  }
-
-  const fieldError = (field: string) => {
-    const err = state?.error
-    if (!err || typeof err === 'string') return undefined
-    return (err as Record<string, string[]>)[field]?.[0]
-  }
-
-  return (
-    <Sheet open onOpenChange={(open) => { if (!open) onClose() }}>
-      <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
-        <SheetHeader className="px-5 pt-5 pb-4 border-b border-border">
-          <SheetTitle>{story.title}</SheetTitle>
-          <div className="flex gap-2 mt-1">
-            <Badge className={cn('text-xs border', PRIORITY_COLORS[story.priority])}>
-              {PRIORITY_LABELS[story.priority]}
-            </Badge>
-            <Badge className={cn('text-xs border', STATUS_COLORS[story.status])}>
-              {STATUS_LABELS[story.status]}
-            </Badge>
-          </div>
-        </SheetHeader>
-
-        <div className="flex-1 overflow-y-auto">
-          {!isDemo ? (
-            <form action={formAction} className="p-5 space-y-4">
-              <input type="hidden" name="id" value={story.id} />
-              <input type="hidden" name="priority" value={story.priority} />
-
-              <div className="space-y-1.5">
-                <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
-                <Input name="title" defaultValue={story.title} required className={fieldError('title') ? 'border-error' : ''} />
-                {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
-              </div>
-
-              <div className="space-y-1.5">
-                <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Omschrijving</label>
-                <Textarea name="description" rows={4} defaultValue={story.description ?? ''} placeholder="Als… wil ik… zodat…" />
-              </div>
-
-              <div className="space-y-1.5">
-                <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Acceptatiecriteria</label>
-                <Textarea name="acceptance_criteria" rows={4} defaultValue={story.acceptance_criteria ?? ''} placeholder="- Gegeven… Als… Dan…" />
-              </div>
-
-              {typeof state?.error === 'string' && (
-                <p className="text-xs text-error">{state.error}</p>
-              )}
-
-              <div className="flex gap-2 pt-2">
-                <SaveButton />
-                <Button type="button" variant="ghost" onClick={onClose}>Annuleren</Button>
-              </div>
-            </form>
-          ) : (
-            <div className="p-5 space-y-4">
-              {story.description && (
-                <div>
-                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
-                  <p className="text-sm">{story.description}</p>
-                </div>
-              )}
-              {story.acceptance_criteria && (
-                <div>
-                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Acceptatiecriteria</p>
-                  <p className="text-sm whitespace-pre-line">{story.acceptance_criteria}</p>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Activity log */}
-        <div className="px-5 py-4 border-t border-border">
-          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
-          {logs && 'logs' in logs && logs.logs ? (
-            <StoryLog logs={logs.logs.map(l => ({ ...l, status: l.status ?? null, commit_hash: l.commit_hash ?? null, commit_message: l.commit_message ?? null }))} repoUrl={logs.repoUrl} />
-          ) : (
-            <p className="text-xs text-muted-foreground">Laden…</p>
-          )}
-        </div>
-
-        {!isDemo && (
-          <div className="border-t border-border p-4">
-            {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 variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
-                  {isDeleting ? 'Bezig…' : 'Verwijderen'}
-                </Button>
-                <Button variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>Annuleren</Button>
-              </div>
-            ) : (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="text-error hover:bg-error/10"
-                onClick={() => setConfirmDelete(true)}
-              >
-                Story verwijderen
-              </Button>
-            )}
-          </div>
-        )}
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-function SaveButton() {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" disabled={pending}>
-      {pending ? 'Opslaan…' : 'Opslaan'}
-    </Button>
-  )
-}
-
-// --- Inline create form ---
-function CreateStoryForm({
-  productId,
-  pbiId,
-  priority,
-  onDone,
-}: {
-  productId: string
-  pbiId: string
-  priority: number
-  onDone: () => void
-}) {
-  const [state, formAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await createStoryAction(_prev, fd)
-      if (result?.success) { toast.success('Story aangemaakt'); onDone() }
-      return result
-    },
-    undefined
-  )
-
-  return (
-    <form action={formAction} className="flex gap-2 items-center mt-2">
-      <input type="hidden" name="pbiId" value={pbiId} />
-      <input type="hidden" name="productId" value={productId} />
-      <input type="hidden" name="priority" value={priority} />
-      <Input name="title" autoFocus placeholder="Story titel…" className="h-7 text-sm flex-1" required />
-      <CreateStorySubmitButton />
-      <Button type="button" variant="ghost" size="sm" className="h-7" onClick={onDone}>×</Button>
-      {typeof state?.error === 'string' && <p className="text-xs text-error">{state.error}</p>}
-    </form>
-  )
-}
-
-function CreateStorySubmitButton() {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" size="sm" className="h-7" disabled={pending}>
-      {pending ? '…' : 'Toevoegen'}
-    </Button>
-  )
-}
-
 // --- Main component ---
 export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) {
   const { selectedPbiId } = useSelectionStore()
   const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
   const [filterStatus, setFilterStatus] = useState<string | null>(null)
   const [filterPriority, setFilterPriority] = useState<number | null>(null)
-  const [creatingPriority, setCreatingPriority] = useState<number | null>(null)
-  const [openStory, setOpenStory] = useState<Story | null>(null)
+  const [storyDialogState, setStoryDialogState] = useState<StoryDialogState | null>(null)
   const [activeDragId, setActiveDragId] = useState<string | null>(null)
   const [, startTransition] = useTransition()
 
@@ -346,9 +150,7 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
     return acc
   }, {} as Record<number, Story[]>)
 
-  const visiblePriorities = [1, 2, 3, 4].filter(
-    p => grouped[p].length > 0 || creatingPriority === p
-  )
+  const visiblePriorities = [1, 2, 3, 4].filter(p => grouped[p].length > 0)
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -422,7 +224,7 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
               <Button
                 size="sm"
                 className="h-7 text-xs"
-                onClick={() => setCreatingPriority(creatingPriority ? null : 2)}
+                onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}
               >
                 + Story
               </Button>
@@ -436,17 +238,18 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
           <p className="text-sm text-muted-foreground text-center mt-8">
             Selecteer een PBI om de stories te bekijken.
           </p>
-        ) : rawStories.length === 0 && creatingPriority === null ? (
+        ) : rawStories.length === 0 ? (
           <div className="text-center mt-8 space-y-3">
             <p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
-            {!isDemo && (
-              <Button size="sm" variant="outline" onClick={() => setCreatingPriority(2)}>
+            {!isDemo && selectedPbiId && (
+              <Button size="sm" variant="outline" onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
                 Maak je eerste story aan
               </Button>
             )}
           </div>
         ) : (
           <DndContext
+            id="story-panel"
             sensors={sensors}
             collisionDetection={closestCenter}
             onDragStart={handleDragStart}
@@ -460,9 +263,9 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
                       {PRIORITY_LABELS[priority]}
                     </span>
                     <div className="flex-1 h-px bg-border" />
-                    {!isDemo && (
+                    {!isDemo && selectedPbiId && (
                       <button
-                        onClick={() => setCreatingPriority(priority)}
+                        onClick={() => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: priority })}
                         className="text-xs text-muted-foreground hover:text-foreground"
                       >
                         +
@@ -479,39 +282,14 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
                         <SortableStoryBlock
                           key={story.id}
                           story={story}
-                          onClick={() => setOpenStory(story)}
+                          onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
                         />
                       ))}
                     </div>
                   </SortableContext>
 
-                  {creatingPriority === priority && selectedPbiId && (
-                    <CreateStoryForm
-                      productId={productId}
-                      pbiId={selectedPbiId}
-                      priority={priority}
-                      onDone={() => setCreatingPriority(null)}
-                    />
-                  )}
                 </div>
               ))}
-
-              {creatingPriority !== null && !visiblePriorities.includes(creatingPriority) && selectedPbiId && (
-                <div>
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className={cn('text-xs font-semibold px-2 py-0.5 rounded-full border', PRIORITY_COLORS[creatingPriority])}>
-                      {PRIORITY_LABELS[creatingPriority]}
-                    </span>
-                    <div className="flex-1 h-px bg-border" />
-                  </div>
-                  <CreateStoryForm
-                    productId={productId}
-                    pbiId={selectedPbiId}
-                    priority={creatingPriority}
-                    onDone={() => setCreatingPriority(null)}
-                  />
-                </div>
-              )}
             </div>
 
             <DragOverlay>
@@ -525,15 +303,11 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
         )}
       </div>
 
-      {openStory && selectedPbiId && (
-        <StoryDetailSheet
-          story={openStory}
-          productId={productId}
-          pbiId={selectedPbiId}
-          isDemo={isDemo}
-          onClose={() => setOpenStory(null)}
-        />
-      )}
+      <StoryDialog
+        state={storyDialogState}
+        onClose={() => setStoryDialogState(null)}
+        isDemo={isDemo}
+      />
     </div>
   )
 }
diff --git a/components/shared/priority-select.tsx b/components/shared/priority-select.tsx
new file mode 100644
index 0000000..a66e66c
--- /dev/null
+++ b/components/shared/priority-select.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
+import { cn } from '@/lib/utils'
+
+export const PRIORITY_LABELS: Record<number, string> = {
+  1: 'Kritiek',
+  2: 'Hoog',
+  3: 'Gemiddeld',
+  4: 'Laag',
+}
+
+export const PRIORITY_COLORS: Record<number, string> = {
+  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
+  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
+  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
+  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
+}
+
+interface PrioritySelectProps {
+  value: number
+  onChange: (value: number) => void
+  className?: string
+}
+
+export function PrioritySelect({ value, onChange, className }: PrioritySelectProps) {
+  return (
+    <Select
+      value={String(value)}
+      onValueChange={(v) => { if (v) onChange(parseInt(v)) }}
+    >
+      <SelectTrigger className={cn('w-full', className)}>
+        {PRIORITY_LABELS[value] ?? String(value)}
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="1">Kritiek</SelectItem>
+        <SelectItem value="2">Hoog</SelectItem>
+        <SelectItem value="3">Gemiddeld</SelectItem>
+        <SelectItem value="4">Laag</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 014f5aa..eca9444 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -31,7 +31,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-sm duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}