Unified two-row TYPO3-style docheader across page/view/media/edit modules #74

New issue

Closed

opened 2026-07-17 12:49:14 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

2026-07-17 12:49:14 +02:00

Owner

What to build

Replace the four bespoke module headers — .page-docheader (PagePane.tsx ~1753), .edit-pane__header (EditPane.tsx ~216), .media-toolbar (MediaModule.tsx ~1482), .preview-pane__head (PreviewPane.tsx ~236) — with one shared two-row, TYPO3-style docheader component, migrating all four modules onto it end-to-end (component, CSS, module JSX, tests).

Agreed design (full decision record)

Structure — two-row, TYPO3-faithful docheader:

Row 1: button bar with a left group and a right group.
Row 2: context row — location (crumbs) left, identity + state right. Collapses entirely when a module has nothing to show (view module).

Button split — TYPO3-literal: left group holds ALL document actions including View and the viewport toggle. Right group is reserved for future system-level tools (shortcuts, refresh, help) and is empty everywhere today — it must still exist in the component.

Button presentation: icon (lucide) + text label on every button. Not icon-only.

Ordering convention (left group): Close/back leftmost → primary action (Save/Publish) → secondary saves → Properties → Undo → destructive (Discard) → View last.

Emphasis: exactly one green primary per bar; all other buttons flat gray. Page: Publish. Edit: Save. Media: Upload. View: none.

Per-module row 1 (approved):

Page (normal): [☁ Publish] [⚙ Properties] [↶ Undo] [↺ Discard] [↗ View]
Page (props mode): left group swaps to [⬅ Close] [💾 Save]; row 2 unchanged; the "Saved" note moves to row 2 right. No disabled leftovers.
Edit: [⬅ Close] [💾 Save] [💾 Save & Close] (Close moves from last to first)
Media: [📁 New folder] [⬆ Upload]
View: Desktop/Mobile segmented control in the left group.

Per-module row 2 (approved):

Page: path as crumb segments left (e.g. / products / widgets) — each segment resolving to a real ancestor page is clickable and navigates like the tree; title + git-state badge right.
Media: existing folder crumbs left (keep navigation behavior); right empty.
Edit: left empty; element icon + label + "Saved" indicator right.
View: row 2 collapsed.

Viewport toggle: stays a segmented control (joined borders, aria-pressed), restyled with shared tokens, as a second docheader primitive — not two pressed action buttons.

Implementation notes

New shared Solid component web/src/components/Docheader.tsx with four slot props (buttons-left, buttons-right, context-left, context-right) + DocheaderButton primitive (icon, label, primary flag, disabled, title) + segmented-toggle primitive.
One .docheader CSS family consuming the tokens from #72; delete .page-docheader, .media-toolbar, .preview-pane__head header rules, and .edit-pane__header/.btn-save-in-header usage.
Out of scope: global .app-header, tree pane pane__title, inner panel headers (media detail aside, layout-cell heads, element toolbars).
Keep existing data-testids stable (page-docheader, publish-page, edit-header, edit-save, edit-save-close, edit-close, media-toolbar, …); update tests only where ordering/DOM structure assertions break.
Toolchains via nix: nix shell nixpkgs#go --command ...; web/dist needed for go test ./.... scaffold/site/AGENTS.md unaffected (admin-UI-only change).

Acceptance criteria

All four modules render their header through the shared Docheader component; the four legacy header class families are gone from styles.css and JSX.
Row 1 button contents, ordering, and single-green-primary emphasis match the per-module specs above, including the page props-mode swap.
Row 2 matches the per-module specs; page path crumbs navigate to real ancestor pages; view module shows no row 2.
Right button group exists in the component (empty in all modules).
Existing data-testids unchanged; go test ./... and the web test suite pass.
Manual click-through verified: page normal + props mode, publish flow, media upload/new-folder, edit save flows, viewport toggle.

Blocked by

