feat(solo-dialogs): layout-conformance + entity-profielen

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

- batch-enqueue-blocker-dialog: entityDialog* layout-classes
- task-detail-dialog: entityDialog* layout-classes (rest van interne
  layout blijft custom — hybride detail+blur-save view)
- docs/specs/dialogs/task-detail.md — profiel dat het blur-save +
  PATCH-route patroon documenteert (afwijking van klassieke
  Server-Action+form flow)
- docs/specs/dialogs/batch-enqueue-blocker.md — profiel voor
  informational confirm-dialog

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-04 07:32:57 +02:00
parent 784791d8f9
commit 0a58557e9d
5 changed files with 157 additions and 34 deletions

View file

@ -1,8 +1,13 @@
'use client'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import {
entityDialogContentClasses,
entityDialogFooterClasses,
entityDialogHeaderClasses,
} from '@/components/shared/entity-dialog-layout'
interface BatchEnqueueBlockerDialogProps {
open: boolean
@ -32,12 +37,12 @@ export function BatchEnqueueBlockerDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Blokkade gedetecteerd</DialogTitle>
</DialogHeader>
<DialogContent showCloseButton={false} className={entityDialogContentClasses}>
<div className={entityDialogHeaderClasses}>
<DialogTitle className="text-xl font-semibold">Blokkade gedetecteerd</DialogTitle>
</div>
<div className="space-y-3 py-2 text-sm text-foreground">
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 text-sm text-foreground">
<p>
{BLOCKER_REASON_LABELS[blockerReason]}:{' '}
<span className="font-medium">{blockerLabel}</span>.
@ -53,33 +58,35 @@ export function BatchEnqueueBlockerDialog({
)}
</div>
<div className="flex justify-end gap-2 pt-2 border-t border-outline-variant">
<Button variant="ghost" onClick={onCancel}>
Annuleer
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger
render={
<span>
<Button
onClick={onConfirm}
disabled={noTasksBeforeBlocker}
>
{prefixCount === 1
? `Stuur ${prefixCount} taak tot aan blokkade`
: `Stuur ${prefixCount} taken tot aan blokkade`}
</Button>
</span>
}
/>
{noTasksBeforeBlocker && (
<TooltipContent side="top" className="text-xs">
Geen taken vóór blokkade
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<div className={entityDialogFooterClasses}>
<div className="flex justify-end gap-2">
<Button variant="ghost" onClick={onCancel}>
Annuleer
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger
render={
<span>
<Button
onClick={onConfirm}
disabled={noTasksBeforeBlocker}
>
{prefixCount === 1
? `Stuur ${prefixCount} taak tot aan blokkade`
: `Stuur ${prefixCount} taken tot aan blokkade`}
</Button>
</span>
}
/>
{noTasksBeforeBlocker && (
<TooltipContent side="top" className="text-xs">
Geen taken vóór blokkade
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
</div>
</div>
</DialogContent>
</Dialog>

View file

@ -5,6 +5,7 @@ import Link from 'next/link'
import { toast } from 'sonner'
import { Markdown } from '@/components/markdown'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { entityDialogContentClasses } from '@/components/shared/entity-dialog-layout'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
@ -373,7 +374,7 @@ function TaskDetailContent({ task, productId, isDemo, repoUrl, onClose }: TaskDe
export function TaskDetailDialog({ task, productId, isDemo, repoUrl, onClose }: TaskDetailDialogProps) {
return (
<Dialog open={!!task} onOpenChange={(open) => { if (!open) onClose() }}>
<DialogContent className="sm:max-w-lg">
<DialogContent showCloseButton={false} className={entityDialogContentClasses}>
{task && (
<TaskDetailContent
key={task.id}