docs(dialog): inspector-mode formaliseren in patroon-spec
§ 4a beschrijft hybrid detail+inline-edit dialogen met dynamische footer en blur-save: bv. TaskDetailDialog. Maakt expliciet wanneer je deze variant kiest, welke § 4-eisen blijven gelden en welke vervallen (geen dirty-guard, geen Cmd+Enter, geen full-record schema). Profiel docs/specs/dialogs/task-detail.md verwijst nu naar § 4a en documenteert de layout-keuzes (sticky header, scrollable body, flex-wrap footer met job-status, plan-textarea max-h-[40vh]). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
61b3db195c
commit
d09ec7e77e
2 changed files with 60 additions and 9 deletions
|
|
@ -8,9 +8,9 @@ last_updated: 2026-05-04
|
|||
|
||||
# TaskDetailDialog Profiel
|
||||
|
||||
> Volgt `docs/patterns/dialog.md`. Dit document beschrijft alleen de Solo-specifieke afwijkingen.
|
||||
> Volgt `docs/patterns/dialog.md` § 4a — **inspector-mode**. Dit document beschrijft alleen de Solo-specifieke invulling.
|
||||
|
||||
> **Niet te verwarren met `TaskDialog`** (`app/_components/tasks/task-dialog.tsx`) — dat is de classic create/edit-dialog voor backlog-taken. **`TaskDetailDialog`** is een solo-board-specifieke detail+edit-overlay die een lopende taak laat zien terwijl de Claude-agent eraan werkt.
|
||||
> **Niet te verwarren met `TaskDialog`** (`app/_components/tasks/task-dialog.tsx`) — dat is de classic create/edit-dialog voor backlog-taken. **`TaskDetailDialog`** is een solo-board-specifieke inspector-dialog die een lopende taak laat zien terwijl de Claude-agent eraan werkt.
|
||||
|
||||
## Doel
|
||||
|
||||
|
|
@ -49,14 +49,22 @@ Dit valt buiten de standaard "Server Action met form" flow van `docs/patterns/di
|
|||
|
||||
## Layout
|
||||
|
||||
Gebruikt `entityDialogContentClasses` voor responsive sizing (§4 spec). Body-layout intern is custom (gegroepeerde secties in plaats van form-fields) want het is een hybride detail+edit-view, niet een klassiek form.
|
||||
Volgt §4 + §4a inspector-layout:
|
||||
- `<DialogContent className={entityDialogContentClasses}>` voor de outer (responsive breakpoints, max-h, flex column)
|
||||
- Sticky header met `shrink-0 + px-6 pt-5 pb-4 + border-b border-outline-variant`
|
||||
- Body in `entityDialogBodyClasses` (`flex-1 overflow-y-auto px-6 py-6 space-y-6`) — secties: Beschrijving, Implementatieplan, verify-only toggle, verify-gate select
|
||||
- Footer in `entityDialogFooterClasses + flex flex-wrap items-center gap-2` — bevat dynamische job-status en context-knoppen (Voer uit / Wacht op agent / Annuleer / Open PR / Open op GitHub / Verify-result)
|
||||
- Plan-textarea krijgt `max-h-[40vh]` zodat een groot plan niet meteen het hele body-gebied claimt; body kan dan scrollen langs de overige secties
|
||||
|
||||
## Bewust NIET in v1
|
||||
## Inspector-mode-vinkjes
|
||||
|
||||
- ❌ **Klassiek save-dan-sluit-form** — blur-save is bewust gekozen omdat de gebruiker tussendoor de plan-tekst herziet terwijl Claude bezig is.
|
||||
- ❌ **Dirty-close-guard** — niet relevant zonder klassiek submit-form; wijzigingen worden direct gepersisteerd.
|
||||
- ❌ **Cmd/Ctrl+Enter shortcut** — geen submit, dus n.v.t.
|
||||
- ❌ **422-fieldErrors** — fine-grained PATCH-route geeft simpele 200/400/403; geen veldgewijze rendering nodig in deze UX.
|
||||
Volgens § 4a:
|
||||
- ✓ Geen `useDirtyCloseGuard` — wijzigingen direct gepersisteerd
|
||||
- ✓ Geen `useDialogSubmitShortcut` — geen submit
|
||||
- ✓ Geen full-record `lib/schemas/<entity>.ts` — fine-grained PATCH per veld
|
||||
- ✓ Dynamische footer met liveness-info (job-status)
|
||||
- ✓ Drielaagse demo-policy aanwezig (zie boven)
|
||||
- ✓ MD3-tokens, motion, backdrop, focus-return uit § 8.4-8.5 erven via `<DialogContent>`
|
||||
|
||||
## Gerelateerde bestanden
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue