Set Title to Current Panel (#5220)

* Set title to current panel

* Move to mixin

* Naming

* guard clause

src/data/panel.ts

@@ -0,0 +1,23 @@
+import { HomeAssistant, PanelInfo } from "../types";
+import { DEFAULT_PANEL } from "../common/const";
+
+export const getPanelTitle = (hass: HomeAssistant): string | undefined => {
+  let title: string = "";
+  const panel = Object.values(hass.panels).find(
+    (p: PanelInfo): boolean => p.url_path === hass.panelUrl
+  );
+  if (!panel) {
+    return;
+  }
+  const defaultPanel =
+    hass.panels[localStorage.defaultPage || DEFAULT_PANEL] ||
+    hass.panels[DEFAULT_PANEL];
+  title =
+    panel.url_path === "profile"
+      ? hass.localize("panel.profile")
+      : hass.localize(`panel.${panel.title}`) ||
+        panel.title ||
+        defaultPanel.title ||
+        hass.localize("panel.states");
+  return title;
+};

src/state/hass-element.ts

@@ -12,6 +12,7 @@ import { hapticMixin } from "./haptic-mixin";
 import { urlSyncMixin } from "./url-sync-mixin";
 import { Constructor } from "../types";
 import { HassBaseEl } from "./hass-base-mixin";
+import { panelTitleMixin } from "./panel-title-mixin";
 
 const ext = <T extends Constructor>(baseClass: T, mixins): T =>
   mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@@ -29,4 +30,5 @@ export class HassElement extends ext(HassBaseEl, [
   urlSyncMixin,
   ZHADialogMixin,
   hapticMixin,
+  panelTitleMixin,
 ]) {}

src/state/panel-title-mixin.ts

@@ -0,0 +1,30 @@
+import { getPanelTitle } from "../data/panel";
+import { HassBaseEl } from "./hass-base-mixin";
+import { HomeAssistant, Constructor } from "../types";
+
+export const panelTitleMixin = <T extends Constructor<HassBaseEl>>(
+  superClass: T
+) =>
+  class extends superClass {
+    private _oldHass?: HomeAssistant;
+
+    protected updated(changedProps) {
+      super.updated(changedProps);
+      if (!changedProps.has("hass") || !this.hass) {
+        return;
+      }
+      if (!this._oldHass) {
+        this.setTitle(getPanelTitle(this.hass));
+      }
+      this._oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (!this._oldHass || this._oldHass.panelUrl !== this.hass.panelUrl) {
+        this.setTitle(getPanelTitle(this.hass));
+      }
+    }
+
+    private setTitle(title: string | undefined) {
+      document.title = title
+        ? `${title} - ${this.hass!.localize("domain.homeassistant")}`
+        : this.hass!.localize("domain.homeassistant");
+    }
+  };