feat(FTM): New Toolbar - Implement Preview Button and Preview Toolbar

core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_splitbutton.scss

@@ -111,3 +111,18 @@
         }
     }
 }
+
+// Severity for text button
+.p-splitbutton.p-button-text {
+    @extend #text-primary-severity;
+
+    .p-button {
+        &,
+        &:hover,
+        &:focus {
+            color: $color-palette-primary;
+            background-color: transparent;
+            border: transparent;
+        }
+    }
+}

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts

@@ -307,7 +307,7 @@ describe('DotEmaShellComponent', () => {
         it('should call store.loadPageAsset when the `loadPageAsset` is called', () => {
             const spyloadPageAsset = jest.spyOn(store, 'loadPageAsset');
             const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
-            const spyLocation = jest.spyOn(location, 'replaceState');
+            const spyLocation = jest.spyOn(location, 'go');
 
             spectator.detectChanges();
             expect(spyloadPageAsset).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
@@ -376,7 +376,7 @@ describe('DotEmaShellComponent', () => {
 
                 const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
                 const spyUrlTree = jest.spyOn(router, 'createUrlTree');
-                const spyLocation = jest.spyOn(location, 'replaceState');
+                const spyLocation = jest.spyOn(location, 'go');
 
                 store.loadPageAsset(newParams);
                 spectator.detectChanges();
@@ -561,7 +561,7 @@ describe('DotEmaShellComponent', () => {
 
             it('should trigger a store reload if the url is the same', () => {
                 const spyReload = jest.spyOn(store, 'reloadCurrentPage');
-                const spyLocation = jest.spyOn(location, 'replaceState');
+                const spyLocation = jest.spyOn(location, 'go');
                 spectator.detectChanges();
 
                 spectator.triggerEventHandler(

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts

@@ -223,7 +223,6 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
      */
     #updateLocation(queryParams: Params = {}): void {
         const urlTree = this.#router.createUrlTree([], { queryParams });
-
-        this.#location.replaceState(urlTree.toString());
+        this.#location.go(urlTree.toString());
     }
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.html

@@ -3,7 +3,7 @@
         (click)="toggleBookmark()"
         [icon]="bookmarked() ? 'pi pi-star-fill' : 'pi pi-star'"
         [loading]="loading()"
-        styleClass="p-button-text"
+        styleClass="p-button-text p-button-sm"
         data-testId="bookmark-button" />
 } @else {
     <p-button

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.spec.ts

@@ -29,12 +29,6 @@ describe('DotEmaBookmarksComponent', () => {
         providers: [
             DialogService,
             HttpClient,
-            // {
-            //     provide: UVEStore,
-            //     useValue: {
-            //         $previewMode: signal(false)
-            //     }
-            // },
             mockProvider(UVEStore, { $previewMode: signal(false) }),
             {
                 provide: LoginService,

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html

@@ -1,37 +1,37 @@
-<p-toolbar>
-    <div class="p-toolbar-group-start">
-        @if ($toolbar().editor) {
-            <p-button
-                icon="pi pi-eye"
-                styleClass="p-button-text"
-                data-testId="uve-toolbar-preview"
-                (click)="togglePreviewMode(true)" />
-
-            <dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />
-
-            <p-button
-                icon="pi pi-external-link"
-                styleClass="p-button-text"
-                (cdkCopyToClipboardCopied)="triggerCopyToast()"
-                [cdkCopyToClipboard]="$toolbar().editor.copyUrl"
-                data-testId="uve-toolbar-copy-url" />
-
-            <a
-                title="Page API URL"
-                pButton
-                label="API"
-                class="p-button-text"
-                target="_blank"
-                data-testId="uve-toolbar-api-link"
-                [href]="$apiURL()"></a>
-        } @else if ($toolbar().preview) {
-            <div>PREVIEW MODE CONTENT</div>
-            <button (click)="togglePreviewMode(false)">Back</button>
+@let preview = $isPreviewMode();
+@let runningExperiment = $toolbar().runningExperiment;
+
+<p-toolbar [styleClass]="$styleToolbarClass()">
+    <div class="p-toolbar-group-start" [ngClass]="{ 'p-0': preview }">
+        @if (preview) {
+            <ng-container [ngTemplateOutlet]="previewLeftOptionsTemplate"></ng-container>
+        } @else {
+            <ng-container [ngTemplateOutlet]="editLeftOptionsTemplate"></ng-container>
         }
     </div>
 
+    @if (preview) {
+        <div class="p-toolbar-group-center">
+            <div>
+                <p-button
+                    icon="pi pi-chevron-left"
+                    styleClass="p-button-text p-button-sm"
+                    data-testId="arrow-left" />
+                <p-button
+                    icon="pi pi-chevron-right"
+                    styleClass="p-button-text p-button-sm"
+                    data-testId="arrow-right" />
+            </div>
+            <p-calendar
+                inputStyleClass="p-inputtext-sm"
+                [(ngModel)]="date"
+                [readonlyInput]="true" />
+            <p-chip styleClass="uve-toolbar-chips" label="Today" alt="Page Day" />
+        </div>
+    }
+
     <div class="p-toolbar-group-end">
-        @if ($toolbar().runningExperiment; as runningExperiment) {
+        @if (runningExperiment) {
             <dot-ema-running-experiment
                 [runningExperiment]="runningExperiment"
                 data-testId="uve-toolbar-running-experiment" />
@@ -49,10 +49,77 @@
             [value]="$personaSelectorProps().value"
             #personaSelector
             data-testId="uve-toolbar-persona-selector" />
-        <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
+
+        @if (!preview) {
+            <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
+        }
     </div>
 </p-toolbar>
 
+<ng-template #editLeftOptionsTemplate>
+    <p-button
+        pTooltip="Preview Mode"
+        icon="pi pi-eye"
+        styleClass="p-button-text p-button-sm"
+        data-testId="uve-toolbar-preview"
+        (click)="setPreviewMode()" />
+
+    <dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />
+
+    <p-button
+        pTooltip="Copy URL"
+        icon="pi pi-external-link"
+        styleClass="p-button-text p-button-sm"
+        (cdkCopyToClipboardCopied)="triggerCopyToast()"
+        [cdkCopyToClipboard]="$toolbar().editor.copyUrl"
+        data-testId="uve-toolbar-copy-url" />
+
+    <a
+        title="Page API URL"
+        pTooltip="Page API URL"
+        pButton
+        label="API"
+        class="p-button-text p-button-sm"
+        target="_blank"
+        data-testId="uve-toolbar-api-link"
+        [href]="$apiURL()"></a>
+</ng-template>
+
+<ng-template #previewLeftOptionsTemplate>
+    <p-button
+        icon="pi pi-times"
+        styleClass="p-button-text p-button-sm"
+        (click)="setEditMode()"
+        data-testId="close-preview-mode" />
+
+    <div class="vertical-divider"></div>
+
+    <p-button
+        icon="pi pi-desktop"
+        pTooltip="Desktop Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="desktop-preview" />
+
+    <p-button
+        icon="pi pi-tablet"
+        pTooltip="Tablet Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="tablet-preview" />
+
+    <p-button
+        icon="pi pi-mobile"
+        pTooltip="Mobile Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="mobile-preview" />
+
+    <p-splitButton
+        styleClass="p-button-sm"
+        label="More"
+        [model]="[]"
+        text
+        data-testId="more-devices-preview" />
+</ng-template>
+
 @if ($toolbar().showInfoDisplay) {
     <dot-ema-info-display data-testId="info-display" />
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss

@@ -1,7 +1,44 @@
 @use "variables" as *;
 
+::ng-deep {
+    .uve-toolbar {
+        padding: 0 $spacing-4;
+        transition: padding 0.2s ease;
+        border-color: $color-palette-primary-200;
+        border-top: 1px solid transparent; // Avoid jump
+    }
+
+    .uve-toolbar-preview {
+        border-top-color: $color-palette-primary-200;
+        padding-inline: $spacing-5;
+    }
+
+    .p-chip.uve-toolbar-chips {
+        height: $field-height-sm;
+        background-color: $color-palette-primary-op-10;
+        border-color: $color-palette-primary-op-10;
+    }
+}
+
 .p-toolbar-group-start,
-.p-toolbar-group-end {
+.p-toolbar-group-end,
+.p-toolbar-group-center {
+    padding: $spacing-1 0;
     align-items: center;
     gap: $spacing-1;
+    align-self: stretch;
+}
+
+.vertical-divider {
+    align-self: stretch;
+    position: relative;
+    &::before {
+        border-left: 1px solid $color-palette-primary-200;
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        content: "";
+    }
 }