## What to build Replace the four bespoke module headers — `.page-docheader` (PagePane.tsx ~1753), `.edit-pane__header` (EditPane.tsx ~216), `.media-toolbar` (MediaModule.tsx ~1482), `.preview-pane__head` (PreviewPane.tsx ~236) — with one shared two-row, TYPO3-style docheader component, migrating all four modules onto it end-to-end (component, CSS, module JSX, tests). ### Agreed design (full decision record) **Structure — two-row, TYPO3-faithful docheader:** - Row 1: button bar with a left group and a right group. - Row 2: context row — location (crumbs) left, identity + state right. Collapses entirely when a module has nothing to show (view module). **Button split — TYPO3-literal:** left group holds ALL document actions including View and the viewport toggle. Right group is reserved for future system-level tools (shortcuts, refresh, help) and is empty everywhere today — it must still exist in the component. **Button presentation:** icon (lucide) + text label on every button. Not icon-only. **Ordering convention (left group):** Close/back leftmost → primary action (Save/Publish) → secondary saves → Properties → Undo → destructive (Discard) → View last. **Emphasis:** exactly one green primary per bar; all other buttons flat gray. Page: Publish. Edit: Save. Media: Upload. View: none. **Per-module row 1 (approved):** - Page (normal): `[☁ Publish] [⚙ Properties] [↶ Undo] [↺ Discard] [↗ View]` - Page (props mode): left group swaps to `[⬅ Close] [💾 Save]`; row 2 unchanged; the "Saved" note moves to row 2 right. No disabled leftovers. - Edit: `[⬅ Close] [💾 Save] [💾 Save & Close]` (Close moves from last to first) - Media: `[📁 New folder] [⬆ Upload]` - View: Desktop/Mobile segmented control in the left group. **Per-module row 2 (approved):** - Page: path as crumb segments left (e.g. `/ products / widgets`) — each segment resolving to a real ancestor page is clickable and navigates like the tree; title + git-state badge right. - Media: existing folder crumbs left (keep navigation behavior); right empty. - Edit: left empty; element icon + label + "Saved" indicator right. - View: row 2 collapsed. **Viewport toggle:** stays a segmented control (joined borders, `aria-pressed`), restyled with shared tokens, as a second docheader primitive — not two pressed action buttons. ### Implementation notes - New shared Solid component `web/src/components/Docheader.tsx` with four slot props (buttons-left, buttons-right, context-left, context-right) + `DocheaderButton` primitive (icon, label, primary flag, disabled, title) + segmented-toggle primitive. - One `.docheader` CSS family consuming the tokens from #72; delete `.page-docheader`, `.media-toolbar`, `.preview-pane__head` header rules, and `.edit-pane__header`/`.btn-save`-in-header usage. - Out of scope: global `.app-header`, tree pane `pane__title`, inner panel headers (media detail aside, layout-cell heads, element toolbars). - Keep existing `data-testid`s stable (`page-docheader`, `publish-page`, `edit-header`, `edit-save`, `edit-save-close`, `edit-close`, `media-toolbar`, …); update tests only where ordering/DOM structure assertions break. - Toolchains via nix: `nix shell nixpkgs#go --command ...`; `web/dist` needed for `go test ./...`. `scaffold/site/AGENTS.md` unaffected (admin-UI-only change). ## Acceptance criteria - [ ] All four modules render their header through the shared `Docheader` component; the four legacy header class families are gone from styles.css and JSX. - [ ] Row 1 button contents, ordering, and single-green-primary emphasis match the per-module specs above, including the page props-mode swap. - [ ] Row 2 matches the per-module specs; page path crumbs navigate to real ancestor pages; view module shows no row 2. - [ ] Right button group exists in the component (empty in all modules). - [ ] Existing `data-testid`s unchanged; `go test ./...` and the web test suite pass. - [ ] Manual click-through verified: page normal + props mode, publish flow, media upload/new-folder, edit save flows, viewport toggle. ## Blocked by - #72

dominik.polakovics added the

ready-for-agent

label

2026-07-17 12:49:14 +02:00

dominik.polakovics referenced this issue

2026-07-17 12:49:21 +02:00

Unified two-row TYPO3-style docheader across page/view/media/edit modules #73

dominik.polakovics referenced this issue from a commit

2026-07-17 14:33:10 +02:00

feat(web): unified two-row TYPO3-style docheader across all four modules

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

2026-07-17 14:33:26 +02:00