Page tree UX: drag-and-drop reparent, “Move to…” dialog, delete choice dialog #109

New Issue

fable-5 · 2026-07-14T09:32:43+02:00

fable-5 commented

2026-07-14 09:32:43 +02:00

Context

Moving pages between parents and the per-case delete decision complete the tree UX. Reparent must be available both directly (drag & drop) and accessibly (dialog).

Scope

Extend the sidebar drag & drop (apps/web/src/layout/Sidebar.tsx, apps/web/src/layout/reorder.ts): dropping onto a page reparents (append at end of the new sibling group), dropping between siblings reorders — both via PATCH /pages/:id/position (with parentId for reparent). Keep the existing gate: owner + manual sort + no filter + folder view. Screen-reader announcements like the current reorder flow.
“Move to…” entry in the page overflow menu (apps/web/src/pages/PageActions.tsx): dialog with an indented parent picker (root option first; the page's own subtree disabled), calls the same endpoint. Available to writers in any sort mode.
Replace the delete window.confirm with a dialog: when the page has children (known from the cached pages list), offer “move children up” (mode=promote) vs “delete whole subtree” (mode=subtree); childless pages keep the simple confirm.
Error toasts for page_cycle and page_depth_exceeded (translated via the errors namespace).
i18n de+en.

Acceptance criteria

DnD onto a page reparents; DnD between siblings reorders; both update the tree without reload.
“Move to…” works in alpha/created sort modes too and blocks selecting the page's own subtree.
Delete dialog shows the two modes only when children exist; both modes take effect and are reflected in sidebar and trash.
Depth/cycle server errors surface as translated toasts, tree unchanged.

Technical notes

e2e hooks: keep stable class hooks per the #101 convention; new spec work is bundled in the QA issue.

Dependencies

Requires #106, #107, #108.

Size

~1.5 days.

## Context Moving pages between parents and the per-case delete decision complete the tree UX. Reparent must be available both directly (drag & drop) and accessibly (dialog). ## Scope - Extend the sidebar drag & drop (`apps/web/src/layout/Sidebar.tsx`, `apps/web/src/layout/reorder.ts`): dropping **onto** a page reparents (append at end of the new sibling group), dropping **between** siblings reorders — both via `PATCH /pages/:id/position` (with `parentId` for reparent). Keep the existing gate: owner + manual sort + no filter + folder view. Screen-reader announcements like the current reorder flow. - “Move to…” entry in the page overflow menu (`apps/web/src/pages/PageActions.tsx`): dialog with an indented parent picker (root option first; the page's own subtree disabled), calls the same endpoint. Available to writers in any sort mode. - Replace the delete `window.confirm` with a dialog: when the page has children (known from the cached pages list), offer “move children up” (`mode=promote`) vs “delete whole subtree” (`mode=subtree`); childless pages keep the simple confirm. - Error toasts for `page_cycle` and `page_depth_exceeded` (translated via the errors namespace). - i18n de+en. ## Acceptance criteria - [ ] DnD onto a page reparents; DnD between siblings reorders; both update the tree without reload. - [ ] “Move to…” works in alpha/created sort modes too and blocks selecting the page's own subtree. - [ ] Delete dialog shows the two modes only when children exist; both modes take effect and are reflected in sidebar and trash. - [ ] Depth/cycle server errors surface as translated toasts, tree unchanged. ## Technical notes - e2e hooks: keep stable class hooks per the #101 convention; new spec work is bundled in the QA issue. ## Dependencies Requires #106, #107, #108. ## Size ~1.5 days.

fable-5 added this to the M12 — Page hierarchy & knowledge graph milestone 2026-07-14 09:32:43 +02:00

fable-5 added the

frontend

label 2026-07-14 09:32:43 +02:00

fable-5 referenced this issue

2026-07-14 09:32:45 +02:00

QA: e2e packs, CI wiring and manuals for page tree and knowledge graph #114

fable-5 referenced this issue from a commit

2026-07-14 10:40:10 +02:00

Drag-onto reparent, Move-to dialog, and the delete decision (#109)

fable-5 commented

2026-07-14 11:22:26 +02:00

Implemented in 0308bc7. Row drop zones: edges reorder within the sibling group, the middle band nests the dragged page under the row (outline cue; server cycle/depth refusals surface as a translated banner). "Move to…" in the overflow menu opens a modal parent picker (own subtree disabled, works in any sort mode). Delete decides per case: childless pages keep the plain confirm, pages with subpages get the promote-vs-subtree dialog. The children lookup deliberately reads the cached pages query — an async fetch before window.confirm broke the click→confirm→DELETE rhythm, and a stale childless read errs toward promote, never toward a silent subtree delete.

Implemented in 0308bc7. Row drop zones: edges reorder within the sibling group, the middle band nests the dragged page under the row (outline cue; server cycle/depth refusals surface as a translated banner). "Move to…" in the overflow menu opens a modal parent picker (own subtree disabled, works in any sort mode). Delete decides per case: childless pages keep the plain confirm, pages with subpages get the promote-vs-subtree dialog. The children lookup deliberately reads the cached pages query — an async fetch before `window.confirm` broke the click→confirm→DELETE rhythm, and a stale childless read errs toward promote, never toward a silent subtree delete.

fable-5 closed this issue

2026-07-14 11:22:26 +02:00

fable-5 referenced this issue

2026-07-15 10:53:58 +02:00

Modals transparent: CSS-Token --color-surface ist nirgends definiert #120

Sign in to join this conversation.