clean up

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/data/panel.ts

@@ -11,6 +11,8 @@ import {
   mdiViewDashboard,
 } from "@mdi/js";
 import type { HomeAssistant, PanelInfo } from "../types";
+import type { PageNavigation } from "../layouts/hass-tabs-subpage";
+import type { LocalizeKeys } from "../common/translations/localize";
 
 /** Panel to show when no panel is picked. */
 export const DEFAULT_PANEL = "lovelace";
@@ -72,6 +74,40 @@ export const getPanelTitleFromUrlPath = (
   return getPanelTitle(hass, panel);
 };
 
+/**
+ * Get subpage title for config panel routes.
+ * Returns the specific subpage title (e.g., "Automations") if found,
+ * or undefined to fall back to the panel title (e.g., "Settings").
+ *
+ * @param hass HomeAssistant instance
+ * @param path Full route path (e.g., "/config/automation/dashboard")
+ * @param configSections Config sections metadata for resolving subpage titles
+ * @returns Localized subpage title, or undefined if not found
+ */
+export const getConfigSubpageTitle = (
+  hass: HomeAssistant,
+  path: string,
+  configSections: Record<string, PageNavigation[]>
+): string | undefined => {
+  // Search through all config section groups for a matching path
+  for (const sectionGroup of Object.values(configSections)) {
+    const pageNav = sectionGroup.find((nav) => path.startsWith(nav.path));
+    if (pageNav) {
+      if (pageNav.translationKey) {
+        const localized = hass.localize(pageNav.translationKey as LocalizeKeys);
+        if (localized) {
+          return localized;
+        }
+      }
+
+      if (pageNav.name) {
+        return pageNav.name;
+      }
+    }
+  }
+  return undefined;
+};
+
 export const getPanelIcon = (panel: PanelInfo): string | undefined => {
   if (!panel.icon) {
     switch (panel.component_name) {

src/state/panel-title-mixin.ts

@@ -1,30 +1,55 @@
-import { getPanelTitleFromUrlPath } from "../data/panel";
+import type { PropertyValues } from "lit";
+import { getConfigSubpageTitle, getPanelTitleFromUrlPath } from "../data/panel";
+import { configSections } from "../panels/config/ha-panel-config";
 import type { Constructor, HomeAssistant } from "../types";
 import type { HassBaseEl } from "./hass-base-mixin";
 
-const setTitle = (title: string | undefined) => {
+const setPageTitle = (title: string | undefined) => {
   document.title = title ? `${title} – Home Assistant` : "Home Assistant";
 };
 
+const getRoutePath = (): string =>
+  // In demo mode, use hash; otherwise use pathname
+  __DEMO__ ? window.location.hash.substring(1) : window.location.pathname;
+
 export const panelTitleMixin = <T extends Constructor<HassBaseEl>>(
   superClass: T
 ) =>
   class extends superClass {
-    protected updated(changedProps) {
+    private _previousPath?: string;
+
+    protected updated(changedProps: PropertyValues): void {
       super.updated(changedProps);
       if (!changedProps.has("hass") || !this.hass) {
         return;
       }
 
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      const currentPath = getRoutePath();
 
+      // Update title when panel, localize, or route path changes
       if (
         !oldHass ||
         oldHass.panels !== this.hass.panels ||
         oldHass.panelUrl !== this.hass.panelUrl ||
-        oldHass.localize !== this.hass.localize
+        oldHass.localize !== this.hass.localize ||
+        this._previousPath !== currentPath
       ) {
-        setTitle(getPanelTitleFromUrlPath(this.hass, this.hass.panelUrl));
+        this._previousPath = currentPath;
+
+        let title: string | undefined;
+
+        // Try to get specific subpage title for config panel
+        if (this.hass.panelUrl === "config") {
+          title = getConfigSubpageTitle(this.hass, currentPath, configSections);
+        }
+
+        // Fall back to panel title
+        if (!title) {
+          title = getPanelTitleFromUrlPath(this.hass, this.hass.panelUrl);
+        }
+
+        setPageTitle(title);
       }
     }
   };