feat(static-pages): live device preview (desktop/tablet/mobile)

Milestone 5 of the Static Pages Module sprint.

- New StaticPagePreviewComponent: client-side, sanitized HTML preview at
  desktop/tablet(768px)/mobile(375px) widths, entirely without navigation or
  publish. Uses the same DomSanitizer.sanitize(SecurityContext.HTML, ...)
  pattern as the real storefront renderer (StaticPageComponent), so what
  authors preview here matches what will actually render live.
- Wired into static-pages-editor as a per-page collapsible "Preview" toggle,
  showing the default-locale (or first available) translation's html/title.
- i18n: staticPages.previewDesktop/Tablet/Mobile/Toggle in interface + en/ru/hy.

Gate: tsc --noEmit, npm test (57/57), arch:check, build all green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-17 10:11:31 +04:00
parent 910690c4d1
commit 35ce9ee78a
9 changed files with 160 additions and 0 deletions

View File

@@ -78,6 +78,7 @@
<app-button variant="ghost" size="sm" (click)="move(page.id, -1)">&uarr;</app-button>
<app-button variant="ghost" size="sm" (click)="move(page.id, 1)">&darr;</app-button>
<app-button variant="secondary" size="sm" (click)="duplicatePage(page.id)">{{ 'staticPages.duplicatePage' | translate }}</app-button>
<app-button variant="secondary" size="sm" (click)="togglePreview(page.id)">{{ 'staticPages.previewToggle' | translate }}</app-button>
@if (page.status === 'published') {
<app-button variant="secondary" size="sm" (click)="updatePage(page.id, { status: 'draft' })">{{ 'staticPages.unpublishPageAction' | translate }}</app-button>
} @else {
@@ -87,6 +88,10 @@
</div>
</div>
@if (previewOpenPageId() === page.id) {
<app-static-page-preview [html]="previewHtml(page)" [title]="previewTitle(page)" />
}
<div class="editor-grid three">
<app-form-field [label]="'builder.pageId' | translate" [error]="hasEmptyTitle(page) ? ('staticPages.emptyTitle' | translate) : null">
<app-input [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" />