From fda8332330a4164f9637470f21b71e2d22985517 Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Fri, 6 Dec 2024 12:02:26 +0100
Subject: [PATCH] Process code review

---
 src/components/ha-sidebar.ts        | 13 +++++++
 src/mixins/prevent-unsaved-mixin.ts | 57 ++++++++++++++++++-----------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 1d1166050a6e..ecef4d1a64ae 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -27,6 +27,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
+import type { PaperListboxElement } from "@polymer/paper-listbox";
 import { storage } from "../common/decorators/storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
@@ -285,6 +286,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this.subscribePersistentNotifications();
+
+    window.addEventListener("hass-reset-sidebar", (ev) => {
+      const sidebar = this.shadowRoot?.getElementById(
+        "sidebar"
+      ) as PaperListboxElement;
+      sidebar.selected = ev.detail;
+    });
   }
 
   private subscribePersistentNotifications(): void {
@@ -395,6 +403,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     // prettier-ignore
     return html`
       <paper-listbox
+          id="sidebar"
         attr-for-selected="data-panel"
         class="ha-scrollbar"
         .selected=${selectedPanel}
@@ -1113,4 +1122,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-sidebar": HaSidebar;
   }
+
+  interface HASSDomEvents {
+    "hass-reset-sidebar": string;
+  }
 }
diff --git a/src/mixins/prevent-unsaved-mixin.ts b/src/mixins/prevent-unsaved-mixin.ts
index 7bc4ce8a913c..8f997ce5f9d7 100644
--- a/src/mixins/prevent-unsaved-mixin.ts
+++ b/src/mixins/prevent-unsaved-mixin.ts
@@ -1,48 +1,57 @@
-import type { LitElement } from "lit";
+import type { LitElement, PropertyValues } from "lit";
 import type { Constructor } from "../types";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { navigate } from "../common/navigate";
+import { fireEvent } from "../common/dom/fire_event";
 
 export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
   superClass: T
 ) =>
   class extends superClass {
     private _handleClick = async (e: MouseEvent) => {
-      const href = isNavigationClick(e);
-
-      if (!href) {
+      // get the right target, otherwise the composedPath would return <home-assistant> in the new event
+      const target = e
+        .composedPath()
+        .find(
+          (n) => (n as HTMLElement).tagName === "HA-SVG-ICON"
+        ) as HTMLAnchorElement;
+      if (!isNavigationClick(e)) {
         return;
       }
 
-      e.preventDefault();
       const result = await this.promptDiscardChanges();
       if (result) {
-        navigate(href);
+        this._removeListeners();
+        if (target) {
+          const newEvent = new MouseEvent(e.type, e);
+          target.dispatchEvent(newEvent);
+        }
+      } else {
+        fireEvent(this, "hass-reset-sidebar", this.getPanel());
       }
     };
 
-    private _handleUnload = (e: BeforeUnloadEvent) => {
-      if (this.isDirty()) {
-        e.preventDefault();
-      }
-    };
+    private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();
+
+    private _removeListeners() {
+      window.removeEventListener("click", this._handleClick, true);
+      window.removeEventListener("beforeunload", this._handleUnload);
+    }
 
-    public connectedCallback(): void {
-      super.connectedCallback();
+    public willUpdate(changedProperties: PropertyValues): void {
+      super.willUpdate(changedProperties);
 
-      document.body.addEventListener("mousedown", this._handleClick, {
-        capture: true,
-      });
-      window.addEventListener("beforeunload", this._handleUnload);
+      if (this.isDirty()) {
+        window.addEventListener("click", this._handleClick, true);
+        window.addEventListener("beforeunload", this._handleUnload);
+      } else {
+        this._removeListeners();
+      }
     }
 
     public disconnectedCallback(): void {
       super.disconnectedCallback();
 
-      document.body.removeEventListener("click", this._handleClick, {
-        capture: true,
-      });
-      window.removeEventListener("beforeunload", this._handleUnload);
+      this._removeListeners();
     }
 
     protected isDirty(): boolean {
@@ -52,4 +61,8 @@ export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
     protected async promptDiscardChanges(): Promise<boolean> {
       return true;
     }
+
+    protected getPanel(): string {
+      return "config";
+    }
   };