WIP open fullscreen code editor in dialog

src/components/ha-automation-row.ts

@@ -79,10 +79,6 @@ export class HaAutomationRow extends LitElement {
       !(
         (this.sortSelected || ev.altKey) &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
-      ) &&
-      !(
-        (ev.ctrlKey || ev.metaKey) &&
-        (ev.key === "c" || ev.key === "x" || ev.key === "Delete")
       )
     ) {
       return;
@@ -103,22 +99,6 @@ export class HaAutomationRow extends LitElement {
       return;
     }
 
-    if (ev.ctrlKey || ev.metaKey) {
-      if (ev.key === "c") {
-        fireEvent(this, "copy-row");
-        return;
-      }
-      if (ev.key === "x") {
-        fireEvent(this, "cut-row");
-        return;
-      }
-
-      if (ev.key === "Delete") {
-        fireEvent(this, "delete-row");
-        return;
-      }
-    }
-
     this.click();
   }
 
@@ -203,8 +183,5 @@ declare global {
   interface HASSDomEvents {
     "toggle-collapsed": undefined;
     "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
   }
 }

src/components/ha-code-editor.ts

@@ -7,20 +7,20 @@ import type {
 } from "@codemirror/autocomplete";
 import type { Extension, TransactionSpec } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import { mdiArrowExpand, mdiArrowCollapse } from "@mdi/js";
+import { mdiArrowCollapse, mdiArrowExpand } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { css, ReactiveElement, html, render } from "lit";
+import { css, html, ReactiveElement, render } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { getEntityContext } from "../common/entity/context/get_entity_context";
 import type { HomeAssistant } from "../types";
