Editing screens overhaul: choose a direction and record the mockup #168

New issue

Closed

opened 2026-10-08 21:32:42 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

2026-10-08 21:32:42 +02:00

Owner

Why

The editor's three surfaces are disconnected: the Page module is a list/grid without a preview, the preview is its own View module, and editing an element replaces the list with a full-screen form. The implementation mirrors that: PagePane.tsx is ~2,200 lines, the gap/row/drop markup exists twice (flat list and slot cells), and strips, badges and menus are re-implemented per screen.

Decision

Three interactive mockups were built on one shared component layer, differing only in composition:

A · Page module (TYPO3-faithful: grid, form and properties each take the whole main area) — chosen
B · Studio (preview as canvas + inspector) — rejected: narrow forms, preview instrumentation
C · Workbench (board + edit sheet) — rejected: layering complexity

Direction A was refined over six rounds (equal-height columns, categorised insert dialog, enabled key for pages and elements, TYPO3-style always-visible insert rows doubling as drop targets, cut/copy/paste across pages, inherited-slot override, disabled-page banner, pending-changes panel, unsaved-changes guard, inline validation).

Done when

The chosen mockup, its sources and a decision log live in the repository so implementation issues can reference them.

## Why The editor's three surfaces are disconnected: the Page module is a list/grid without a preview, the preview is its own View module, and editing an element replaces the list with a full-screen form. The implementation mirrors that: `PagePane.tsx` is ~2,200 lines, the gap/row/drop markup exists twice (flat list and slot cells), and strips, badges and menus are re-implemented per screen. ## Decision Three interactive mockups were built on one shared component layer, differing only in composition: - **A · Page module** (TYPO3-faithful: grid, form and properties each take the whole main area) — **chosen** - B · Studio (preview as canvas + inspector) — rejected: narrow forms, preview instrumentation - C · Workbench (board + edit sheet) — rejected: layering complexity Direction A was refined over six rounds (equal-height columns, categorised insert dialog, `enabled` key for pages and elements, TYPO3-style always-visible insert rows doubling as drop targets, cut/copy/paste across pages, inherited-slot override, disabled-page banner, pending-changes panel, unsaved-changes guard, inline validation). ## Done when The chosen mockup, its sources and a decision log live in the repository so implementation issues can reference them.

dominik.polakovics added the

enhancement

label

2026-10-08 21:32:42 +02:00

dominik.polakovics referenced this issue from a commit

2026-10-08 21:32:55 +02:00

docs(mockups): editing screens overhaul — Direction A page-module mockup

dominik.polakovics referenced this issue from a pull request that will close it,

2026-10-08 21:33:10 +02:00

docs(mockups): editing screens overhaul — Direction A page-module mockup #169

dominik.polakovics closed this issue

2026-10-08 21:40:52 +02:00