Use 6A1B9A

src/dialogs/developert-tools/ha-developer-tools-dialog.ts

@@ -1,138 +0,0 @@
-import { mdiClose } from "@mdi/js";
-import "@polymer/paper-tabs";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant, Route } from "../../types";
-import "../../components/ha-dialog";
-import "../../components/ha-tabs";
-import "../../components/ha-icon-button";
-import "../../panels/developer-tools/developer-tools-router";
-import type { HaDialog } from "../../components/ha-dialog";
-import "@material/mwc-button/mwc-button";
-
-@customElement("ha-developer-tools-dialog")
-export class HaDeveloperToolsDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _route: Route = {
-    prefix: "/developer-tools",
-    path: "/state",
-  };
-
-  @query("ha-dialog", true) private _dialog!: HaDialog;
-
-  public async showDialog(): Promise<void> {
-    this._opened = true;
-  }
-
-  public async closeDialog(): Promise<void> {
-    this._opened = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._opened) {
-      return html``;
-    }
-    return html`
-      <ha-dialog open @closed=${this.closeDialog}>
-        <div class="header">
-          <ha-tabs
-            scrollable
-            attr-for-selected="page-name"
-            .selected=${this._route.path.substr(1)}
-            @iron-activate=${this.handlePageSelected}
-          >
-            <paper-tab page-name="state">
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.states.title"
-              )}
-            </paper-tab>
-            <paper-tab page-name="service">
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.services.title"
-              )}
-            </paper-tab>
-            <paper-tab page-name="template">
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.templates.title"
-              )}
-            </paper-tab>
-            <paper-tab page-name="event">
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.events.title"
-              )}
-            </paper-tab>
-            <paper-tab page-name="statistics">
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.statistics.title"
-              )}
-            </paper-tab>
-          </ha-tabs>
-          <ha-icon-button
-            .path=${mdiClose}
-            @click=${this.closeDialog}
-          ></ha-icon-button>
-        </div>
-        <developer-tools-router
-          .route=${this._route}
-          .narrow=${document.body.clientWidth < 600}
-          .hass=${this.hass}
-        ></developer-tools-router>
-      </ha-dialog>
-    `;
-  }
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    this.hass.loadBackendTranslation("title");
-    this.hass.loadFragmentTranslation("developer-tools");
-  }
-
-  private handlePageSelected(ev) {
-    const newPage = ev.detail.item.getAttribute("page-name");
-    if (newPage !== this._route.path.substr(1)) {
-      this._route = {
-        prefix: "/developer-tools",
-        path: `/${newPage}`,
-      };
-    } else {
-      // scrollTo(0, 0);
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-min-width: 100vw;
-          --mdc-dialog-min-height: 100vh;
-        }
-        .header {
-          display: flex;
-        }
-        ha-tabs {
-          flex: 1;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-developer-tools-dialog": HaDeveloperToolsDialog;
-  }
-}

src/dialogs/developert-tools/show-dialog-developer-tools.ts

@@ -1,12 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export const loadDeveloperToolDialog = () =>
-  import("./ha-developer-tools-dialog");
-
-export const showDeveloperToolDialog = (element: HTMLElement): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-developer-tools-dialog",
-    dialogImport: loadDeveloperToolDialog,
-    dialogParams: {},
-  });
-};

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -1,4 +1,4 @@
-import { mdiCellphoneCog, mdiCloudLock } from "@mdi/js";
+import { mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -110,29 +110,10 @@ class HaConfigDashboard extends LitElement {
                         ></ha-config-navigation>
                       `
                     : ""}
-                  ${this._externalConfig?.hasSettingsScreen
-                    ? html`
-                        <ha-config-navigation
-                          .hass=${this.hass}
-                          .narrow=${this.narrow}
-                          .showAdvanced=${this.showAdvanced}
-                          .pages=${[
-                            {
-                              path: "#external-app-configuration",
-                              name: "Companion App",
-                              description: "Location and notifications",
-                              iconPath: mdiCellphoneCog,
-                              iconColor: "#37474F",
-                              core: true,
-                            },
-                          ]}
-                          @click=${this._handleExternalAppConfiguration}
-                        ></ha-config-navigation>
-                      `
-                    : ""}
                   <ha-config-navigation
                     .hass=${this.hass}
                     .narrow=${this.narrow}
+                    .externalConfig=${this._externalConfig}
                     .showAdvanced=${this.showAdvanced}
                     .pages=${configSections.dashboard}
                   ></ha-config-navigation>
@@ -142,13 +123,6 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
-  private _handleExternalAppConfiguration(ev: Event) {
-    ev.preventDefault();
-    this.hass.auth.external!.fireMessage({
-      type: "config_screen/show",
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/dashboard/ha-config-navigation.ts

@@ -6,6 +6,7 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
+import { ExternalConfig } from "../../../external_app/external_config";
 import { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../../types";
 
@@ -19,10 +20,16 @@ class HaConfigNavigation extends LitElement {
 
   @property() public pages!: PageNavigation[];
 
+  @property() public externalConfig?: ExternalConfig;
+
   protected render(): TemplateResult {
     return html`
       ${this.pages.map((page) =>
-        canShowPage(this.hass, page)
+        (
+          page.path === "#external-app-configuration"
+            ? this.externalConfig?.hasSettingsScreen
+            : canShowPage(this.hass, page)
+        )
           ? html`
               <a href=${page.path} aria-role="option" tabindex="-1">
                 <paper-icon-item @click=${this._entryClicked}>
@@ -77,6 +84,16 @@ class HaConfigNavigation extends LitElement {
 
   private _entryClicked(ev) {
     ev.currentTarget.blur();
+    if (
+      ev.currentTarget.parentElement.href.endsWith(
+        "#external-app-configuration"
+      )
+    ) {
+      ev.preventDefault();
+      this.hass.auth.external!.fireMessage({
+        type: "config_screen/show",
+      });
+    }
   }
 
   static get styles(): CSSResultGroup {

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

@@ -1,6 +1,7 @@
 import {
   mdiAccount,
   mdiBadgeAccountHorizontal,
+  mdiCellphoneCog,
   mdiCog,
   mdiDevices,
   mdiHomeAssistant,
@@ -111,6 +112,13 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#E48629",
       components: ["person", "zone", "users"],
     },
+    {
+      path: "#external-app-configuration",
+      name: "Companion App",
+      description: "Location and notifications",
+      iconPath: mdiCellphoneCog,
+      iconColor: "#6A1B9A",
+    },
     {
       path: "/config/core",
       name: "Settings",

src/state/quick-bar-mixin.ts

@@ -1,6 +1,5 @@
 import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
-import { showDeveloperToolDialog } from "../dialogs/developert-tools/show-dialog-developer-tools";
 import {
   QuickBarParams,
   showQuickBar,
@@ -33,7 +32,6 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       tinykeys(window, {
         e: (ev) => this._showQuickBar(ev),
         c: (ev) => this._showQuickBar(ev, true),
-        d: () => showDeveloperToolDialog(this),
       });
     }