+import "./ha-code-editor-completion-items";
 import type { CompletionItem } from "./ha-code-editor-completion-items";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-code-editor-completion-items";
 
 declare global {
   interface HASSDomEvents {
@@ -72,6 +72,8 @@ export class HaCodeEditor extends ReactiveElement {
 
   @state() private _isFullscreen = false;
 
+  private _fullscreenDialog?: HTMLDialogElement;
+
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
@@ -120,7 +122,7 @@ export class HaCodeEditor extends ReactiveElement {
     this.removeEventListener("keydown", stopPropagation);
     this.removeEventListener("keydown", this._handleKeyDown);
     if (this._isFullscreen) {
-      this._toggleFullscreen();
+      this._closeFullscreenDialog();
     }
     this.updateComplete.then(() => {
       this.codemirror!.destroy();
@@ -180,9 +182,6 @@ export class HaCodeEditor extends ReactiveElement {
     if (changedProps.has("error")) {
       this.classList.toggle("error-state", this.error);
     }
-    if (changedProps.has("_isFullscreen")) {
-      this.classList.toggle("fullscreen", this._isFullscreen);
-    }
     if (changedProps.has("disableFullscreen")) {
       this._updateFullscreenButton();
     }
@@ -312,10 +311,93 @@ export class HaCodeEditor extends ReactiveElement {
   };
 
   private _toggleFullscreen() {
+    if (!this._isFullscreen) {
+      this._openFullscreenDialog();
+    } else {
+      this._closeFullscreenDialog();
+    }
     this._isFullscreen = !this._isFullscreen;
     this._updateFullscreenButton();
   }
 
+  private _openFullscreenDialog() {
+    // Create dialog if it doesn't exist
+    if (!this._fullscreenDialog) {
+      this._fullscreenDialog = document.createElement("dialog");
+      this._fullscreenDialog.style =
+        "width: calc(100% - 16px); margin: 56px 8px 8px; height: calc(100% - 64px); border: none; border-radius: 8px;";
+
+      // Handle dialog close events
+      this._fullscreenDialog.addEventListener("close", () => {
+        if (this._isFullscreen) {
+          this._isFullscreen = false;
+          this._updateFullscreenButton();
+        }
+      });
+
+      // Handle click on backdrop to close
+      this._fullscreenDialog.addEventListener("click", (e) => {
+        if (e.target === this._fullscreenDialog) {
+          this._closeFullscreenDialog();
+        }
+      });
+
+      document.body.appendChild(this._fullscreenDialog);
+    }
+
+    // Clone the editor and move it to dialog
+    const editorClone = this.cloneNode(true) as HaCodeEditor;
+    editorClone.classList.add("fullscreen-editor");
+
+    // Copy current value to cloned editor
+    editorClone.value = this.value;
+
+    // Listen for changes in the cloned editor
+    editorClone.addEventListener("value-changed", (e: any) => {
+      this._value = e.detail.value;
+      fireEvent(this, "value-changed", { value: this._value });
+    });
+
+    // Add close button
+    const closeButton = document.createElement("ha-icon-button");
+    closeButton.path = mdiArrowCollapse;
+    closeButton.setAttribute("label", "Exit fullscreen");
+    closeButton.className = "fullscreen-close-button";
+    closeButton.addEventListener("click", () => this._closeFullscreenDialog());
+
+    // Clear dialog content and add new content
+    this._fullscreenDialog.innerHTML = "";
+    this._fullscreenDialog.appendChild(editorClone);
+    this._fullscreenDialog.appendChild(closeButton);
+
+    // Show modal dialog
+    this._fullscreenDialog.showModal();
+  }
+
+  private _closeFullscreenDialog() {
+    if (this._fullscreenDialog) {
+      this._fullscreenDialog.close();
+
+      // Update original editor with current value
+      const editorInDialog = this._fullscreenDialog.querySelector(
+        "ha-code-editor"
+      ) as HaCodeEditor;
+      if (editorInDialog) {
+        this._value = editorInDialog.value;
+        if (this.codemirror) {
+          this.codemirror.dispatch({
+            changes: {
+              from: 0,
+              to: this.codemirror.state.doc.length,
+              insert: this._value,
+            },
+          });
+        }
+      }
+    }
+    this._isFullscreen = false;
+  }
+
   private _handleKeyDown = (e: KeyboardEvent) => {
     if (this._isFullscreen && e.key === "Escape") {
       e.preventDefault();
@@ -643,40 +725,6 @@ export class HaCodeEditor extends ReactiveElement {
       }
     }
 
-    :host(.fullscreen) {
-      position: fixed !important;
-      top: calc(var(--header-height, 56px) + 8px) !important;
-      left: 8px !important;
-      right: 8px !important;
-      bottom: 8px !important;
-      z-index: 9999 !important;
-      border-radius: 12px !important;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
-      overflow: hidden !important;
-      background-color: var(
-        --code-editor-background-color,
-        var(--card-background-color)
-      ) !important;
-      margin: 0 !important;
-      padding-top: var(--safe-area-inset-top) !important;
-      padding-left: var(--safe-area-inset-left) !important;
-      padding-right: var(--safe-area-inset-right) !important;
-      padding-bottom: var(--safe-area-inset-bottom) !important;
-      box-sizing: border-box !important;
-      display: block !important;
-    }
-
-    :host(.fullscreen) .cm-editor {
-      height: 100% !important;
-      max-height: 100% !important;
-      border-radius: 0 !important;
-    }
-
-    :host(.fullscreen) .fullscreen-button {
-      top: calc(var(--safe-area-inset-top, 0px) + 8px);
-      right: calc(var(--safe-area-inset-right, 0px) + 8px);
-    }
-
     .completion-info {
       display: grid;
       gap: 3px;

src/dialogs/generic/dialog-box.ts

@@ -3,19 +3,18 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
-import "../../components/ha-dialog-header";
 import "../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../components/ha-md-dialog";
+import "../../components/ha-dialog-header";
 import "../../components/ha-svg-icon";
+import "../../components/ha-button";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
-import { KeyboardShortcutMixin } from "../../mixins/keyboard-shortcut-mixin";
 import type { HomeAssistant } from "../../types";
 import type { DialogBoxParams } from "./show-dialog-box";
 
 @customElement("dialog-box")
-class DialogBox extends KeyboardShortcutMixin(LitElement) {
+class DialogBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: DialogBoxParams;
@@ -53,7 +52,7 @@ class DialogBox extends KeyboardShortcutMixin(LitElement) {
       return nothing;
     }
 
-    const confirmPrompt = this._params.confirmation || !!this._params.prompt;
+    const confirmPrompt = this._params.confirmation || this._params.prompt;
 
     const dialogTitle =
       this._params.title ||
@@ -63,8 +62,7 @@ class DialogBox extends KeyboardShortcutMixin(LitElement) {
     return html`
       <ha-md-dialog
         open
-        .disableCancelAction=${!this._params.enableCancelAction &&
-        confirmPrompt}
+        .disableCancelAction=${confirmPrompt || false}
         @closed=${this._dialogClosed}
         type="alert"
         aria-labelledby="dialog-box-title"
@@ -102,8 +100,8 @@ class DialogBox extends KeyboardShortcutMixin(LitElement) {
             : ""}
         </div>
         <div slot="actions">
-          ${confirmPrompt
-            ? html`
+          ${confirmPrompt &&
+          html`
             <ha-button
               @click=${this._dismiss}
               ?dialogInitialFocus=${!this._params.prompt &&
@@ -114,8 +112,7 @@ class DialogBox extends KeyboardShortcutMixin(LitElement) {
                 ? this._params.dismissText
                 : this.hass.localize("ui.common.cancel")}
             </ha-button>
-              `
-            : nothing}
+          `}
           <ha-button
             @click=${this._confirm}
             ?dialogInitialFocus=${!this._params.prompt &&
@@ -170,12 +167,6 @@ class DialogBox extends KeyboardShortcutMixin(LitElement) {
     this._closeResolve = undefined;
   }
 
-  protected supportedSingleKeyShortcuts(): SupportedShortcuts {
-    return {
-      Enter: () => this._confirm(),
-    };
-  }
-
   static styles = css`
     :host([inert]) {
       pointer-events: initial !important;

src/dialogs/generic/show-dialog-box.ts

@@ -17,7 +17,6 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
   confirm?: () => void;
   cancel?: () => void;
   destructive?: boolean;
-  enableCancelAction?: boolean;
 }
 
 export interface PromptDialogParams extends BaseDialogBoxParams {

src/mixins/keyboard-shortcut-mixin.ts

@@ -14,13 +14,6 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
       if ((event.ctrlKey || event.metaKey) && event.key in supportedShortcuts) {
         event.preventDefault();
         supportedShortcuts[event.key]();
-        return;
-      }
-
-      const supportedSingleKeyShortcuts = this.supportedSingleKeyShortcuts();
-      if (event.key in supportedSingleKeyShortcuts) {
-        event.preventDefault();
-        supportedSingleKeyShortcuts[event.key]();
       }
     };
 
@@ -37,8 +30,4 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
     protected supportedShortcuts(): SupportedShortcuts {
       return {};
     }
-
-    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
-      return {};
-    }
   };

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -5,12 +5,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -193,10 +193,6 @@ export default class HaAutomationActionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
@@ -307,7 +303,7 @@ export default class HaAutomationActionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -440,6 +436,7 @@ export default class HaAutomationActionRow extends LitElement {
         ${this.optionsInSidebar
           ? html`<ha-automation-row
               .disabled=${this.action.enabled === false}
+              @click=${this._toggleSidebar}
               .leftChevron=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
@@ -450,16 +447,12 @@ export default class HaAutomationActionRow extends LitElement {
                 ))}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
+              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
               ].includes(blockType!)}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @toggle-collapsed=${this._toggleCollapse}
-              @copy-row=${this._copyAction}
-              @cut-row=${this._cutAction}
-              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -518,15 +511,6 @@ export default class HaAutomationActionRow extends LitElement {
   };
 
   private _runAction = async () => {
-    requestAnimationFrame(() => {
-      // @ts-ignore is supported in all browsers expect firefox
-      if (this.scrollIntoViewIfNeeded) {
-        // @ts-ignore is supported in all browsers expect firefox
-        this.scrollIntoViewIfNeeded();
-        return;
-      }
-      this.scrollIntoView();
-    });
     const validated = await validateConfig(this.hass, {
       actions: this.action,
     });
@@ -577,7 +561,6 @@ export default class HaAutomationActionRow extends LitElement {
           fireEvent(this, "close-sidebar");
         }
       },
-      enableCancelAction: true,
     });
   };
 
@@ -637,12 +620,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _copyAction = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutAction = () => {
@@ -651,12 +628,6 @@ export default class HaAutomationActionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -787,6 +758,10 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

src/panels/config/automation/action/ha-automation-action.ts

@@ -382,10 +382,8 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _actionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    ev.stopPropagation();
-    const row = ev.detail.item as HaAutomationActionRow;
-    if (row.selected) {
-      row.action["ha-automation-row-selected"] = true;
+    if (ev.detail.item.action && ev.detail.item.isSelected()) {
+      ev.detail.item.action["ha-automation-row-selected"] = true;
     }
   }
 

src/panels/config/automation/add-automation-element-dialog.ts

@@ -1,9 +1,4 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiClose,
-  mdiContentPaste,
-  mdiPlus,
-} from "@mdi/js";
+import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
 import Fuse from "fuse.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -46,14 +41,11 @@ import {
 } from "../../../data/integration";
 import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
-import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
-import { HaFuse } from "../../../resources/fuse";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { isMac } from "../../../util/is_mac";
-import { showToast } from "../../../util/toast";
 import type { AddAutomationElementDialogParams } from "./show-add-automation-element-dialog";
 import { PASTE_VALUE } from "./show-add-automation-element-dialog";
+import { HaFuse } from "../../../resources/fuse";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
@@ -93,10 +85,7 @@ const ENTITY_DOMAINS_OTHER = new Set([
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
 
 @customElement("add-automation-element-dialog")
-class DialogAddAutomationElement
-  extends KeyboardShortcutMixin(LitElement)
-  implements HassDialog
-{
+class DialogAddAutomationElement extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: AddAutomationElementDialogParams;
@@ -119,8 +108,6 @@ class DialogAddAutomationElement
 
   @state() private _height?: number;
 
-  @state() private _narrow = false;
-
   public showDialog(params): void {
     this._params = params;
     this._group = params.group;
@@ -133,8 +120,6 @@ class DialogAddAutomationElement
     this._fullScreen = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
-
-    this._narrow = matchMedia("(max-width: 870px)").matches;
   }
 
   public closeDialog() {
@@ -570,37 +555,15 @@ class DialogAddAutomationElement
                   .value=${PASTE_VALUE}
                   @click=${this._selected}
                 >
-                  <div class="shortcut-label">
-                    <div class="label">
-                      <div>
                   ${this.hass.localize(
                     `ui.panel.config.automation.editor.${this._params.type}s.paste`
                   )}
-                      </div>
-                      <div class="supporting-text">
-                        ${this.hass.localize(
+                  <span slot="supporting-text"
+                    >${this.hass.localize(
                       // @ts-ignore
                       `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-                        )}
-                      </div>
-                    </div>
-                    ${!this._narrow
-                      ? html`<span class="shortcut">
-                          <span
-                            >${isMac
-                              ? html`<ha-svg-icon
-                                  slot="start"
-                                  .path=${mdiAppleKeyboardCommand}
-                                ></ha-svg-icon>`
-                              : this.hass.localize(
-                                  "ui.panel.config.automation.editor.ctrl"
                     )}</span
                   >
-                          <span>+</span>
-                          <span>V</span>
-                        </span>`
-                      : nothing}
-                  </div>
                   <ha-svg-icon
                     slot="start"
                     .path=${mdiContentPaste}
@@ -608,7 +571,7 @@ class DialogAddAutomationElement
                   ><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
                 </ha-md-list-item>
                 <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-            : nothing}
+            : ""}
           ${repeat(
             items,
             (item) => item.key,
@@ -674,42 +637,6 @@ class DialogAddAutomationElement
     this._filter = ev.detail.value;
   }
 
-  private _addClipboard = () => {
-    if (
-      this._params?.clipboardItem &&
-      !this._filter &&
-      (!this._group ||
-        this._getGroupItems(
-          this._params.type,
-          this._group,
-          this._domains,
-          this.hass.localize,
-          this.hass.services,
-          this._manifests
-        ).find((item) => item.key === this._params!.clipboardItem))
-    ) {
-      this._params!.add(this._params.clipboardItem);
-      showToast(this, {
-        message: this.hass.localize(
-          "ui.panel.config.automation.editor.item_pasted",
-          {
-            item: this.hass.localize(
-              // @ts-ignore
-              `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-            ),
-          }
-        ),
-      });
-      this.closeDialog();
-    }
-  };
-
-  protected supportedShortcuts(): SupportedShortcuts {
-    return {
-      v: () => this._addClipboard(),
-    };
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -733,7 +660,6 @@ class DialogAddAutomationElement
           max-width: 100vw;
           --md-list-item-leading-space: 24px;
           --md-list-item-trailing-space: 24px;
-          --md-list-item-supporting-text-font: var(--ha-font-size-s);
         }
         ha-md-list-item img {
           width: 24px;
@@ -742,27 +668,6 @@ class DialogAddAutomationElement
           display: block;
           margin: 0 16px;
         }
-        .shortcut-label {
-          display: flex;
-          gap: 12px;
-          justify-content: space-between;
-        }
-        .shortcut-label .supporting-text {
-          color: var(--secondary-text-color);
-          font-size: var(--ha-font-size-s);
-        }
-        .shortcut-label .shortcut {
-          --mdc-icon-size: 12px;
-          display: inline-flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 2px;
-        }
-        .shortcut-label .shortcut span {
-          font-size: var(--ha-font-size-s);
-          font-family: var(--ha-font-family-code);
-          color: var(--ha-color-text-secondary);
-        }
       `,
     ];
   }

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -53,7 +53,6 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-condition-editor";
@@ -153,10 +152,6 @@ export default class HaAutomationConditionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   private _renderRow() {
     return html`
       <ha-svg-icon
@@ -217,7 +212,7 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -360,15 +355,12 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                 this.condition.condition
               )}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @toggle-collapsed=${this._toggleCollapse}
-              @copy-row=${this._copyCondition}
-              @cut-row=${this._cutCondition}
-              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -467,7 +459,6 @@ export default class HaAutomationConditionRow extends LitElement {
           fireEvent(this, "close-sidebar");
         }
       },
-      enableCancelAction: true,
     });
   };
 
@@ -486,15 +477,6 @@ export default class HaAutomationConditionRow extends LitElement {
     this._testingResult = undefined;
     this._testing = true;
     const condition = this.condition;
-    requestAnimationFrame(() => {
-      // @ts-ignore is supported in all browsers expect firefox
-      if (this.scrollIntoViewIfNeeded) {
-        // @ts-ignore is supported in all browsers expect firefox
-        this.scrollIntoViewIfNeeded();
-        return;
-      }
-      this.scrollIntoView();
-    });
 
     try {
       const validateResult = await validateConfig(this.hass, {
@@ -585,12 +567,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _copyCondition = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutCondition = () => {
@@ -599,12 +575,6 @@ export default class HaAutomationConditionRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -724,6 +694,10 @@ export default class HaAutomationConditionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -380,10 +380,8 @@ export default class HaAutomationCondition extends LitElement {
   }
 
   private _conditionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    ev.stopPropagation();
-    const row = ev.detail.item as HaAutomationConditionRow;
-    if (row.selected) {
-      row.condition["ha-automation-row-selected"] = true;
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.condition["ha-automation-row-selected"] = true;
     }
   }
 

src/panels/config/automation/ha-automation-editor.ts

@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
+  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -10,7 +11,6 @@ import {
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiStopCircleOutline,
@@ -337,7 +337,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -1138,9 +1138,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveAutomation(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1160,18 +1157,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     this._manualEditor?.expandAll();
   }
 
-  private _copySelectedRow() {
-    this._manualEditor?.copySelectedRow();
-  }
-
-  private _cutSelectedRow() {
-    this._manualEditor?.cutSelectedRow();
-  }
-
-  private _deleteSelectedRow() {
-    this._manualEditor?.deleteSelectedRow();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/automation/manual-automation-editor.ts

@@ -3,13 +3,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -34,7 +28,6 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
-  ActionSidebarConfig,
   AutomationConfig,
   Condition,
   ManualAutomationConfig,
@@ -101,11 +94,6 @@ export class HaManualAutomationEditor extends LitElement {
 
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
-  @queryAll("ha-automation-action, ha-automation-condition")
-  private _collapsableElements?: NodeListOf<
-    HaAutomationAction | HaAutomationCondition
-  >;
-
   private _previousConfig?: ManualAutomationConfig;
 
   public connectedCallback() {
@@ -595,36 +583,24 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaAutomationCondition
+    >("ha-automation-action, ha-automation-condition");
+  }
+
   public expandAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.collapseAll();
     });
   }
 
-  public copySelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
-      (this._sidebarConfig as ActionSidebarConfig).copy();
-    }
-  }
-
-  public cutSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
-      (this._sidebarConfig as ActionSidebarConfig).cut();
-    }
-  }
-
-  public deleteSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
-      (this._sidebarConfig as ActionSidebarConfig).delete();
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -2,9 +2,9 @@ import { consume } from "@lit/context";
 import {
   mdiArrowDown,
   mdiArrowUp,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
@@ -86,10 +86,6 @@ export default class HaAutomationOptionRow extends LitElement {
   @query("ha-automation-row")
   private _automationRowElement?: HaAutomationRow;
 
-  get selected() {
-    return this._selected;
-  }
-
   private _expandedChanged(ev) {
     if (ev.currentTarget.id !== "option") {
       return;
@@ -171,7 +167,7 @@ export default class HaAutomationOptionRow extends LitElement {
                 )}
                 <ha-svg-icon
                   slot="start"
-                  .path=${mdiPlusCircleMultipleOutline}
+                  .path=${mdiContentDuplicate}
                 ></ha-svg-icon>
               </ha-md-menu-item>
 
@@ -275,10 +271,9 @@ export default class HaAutomationOptionRow extends LitElement {
               left-chevron
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .sortSelected=${this.sortSelected}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
-              @delete-row=${this._removeOption}
+              .sortSelected=${this.sortSelected}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -327,7 +322,6 @@ export default class HaAutomationOptionRow extends LitElement {
           fireEvent(this, "close-sidebar");
         }
       },
-      enableCancelAction: true,
     });
   };
 
@@ -452,6 +446,10 @@ export default class HaAutomationOptionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

src/panels/config/automation/option/ha-automation-option.ts

@@ -292,10 +292,8 @@ export default class HaAutomationOption extends LitElement {
   }
 
   private _optionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    ev.stopPropagation();
-    const row = ev.detail.item as HaAutomationOptionRow;
-    if (row.selected && row.option) {
-      row.option["ha-automation-row-selected"] = true;
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.option["ha-automation-row-selected"] = true;
     }
   }
 

src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts

@@ -1,16 +1,15 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
@@ -21,7 +20,6 @@ import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import type { RepeatAction } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
@@ -102,24 +100,18 @@ export default class HaAutomationSidebarAction extends LitElement {
       <span slot="subtitle">${subtitle}</span>
 
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
-        <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
-        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.rename"
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -131,85 +123,36 @@ export default class HaAutomationSidebarAction extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.duplicate"
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>C</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>X</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -217,16 +160,13 @@ export default class HaAutomationSidebarAction extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -234,32 +174,10 @@ export default class HaAutomationSidebarAction extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.delete"
         )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`

src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts

@@ -1,23 +1,21 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { ConditionSidebarConfig } from "../../../../data/automation";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -88,26 +86,20 @@ export default class HaAutomationSidebarCondition extends LitElement {
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.test}>
-        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.conditions.test"
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
         .disabled=${!!disabled}
       >
-        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.rename"
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
       </ha-md-menu-item>
 
       <ha-md-divider
@@ -121,16 +113,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.duplicate"
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -138,28 +124,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.copy}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
         <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>C</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -167,41 +133,18 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.cut}
         .disabled=${this.disabled}
       >
+        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
         <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span>X</span>
-              </span>`
-            : nothing}
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
         .disabled=${!this.config.uiSupported || !!this._warnings}
       >
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -209,16 +152,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
         tabindex="-1"
       ></ha-md-divider>
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+        ${this.hass.localize(
+          `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+        )}
         <ha-svg-icon
           slot="start"
           .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -226,32 +166,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.delete"
         )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`

src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts

@@ -1,14 +1,8 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiDelete,
-  mdiPlusCircleMultipleOutline,
-  mdiRenameBox,
-} from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
@@ -58,13 +52,10 @@ export default class HaAutomationSidebarOption extends LitElement {
               .clickAction=${this.config.rename}
               .disabled=${!!disabled}
             >
-              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-              <div class="overflow-label">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.rename"
               )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
             </ha-md-menu-item>
 
             <ha-md-menu-item
@@ -72,16 +63,13 @@ export default class HaAutomationSidebarOption extends LitElement {
               @click=${this.config.duplicate}
               .disabled=${this.disabled}
             >
-              <ha-svg-icon
-                slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
-              ></ha-svg-icon>
-              <div class="overflow-label">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
               )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiContentDuplicate}
+              ></ha-svg-icon>
             </ha-md-menu-item>
             <ha-md-divider
               slot="menu-items"
@@ -94,32 +82,10 @@ export default class HaAutomationSidebarOption extends LitElement {
               .disabled=${this.disabled}
               class="warning"
             >
-              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-              <div class="overflow-label">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.type.choose.remove_option"
               )}
-                ${!this.narrow
-                  ? html`<span class="shortcut">
-                      <span
-                        >${isMac
-                          ? html`<ha-svg-icon
-                              slot="start"
-                              .path=${mdiAppleKeyboardCommand}
-                            ></ha-svg-icon>`
-                          : this.hass.localize(
-                              "ui.panel.config.automation.editor.ctrl"
-                            )}</span
-                      >
-                      <span>+</span>
-                      <span
-                        >${this.hass.localize(
-                          "ui.panel.config.automation.editor.del"
-                        )}</span
-                      >
-                    </span>`
-                  : nothing}
-              </div>
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
             </ha-md-menu-item>
           `}
 

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -1,11 +1,10 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-selector-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -66,13 +65,10 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -80,32 +76,10 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.delete"
         )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-script-field-selector-editor
         class="sidebar-editor"

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts

@@ -1,10 +1,9 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { sidebarEditorStyles } from "../styles";
@@ -59,13 +58,10 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
         )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -73,32 +69,10 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-        <div class="overflow-label">
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.delete"
         )}
-          ${!this.narrow
-            ? html`<span class="shortcut">
-                <span
-                  >${isMac
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${mdiAppleKeyboardCommand}
-                      ></ha-svg-icon>`
-                    : this.hass.localize(
-                        "ui.panel.config.automation.editor.ctrl"
-                      )}</span
-                >
-                <span>+</span>
-                <span
-                  >${this.hass.localize(
-                    "ui.panel.config.automation.editor.del"
-                  )}</span
-                >
-              </span>`
-            : nothing}
-        </div>
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
       <ha-script-field-editor
         class="sidebar-editor"

src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts

@@ -1,12 +1,11 @@
 import {
-  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -17,7 +16,6 @@ import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
 import { isTriggerList } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
@@ -88,13 +86,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.rename}
           .disabled=${disabled || type === "list"}
         >
-          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-          <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.rename"
           )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
+          <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
         </ha-md-menu-item>
         ${!this.yamlMode &&
         !("id" in this.config.config) &&
@@ -104,13 +99,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               .clickAction=${this._showTriggerId}
               .disabled=${disabled || type === "list"}
             >
-              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
-              <div class="overflow-label">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.edit_id"
               )}
-                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-              </div>
+              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
             </ha-md-menu-item>`
           : nothing}
 
@@ -128,10 +120,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.duplicate"
           )}
-          <ha-svg-icon
-            slot="start"
-            .path=${mdiPlusCircleMultipleOutline}
-          ></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -139,28 +128,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.copy}
           .disabled=${this.disabled}
         >
