feat(edit-content): History sidebar redesign — card layout, version preview UX (#35888)

[adrianjm-dotCMS]

Summary

Redesigns the History tab in the Edit Contentlet sidebar to align with the updated design spec (issue #35888).

• Version card layout restructured to a two-row flex column: title + status chip on row 1, avatar + username + inode on row 2
• Ellipsis menu button is now outlined + circular, appears only on card hover or while the menu is open
• Inode identifier hidden by default, revealed on hover, right-aligned next to the username
• Menu separator inserted dynamically before the last menu item (Restore+Compare → separator before Compare; all three → separator before Delete)
• Version preview UX: Restore/Close actions moved to a bg-surface-50 banner below the sidebar tabs; command bar now shows Previewing <relative date> instead of the Restore button

Test plan

• Open a contentlet with multiple versions in the History tab
• Verify card shows title/chip on top row, avatar/username/inode on bottom row
• Hover a card — ellipsis button and inode appear; move away — they disappear
• Open ellipsis menu on a Published version — Restore + separator + Compare
• Open ellipsis menu on an Older version — Restore + Compare + separator + Delete
• Draft version card — no ellipsis button visible
• Click a historical version — sidebar banner appears with Close and Restore buttons; command bar shows "Previewing X time ago"
• Click Close — returns to current version
• Click Restore — confirmation dialog appears and restores on accept

Closes #35888

This PR fixes: #35888

[claude]

Claude finished @adrianjm-dotCMS's task in 1m 0s —— View job

---

Rollback Safety Analysis

• Read rollback-unsafe categories reference
• Get full PR diff
• Analyze diff against unsafe categories
• Apply appropriate label

---

Result: ✅ Safe To Rollback

This PR is pure frontend UI/UX changes with no backend structural risk. Analysis against every unsafe category:

Category	Result
C-1 Structural Data Model Change	✅ No DB schema changes
C-2 Elasticsearch Mapping Change	✅ No ES changes
C-3 Content JSON Model Version Bump	✅ No contentlet model changes
C-4 DROP TABLE / DROP COLUMN	✅ No DDL
H-1 One-Way Data Migration	✅ No data transforms
H-2 RENAME TABLE/COLUMN	✅ No renames
H-3 PK Restructuring	✅ No constraint changes
H-4 New ContentType Field Type	✅ No new field types
H-5 Storage Provider Change	✅ No storage changes
H-6 DROP PROCEDURE/FUNCTION	✅ No procedure changes
H-7 NOT NULL Column Without Default	✅ No DDL
H-8 VTL Viewtool Contract Change	✅ No viewtool changes
M-1 Non-Broadening Column Type Change	✅ No column changes
M-2 Push Publishing Bundle Format	✅ No bundle changes
M-3 REST/GraphQL API Contract Change	✅ No API contract changes
M-4 OSGi Plugin API Breakage	✅ No OSGi interface changes

Changed files are entirely Angular components (.html, .ts, .scss, .spec.ts) and two additive i18n keys in Language.properties (edit.content.sidebar.history.previewing and edit.content.sidebar.history.comparing). Additive i18n keys are safe — N-1 simply won't render those strings.

Label AI: Safe To Rollback has been applied.

[github-actions]

❌ Codex Review failed — openai.gpt-5.5

The review job failed before producing output. See the run for details.

_{Run: #27576251553}

[Copilot]

Pull request overview

Updates the Edit Contentlet sidebar History experience to match the redesigned card layout and “historical version preview” UX described in issue #35888, including moving Restore/Close actions into a side-panel banner and adjusting the version action menu behavior.

Changes:

• Adds a historical-version banner in the sidebar (Close + Restore) and updates the command bar to show a “Previewing {relative date}” indicator.
• Refactors History timeline item layout (two-row card) and updates the ellipsis menu UI/behavior, including inserting a dynamic separator before the last menu item.
• Simplifies timeline marker styling (migrating version markers to PrimeNG marker classes and removing the History SCSS).

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
dotCMS/src/main/webapp/WEB-INF/messages/Language.properties	Adds i18n key for the new “Previewing” label.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.spec.ts	Adds tests for the historical-version banner behavior.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html	Renders the historical-version banner (Close/Restore) when previewing a historical version.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/dot-edit-content-sidebar-history.component.ts	Removes SCSS usage and adjusts marker class computation for version markers.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/dot-edit-content-sidebar-history.component.scss	Removes timeline marker SCSS.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/dot-edit-content-sidebar-history.component.html	Switches version markers to PrimeNG marker element/class binding.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-item/dot-history-timeline-item.component.ts	Tracks menu open state and inserts a separator before the last menu item.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-item/dot-history-timeline-item.component.spec.ts	Updates menu item expectations for separators; adds tests for menu open state.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-item/dot-history-timeline-item.component.html	Redesigns timeline item into a two-row card, hover-only inode + ellipsis, outlined circular ellipsis button.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts	Imports DotRelativeDatePipe to support the new preview indicator.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts	Updates expectations from restore button to previewing label in historical mode.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html	Replaces Restore button with “Previewing {relative date}” label in historical mode.

Comments suppressed due to low confidence (1)

core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/dot-edit-content-sidebar-history.component.ts:44

• styleUrls was removed along with the component SCSS, but the template still renders the Push Publish marker as <span class="timeline-marker timeline-marker--default"> (see dot-edit-content-sidebar-history.component.html:93-99). With no remaining .timeline-marker styles in the codebase, that marker will have no size/visual styling and can disappear from the timeline.

    providers: [DatePipe, DotMessagePipe],
    templateUrl: './dot-edit-content-sidebar-history.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'flex flex-col h-full min-h-0'
    }

[github-actions]

🤖 Bedrock Review — deepseek.v3.2

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-compare/dot-edit-content-compare.component.html:25 — Hardcoded image path /dotAdmin/assets/edit-uve-toolbar/left_panel_open.svg may break in different deployment contexts; should use a relative or configurable asset path.

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-compare/dot-edit-content-compare.component.html:31 — Hardcoded image path /dotAdmin/assets/edit-uve-toolbar/left_panel_close.svg may break in different deployment contexts; should use a relative or configurable asset path.

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/dot-edit-content-sidebar-history.component.ts:187-191 — Method getMarkerClass returns inline Tailwind classes (border-green-500!, border-yellow-500!, border-gray-400!) that may not be defined in the project's CSS, potentially causing missing styles for timeline markers.

[🟠 High] core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-item/dot-history-timeline-item.component.ts:187 — Logic items.splice(items.length - 1, 0, { separator: true }) inserts a separator before the last item, but if items.length is 1 (only "restore"), this will incorrectly add a separator before the only item, resulting in a separator with no following menu item. This could cause a broken UI.

[🟡 Medium] core-web/libs/edit-content/src/lib/store/features/history/history.feature.ts:221 — Setting compareContentlet: null when loading a historical version is correct, but there's no symmetric cleanup of historicalVersionInode when entering compare mode (see line 218 in the diff). This could lead to inconsistent state if switching between compare and historical preview.

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-item/dot-history-timeline-item.component.spec.ts:162-165 — Test "should expose no actions for the current published version (working && live)" assumes no actions, but the component logic ($menuItems) returns empty array only when item.working is true (line 142), regardless of live. This matches the spec, but the test name is misleading—it should be "should expose no actions for working items (any live state)".

[🟡 Medium] core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html:32-35 — The condition @if ($store.compareContentlet()) and @else if ($store.isViewingHistoricalVersion()) assumes mutual exclusivity, but if both states could somehow be true simultaneously (e.g., due to a race condition), the second banner would never show. The store logic appears to enforce this, but the template could be more defensive.

---

_{Run: #27641302061 · tokens: in: 14181 · out: 701 · total: 14882}