Fix notifications

src/managers/notification-manager.ts

@@ -1,11 +1,11 @@
-import { html, LitElement, nothing } from "lit";
-import { property, state, query } from "lit/decorators";
 import { mdiClose } from "@mdi/js";
+import { html, LitElement, nothing } from "lit";
+import { property, query, state } from "lit/decorators";
 import { computeRTL } from "../common/util/compute_rtl";
+import "../components/ha-button";
 import "../components/ha-toast";
 import type { HaToast } from "../components/ha-toast";
 import type { HomeAssistant } from "../types";
-import "../components/ha-button";
 
 export interface ShowToastParams {
   message: string;
@@ -27,12 +27,10 @@ class NotificationManager extends LitElement {
   @query("ha-toast") private _toast!: HaToast | undefined;
 
   public async showDialog(parameters: ShowToastParams) {
-    if (this._parameters && this._parameters.message !== parameters.message) {
+    this._toast?.close();
-      this._parameters = undefined;
-      await this.updateComplete;
-    }
 
     if (!parameters || parameters.duration === 0) {
+      this._parameters = undefined;
       return;
     }
 
@@ -44,10 +42,9 @@ class NotificationManager extends LitElement {
     ) {
       this._parameters.duration = 4000;
     }
-  }
 
-  public shouldUpdate(changedProperties) {
+    await this.updateComplete;
-    return !this._toast || changedProperties.has("_parameters");
+    this._toast?.show();
   }
 
   private _toastClosed() {
@@ -61,7 +58,6 @@ class NotificationManager extends LitElement {
     return html`
       <ha-toast
         leading
-        open
         dir=${computeRTL(this.hass) ? "rtl" : "ltr"}
         .labelText=${this._parameters.message}
         .timeoutMs=${this._parameters.duration!}
@@ -77,12 +73,14 @@ class NotificationManager extends LitElement {
             `
           : nothing}
         ${this._parameters?.dismissable
-          ? html`<ha-icon-button
+          ? html`
+              <ha-icon-button
                 .label=${this.hass.localize("ui.common.close")}
                 .path=${mdiClose}
                 dialogAction="close"
                 slot="dismiss"
-            ></ha-icon-button>`
+              ></ha-icon-button>
+            `
           : nothing}
       </ha-toast>
     `;

src/panels/lovelace/editor/delete-badge.ts

@@ -1,6 +1,5 @@
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
-import { showDeletedToastWithUndo } from "../../../util/toast-deleted-success";
 import { Lovelace } from "../types";
 import { deleteBadge } from "./config-util";
 import { LovelaceCardPath } from "./lovelace-path";
@@ -18,7 +17,11 @@ export async function deleteBadgeWithUndo(
       lovelace.saveConfig(oldConfig);
     };
     await lovelace.saveConfig(newConfig);
-    showDeletedToastWithUndo(element, hass, action);
+    lovelace.showToast({
+      message: hass.localize("ui.common.successfully_deleted"),
+      duration: 8000,
+      action: { action, text: hass.localize("ui.common.undo") },
+    });
   } catch (err: any) {
     showAlertDialog(element, {
       text: `Deleting failed: ${err.message}`,

src/panels/lovelace/editor/delete-card.ts

@@ -1,6 +1,5 @@
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
-import { showDeletedToastWithUndo } from "../../../util/toast-deleted-success";
 import { Lovelace } from "../types";
 import { deleteCard } from "./config-util";
 import { LovelaceCardPath } from "./lovelace-path";
@@ -18,7 +17,11 @@ export async function deleteCardWithUndo(
       await lovelace.saveConfig(oldConfig);
     };
     await lovelace.saveConfig(newConfig);
-    showDeletedToastWithUndo(element, hass, action);
+    lovelace.showToast({
+      message: hass.localize("ui.common.successfully_deleted"),
+      duration: 8000,
+      action: { action, text: hass.localize("ui.common.undo") },
+    });
   } catch (err: any) {
     showAlertDialog(element, {
       text: `Deleting failed: ${err.message}`,

src/panels/lovelace/ha-panel-lovelace.ts

@@ -31,6 +31,8 @@ import { showSaveDialog } from "./editor/show-save-config-dialog";
 import "./hui-root";
 import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy";
 import { Lovelace } from "./types";
+import { fireEvent } from "../../common/dom/fire_event";
+import { ShowToastParams } from "../../managers/notification-manager";
 
 (window as any).loadCardHelpers = () => import("./custom-card-helpers");
 
@@ -434,6 +436,9 @@ export class LovelacePanel extends LitElement {
           throw err;
         }
       },
+      showToast: (params: ShowToastParams) => {
+        fireEvent(this, "hass-notification", params);
+      },
     };
   }
 

src/panels/lovelace/types.ts

@@ -14,6 +14,7 @@ import { LovelaceHeaderFooterConfig } from "./header-footer/types";
 import { LovelaceCardFeatureConfig } from "./card-features/types";
 import { LovelaceElement, LovelaceElementConfig } from "./elements/types";
 import { LovelaceHeadingBadgeConfig } from "./heading-badges/types";
+import { ShowToastParams } from "../../managers/notification-manager";
 
 declare global {
   // eslint-disable-next-line
@@ -35,6 +36,7 @@ export interface Lovelace {
   setEditMode: (editMode: boolean) => void;
   saveConfig: (newConfig: LovelaceRawConfig) => Promise<void>;
   deleteConfig: () => Promise<void>;
+  showToast: (params: ShowToastParams) => void;
 }
 
 export interface LovelaceBadge extends HTMLElement {

src/util/toast-deleted-success.ts

@@ -1,20 +0,0 @@
-import { ShowToastParams } from "../managers/notification-manager";
-import { HomeAssistant } from "../types";
-import { showToast } from "./toast";
-
-export const showDeletedToastWithUndo = (
-  el: HTMLElement,
-  hass: HomeAssistant,
-  action?: () => void
-) => {
-  const toastParams: ShowToastParams = {
-    message: hass!.localize("ui.common.successfully_deleted"),
-    duration: 8000,
-  };
-
-  if (action) {
-    toastParams.action = { action, text: hass!.localize("ui.common.undo") };
-  }
-
-  showToast(el, toastParams);
-};