-          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-          <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.copy"
           )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span>C</span>
-                </span>`
-              : nothing}
-          </div>
+          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
         </ha-md-menu-item>
 
         <ha-md-menu-item
@@ -168,41 +139,20 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.cut}
           .disabled=${this.disabled}
         >
-          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-          <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.cut"
           )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span>X</span>
-                </span>`
-              : nothing}
-          </div>
+          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this._toggleYamlMode}
           .disabled=${!this.config.uiSupported || !!this._warnings}
         >
-          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          <div class="overflow-label">
           ${this.hass.localize(
             `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
           )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
+          <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
         </ha-md-menu-item>
         <ha-md-divider
           slot="menu-items"
@@ -214,16 +164,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.disable}
           .disabled=${type === "list"}
         >
+          ${this.hass.localize(
+            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+          )}
           <ha-svg-icon
             slot="start"
             .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
           ></ha-svg-icon>
-          <div class="overflow-label">
-            ${this.hass.localize(
-              `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
-            )}
-            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-          </div>
         </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
@@ -231,32 +178,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .disabled=${this.disabled}
           class="warning"
         >
-          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-          <div class="overflow-label">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.delete"
           )}
-            ${!this.narrow
-              ? html`<span class="shortcut">
-                  <span
-                    >${isMac
-                      ? html`<ha-svg-icon
-                          slot="start"
-                          .path=${mdiAppleKeyboardCommand}
-                        ></ha-svg-icon>`
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.ctrl"
-                        )}</span
-                  >
-                  <span>+</span>
-                  <span
-                    >${this.hass.localize(
-                      "ui.panel.config.automation.editor.del"
-                    )}</span
-                  >
-                </span>`
-              : nothing}
-          </div>
+          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         </ha-md-menu-item>
         <ha-automation-trigger-editor
           class="sidebar-editor"

