Combine Edit in yaml and Edit in visual editor (1/2) (#23142)

* yaml / visual part 1

* clean up

* clean up

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

@@ -1,11 +1,9 @@
 import { consume } from "@lit-labs/context";
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
 import {
   mdiAlertCircleCheck,
   mdiArrowDown,
   mdiArrowUp,
-  mdiCheck,
   mdiContentCopy,
   mdiContentCut,
   mdiContentDuplicate,
@@ -13,6 +11,7 @@ import {
   mdiDotsVertical,
   mdiPlay,
   mdiPlayCircleOutline,
+  mdiPlaylistEdit,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -253,23 +252,23 @@ export default class HaAutomationActionRow extends LitElement {
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <mwc-list-item graphic="icon">
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.run"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.rename"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
               )}
@@ -277,31 +276,31 @@ export default class HaAutomationActionRow extends LitElement {
                 slot="graphic"
                 .path=${mdiContentDuplicate}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.copy"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.cut"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.first}
             >
               ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
               <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.last}
             >
@@ -309,37 +308,21 @@ export default class HaAutomationActionRow extends LitElement {
                 "ui.panel.config.automation.editor.move_down"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <li divider role="separator"></li>
-
-            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
-              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-              ${!yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
-
-            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
+            <ha-list-item graphic="icon" .disabled=${!this._uiModeAvailable}>
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.edit_yaml"
+                `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
               )}
-              ${yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.action.enabled === false
                 ? this.hass.localize(
                     "ui.panel.config.automation.editor.actions.enable"
@@ -353,8 +336,8 @@ export default class HaAutomationActionRow extends LitElement {
                   ? mdiPlayCircleOutline
                   : mdiStopCircleOutline}
               ></ha-svg-icon>
-            </mwc-list-item>
-            <mwc-list-item
+            </ha-list-item>
+            <ha-list-item
               class="warning"
               graphic="icon"
               .disabled=${this.disabled}
@@ -367,7 +350,7 @@ export default class HaAutomationActionRow extends LitElement {
                 slot="graphic"
                 .path=${mdiDelete}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
           </ha-button-menu>
 
           <div
@@ -466,17 +449,17 @@ export default class HaAutomationActionRow extends LitElement {
         fireEvent(this, "move-down");
         break;
       case 7:
-        this._switchUiMode();
+        if (this._yamlMode) {
+          this._switchUiMode();
+        } else {
+          this._switchYamlMode();
+        }
         this.expand();
         break;
       case 8:
-        this._switchYamlMode();
-        this.expand();
-        break;
-      case 9:
         this._onDisable();
         break;
-      case 10:
+      case 9:
         this._onDelete();
         break;
     }
@@ -676,9 +659,6 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }

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

@@ -1,10 +1,8 @@
 import { consume } from "@lit-labs/context";
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
 import {
   mdiArrowDown,
   mdiArrowUp,
-  mdiCheck,
   mdiContentCopy,
   mdiContentCut,
   mdiContentDuplicate,
@@ -12,6 +10,7 @@ import {
   mdiDotsVertical,
   mdiFlask,
   mdiPlayCircleOutline,
+  mdiPlaylistEdit,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -29,6 +28,7 @@ import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-list-item";
 import type {
   AutomationClipboard,
   Condition,
@@ -155,22 +155,22 @@ export default class HaAutomationConditionRow extends LitElement {
             >
             </ha-icon-button>
 
-            <mwc-list-item graphic="icon">
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.test"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
-            </mwc-list-item>
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            </ha-list-item>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.rename"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
               )}
@@ -178,31 +178,31 @@ export default class HaAutomationConditionRow extends LitElement {
                 slot="graphic"
                 .path=${mdiContentDuplicate}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.copy"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.cut"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.first}
             >
               ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
               <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.last}
             >
@@ -210,37 +210,21 @@ export default class HaAutomationConditionRow extends LitElement {
                 "ui.panel.config.automation.editor.move_down"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <li divider role="separator"></li>
-
-            <mwc-list-item graphic="icon">
-              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-              ${!this._yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
-
-            <mwc-list-item graphic="icon">
+            <ha-list-item graphic="icon" .disabled=${this._warnings}>
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.edit_yaml"
+                `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              ${this._yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.condition.enabled === false
                 ? this.hass.localize(
                     "ui.panel.config.automation.editor.actions.enable"
@@ -254,8 +238,8 @@ export default class HaAutomationConditionRow extends LitElement {
                   ? mdiPlayCircleOutline
                   : mdiStopCircleOutline}
               ></ha-svg-icon>
-            </mwc-list-item>
-            <mwc-list-item
+            </ha-list-item>
+            <ha-list-item
               class="warning"
               graphic="icon"
               .disabled=${this.disabled}
@@ -268,7 +252,7 @@ export default class HaAutomationConditionRow extends LitElement {
                 slot="graphic"
                 .path=${mdiDelete}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
           </ha-button-menu>
 
           <div
@@ -366,17 +350,17 @@ export default class HaAutomationConditionRow extends LitElement {
         fireEvent(this, "move-down");
         break;
       case 7:
-        this._switchUiMode();
+        if (this._yamlMode) {
+          this._switchUiMode();
+        } else {
+          this._switchYamlMode();
+        }
         this.expand();
         break;
       case 8:
-        this._switchYamlMode();
-        this.expand();
-        break;
-      case 9:
         this._onDisable();
         break;
-      case 10:
+      case 9:
         this._onDelete();
         break;
     }
@@ -555,10 +539,10 @@ export default class HaAutomationConditionRow extends LitElement {
           border-top-right-radius: var(--ha-card-border-radius);
           border-top-left-radius: var(--ha-card-border-radius);
         }
-        mwc-list-item[disabled] {
+        ha-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
-        mwc-list-item.hidden {
+        ha-list-item.hidden {
           display: none;
         }
         .testing {
@@ -587,9 +571,6 @@ export default class HaAutomationConditionRow extends LitElement {
         .testing.pass {
           background-color: var(--success-color);
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import {
-  mdiCheck,
   mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
@@ -10,6 +9,7 @@ import {
   mdiInformationOutline,
   mdiPlay,
   mdiPlayCircleOutline,
+  mdiPlaylistEdit,
   mdiRenameBox,
   mdiRobotConfused,
   mdiStopCircleOutline,
@@ -259,27 +259,16 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
               `
             : nothing}
 
-          <li divider role="separator"></li>
-
-          <ha-list-item graphic="icon" @click=${this._switchUiMode}>
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-            ${this._mode === "gui"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
-              : ``}
-          </ha-list-item>
-          <ha-list-item graphic="icon" @click=${this._switchYamlMode}>
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
-            ${this._mode === "yaml"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
-              : ``}
+          <ha-list-item
+            graphic="icon"
+            @click=${this._mode === "gui"
+              ? this._switchYamlMode
+              : this._switchUiMode}
+          >
+            ${this.hass.localize(
+              `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
           <li divider role="separator"></li>
@@ -903,9 +892,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         ha-fab.dirty {
           bottom: 0;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }

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

@@ -1,10 +1,8 @@
 import { consume } from "@lit-labs/context";
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
 import {
   mdiArrowDown,
   mdiArrowUp,
-  mdiCheck,
   mdiContentCopy,
   mdiContentCut,
   mdiContentDuplicate,
@@ -12,6 +10,7 @@ import {
   mdiDotsVertical,
   mdiIdentifier,
   mdiPlayCircleOutline,
+  mdiPlaylistEdit,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -34,6 +33,7 @@ import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-textfield";
+import "../../../../components/ha-list-item";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { AutomationClipboard, Trigger } from "../../../../data/automation";
 import {
@@ -182,7 +182,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               .path=${mdiDotsVertical}
             ></ha-icon-button>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || type === "list"}
             >
@@ -190,9 +190,9 @@ export default class HaAutomationTriggerRow extends LitElement {
                 "ui.panel.config.automation.editor.triggers.rename"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || type === "list"}
             >
@@ -200,11 +200,11 @@ export default class HaAutomationTriggerRow extends LitElement {
                 "ui.panel.config.automation.editor.triggers.edit_id"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.duplicate"
               )}
@@ -212,31 +212,31 @@ export default class HaAutomationTriggerRow extends LitElement {
                 slot="graphic"
                 .path=${mdiContentDuplicate}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.copy"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item graphic="icon" .disabled=${this.disabled}>
+            <ha-list-item graphic="icon" .disabled=${this.disabled}>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.triggers.cut"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.first}
             >
               ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
               <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || this.last}
             >
@@ -244,37 +244,21 @@ export default class HaAutomationTriggerRow extends LitElement {
                 "ui.panel.config.automation.editor.move_down"
               )}
               <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon
-            ></mwc-list-item>
+            ></ha-list-item>
 
-            <li divider role="separator"></li>
-
-            <mwc-list-item .disabled=${!supported} graphic="icon">
-              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-              ${!yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
-
-            <mwc-list-item .disabled=${!supported} graphic="icon">
+            <ha-list-item graphic="icon" .disabled=${!supported}>
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.edit_yaml"
+                `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
               )}
-              ${yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
 
             <li divider role="separator"></li>
 
-            <mwc-list-item
+            <ha-list-item
               graphic="icon"
               .disabled=${this.disabled || type === "list"}
             >
@@ -292,8 +276,8 @@ export default class HaAutomationTriggerRow extends LitElement {
                   ? mdiPlayCircleOutline
                   : mdiStopCircleOutline}
               ></ha-svg-icon>
-            </mwc-list-item>
-            <mwc-list-item
+            </ha-list-item>
+            <ha-list-item
               class="warning"
               graphic="icon"
               .disabled=${this.disabled}
@@ -306,7 +290,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                 slot="graphic"
                 .path=${mdiDelete}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
           </ha-button-menu>
 
           <div
@@ -506,17 +490,17 @@ export default class HaAutomationTriggerRow extends LitElement {
         fireEvent(this, "move-down");
         break;
       case 7:
-        this._switchUiMode();
+        if (this._yamlMode) {
+          this._switchUiMode();
+        } else {
+          this._switchYamlMode();
+        }
         this.expand();
         break;
       case 8:
-        this._switchYamlMode();
-        this.expand();
-        break;
-      case 9:
         this._onDisable();
         break;
-      case 10:
+      case 9:
         this._onDelete();
         break;
     }
@@ -730,19 +714,16 @@ export default class HaAutomationTriggerRow extends LitElement {
           background-color: var(--accent-color);
           color: var(--text-accent-color, var(--text-primary-color));
         }
-        mwc-list-item[disabled] {
+        ha-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
-        mwc-list-item.hidden {
+        ha-list-item.hidden {
           display: none;
         }
         ha-textfield {
           display: block;
           margin-bottom: 24px;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }

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

@@ -1,7 +1,6 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list";
 import {
-  mdiCheck,
   mdiCog,
   mdiContentDuplicate,
   mdiContentSave,
@@ -11,6 +10,7 @@ import {
   mdiInformationOutline,
   mdiMotionPlayOutline,
   mdiPlay,
+  mdiPlaylistEdit,
   mdiTag,
 } from "@mdi/js";
 import type { HassEvent } from "home-assistant-js-websocket";
@@ -263,16 +263,11 @@ export class HaSceneEditor extends SubscribeMixin(
             .disabled=${!this.sceneId || this._mode === "live"}
           >
             ${this.hass.localize("ui.panel.config.scene.picker.apply")}
-            <ha-svg-icon
-              class="selected_menu_item"
-              slot="graphic"
-              .path=${mdiPlay}
-            ></ha-svg-icon>
+            <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
           </ha-list-item>
           <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
             ${this.hass.localize("ui.panel.config.scene.picker.show_info")}
             <ha-svg-icon
-              class="selected_menu_item"
               slot="graphic"
               .path=${mdiInformationOutline}
             ></ha-svg-icon>
@@ -281,45 +276,21 @@ export class HaSceneEditor extends SubscribeMixin(
             ${this.hass.localize(
               "ui.panel.config.automation.picker.show_settings"
             )}
-            <ha-svg-icon
-              class="selected_menu_item"
-              slot="graphic"
-              .path=${mdiCog}
-            ></ha-svg-icon>
+            <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
           </ha-list-item>
 
           <ha-list-item graphic="icon" .disabled=${!this.sceneId}>
             ${this.hass.localize(
               `ui.panel.config.scene.picker.${this._getCategory(this._entityRegistryEntries, this._scene?.entity_id) ? "edit_category" : "assign_category"}`
             )}
-            <ha-svg-icon
-              class="selected_menu_item"
-              slot="graphic"
-              .path=${mdiTag}
-            ></ha-svg-icon>
+            <ha-svg-icon slot="graphic" .path=${mdiTag}></ha-svg-icon>
           </ha-list-item>
 
-          <li divider role="separator"></li>
-
           <ha-list-item graphic="icon">
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-            ${this._mode !== "yaml"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
-              : nothing}
-          </ha-list-item>
-          <ha-list-item graphic="icon">
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
-            ${this._mode === "yaml"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
-              : nothing}
+            ${this.hass.localize(
+              `ui.panel.config.automation.editor.edit_${this._mode !== "yaml" ? "yaml" : "ui"}`
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
           <li divider role="separator"></li>
@@ -717,17 +688,14 @@ export class HaSceneEditor extends SubscribeMixin(
         if (this._mode === "yaml") {
           this._initEntities(this._config!);
           this._exitYamlMode();
-        }
-        break;
-      case 5:
-        if (this._mode !== "yaml") {
+        } else {
           this._enterYamlMode();
         }
         break;
-      case 6:
+      case 5:
         this._duplicate();
         break;
-      case 7:
+      case 6:
         this._deleteTapped();
         break;
     }

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import {
-  mdiCheck,
   mdiContentDuplicate,
   mdiContentSave,
   mdiDebugStepOver,
@@ -10,6 +9,7 @@ import {
   mdiFormTextbox,
   mdiInformationOutline,
   mdiPlay,
+  mdiPlaylistEdit,
   mdiRenameBox,
   mdiRobotConfused,
   mdiTransitConnection,
@@ -245,27 +245,16 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               `
             : nothing}
 
-          <li divider role="separator"></li>
-
-          <ha-list-item graphic="icon" @click=${this._switchUiMode}>
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-            ${this._mode === "gui"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon> `
-              : ``}
-          </ha-list-item>
-          <ha-list-item graphic="icon" @click=${this._switchYamlMode}>
-            ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
-            ${this._mode === "yaml"
-              ? html`<ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
-              : ``}
+          <ha-list-item
+            graphic="icon"
+            @click=${this._mode === "gui"
+              ? this._switchYamlMode
+              : this._switchUiMode}
+          >
+            ${this.hass.localize(
+              `ui.panel.config.automation.editor.edit_${this._mode === "gui" ? "yaml" : "ui"}`
+            )}
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
           <li divider role="separator"></li>
@@ -874,9 +863,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         ha-fab.dirty {
           bottom: 0;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }

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

@@ -1,6 +1,5 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
-import { mdiCheck, mdiDelete, mdiDotsVertical } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,6 +12,7 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-expansion-panel";
+import "../../../components/ha-list-item";
 import type { SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-yaml-editor";
@@ -98,31 +98,17 @@ export default class HaScriptFieldRow extends LitElement {
               .path=${mdiDotsVertical}
             ></ha-icon-button>
 
-            <mwc-list-item graphic="icon">
-              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-              ${!this._yamlMode
-                ? html` <ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
-
-            <mwc-list-item graphic="icon">
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.edit_yaml"
+                `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              ${this._yamlMode
-                ? html`<ha-svg-icon
-                    class="selected_menu_item"
-                    slot="graphic"
-                    .path=${mdiCheck}
-                  ></ha-svg-icon>`
-                : ``}
-            </mwc-list-item>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
 
-            <mwc-list-item
+            <ha-list-item
               class="warning"
               graphic="icon"
               .disabled=${this.disabled}
@@ -135,7 +121,7 @@ export default class HaScriptFieldRow extends LitElement {
                 slot="graphic"
                 .path=${mdiDelete}
               ></ha-svg-icon>
-            </mwc-list-item>
+            </ha-list-item>
           </ha-button-menu>
           <div
             class=${classMap({
@@ -174,12 +160,9 @@ export default class HaScriptFieldRow extends LitElement {
   private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._yamlMode = false;
+        this._yamlMode = !this._yamlMode;
         break;
       case 1:
-        this._yamlMode = true;
-        break;
-      case 2:
         this._onDelete();
         break;
     }
@@ -348,7 +331,7 @@ export default class HaScriptFieldRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
 
-        mwc-list-item[disabled] {
+        ha-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
         .warning ul {