Side Panel fixes in new Edit Contentlet mode: tab tooltips, copy ID feedback, chip consistency, dialog copy

[erickgonzalez]

Problem Statement

Several small UI issues exist in the Side Panel of the new Edit Contentlet screen. None are individually blocking, but together they create a rough and inconsistent editing experience for content editors.

Issues:

1. Tab tooltips missing — hovering over the Side Panel tab icons (Information, History, Comments, Settings) shows no label, making it unclear which tab is which.
2. Copy ID feedback broken after first click — clicking "Copy ID" shows visual feedback (checkmark / "Copied!" state) only on the first click; subsequent clicks give no feedback even though the ID is still copied.
3. Status/locale chips inconsistent — the chips in the Side Panel don't match the design used in Content Drive, creating a visual inconsistency across the product.
4. Untranslated Locale dialog copy needs updating — the current dialog text is outdated; see the screenshot in the issue comments for the new copy.

Browser & OS: N/A — UI issues in the new Edit Contentlet mode (Angular frontend).

Steps to Reproduce

1 — Tab tooltips missing:

1. Open any contentlet in the new Edit Contentlet mode.
2. Hover over any of the Side Panel tab icons (Information, History, Comments, Settings).
3. Observe: no tooltip or label appears.

2 — Copy ID feedback only fires once:

1. Open any contentlet in the new Edit Contentlet mode.
2. Click the "Copy ID" button — observe the visual feedback (first click works).
3. Click "Copy ID" again — observe: no visual feedback is shown even though the ID is copied.

3 — Status/locale chip inconsistency:

1. Open the Content Drive and note the appearance of the status/locale chips.
2. Open a contentlet in the new Edit Contentlet mode and look at the chips in the Side Panel.
3. Observe: color, shape, or font differs from Content Drive.

4 — Untranslated Locale dialog copy:

1. Open a contentlet that has not been translated to a second locale.
2. Select the untranslated locale from the language selector.
3. Review the dialog that appears — the copy needs to be updated as shown in the screenshot below.

Acceptance Criteria

Tab tooltips:

• Hovering over the Information tab icon shows a tooltip with the label "Information"
• Hovering over the History tab icon shows a tooltip with the label "History"
• Hovering over the Comments tab icon shows a tooltip with the label "Comments"
• Hovering over the Settings tab icon shows a tooltip with the label "Settings"

Copy ID feedback:

• Clicking "Copy ID" shows visual feedback ("Copied!" indicator) on every click, not only the first.
• The visual feedback resets between clicks so each subsequent click re-triggers the animation/state change

Status/locale chips:

• Status (draft, publish, archived) and locale chips in the Side Panel match the Content Drive chips in color, shape, border-radius, and font — no visible inconsistency between the two views

Untranslated Locale dialog:

• The Untranslated Locale dialog displays the updated copy as shown in the screenshot attached to this issue

dotCMS Version

Latest from main branch

Severity

Low - Minor issue or cosmetic

Links

NA

[erickgonzalez]

Notes:

component: dot-binary-selector