src/panels/config/automation/styles.ts

@@ -224,34 +224,4 @@ export const sidebarEditorStyles = css`
   .description {
     padding-top: 16px;
   }
-  .overflow-label {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    white-space: nowrap;
-  }
-  .overflow-label .shortcut {
-    --mdc-icon-size: 12px;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 2px;
-  }
-  .overflow-label .shortcut span {
-    font-size: var(--ha-font-size-s);
-    font-family: var(--ha-font-family-code);
-    color: var(--ha-color-text-secondary);
-  }
-  .shortcut-placeholder {
-    display: inline-block;
-    width: 60px;
-  }
-  .shortcut-placeholder.mac {
-    width: 46px;
-  }
-  @media all and (max-width: 870px) {
-    .shortcut-placeholder {
-      display: none;
-    }
-  }
 `;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -4,12 +4,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
+  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -52,7 +52,6 @@ import {
   showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
 import "../ha-automation-editor-warning";
 import { rowStyles } from "../styles";
 import "./ha-automation-trigger-editor";
@@ -152,10 +151,6 @@ export default class HaAutomationTriggerRow extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  get selected() {
-    return this._selected;
-  }
-
   private _triggerUnsub?: Promise<UnsubscribeFunc>;
 
   private _renderRow() {
@@ -224,7 +219,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
               ></ha-svg-icon>
             </ha-md-menu-item>
 
@@ -352,12 +347,9 @@ export default class HaAutomationTriggerRow extends LitElement {
           ? html`<ha-automation-row
               .disabled=${"enabled" in this.trigger &&
               this.trigger.enabled === false}
+              @click=${this._toggleSidebar}
               .selected=${this._selected}
               .sortSelected=${this.sortSelected}
-              @click=${this._toggleSidebar}
-              @copy-row=${this._copyTrigger}
-              @cut-row=${this._cutTrigger}
-              @delete-row=${this._onDelete}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row
@@ -550,7 +542,6 @@ export default class HaAutomationTriggerRow extends LitElement {
           fireEvent(this, "close-sidebar");
         }
       },
-      enableCancelAction: true,
     });
   };
 
@@ -640,12 +631,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _copyTrigger = () => {
     this._setClipboard();
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.copied_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _cutTrigger = () => {
@@ -654,12 +639,6 @@ export default class HaAutomationTriggerRow extends LitElement {
     if (this._selected) {
       fireEvent(this, "close-sidebar");
     }
-    showToast(this, {
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.cut_to_clipboard"
-      ),
-      duration: 2000,
-    });
   };
 
   private _moveUp = () => {
@@ -697,6 +676,10 @@ export default class HaAutomationTriggerRow extends LitElement {
       customElements.get(`ha-automation-trigger-${type}`) !== undefined
   );
 
+  public isSelected() {
+    return this._selected;
+  }
+
   public focus() {
     this._automationRowElement?.focus();
   }

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -322,10 +322,8 @@ export default class HaAutomationTrigger extends LitElement {
   }
 
   private _triggerCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    ev.stopPropagation();
-    const row = ev.detail.item as HaAutomationTriggerRow;
-    if (row.selected) {
-      row.trigger["ha-automation-row-selected"] = true;
+    if (ev.detail.item.isSelected()) {
+      ev.detail.item.trigger["ha-automation-row-selected"] = true;
     }
   }
 

src/panels/config/script/ha-script-editor.ts

@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
   mdiCog,
+  mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
   mdiDelete,
@@ -10,7 +11,6 @@ import {
   mdiInformationOutline,
   mdiPlay,
   mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiRobotConfused,
   mdiTag,
@@ -308,7 +308,7 @@ export class HaScriptEditor extends SubscribeMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -1047,9 +1047,6 @@ export class HaScriptEditor extends SubscribeMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveScript(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1069,18 +1066,6 @@ export class HaScriptEditor extends SubscribeMixin(
     this._manualEditor?.expandAll();
   }
 
-  private _copySelectedRow() {
-    this._manualEditor?.copySelectedRow();
-  }
-
-  private _cutSelectedRow() {
-    this._manualEditor?.cutSelectedRow();
-  }
-
-  private _deleteSelectedRow() {
-    this._manualEditor?.deleteSelectedRow();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/script/ha-script-field-row.ts

@@ -61,7 +61,6 @@ export default class HaScriptFieldRow extends LitElement {
           left-chevron
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
-          @delete-row=${this._onDelete}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -262,7 +261,6 @@ export default class HaScriptFieldRow extends LitElement {
           fireEvent(this, "close-sidebar");
         }
       },
-      enableCancelAction: true,
     });
   };
 

src/panels/config/script/manual-script-editor.ts

@@ -2,13 +2,7 @@ import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import { load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import {
-  customElement,
-  property,
-  query,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
   any,
@@ -30,10 +24,7 @@ import {
 } from "../../../common/url/search-params";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
-import type {
-  ActionSidebarConfig,
-  SidebarConfig,
-} from "../../../data/automation";
+import type { SidebarConfig } from "../../../data/automation";
 import type { Action, Fields, ScriptConfig } from "../../../data/script";
 import {
   getActionType,
@@ -85,11 +76,6 @@ export class HaManualScriptEditor extends LitElement {
   @query("ha-script-fields")
   private _scriptFields?: HaScriptFields;
 
-  @queryAll("ha-automation-action, ha-script-fields")
-  private _collapsableElements?: NodeListOf<
-    HaAutomationAction | HaScriptFields
-  >;
-
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
   private _previousConfig?: ScriptConfig;
@@ -511,36 +497,24 @@ export class HaManualScriptEditor extends LitElement {
     fireEvent(this, "save-script");
   }
 
+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<
+      HaAutomationAction | HaScriptFields
+    >("ha-automation-action, ha-script-fields");
+  }
+
   public expandAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.expandAll();
     });
   }
 
   public collapseAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
       element.collapseAll();
     });
   }
 
-  public copySelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.copy) {
-      (this._sidebarConfig as ActionSidebarConfig).copy();
-    }
-  }
-
-  public cutSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.cut) {
-      (this._sidebarConfig as ActionSidebarConfig).cut();
-    }
-  }
-
-  public deleteSelectedRow() {
-    if ((this._sidebarConfig as ActionSidebarConfig)?.delete) {
-      (this._sidebarConfig as ActionSidebarConfig).delete();
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,

src/translations/en.json

@@ -3847,9 +3847,6 @@
             "type_script_plural": "[%key:ui::panel::config::blueprint::overview::types_plural::script%]",
             "new_automation_setup_failed_title": "New {type} setup failed",
             "new_automation_setup_failed_text": "Your new {type} has saved, but waiting for it to setup has timed out. This could be due to errors parsing your configuration.yaml, please check the configuration in developer tools. Your {type} will not be visible until this is corrected, and {types} are reloaded. Changes to area, category, or labels were not saved and must be reapplied.",
-            "item_pasted": "{item} pasted",
-            "ctrl": "Ctrl",
-            "del": "Del",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -3876,8 +3873,6 @@
               "unknown_trigger": "[%key:ui::panel::config::devices::automation::triggers::unknown_trigger%]",
               "triggering_event_detail": "Triggering event detail",
               "trigger": "Trigger",
-              "copied_to_clipboard": "Trigger copied to clipboard",
-              "cut_to_clipboard": "Trigger cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4140,8 +4135,6 @@
               "type_select": "Condition type",
               "unknown_condition": "[%key:ui::panel::config::devices::automation::conditions::unknown_condition%]",
               "condition": "Condition",
-              "copied_to_clipboard": "Condition copied to clipboard",
-              "cut_to_clipboard": "Condition cut to clipboard",
               "groups": {
                 "entity": {
                   "label": "Entity",
@@ -4311,8 +4304,6 @@
               "type_select": "Action type",
               "continue_on_error": "Continue on error",
               "action": "Action",
-              "copied_to_clipboard": "Action copied to clipboard",
-              "cut_to_clipboard": "Action cut to clipboard",
               "groups": {
                 "helpers": {
                   "label": "Helpers"