Improved automation & script menus + show errors in toast (#7371)

* Improved automation & script menus + show errors in toast

* Changes from review

* Re-added old error display

* Toast back to default duration + remove action

src/managers/notification-manager.ts

@@ -86,10 +86,12 @@ class NotificationManager extends LitElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        padding: 8px 12px;
       }
       mwc-button {
         color: var(--primary-color);
         font-weight: bold;
+        margin-left: 8px;
       }
     `;
   }

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

@@ -31,6 +31,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
+import { showToast } from "../../../util/toast";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   AutomationConfig,
@@ -132,6 +133,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${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>`
@@ -147,6 +149,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${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>`
@@ -168,6 +171,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             <ha-svg-icon
               slot="graphic"
               .path=${mdiContentDuplicate}
+              class=${classMap({ enabled_icon: this.automationId })}
             ></ha-svg-icon>
           </mwc-list-item>
 
@@ -182,7 +186,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${this.hass.localize(
               "ui.panel.config.automation.picker.delete_automation"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+            <ha-svg-icon
+              class=${classMap({ warning: this.automationId })}
+              slot="graphic"
+              .path=${mdiDelete}
+            >
+            </ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
         ${this._config
@@ -725,6 +734,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       },
       (errors) => {
         this._errors = errors.body.message;
+        showToast(this, {
+          message: errors.body.message,
+        });
         throw errors;
       }
     );
@@ -766,6 +778,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         mwc-fab.dirty {
           bottom: 0;
         }
+        .enabled_icon {
+          color: var(--primary-text-color);
+        }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }

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

@@ -57,6 +57,7 @@ import { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "../../../components/ha-svg-icon";
+import { showToast } from "../../../util/toast";
 import { mdiContentSave } from "@mdi/js";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 
@@ -715,6 +716,9 @@ export class HaSceneEditor extends SubscribeMixin(
       }
     } catch (err) {
       this._errors = err.body.message || err.message;
+      showToast(this, {
+        message: err.body.message || err.message,
+      });
       throw err;
     }
   }

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

@@ -106,7 +106,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
-              ? html`<ha-svg-icon
+              ? html` <ha-svg-icon
+                  class="selected_menu_item"
                   slot="graphic"
                   .path=${mdiCheck}
                 ></ha-svg-icon>`
@@ -121,7 +122,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
-              ? html`<ha-svg-icon
+              ? html` <ha-svg-icon
+                  class="selected_menu_item"
                   slot="graphic"
                   .path=${mdiCheck}
                 ></ha-svg-icon>`
@@ -139,7 +141,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             graphic="icon"
           >
             ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
-            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+            <ha-svg-icon
+              class=${classMap({ warning: this.scriptEntityId })}
+              slot="graphic"
+              .path=${mdiDelete}
+            >
+            </ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
         ${this.narrow
@@ -573,9 +580,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   private _saveScript(): void {
     if (this._idError) {
-      this._errors = this.hass.localize(
+      showToast(this, {
-        "ui.panel.config.script.editor.id_already_exists_save_error"
+        message: this.hass.localize(
-      );
+          "ui.panel.config.script.editor.id_already_exists_save_error"
+        ),
+        dismissable: false,
+        duration: 0,
+        action: {
+          action: () => {},
+          text: this.hass.localize("ui.dialogs.generic.ok"),
+        },
+      });
       return;
     }
     const id = this.scriptEntityId
@@ -591,6 +606,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       },
       (errors) => {
         this._errors = errors.body.message;
+        showToast(this, {
+          message: errors.body.message,
+        });
         throw errors;
       }
     );
@@ -629,6 +647,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         mwc-fab.dirty {
           bottom: 0;
         }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }