Colors

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

.github/workflows/release.yaml

@@ -41,7 +41,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
+          python3 -m pip install twine
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
 

MANIFEST.in

@@ -1,4 +1,5 @@
 include README.md
+include LICENSE.md
 graft hass_frontend
 graft hass_frontend_es5
 recursive-exclude * *.py[co]

build-scripts/env.js

@@ -26,11 +26,11 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+      .match(/\d{8}\.\d+/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[1];
+    return version[0];
   },
 };

gallery/script/netlify_build_gallery

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-TARGET_LABEL="needs design preview"
+TARGET_LABEL="Needs design preview"
 
 if [[ "$NETLIFY" != "true" ]]; then
   echo "This script can only be run on Netlify"

gallery/sidebar.js

@@ -20,7 +20,6 @@ module.exports = [
       "editor-trigger",
       "editor-condition",
       "editor-action",
-      "selectors",
       "trace",
       "trace-timeline",
     ],

gallery/src/ha-gallery.ts

@@ -188,7 +188,6 @@ class HaGallery extends LitElement {
 
       .sidebar details {
         margin-top: 1em;
-        margin-left: 1em;
       }
 
       .sidebar summary {

gallery/src/pages/automation/selectors.markdown

@@ -1,3 +0,0 @@
----
-title: Selectors
----

gallery/src/pages/automation/selectors.ts

@@ -1,102 +0,0 @@
-/* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
-import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import { Selector } from "../../../../src/data/selector";
-import "../../../../src/components/ha-selector/ha-selector";
-
-const SCHEMAS: { name: string; selector: Selector }[] = [
-  { name: "Addon", selector: { addon: {} } },
-
-  { name: "Entity", selector: { entity: {} } },
-  { name: "Device", selector: { device: {} } },
-  { name: "Area", selector: { area: {} } },
-  { name: "Target", selector: { target: {} } },
-  {
-    name: "Number",
-    selector: {
-      number: {
-        min: 0,
-        max: 10,
-      },
-    },
-  },
-  { name: "Boolean", selector: { boolean: {} } },
-  { name: "Time", selector: { time: {} } },
-  { name: "Action", selector: { action: {} } },
-  { name: "Text", selector: { text: { multiline: false } } },
-  { name: "Text Multiline", selector: { text: { multiline: true } } },
-  { name: "Object", selector: { object: {} } },
-  {
-    name: "Select",
-    selector: {
-      select: {
-        options: ["Everyone Home", "Some Home", "All gone"],
-      },
-    },
-  },
-];
-
-@customElement("demo-automation-selectors")
-class DemoHaSelector extends LitElement {
-  @state() private hass!: HomeAssistant;
-
-  private data: any = SCHEMAS.map(() => undefined);
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
-    mockHassioSupervisor(hass);
-  }
-
-  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
-    return html`
-      ${SCHEMAS.map(
-        (info, sampleIdx) => html`
-          <demo-black-white-row
-            .title=${info.name}
-            .value=${{ selector: info.selector, data: this.data[sampleIdx] }}
-          >
-            ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-selector
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .selector=${info.selector}
-                    .label=${info.name}
-                    .value=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    @value-changed=${valueChanged}
-                  ></ha-selector>
-                `
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-selectors": DemoHaSelector;
-  }
-}

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -114,7 +114,7 @@ class HassioAddonConfig extends LitElement {
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
               <ha-icon-button
-                .label=${this.supervisor.localize("common.menu")}
+                .label=${this.hass.localize("common.menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>

hassio/src/backups/hassio-backups.ts

@@ -191,7 +191,7 @@ export class HassioBackups extends LitElement {
           @action=${this._handleAction}
         >
           <ha-icon-button
-            .label=${this.supervisor?.localize("common.menu")}
+            .label=${this.hass.localize("common.menu")}
             .path=${mdiDotsVertical}
             slot="trigger"
           ></ha-icon-button>

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -17,27 +17,27 @@ export class DialogHassioBackupUpload
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @state() private _dialogParams?: HassioBackupUploadDialogParams;
+  @state() private _params?: HassioBackupUploadDialogParams;
 
   public async showDialog(
-    dialogParams: HassioBackupUploadDialogParams
+    params: HassioBackupUploadDialogParams
   ): Promise<void> {
-    this._dialogParams = dialogParams;
+    this._params = params;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    if (this._dialogParams && !this._dialogParams.onboarding) {
-      if (this._dialogParams.reloadBackup) {
-        this._dialogParams.reloadBackup();
+    if (this._params && !this._params.onboarding) {
+      if (this._params.reloadBackup) {
+        this._params.reloadBackup();
       }
     }
-    this._dialogParams = undefined;
+    this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._dialogParams) {
+    if (!this._params) {
       return html``;
     }
 
@@ -52,13 +52,9 @@ export class DialogHassioBackupUpload
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"
-              >${this.hass?.localize(
-                "ui.panel.page-onboarding.restore.upload_backup"
-              ) || "Upload backup"}</span
-            >
+            <span slot="title"> Upload backup </span>
             <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
+              .label=${this.hass?.localize("common.close") || "close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -75,7 +71,7 @@ export class DialogHassioBackupUpload
 
   private _backupUploaded(ev) {
     const backup = ev.detail.backup;
-    this._dialogParams?.showBackup(backup.slug);
+    this._params?.showBackup(backup.slug);
     this.closeDialog();
   }
 

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -48,9 +48,9 @@ class HassioBackupDialog
   @query("supervisor-backup-content")
   private _backupContent!: SupervisorBackupContent;
 
-  public async showDialog(dialogParams: HassioBackupDialogParams) {
-    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
-    this._dialogParams = dialogParams;
+  public async showDialog(params: HassioBackupDialogParams) {
+    this._backup = await fetchHassioBackupInfo(this.hass, params.slug);
+    this._dialogParams = params;
     this._restoringBackup = false;
   }
 
@@ -77,7 +77,7 @@ class HassioBackupDialog
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
             <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
+              .label=${this.hass?.localize("common.close") || "close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -114,20 +114,12 @@ class HassioBackupDialog
               @closed=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this.hass!.localize("ui.common.menu") || "Menu"}
+                .label=${this.hass!.localize("common.menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
-              <mwc-list-item
-                >${this._dialogParams.supervisor?.localize(
-                  "backup.download_backup"
-                )}</mwc-list-item
-              >
-              <mwc-list-item class="error"
-                >${this._dialogParams.supervisor?.localize(
-                  "backup.delete_backup_title"
-                )}</mwc-list-item
-              >
+              <mwc-list-item>Download Backup</mwc-list-item>
+              <mwc-list-item class="error">Delete Backup</mwc-list-item>
             </ha-button-menu>`
           : ""}
       </ha-dialog>

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -30,8 +30,8 @@ class HassioCreateBackupDialog extends LitElement {
   @query("supervisor-backup-content")
   private _backupContent!: SupervisorBackupContent;
 
-  public showDialog(dialogParams: HassioCreateBackupDialogParams) {
-    this._dialogParams = dialogParams;
+  public showDialog(params: HassioCreateBackupDialogParams) {
+    this._dialogParams = params;
     this._creatingBackup = false;
   }
 
@@ -57,7 +57,7 @@ class HassioCreateBackupDialog extends LitElement {
         )}
       >
         ${this._creatingBackup
-          ? html`<ha-circular-progress active></ha-circular-progress>`
+          ? html` <ha-circular-progress active></ha-circular-progress>`
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -39,8 +39,8 @@ class HassioHardwareDialog extends LitElement {
 
   @state() private _filter?: string;
 
-  public showDialog(dialogParams: HassioHardwareDialogParams) {
-    this._dialogParams = dialogParams;
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
   }
 
   public closeDialog() {
@@ -72,7 +72,7 @@ class HassioHardwareDialog extends LitElement {
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
           <ha-icon-button
-            .label=${this._dialogParams.supervisor.localize("common.close")}
+            .label=${this.hass.localize("common.close")}
             .path=${mdiClose}
             dialogAction="close"
           ></ha-icon-button>

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -104,7 +104,7 @@ export class DialogHassioNetwork
               ${this.supervisor.localize("dialog.network.title")}
             </span>
             <ha-icon-button
-              .label=${this.supervisor.localize("common.close")}
+              .label=${this.hass.localize("common.close")}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"

hassio/src/system/hassio-host-info.ts

@@ -186,7 +186,7 @@ class HassioHostInfo extends LitElement {
 
           <ha-button-menu corner="BOTTOM_START">
             <ha-icon-button
-              .label=${this.supervisor.localize("common.menu")}
+              .label=${this.hass.localize("common.menu")}
               .path=${mdiDotsVertical}
               slot="trigger"
             ></ha-icon-button>

package.json

@@ -110,7 +110,7 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.1.2",
+    "lit": "^2.0.2",
     "lit-vaadin-helpers": "^0.2.1",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
@@ -168,7 +168,6 @@
     "@types/leaflet-draw": "^1",
     "@types/marked": "^2",
     "@types/mocha": "^8",
-    "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
@@ -236,10 +235,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.1.2",
-    "lit-html": "2.1.2",
-    "lit-element": "3.1.2",
-    "@lit/reactive-element": "1.2.1"
+    "lit": "^2.0.2",
+    "lit-html": "2.0.1",
+    "lit-element": "3.0.1",
+    "@lit/reactive-element": "1.0.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

pyproject.toml

@@ -1,3 +0,0 @@
-[build-system]
-requires = ["setuptools~=60.5", "wheel~=0.37.1"]
-build-backend = "setuptools.build_meta"

script/release

@@ -11,6 +11,6 @@ yarn install
 
 script/build_frontend
 
-rm -rf dist home_assistant_frontend.egg-info
-python3 -m build
+rm -rf dist
+python3 setup.py -q sdist
 python3 -m twine upload dist/* --skip-existing

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("setup.cfg", "utf8");
+  const setup = fs.readFileSync("setup.py", "utf8");
   const version = setup.match(/\d{8}\.\d+/)[0];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("setup.py", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -1,21 +0,0 @@
-[metadata]
-name         = home-assistant-frontend
-version      = 20220201.0
-author       = The Home Assistant Authors
-author_email = hello@home-assistant.io
-license      = Apache-2.0
-platforms    = any
-description  = The Home Assistant frontend
-long_description = file: README.md
-long_description_content_type = text/markdown
-url          = https://github.com/home-assistant/frontend
-
-[options]
-packages = find:
-zip_safe = False
-include_package_data = True
-python_requires = >= 3.4.0
-
-[options.packages.find]
-include =
-    hass_frontend*

setup.py

@@ -1,7 +1,14 @@
-"""
-Entry point for setuptools. Required for editable installs.
-TODO: Remove file after updating to pip 21.3
-"""
-from setuptools import setup
+from setuptools import setup, find_packages
 
-setup()
+setup(
+    name="home-assistant-frontend",
+    version="20220118.0",
+    description="The Home Assistant frontend",
+    url="https://github.com/home-assistant/frontend",
+    author="The Home Assistant Authors",
+    author_email="hello@home-assistant.io",
+    license="Apache-2.0",
+    packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
+    include_package_data=True,
+    zip_safe=False,
+)

src/common/datetime/format_date_time.ts

@@ -13,19 +13,14 @@ export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );
 
 // August 9, 2021, 8:23:15 AM
@@ -36,20 +31,15 @@ export const formatDateTimeWithSeconds = (
 
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );
 
 // 9/8/2021, 8:23 AM
@@ -60,17 +50,12 @@ export const formatDateTimeNumeric = (
 
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        year: "numeric",
-        month: "numeric",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );

src/common/datetime/format_time.ts

@@ -13,16 +13,11 @@ export const formatTime = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );
 
 // 9:15:24 PM || 21:15:24
@@ -33,17 +28,12 @@ export const formatTimeWithSeconds = (
 
 const formatTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );
 
 // Tuesday 7:00 PM || Tuesday 19:00
@@ -52,15 +42,10 @@ export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatTimeWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        weekday: "long",
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
 );

src/common/decorators/local-storage.ts

@@ -5,10 +5,7 @@ import type { ClassElement } from "../../types";
 type Callback = (oldValue: any, newValue: any) => void;
 
 class Storage {
-  constructor(subscribe = true) {
-    if (!subscribe) {
-      return;
-    }
+  constructor() {
     window.addEventListener("storage", (ev: StorageEvent) => {
       if (ev.key && this.hasKey(ev.key)) {
         this._storage[ev.key] = ev.newValue
@@ -83,18 +80,15 @@ class Storage {
   }
 }
 
-const subscribeStorage = new Storage();
+const storage = new Storage();
 
 export const LocalStorage =
   (
     storageKey?: string,
     property?: boolean,
-    subscribe = true,
     propertyOptions?: PropertyDeclaration
   ): any =>
   (clsElement: ClassElement) => {
-    const storage = subscribe ? subscribeStorage : new Storage(false);
-
     const key = String(clsElement.key);
     storageKey = storageKey || String(clsElement.key);
     const initVal = clsElement.initializer
@@ -103,7 +97,7 @@ export const LocalStorage =
 
     storage.addFromStorage(storageKey);
 
-    const subscribeChanges = (el: ReactiveElement): UnsubscribeFunc =>
+    const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
       storage.subscribeChanges(storageKey!, (oldValue) => {
         el.requestUpdate(clsElement.key, oldValue);
       });
@@ -137,19 +131,17 @@ export const LocalStorage =
         configurable: true,
       },
       finisher(cls: typeof ReactiveElement) {
-        if (property && subscribe) {
+        if (property) {
           const connectedCallback = cls.prototype.connectedCallback;
           const disconnectedCallback = cls.prototype.disconnectedCallback;
           cls.prototype.connectedCallback = function () {
             connectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`] = subscribeChanges(this);
+            this[`__unbsubLocalStorage${key}`] = subscribe(this);
           };
           cls.prototype.disconnectedCallback = function () {
             disconnectedCallback.call(this);
             this[`__unbsubLocalStorage${key}`]();
           };
-        }
-        if (property) {
           cls.createProperty(clsElement.key, {
             noAccessor: true,
             ...propertyOptions,

src/common/entity/compute_state_display.ts

@@ -43,7 +43,7 @@ export const computeStateDisplay = (
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
-      // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
+      // If trying to display an explicit state, need to parse the explict state to `Date` then format.
       // Attributes aren't available, we have to use `state`.
       try {
         const components = state.split(" ");

src/common/number/clamp.ts

@@ -1,10 +1,2 @@
 export const clamp = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
-
-// Variant that only applies the clamping to a border if the border is defined
-export const conditionalClamp = (value: number, min?: number, max?: number) => {
-  let result: number;
-  result = min ? Math.max(value, min) : value;
-  result = max ? Math.min(value, max) : value;
-  return result;
-};

src/common/translations/localize.ts

@@ -77,7 +77,7 @@ export const computeLocalize = async (
 
   await loadPolyfillLocales(language);
 
-  // Every time any of the parameters change, invalidate the strings cache.
+  // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 
   return (key, ...args) => {

src/components/buttons/ha-progress-button.ts

@@ -68,7 +68,6 @@ export class HaProgressButton extends LitElement {
         --mdc-theme-primary: white;
         background-color: var(--success-color);
         transition: none;
-        border-radius: 4px;
       }
 
       mwc-button[raised].success {
@@ -80,7 +79,6 @@ export class HaProgressButton extends LitElement {
         --mdc-theme-primary: white;
         background-color: var(--error-color);
         transition: none;
-        border-radius: 4px;
       }
 
       mwc-button[raised].error {

src/components/chart/state-history-chart-line.ts

@@ -183,7 +183,12 @@ class StateHistoryChartLine extends LitElement {
         prevValues = datavalues;
       };
 
-      const addDataSet = (nameY: string, fill = false, color?: string) => {
+      const addDataSet = (
+        nameY: string,
+        step = false,
+        fill = false,
+        color?: string
+      ) => {
         if (!color) {
           color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
@@ -193,7 +198,7 @@ class StateHistoryChartLine extends LitElement {
           fill: fill ? "origin" : false,
           borderColor: color,
           backgroundColor: color + "7F",
-          stepped: "before",
+          stepped: step ? "before" : false,
           pointRadius: 0,
           data: [],
         });
@@ -234,12 +239,14 @@ class StateHistoryChartLine extends LitElement {
         addDataSet(
           `${this.hass.localize("ui.card.climate.current_temperature", {
             name: name,
-          })}`
+          })}`,
+          true
         );
         if (hasHeat) {
           addDataSet(
             `${this.hass.localize("ui.card.climate.heating", { name: name })}`,
             true,
+            true,
             computedStyles.getPropertyValue("--state-climate-heat-color")
           );
           // The "heating" series uses steppedArea to shade the area below the current
@@ -249,6 +256,7 @@ class StateHistoryChartLine extends LitElement {
           addDataSet(
             `${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
             true,
+            true,
             computedStyles.getPropertyValue("--state-climate-cool-color")
           );
           // The "cooling" series uses steppedArea to shade the area below the current
@@ -260,19 +268,22 @@ class StateHistoryChartLine extends LitElement {
             `${this.hass.localize("ui.card.climate.target_temperature_mode", {
               name: name,
               mode: this.hass.localize("ui.card.climate.high"),
-            })}`
+            })}`,
+            true
           );
           addDataSet(
             `${this.hass.localize("ui.card.climate.target_temperature_mode", {
               name: name,
               mode: this.hass.localize("ui.card.climate.low"),
-            })}`
+            })}`,
+            true
           );
         } else {
           addDataSet(
             `${this.hass.localize("ui.card.climate.target_temperature_entity", {
               name: name,
-            })}`
+            })}`,
+            true
           );
         }
 
@@ -307,12 +318,14 @@ class StateHistoryChartLine extends LitElement {
         addDataSet(
           `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
             name: name,
-          })}`
+          })}`,
+          true
         );
         addDataSet(
           `${this.hass.localize("ui.card.humidifier.on_entity", {
             name: name,
           })}`,
+          true,
           true
         );
 
@@ -324,7 +337,9 @@ class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(name);
+        // Only interpolate for sensors
+        const isStep = domain !== "sensor";
+        addDataSet(name, isStep);
 
         let lastValue: number;
         let lastDate: Date;

src/components/entity/ha-entity-attribute-picker.ts

@@ -14,9 +14,9 @@ import {
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { formatAttributeName } from "../../data/entity_attributes";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import { formatAttributeName } from "../../util/hass-attributes-util";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";

src/components/entity/ha-state-label-badge.ts

@@ -147,7 +147,7 @@ export class HaStateLabelBadge extends LitElement {
       default:
         return entityState.state === UNKNOWN ||
           entityState.state === UNAVAILABLE
-          ? "—"
+          ? "-"
           : isNumericState(entityState)
           ? formatNumber(entityState.state, this.hass!.locale)
           : computeStateDisplay(

src/components/ha-attributes.ts

@@ -1,14 +1,12 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import {
-  formatAttributeName,
-  formatAttributeValue,
-  STATE_ATTRIBUTES,
-} from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
-
+import hassAttributeUtil, {
+  formatAttributeName,
+  formatAttributeValue,
+} from "../util/hass-attributes-util";
 import "./ha-expansion-panel";
 
 @customElement("ha-attributes")
@@ -27,7 +25,7 @@ class HaAttributes extends LitElement {
     }
 
     const attributes = this.computeDisplayAttributes(
-      STATE_ATTRIBUTES.concat(
+      Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
         this.extraFilters ? this.extraFilters.split(",") : []
       )
     );
@@ -122,7 +120,7 @@ class HaAttributes extends LitElement {
 
   private formatAttribute(attribute: string): string | TemplateResult {
     if (!this.stateObj) {
-      return "—";
+      return "-";
     }
     const value = this.stateObj.attributes[attribute];
     return formatAttributeValue(this.hass, value);

src/components/ha-climate-control.js

@@ -0,0 +1,141 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
+import "./ha-icon-button";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaClimateControl extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style include="iron-flex iron-flex-alignment"></style>
+      <style>
+        /* local DOM styles go here */
+        :host {
+          @apply --layout-flex;
+          @apply --layout-horizontal;
+          @apply --layout-justified;
+        }
+        .in-flux#target_temperature {
+          color: var(--error-color);
+        }
+        #target_temperature {
+          @apply --layout-self-center;
+          font-size: 200%;
+          direction: ltr;
+        }
+        .control-buttons {
+          font-size: 200%;
+          text-align: right;
+        }
+        ha-icon-button {
+          --mdc-icon-size: 32px;
+        }
+      </style>
+
+      <!-- local DOM goes here -->
+      <div id="target_temperature">[[value]] [[units]]</div>
+      <div class="control-buttons">
+        <div>
+          <ha-icon-button on-click="incrementValue">
+            <ha-icon icon="hass:chevron-up"></ha-icon>
+          </ha-icon-button>
+        </div>
+        <div>
+          <ha-icon-button on-click="decrementValue">
+            <ha-icon icon="hass:chevron-down"></ha-icon>
+          </ha-icon-button>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      value: {
+        type: Number,
+        observer: "valueChanged",
+      },
+      units: {
+        type: String,
+      },
+      min: {
+        type: Number,
+      },
+      max: {
+        type: Number,
+      },
+      step: {
+        type: Number,
+        value: 1,
+      },
+    };
+  }
+
+  temperatureStateInFlux(inFlux) {
+    this.$.target_temperature.classList.toggle("in-flux", inFlux);
+  }
+
+  _round(val) {
+    // round value to precision derived from step
+    // insired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js
+    const s = this.step.toString().split(".");
+    return s[1] ? parseFloat(val.toFixed(s[1].length)) : Math.round(val);
+  }
+
+  incrementValue() {
+    const newval = this._round(this.value + this.step);
+    if (this.value < this.max) {
+      this.last_changed = Date.now();
+      this.temperatureStateInFlux(true);
+    }
+    if (newval <= this.max) {
+      // If no initial target_temp
+      // this forces control to start
+      // from the min configured instead of 0
+      if (newval <= this.min) {
+        this.value = this.min;
+      } else {
+        this.value = newval;
+      }
+    } else {
+      this.value = this.max;
+    }
+  }
+
+  decrementValue() {
+    const newval = this._round(this.value - this.step);
+    if (this.value > this.min) {
+      this.last_changed = Date.now();
+      this.temperatureStateInFlux(true);
+    }
+    if (newval >= this.min) {
+      this.value = newval;
+    } else {
+      this.value = this.min;
+    }
+  }
+
+  valueChanged() {
+    // when the last_changed timestamp is changed,
+    // trigger a potential event fire in
+    // the future, as long as last changed is far enough in the
+    // past.
+    if (this.last_changed) {
+      window.setTimeout(() => {
+        const now = Date.now();
+        if (now - this.last_changed >= 2000) {
+          this.fire("change");
+          this.temperatureStateInFlux(false);
+          this.last_changed = null;
+        }
+      }, 2010);
+    }
+  }
+}
+
+customElements.define("ha-climate-control", HaClimateControl);

src/components/ha-climate-control.ts

@@ -1,138 +0,0 @@
-import { mdiChevronDown, mdiChevronUp } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { conditionalClamp } from "../common/number/clamp";
-import { HomeAssistant } from "../types";
-import "./ha-icon";
-import "./ha-icon-button";
-
-@customElement("ha-climate-control")
-class HaClimateControl extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public value!: number;
-
-  @property() public unit = "";
-
-  @property() public min?: number;
-
-  @property() public max?: number;
-
-  @property() public step = 1;
-
-  private _lastChanged?: number;
-
-  @query("#target_temperature") private _targetTemperature!: HTMLElement;
-
-  protected render(): TemplateResult {
-    return html`
-      <div id="target_temperature">${this.value} ${this.unit}</div>
-      <div class="control-buttons">
-        <div>
-          <ha-icon-button
-            .path=${mdiChevronUp}
-            .label=${this.hass.localize(
-              "ui.components.climate-control.temperature_up"
-            )}
-            @click=${this._incrementValue}
-          >
-          </ha-icon-button>
-        </div>
-        <div>
-          <ha-icon-button
-            .path=${mdiChevronDown}
-            .label=${this.hass.localize(
-              "ui.components.climate-control.temperature_down"
-            )}
-            @click=${this._decrementValue}
-          >
-          </ha-icon-button>
-        </div>
-      </div>
-    `;
-  }
-
-  protected updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this._valueChanged();
-    }
-  }
-
-  private _temperatureStateInFlux(inFlux) {
-    this._targetTemperature.classList.toggle("in-flux", inFlux);
-  }
-
-  private _round(value) {
-    // Round value to precision derived from step.
-    // Inspired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js
-    const s = this.step.toString().split(".");
-    return s[1] ? parseFloat(value.toFixed(s[1].length)) : Math.round(value);
-  }
-
-  private _incrementValue() {
-    const newValue = this._round(this.value + this.step);
-    this._processNewValue(newValue);
-  }
-
-  private _decrementValue() {
-    const newValue = this._round(this.value - this.step);
-    this._processNewValue(newValue);
-  }
-
-  private _processNewValue(value) {
-    const newValue = conditionalClamp(value, this.min, this.max);
-
-    if (this.value !== newValue) {
-      this.value = newValue;
-      this._lastChanged = Date.now();
-      this._temperatureStateInFlux(true);
-    }
-  }
-
-  private _valueChanged() {
-    // When the last_changed timestamp is changed,
-    // trigger a potential event fire in the future,
-    // as long as last_changed is far enough in the past.
-    if (this._lastChanged) {
-      window.setTimeout(() => {
-        const now = Date.now();
-        if (now - this._lastChanged! >= 2000) {
-          fireEvent(this, "change");
-          this._temperatureStateInFlux(false);
-          this._lastChanged = undefined;
-        }
-      }, 2010);
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        justify-content: space-between;
-      }
-      .in-flux {
-        color: var(--error-color);
-      }
-      #target_temperature {
-        align-self: center;
-        font-size: 28px;
-        direction: ltr;
-      }
-      .control-buttons {
-        font-size: 24px;
-        text-align: right;
-      }
-      ha-icon-button {
-        --mdc-icon-size: 32px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-climate-control": HaClimateControl;
-  }
-}

src/components/ha-form/ha-form-integer.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-textfield";
 import type { TextField } from "@material/mwc-textfield";
+import "@material/mwc-slider";
 import type { Slider } from "@material/mwc-slider";
 import {
   css,
@@ -13,7 +14,6 @@ import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
-import "../ha-slider";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
@@ -54,16 +54,15 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   ></ha-checkbox>
                 `
               : ""}
-            <ha-slider
-              pin
-              ignore-bar-touch
+            <mwc-slider
+              discrete
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
               (this.data === undefined && this.schema.optional)}
               @change=${this._valueChanged}
-            ></ha-slider>
+            ></mwc-slider>
           </div>
         </div>
       `;
@@ -169,7 +168,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
-      ha-slider {
+      mwc-slider {
         flex: 1;
       }
       mwc-textfield {

src/components/ha-form/ha-form-string.ts

@@ -68,6 +68,7 @@ export class HaFormString extends LitElement implements HaFormElement {
             toggles
             .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
             @click=${this._toggleUnmaskedPassword}
+            tabindex="-1"
             .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
           ></ha-icon-button>`
         : ""}

src/components/ha-form/ha-form.ts

@@ -104,7 +104,7 @@ export class HaForm extends LitElement implements HaFormElement {
     return css`
       .root {
         margin-bottom: -24px;
-        overflow: clip visible;
+        overflow: auto;
       }
       .root > * {
         display: block;

src/components/ha-gauge.ts

@@ -1,10 +1,16 @@
 import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
+import { isSafari } from "../util/is_safari";
+
+// Safari version 15.2 and up behaves differently than other Safari versions.
+// https://github.com/home-assistant/frontend/issues/10766
+const isSafari152 = isSafari && /Version\/15\.[^0-1]/.test(navigator.userAgent);
 
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
@@ -59,12 +65,12 @@ export class Gauge extends LitElement {
 
   protected render() {
     return svg`
-      <svg viewBox="-50 -50 100 50" class="gauge">
+      <svg viewBox="0 0 100 50" class="gauge">
         ${
           !this.needle || !this.levels
             ? svg`<path
           class="dial"
-          d="M -40 0 A 40 40 0 0 1 40 0"
+          d="M 10 50 A 40 40 0 0 1 90 50"
         ></path>`
             : ""
         }
@@ -81,9 +87,9 @@ export class Gauge extends LitElement {
                         stroke="var(--info-color)"
                         class="level"
                         d="M
-                          ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
-                          ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                         A 40 40 0 0 1 40 0
+                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                         A 40 40 0 0 1 90 50
                         "
                       ></path>`;
                   }
@@ -92,9 +98,9 @@ export class Gauge extends LitElement {
                       stroke="${level.stroke}"
                       class="level"
                       d="M
-                        ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
-                        ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                       A 40 40 0 0 1 40 0
+                        ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                        ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                       A 40 40 0 0 1 90 50
                       "
                     ></path>`;
                 })
@@ -104,16 +110,46 @@ export class Gauge extends LitElement {
           this.needle
             ? svg`<path
                 class="needle"
-                d="M -25 -2.5 L -47.5 0 L -25 2.5 z"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                d="M 25 47.5 L 2.5 50 L 25 52.5 z"
+                style=${ifDefined(
+                  !isSafari
+                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
+                    : undefined
+                )}
+                transform=${ifDefined(
+                  isSafari
+                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
+                    : undefined
+                )}
               >
               `
             : svg`<path
                 class="value"
-                d="M -40 0 A 40 40 0 1 0 40 0"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                d="M 90 50.001 A 40 40 0 0 1 10 50"
+                style=${ifDefined(
+                  !isSafari
+                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
+                    : undefined
+                )}
+                transform=${ifDefined(
+                  isSafari
+                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
+                    : undefined
+                )}
               >`
         }
+        ${
+          // Workaround for https://github.com/home-assistant/frontend/issues/6467
+          isSafari
+            ? svg`<animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 50 50"
+                to="${this._angle} 50 50"
+                dur="1s"
+              />`
+            : ""
+        }
         </path>
       </svg>
       <svg class="text">
@@ -151,10 +187,12 @@ export class Gauge extends LitElement {
         fill: none;
         stroke-width: 15;
         stroke: var(--gauge-color);
+        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .needle {
         fill: var(--primary-text-color);
+        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .level {

src/components/ha-hls-player.ts

@@ -9,6 +9,7 @@ import {
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { nextRender } from "../common/util/render-status";
+import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
 
@@ -90,9 +91,18 @@ class HaHLSPlayer extends LitElement {
     this._startHls();
   }
 
+  private async _getUseExoPlayer(): Promise<boolean> {
+    if (!this.hass!.auth.external || !this.allowExoPlayer) {
+      return false;
+    }
+    const externalConfig = await getExternalConfig(this.hass!.auth.external);
+    return externalConfig && externalConfig.hasExoPlayer;
+  }
+
   private async _startHls(): Promise<void> {
     this._error = undefined;
 
+    const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
     const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min"))
@@ -116,8 +126,7 @@ class HaHLSPlayer extends LitElement {
       return;
     }
 
-    const useExoPlayer =
-      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
+    const useExoPlayer = await useExoPlayerPromise;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
     if (!this.isConnected) {

src/components/ha-service-control.ts

@@ -17,7 +17,6 @@ import {
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-icon-button";
 import "./ha-selector/ha-selector";
@@ -131,33 +130,6 @@ export class HaServiceControl extends LitElement {
       this._value = this.value;
     }
 
-    if (oldValue?.service !== this.value?.service) {
-      let updatedDefaultValue = false;
-      if (this._value && serviceData) {
-        // Set mandatory bools without a default value to false
-        this._value.data ??= {};
-        serviceData.fields.forEach((field) => {
-          if (
-            field.selector &&
-            field.required &&
-            field.default === undefined &&
-            "boolean" in field.selector &&
-            this._value!.data![field.key] === undefined
-          ) {
-            updatedDefaultValue = true;
-            this._value!.data![field.key] = false;
-          }
-        });
-      }
-      if (updatedDefaultValue) {
-        fireEvent(this, "value-changed", {
-          value: {
-            ...this._value,
-          },
-        });
-      }
-    }
-
     if (this._value?.data) {
       const yamlEditor = this._yamlEditor;
       if (yamlEditor && yamlEditor.value !== this._value.data) {
@@ -231,12 +203,7 @@ export class HaServiceControl extends LitElement {
         <p>${serviceData?.description}</p>
         ${this._manifest
           ? html` <a
-              href=${this._manifest.is_built_in
-                ? documentationUrl(
-                    this.hass,
-                    `/integrations/${this._manifest.domain}`
-                  )
-                : this._manifest.documentation}
+              href=${this._manifest.documentation}
               title=${this.hass.localize(
                 "ui.components.service-control.integration_doc"
               )}

src/components/ha-sidebar.ts

@@ -8,7 +8,6 @@ import {
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
-  mdiHammer,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -44,6 +43,10 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
+import {
+  ExternalConfig,
+  getExternalConfig,
+} from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
@@ -53,7 +56,7 @@ import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config", "developer-tools"];
+const SHOW_AFTER_SPACER = ["config"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -62,14 +65,12 @@ const SORT_VALUE_URL_PATHS = {
   map: 2,
   logbook: 3,
   history: 4,
-  "developer-tools": 9,
   config: 11,
 };
 
 const PANEL_ICONS = {
   calendar: mdiCalendar,
   config: mdiCog,
-  "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,
@@ -188,6 +189,8 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
+  @state() private _externalConfig?: ExternalConfig;
+
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -264,6 +267,13 @@ class HaSidebar extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+
+    if (this.hass && this.hass.auth.external) {
+      getExternalConfig(this.hass.auth.external).then((conf) => {
+        this._externalConfig = conf;
+      });
+    }
+
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
@@ -546,7 +556,8 @@ class HaSidebar extends LitElement {
 
   private _renderExternalConfiguration() {
     return html`${!this.hass.user?.is_admin &&
-    this.hass.auth.external?.config.hasSettingsScreen
+    this._externalConfig &&
+    this._externalConfig.hasSettingsScreen
       ? html`
           <a
             role="option"
@@ -1019,19 +1030,6 @@ class HaSidebar extends LitElement {
           white-space: nowrap;
         }
 
-        .dev-tools {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          padding: 0 8px;
-          width: 256px;
-          box-sizing: border-box;
-        }
-
-        .dev-tools a {
-          color: var(--sidebar-icon-color);
-        }
-
         .tooltip {
           display: none;
           position: absolute;

src/components/ha-svg-icon.ts

@@ -12,10 +12,7 @@ export class HaSvgIcon extends LitElement {
     <svg
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
-      focusable="false"
-      role="img" 
-      aria-hidden="true"
-    >
+      focusable="false">
       <g>
       ${this.path ? svg`<path d=${this.path}></path>` : ""}
       </g>

src/components/ha-textfield.ts

@@ -1,25 +0,0 @@
-import { TextField } from "@material/mwc-textfield";
-import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-textfield")
-export class HaTextField extends TextField {
-  override renderIcon(_icon: string, isTrailingIcon = false): TemplateResult {
-    const type = isTrailingIcon ? "trailing" : "leading";
-
-    return html`
-      <span
-        class="mdc-text-field__icon mdc-text-field__icon--${type}"
-        tabindex=${isTrailingIcon ? 1 : -1}
-      >
-        <slot name="${type}Icon"></slot>
-      </span>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-textfield": HaTextField;
-  }
-}

src/components/ha-water_heater-state.js

@@ -64,7 +64,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
       return `${formatNumber(
         stateObj.attributes.target_temp_low,
         this.hass.locale
-      )} – ${formatNumber(
+      )} - ${formatNumber(
         stateObj.attributes.target_temp_high,
         this.hass.locale
       )} ${hass.config.unit_system.temperature}`;

src/components/ha-yaml-editor.ts

@@ -60,7 +60,6 @@ export class HaYamlEditor extends LitElement {
         mode="yaml"
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
-        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/media-player/dialog-media-player-browse.ts

@@ -1,13 +1,9 @@
-import "../ha-header-bar";
-import { mdiArrowLeft, mdiClose } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
-import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
-  MediaPlayerItem,
 } from "../../data/media-player";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -20,8 +16,6 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 class DialogMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _currentItem?: MediaPlayerItem;
-
   @state() private _navigateIds?: MediaPlayerItemId[];
 
   @state() private _params?: MediaPlayerBrowseDialogParams;
@@ -39,12 +33,11 @@ class DialogMediaPlayerBrowse extends LitElement {
   public closeDialog() {
     this._params = undefined;
     this._navigateIds = undefined;
-    this._currentItem = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._params || !this._navigateIds) {
+    if (!this._params) {
       return html``;
     }
 
@@ -55,36 +48,8 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
-        .heading=${true}
         @closed=${this.closeDialog}
       >
-        <ha-header-bar slot="heading">
-          ${this._navigateIds.length > 1
-            ? html`
-                <ha-icon-button
-                  slot="navigationIcon"
-                  .path=${mdiArrowLeft}
-                  @click=${this._goBack}
-                ></ha-icon-button>
-              `
-            : ""}
-          <span slot="title">
-            ${!this._currentItem
-              ? this.hass.localize(
-                  "ui.components.media-browser.media-player-browser"
-                )
-              : this._currentItem.title}
-          </span>
-
-          <ha-icon-button
-            .label=${this.hass.localize("ui.dialogs.generic.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            slot="actionItems"
-            class="header_button"
-            dir=${computeRTLDirection(this.hass)}
-          ></ha-icon-button>
-        </ha-header-bar>
         <ha-media-player-browse
           dialog
           .hass=${this.hass}
@@ -99,14 +64,8 @@ class DialogMediaPlayerBrowse extends LitElement {
     `;
   }
 
-  private _goBack() {
-    this._navigateIds = this._navigateIds?.slice(0, -1);
-    this._currentItem = undefined;
-  }
-
-  private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
+  private _mediaBrowsed(ev) {
     this._navigateIds = ev.detail.ids;
-    this._currentItem = ev.detail.current;
   }
 
   private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
@@ -130,7 +89,7 @@ class DialogMediaPlayerBrowse extends LitElement {
         }
 
         ha-media-player-browse {
-          --media-browser-max-height: calc(100vh - 65px);
+          --media-browser-max-height: 100vh;
         }
 
         @media (min-width: 800px) {
@@ -142,17 +101,10 @@ class DialogMediaPlayerBrowse extends LitElement {
           }
           ha-media-player-browse {
             position: initial;
-            --media-browser-max-height: 100vh - 137px;
+            --media-browser-max-height: 100vh - 72px;
             width: 700px;
           }
         }
-
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
-        }
       `,
     ];
   }

src/components/trace/ha-trace-blueprint-config.ts

@@ -17,7 +17,6 @@ export class HaTraceBlueprintConfig extends LitElement {
       <ha-code-editor
         .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
         readOnly
-        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/trace/ha-trace-config.ts

@@ -17,7 +17,6 @@ export class HaTraceConfig extends LitElement {
       <ha-code-editor
         .value=${dump(this.trace.config).trimRight()}
         readOnly
-        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/trace/ha-trace-path-details.ts

@@ -150,7 +150,6 @@ export class HaTracePathDetails extends LitElement {
       ? html`<ha-code-editor
           .value=${dump(config).trimRight()}
           readOnly
-          dir="ltr"
         ></ha-code-editor>`
       : "Unable to find config";
   }

src/data/cloud.ts

@@ -51,13 +51,11 @@ export interface CloudStatusLoggedIn {
   google_registered: boolean;
   google_entities: EntityFilter;
   google_domains: string[];
-  alexa_registered: boolean;
   alexa_entities: EntityFilter;
   prefs: CloudPreferences;
   remote_domain: string | undefined;
   remote_connected: boolean;
   remote_certificate: undefined | CertificateInformation;
-  http_use_ssl: boolean;
 }
 
 export type CloudStatus = CloudStatusNotLoggedIn | CloudStatusLoggedIn;

src/data/config_flow.ts

@@ -104,19 +104,18 @@ export const localizeConfigFlowTitle = (
   localize: LocalizeFunc,
   flow: DataEntryFlowProgress
 ) => {
-  if (
-    !flow.context.title_placeholders ||
-    Object.keys(flow.context.title_placeholders).length === 0
-  ) {
+  const placeholders = flow.context.title_placeholders || {};
+  const placeholderKeys = Object.keys(placeholders);
+  if (placeholderKeys.length === 0) {
     return domainToName(localize, flow.handler);
   }
-  return (
-    localize(
-      `component.${flow.handler}.config.flow_title`,
-      flow.context.title_placeholders
-    ) ||
-    ("name" in flow.context.title_placeholders
-      ? flow.context.title_placeholders.name
-      : domainToName(localize, flow.handler))
-  );
+  const args: string[] = [];
+  placeholderKeys.forEach((key) => {
+    args.push(key);
+    args.push(placeholders[key]);
+  });
+  return localize(`component.${flow.handler}.config.flow_title`, ...args) ||
+    "name" in placeholders
+    ? placeholders.name
+    : domainToName(localize, flow.handler);
 };

src/data/device_registry.ts

@@ -1,6 +1,5 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 import { EntityRegistryEntry } from "./entity_registry";
@@ -55,13 +54,7 @@ export const computeDeviceName = (
   device.name_by_user ||
   device.name ||
   (entities && fallbackDeviceName(hass, entities)) ||
-  hass.localize(
-    "ui.panel.config.devices.unnamed_device",
-    "type",
-    hass.localize(
-      `ui.panel.config.devices.type.${device.entry_type || "device"}`
-    )
-  );
+  hass.localize("ui.panel.config.devices.unnamed_device");
 
 export const devicesInArea = (devices: DeviceRegistryEntry[], areaId: string) =>
   devices.filter((device) => device.area_id === areaId);
@@ -106,8 +99,3 @@ export const subscribeDeviceRegistry = (
     conn,
     onChange
   );
-
-export const sortDeviceRegistryByName = (entries: DeviceRegistryEntry[]) =>
-  entries.sort((entry1, entry2) =>
-    caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
-  );

src/data/entity_attributes.ts

@@ -1,105 +0,0 @@
-import { html, TemplateResult } from "lit";
-import { until } from "lit/directives/until";
-import checkValidDate from "../common/datetime/check_valid_date";
-import { formatDate } from "../common/datetime/format_date";
-import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
-import { formatNumber } from "../common/number/format_number";
-import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
-import { isDate } from "../common/string/is_date";
-import { isTimestamp } from "../common/string/is_timestamp";
-import { HomeAssistant } from "../types";
-
-let jsYamlPromise: Promise<typeof import("../resources/js-yaml-dump")>;
-
-export const STATE_ATTRIBUTES = [
-  "assumed_state",
-  "attribution",
-  "custom_ui_more_info",
-  "custom_ui_state_card",
-  "device_class",
-  "editable",
-  "emulated_hue_name",
-  "emulated_hue",
-  "entity_picture",
-  "friendly_name",
-  "haaska_hidden",
-  "haaska_name",
-  "icon",
-  "initial_state",
-  "last_reset",
-  "restored",
-  "state_class",
-  "supported_features",
-  "unit_of_measurement",
-];
-
-// Convert from internal snake_case format to user-friendly format
-export function formatAttributeName(value: string): string {
-  value = value
-    .replace(/_/g, " ")
-    .replace(/\bid\b/g, "ID")
-    .replace(/\bip\b/g, "IP")
-    .replace(/\bmac\b/g, "MAC")
-    .replace(/\bgps\b/g, "GPS");
-  return capitalizeFirstLetter(value);
-}
-
-export function formatAttributeValue(
-  hass: HomeAssistant,
-  value: any
-): string | TemplateResult {
-  if (value === null) {
-    return "—";
-  }
-
-  // YAML handling
-  if (
-    (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-    (!Array.isArray(value) && value instanceof Object)
-  ) {
-    if (!jsYamlPromise) {
-      jsYamlPromise = import("../resources/js-yaml-dump");
-    }
-    const yaml = jsYamlPromise.then((jsYaml) => jsYaml.dump(value));
-    return html`<pre>${until(yaml, "")}</pre>`;
-  }
-
-  if (typeof value === "number") {
-    return formatNumber(value, hass.locale);
-  }
-
-  if (typeof value === "string") {
-    // URL handling
-    if (value.startsWith("http")) {
-      try {
-        // If invalid URL, exception will be raised
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-          return html`<a target="_blank" rel="noreferrer" href=${value}
-            >${value}</a
-          >`;
-      } catch (_) {
-        // Nothing to do here
-      }
-    }
-
-    // Date handling
-    if (isDate(value, true)) {
-      // Timestamp handling
-      if (isTimestamp(value)) {
-        const date = new Date(value);
-        if (checkValidDate(date)) {
-          return formatDateTimeWithSeconds(date, hass.locale);
-        }
-      }
-
-      // Value was not a timestamp, so only do date formatting
-      const date = new Date(value);
-      if (checkValidDate(date)) {
-        return formatDate(date, hass.locale);
-      }
-    }
-  }
-
-  return Array.isArray(value) ? value.join(", ") : value;
-}

src/data/entity_registry.ts

@@ -1,7 +1,6 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
 import { computeStateName } from "../common/entity/compute_state_name";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 
@@ -134,8 +133,3 @@ export const subscribeEntityRegistry = (
     conn,
     onChange
   );
-
-export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
-  entries.sort((entry1, entry2) =>
-    caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
-  );

src/data/google_assistant.ts

@@ -8,6 +8,3 @@ export interface GoogleEntity {
 
 export const fetchCloudGoogleEntities = (hass: HomeAssistant) =>
   hass.callWS<GoogleEntity[]>({ type: "cloud/google_assistant/entities" });
-
-export const syncCloudGoogleEntities = (hass: HomeAssistant) =>
-  hass.callApi("POST", "cloud/google_actions/sync");

src/data/media-player.ts

@@ -88,7 +88,7 @@ export const BROWSER_PLAYER = "browser";
 export type MediaClassBrowserSetting = {
   icon: string;
   thumbnail_ratio?: string;
-  layout?: "grid";
+  layout?: string;
   show_list_images?: boolean;
 };
 
@@ -185,6 +185,15 @@ export const browseMediaPlayer = (
     media_content_type: mediaContentType,
   });
 
+export const browseLocalMediaPlayer = (
+  hass: HomeAssistant,
+  mediaContentId?: string
+): Promise<MediaPlayerItem> =>
+  hass.callWS<MediaPlayerItem>({
+    type: "media_source/browse_media",
+    media_content_id: mediaContentId,
+  });
+
 export const getCurrentProgress = (stateObj: MediaPlayerEntity): number => {
   let progress = stateObj.attributes.media_position!;
 
@@ -312,8 +321,8 @@ export const computeMediaControls = (
   return buttons.length > 0 ? buttons : undefined;
 };
 
-export const formatMediaTime = (seconds: number | undefined): string => {
-  if (seconds === undefined) {
+export const formatMediaTime = (seconds: number): string => {
+  if (!seconds) {
     return "";
   }
 
@@ -324,12 +333,3 @@ export const formatMediaTime = (seconds: number | undefined): string => {
       : secondsString.substring(14, 19);
   return secondsString.replace(/^0+/, "").padStart(4, "0");
 };
-
-export const cleanupMediaTitle = (title?: string): string | undefined => {
-  if (!title) {
-    return undefined;
-  }
-
-  const index = title.indexOf("?authSig=");
-  return index > 0 ? title.slice(0, index) : title;
-};

src/data/media_source.ts

@@ -1,25 +0,0 @@
-import { HomeAssistant } from "../types";
-import { MediaPlayerItem } from "./media-player";
-
-export interface ResolvedMediaSource {
-  url: string;
-  mime_type: string;
-}
-
-export const resolveMediaSource = (
-  hass: HomeAssistant,
-  media_content_id: string
-) =>
-  hass.callWS<ResolvedMediaSource>({
-    type: "media_source/resolve_media",
-    media_content_id,
-  });
-
-export const browseLocalMediaPlayer = (
-  hass: HomeAssistant,
-  mediaContentId?: string
-): Promise<MediaPlayerItem> =>
-  hass.callWS<MediaPlayerItem>({
-    type: "media_source/browse_media",
-    media_content_id: mediaContentId,
-  });

src/data/supervisor/root.ts

@@ -1,58 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-interface SupervisorBaseAvailableUpdates {
-  panel_path?: string;
-  update_type?: string;
-  version_latest?: string;
-}
-
-interface SupervisorAddonAvailableUpdates
-  extends SupervisorBaseAvailableUpdates {
-  update_type?: "addon";
-  icon?: string;
-  name?: string;
-}
-
-interface SupervisorCoreAvailableUpdates
-  extends SupervisorBaseAvailableUpdates {
-  update_type?: "core";
-}
-
-interface SupervisorOsAvailableUpdates extends SupervisorBaseAvailableUpdates {
-  update_type?: "os";
-}
-
-interface SupervisorSupervisorAvailableUpdates
-  extends SupervisorBaseAvailableUpdates {
-  update_type?: "supervisor";
-}
-
-export type SupervisorAvailableUpdates =
-  | SupervisorAddonAvailableUpdates
-  | SupervisorCoreAvailableUpdates
-  | SupervisorOsAvailableUpdates
-  | SupervisorSupervisorAvailableUpdates;
-
-export interface SupervisorAvailableUpdatesResponse {
-  available_updates: SupervisorAvailableUpdates[];
-}
-
-export const fetchSupervisorAvailableUpdates = async (
-  hass: HomeAssistant
-): Promise<SupervisorAvailableUpdates[]> =>
-  (
-    await hass.callWS<SupervisorAvailableUpdatesResponse>({
-      type: "supervisor/api",
-      endpoint: "/available_updates",
-      method: "get",
-    })
-  ).available_updates;
-
-export const refreshSupervisorAvailableUpdates = async (
-  hass: HomeAssistant
-): Promise<void> =>
-  hass.callWS<void>({
-    type: "supervisor/api",
-    endpoint: "/refresh_updates",
-    method: "post",
-  });

src/data/supervisor/supervisor.ts

@@ -70,6 +70,42 @@ export interface Supervisor {
   localize: LocalizeFunc;
 }
 
+interface SupervisorBaseAvailableUpdates {
+  panel_path?: string;
+  update_type?: string;
+  version_latest?: string;
+}
+
+interface SupervisorAddonAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "addon";
+  icon?: string;
+  name?: string;
+}
+
+interface SupervisorCoreAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "core";
+}
+
+interface SupervisorOsAvailableUpdates extends SupervisorBaseAvailableUpdates {
+  update_type?: "os";
+}
+
+interface SupervisorSupervisorAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "supervisor";
+}
+
+export type SupervisorAvailableUpdates =
+  | SupervisorAddonAvailableUpdates
+  | SupervisorCoreAvailableUpdates
+  | SupervisorOsAvailableUpdates
+  | SupervisorSupervisorAvailableUpdates;
+
+export interface SupervisorAvailableUpdatesResponse {
+  available_updates: SupervisorAvailableUpdates[];
+}
 export const supervisorApiWsRequest = <T>(
   conn: Connection,
   request: supervisorApiRequest
@@ -139,3 +175,14 @@ export const subscribeSupervisorEvents = (
   getSupervisorEventCollection(hass.connection, key, endpoint).subscribe(
     onChange
   );
+
+export const fetchSupervisorAvailableUpdates = async (
+  hass: HomeAssistant
+): Promise<SupervisorAvailableUpdates[]> =>
+  (
+    await hass.callWS<SupervisorAvailableUpdatesResponse>({
+      type: "supervisor/api",
+      endpoint: "/supervisor/available_updates",
+      method: "get",
+    })
+  ).available_updates;

src/data/weather.ts

@@ -436,19 +436,3 @@ export const getWeatherStateIcon = (
 
   return undefined;
 };
-
-const DAY_IN_MILLISECONDS = 86400000;
-
-export const isForecastHourly = (
-  forecast?: ForecastAttribute[]
-): boolean | undefined => {
-  if (forecast && forecast?.length && forecast?.length > 2) {
-    const date1 = new Date(forecast[1].datetime);
-    const date2 = new Date(forecast[2].datetime);
-    const timeDiff = date2.getTime() - date1.getTime();
-
-    return timeDiff < DAY_IN_MILLISECONDS;
-  }
-
-  return undefined;
-};

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -116,14 +116,15 @@ class DataEntryFlowDialog extends LitElement {
           params.continueFlowId
         );
       } catch (err: any) {
-        this.closeDialog();
+        this._step = undefined;
+        this._params = undefined;
         showAlertDialog(this, {
           title: this.hass.localize(
             "ui.panel.config.integrations.config_flow.error"
           ),
-          text: `${this.hass.localize(
+          text: this.hass.localize(
             "ui.panel.config.integrations.config_flow.could_not_load"
-          )}: ${err.message || err.body}`,
+          ),
         });
         return;
       }
@@ -176,7 +177,6 @@ class DataEntryFlowDialog extends LitElement {
       });
     }
 
-    this._loading = undefined;
     this._step = undefined;
     this._params = undefined;
     this._devices = undefined;
@@ -372,14 +372,15 @@ class DataEntryFlowDialog extends LitElement {
       try {
         step = await this._params!.flowConfig.createFlow(this.hass, handler);
       } catch (err: any) {
-        this.closeDialog();
+        this._step = undefined;
+        this._params = undefined;
         showAlertDialog(this, {
           title: this.hass.localize(
             "ui.panel.config.integrations.config_flow.error"
           ),
-          text: `${this.hass.localize(
+          text: this.hass.localize(
             "ui.panel.config.integrations.config_flow.could_not_load"
-          )}: ${err.message || err.body}`,
+          ),
         });
         return;
       } finally {
@@ -404,15 +405,6 @@ class DataEntryFlowDialog extends LitElement {
       this._loading = "loading_step";
       try {
         this._step = await step;
-      } catch (err: any) {
-        this.closeDialog();
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.integrations.config_flow.error"
-          ),
-          text: err.message || err.body,
-        });
-        return;
       } finally {
         this._loading = undefined;
       }

src/dialogs/make-dialog-manager.ts

@@ -26,7 +26,6 @@ interface ShowDialogParams<T> {
   dialogTag: keyof HTMLElementTagNameMap;
   dialogImport: () => Promise<unknown>;
   dialogParams: T;
-  addHistory?: boolean;
 }
 
 export interface DialogClosedParams {
@@ -125,15 +124,8 @@ export const makeDialogManager = (
   element.addEventListener(
     "show-dialog",
     (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
-      const { dialogTag, dialogImport, dialogParams, addHistory } = e.detail;
-      showDialog(
-        element,
-        root,
-        dialogTag,
-        dialogParams,
-        dialogImport,
-        addHistory
-      );
+      const { dialogTag, dialogImport, dialogParams } = e.detail;
+      showDialog(element, root, dialogTag, dialogParams, dialogImport);
     }
   );
 };

src/dialogs/more-info/controls/more-info-climate.ts

@@ -103,9 +103,8 @@ class MoreInfoClimate extends LitElement {
             stateObj.attributes.temperature !== null
               ? html`
                   <ha-climate-control
-                    .hass=${this.hass}
                     .value=${stateObj.attributes.temperature}
-                    .unit=${hass.config.unit_system.temperature}
+                    .units=${hass.config.unit_system.temperature}
                     .step=${temperatureStepSize}
                     .min=${stateObj.attributes.min_temp}
                     .max=${stateObj.attributes.max_temp}
@@ -119,9 +118,8 @@ class MoreInfoClimate extends LitElement {
               stateObj.attributes.target_temp_high !== null)
               ? html`
                   <ha-climate-control
-                    .hass=${this.hass}
                     .value=${stateObj.attributes.target_temp_low}
-                    .unit=${hass.config.unit_system.temperature}
+                    .units=${hass.config.unit_system.temperature}
                     .step=${temperatureStepSize}
                     .min=${stateObj.attributes.min_temp}
                     .max=${stateObj.attributes.target_temp_high}
@@ -129,9 +127,8 @@ class MoreInfoClimate extends LitElement {
                     @change=${this._targetTemperatureLowChanged}
                   ></ha-climate-control>
                   <ha-climate-control
-                    .hass=${this.hass}
                     .value=${stateObj.attributes.target_temp_high}
-                    .unit=${hass.config.unit_system.temperature}
+                    .units=${hass.config.unit_system.temperature}
                     .step=${temperatureStepSize}
                     .min=${stateObj.attributes.target_temp_low}
                     .max=${stateObj.attributes.max_temp}

src/dialogs/more-info/controls/more-info-weather.ts

@@ -33,11 +33,7 @@ import { formatDateWeekday } from "../../../common/datetime/format_date";
 import { formatTimeWeekday } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-svg-icon";
-import {
-  getWeatherUnit,
-  getWind,
-  isForecastHourly,
-} from "../../../data/weather";
+import { getWeatherUnit, getWind } from "../../../data/weather";
 import { HomeAssistant } from "../../../types";
 
 const weatherIcons = {
@@ -86,8 +82,6 @@ class MoreInfoWeather extends LitElement {
       return html``;
     }
 
-    const hourly = isForecastHourly(this.stateObj.attributes.forecast);
-
     return html`
       <div class="flex">
         <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
@@ -175,49 +169,48 @@ class MoreInfoWeather extends LitElement {
             <div class="section">
               ${this.hass.localize("ui.card.weather.forecast")}:
             </div>
-            ${this.stateObj.attributes.forecast.map((item) =>
-              this._showValue(item.templow) || this._showValue(item.temperature)
-                ? html`<div class="flex">
-                    ${item.condition
-                      ? html`
-                          <ha-svg-icon
-                            .path=${weatherIcons[item.condition]}
-                          ></ha-svg-icon>
-                        `
+            ${this.stateObj.attributes.forecast.map(
+              (item) => html`
+                <div class="flex">
+                  ${item.condition
+                    ? html`
+                        <ha-svg-icon
+                          .path=${weatherIcons[item.condition]}
+                        ></ha-svg-icon>
+                      `
+                    : ""}
+                  ${!this._showValue(item.templow)
+                    ? html`
+                        <div class="main">
+                          ${formatTimeWeekday(
+                            new Date(item.datetime),
+                            this.hass.locale
+                          )}
+                        </div>
+                      `
+                    : ""}
+                  ${this._showValue(item.templow)
+                    ? html`
+                        <div class="main">
+                          ${formatDateWeekday(
+                            new Date(item.datetime),
+                            this.hass.locale
+                          )}
+                        </div>
+                        <div class="templow">
+                          ${formatNumber(item.templow, this.hass.locale)}
+                          ${getWeatherUnit(this.hass, "temperature")}
+                        </div>
+                      `
+                    : ""}
+                  <div class="temp">
+                    ${this._showValue(item.temperature)
+                      ? `${formatNumber(item.temperature, this.hass.locale)}
+                    ${getWeatherUnit(this.hass, "temperature")}`
                       : ""}
-                    ${hourly
-                      ? html`
-                          <div class="main">
-                            ${formatTimeWeekday(
-                              new Date(item.datetime),
-                              this.hass.locale
-                            )}
-                          </div>
-                        `
-                      : html`
-                          <div class="main">
-                            ${formatDateWeekday(
-                              new Date(item.datetime),
-                              this.hass.locale
-                            )}
-                          </div>
-                        `}
-                    <div class="templow">
-                      ${this._showValue(item.templow)
-                        ? `${formatNumber(item.templow, this.hass.locale)}
-                          ${getWeatherUnit(this.hass, "temperature")}`
-                        : hourly
-                        ? ""
-                        : "—"}
-                    </div>
-                    <div class="temp">
-                      ${this._showValue(item.temperature)
-                        ? `${formatNumber(item.temperature, this.hass.locale)}
-                        ${getWeatherUnit(this.hass, "temperature")}`
-                        : "—"}
-                    </div>
-                  </div>`
-                : ""
+                  </div>
+                </div>
+              `
             )}
           `
         : ""}

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,4 +1,3 @@
-import "../../components/ha-textfield";
 import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
@@ -34,6 +33,7 @@ import {
 import { debounce } from "../../common/util/debounce";
 import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
+import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import { domainToName } from "../../data/integration";
@@ -95,11 +95,7 @@ export class QuickBar extends LitElement {
 
   @state() private _done = false;
 
-  @state() private _narrow = false;
-
-  @state() private _hint?: string;
-
-  @query("ha-textfield", false) private _filterInputField?: HTMLElement;
+  @query("paper-input", false) private _filterInputField?: HTMLElement;
 
   private _focusSet = false;
 
@@ -107,10 +103,6 @@ export class QuickBar extends LitElement {
 
   public async showDialog(params: QuickBarParams) {
     this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
-    this._hint = params.hint;
-    this._narrow = matchMedia(
-      "all and (max-width: 450px), all and (max-height: 500px)"
-    ).matches;
     this._initializeItemsIfNeeded();
     this._opened = true;
   }
@@ -145,95 +137,63 @@ export class QuickBar extends LitElement {
         @closed=${this.closeDialog}
         hideActions
       >
-        <div slot="heading" class="heading">
-          <ha-textfield
-            dialogInitialFocus
-            .placeholder=${this.hass.localize(
-              "ui.dialogs.quick-bar.filter_placeholder"
-            )}
-            aria-label=${this.hass.localize(
-              "ui.dialogs.quick-bar.filter_placeholder"
-            )}
-            .value=${this._commandMode ? `>${this._search}` : this._search}
-            .icon=${true}
-            .iconTrailing=${this._search !== undefined || this._narrow}
-            @input=${this._handleSearchChange}
-            @keydown=${this._handleInputKeyDown}
-            @focus=${this._setFocusFirstListItem}
-          >
-            ${this._commandMode
-              ? html`
-                  <ha-svg-icon
-                    slot="leadingIcon"
-                    class="prefix"
-                    .path=${mdiConsoleLine}
-                  ></ha-svg-icon>
-                `
-              : html`
-                  <ha-svg-icon
-                    slot="leadingIcon"
-                    class="prefix"
-                    .path=${mdiMagnify}
-                  ></ha-svg-icon>
-                `}
-            ${this._search || this._narrow
-              ? html`
-                  <div slot="trailingIcon">
-                    ${this._search &&
-                    html`<ha-icon-button
-                      @click=${this._clearSearch}
-                      .label=${this.hass!.localize("ui.common.clear")}
-                      .path=${mdiClose}
-                    ></ha-icon-button>`}
-                    ${this._narrow
-                      ? html`
-                          <mwc-button
-                            .label=${this.hass!.localize("ui.common.close")}
-                            @click=${this.closeDialog}
-                          ></mwc-button>
-                        `
-                      : ""}
-                  </div>
-                `
-              : ""}
-          </ha-textfield>
-        </div>
+        <paper-input
+          dialogInitialFocus
+          no-label-float
+          slot="heading"
+          class="heading"
+          @value-changed=${this._handleSearchChange}
+          .label=${this.hass.localize(
+            "ui.dialogs.quick-bar.filter_placeholder"
+          )}
+          .value=${this._commandMode ? `>${this._search}` : this._search}
+          @keydown=${this._handleInputKeyDown}
+          @focus=${this._setFocusFirstListItem}
+        >
+          ${this._commandMode
+            ? html`<ha-svg-icon
+                slot="prefix"
+                class="prefix"
+                .path=${mdiConsoleLine}
+              ></ha-svg-icon>`
+            : html`<ha-svg-icon
+                slot="prefix"
+                class="prefix"
+                .path=${mdiMagnify}
+              ></ha-svg-icon>`}
+          ${this._search &&
+          html`
+            <ha-icon-button
+              slot="suffix"
+              @click=${this._clearSearch}
+              .label=${this.hass!.localize("ui.common.clear")}
+              .path=${mdiClose}
+            ></ha-icon-button>
+          `}
+        </paper-input>
         ${!items
           ? html`<ha-circular-progress
               size="small"
               active
             ></ha-circular-progress>`
-          : items.length === 0
-          ? html`
-              <div class="nothing-found">
-                ${this.hass.localize("ui.dialogs.quick-bar.nothing_found")}
-              </div>
-            `
-          : html`
-              <mwc-list
-                @rangechange=${this._handleRangeChanged}
-                @keydown=${this._handleListItemKeyDown}
-                @selected=${this._handleSelected}
-                style=${styleMap({
-                  height: this._narrow
-                    ? "calc(100vh - 56px)"
-                    : `${Math.min(
-                        items.length * (this._commandMode ? 56 : 72) + 26,
-                        this._done ? 500 : 0
-                      )}px`,
-                })}
-              >
-                ${scroll({
-                  items,
-                  layout: Layout1d,
-                  renderItem: (item: QuickBarItem, index) =>
-                    this._renderItem(item, index),
-                })}
-              </mwc-list>
-            `}
-        ${!this._narrow && this._hint
-          ? html`<div class="hint">${this._hint}</div>`
-          : ""}
+          : html`<mwc-list
+              @rangechange=${this._handleRangeChanged}
+              @keydown=${this._handleListItemKeyDown}
+              @selected=${this._handleSelected}
+              style=${styleMap({
+                height: `${Math.min(
+                  items.length * (this._commandMode ? 56 : 72) + 26,
+                  this._done ? 500 : 0
+                )}px`,
+              })}
+            >
+              ${scroll({
+                items,
+                layout: Layout1d,
+                renderItem: (item: QuickBarItem, index) =>
+                  this._renderItem(item, index),
+              })}
+            </mwc-list>`}
       </ha-dialog>
     `;
   }
@@ -377,29 +337,15 @@ export class QuickBar extends LitElement {
   }
 
   private _handleSearchChange(ev: CustomEvent): void {
-    const newFilter = (ev.currentTarget as any).value;
+    const newFilter = ev.detail.value;
     const oldCommandMode = this._commandMode;
-    const oldSearch = this._search;
-    let newCommandMode: boolean;
-    let newSearch: string;
 
     if (newFilter.startsWith(">")) {
-      newCommandMode = true;
-      newSearch = newFilter.substring(1);
+      this._commandMode = true;
+      this._search = newFilter.substring(1);
     } else {
-      newCommandMode = false;
-      newSearch = newFilter;
-    }
-
-    if (oldCommandMode === newCommandMode && oldSearch === newSearch) {
-      return;
-    }
-
-    this._commandMode = newCommandMode;
-    this._search = newSearch;
-
-    if (this._hint) {
-      this._hint = undefined;
+      this._commandMode = false;
+      this._search = newFilter;
     }
 
     if (oldCommandMode !== this._commandMode) {
@@ -593,27 +539,21 @@ export class QuickBar extends LitElement {
 
     for (const sectionKey of Object.keys(configSections)) {
       for (const page of configSections[sectionKey]) {
-        if (!canShowPage(this.hass, page)) {
-          continue;
-        }
-        if (!page.component) {
-          continue;
-        }
-        const info = this._getNavigationInfoFromConfig(page);
+        if (canShowPage(this.hass, page)) {
+          if (page.component) {
+            const info = this._getNavigationInfoFromConfig(page);
 
-        if (!info) {
-          continue;
+            // Add to list, but only if we do not already have an entry for the same path and component
+            if (
+              info &&
+              !items.some(
+                (e) => e.path === info.path && e.component === info.component
+              )
+            ) {
+              items.push(info);
+            }
+          }
         }
-        // Add to list, but only if we do not already have an entry for the same path and component
-        if (
-          items.some(
-            (e) => e.path === info.path && e.component === info.component
-          )
-        ) {
-          continue;
-        }
-
-        items.push(info);
       }
     }
 
@@ -623,15 +563,14 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    if (!page.component) {
-      return undefined;
-    }
-    const caption = this.hass.localize(
-      `ui.dialogs.quick-bar.commands.navigation.${page.component}`
-    );
+    if (page.component) {
+      const caption = this.hass.localize(
+        `ui.dialogs.quick-bar.commands.navigation.${page.component}`
+      );
 
-    if (page.translationKey && caption) {
-      return { ...page, primaryText: caption };
+      if (page.translationKey && caption) {
+        return { ...page, primaryText: caption };
+      }
     }
 
     return undefined;
@@ -688,13 +627,7 @@ export class QuickBar extends LitElement {
       haStyleDialog,
       css`
         .heading {
-          display: flex;
-          align-items: center;
-          --mdc-theme-primary: var(--primary-text-color);
-        }
-
-        .heading ha-textfield {
-          flex-grow: 1;
+          padding: 8px 20px 0px;
         }
 
         ha-dialog {
@@ -712,22 +645,17 @@ export class QuickBar extends LitElement {
           }
         }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-textfield {
-            --mdc-shape-small: 0;
-          }
-        }
-
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;
         }
 
         ha-svg-icon.prefix {
+          margin: 8px;
           color: var(--primary-text-color);
         }
 
-        ha-textfield ha-icon-button {
+        paper-input ha-icon-button {
           --mdc-icon-button-size: 24px;
           color: var(--primary-text-color);
         }
@@ -760,22 +688,6 @@ export class QuickBar extends LitElement {
         mwc-list-item.command-item {
           text-transform: capitalize;
         }
-
-        .hint {
-          padding: 20px;
-          font-style: italic;
-          text-align: center;
-        }
-
-        .nothing-found {
-          padding: 16px 0px;
-          text-align: center;
-        }
-
-        div[slot="trailingIcon"] {
-          display: flex;
-          align-items: center;
-        }
       `,
     ];
   }

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -3,7 +3,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 export interface QuickBarParams {
   entityFilter?: string;
   commandMode?: boolean;
-  hint?: string;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");
@@ -16,6 +15,5 @@ export const showQuickBar = (
     dialogTag: "ha-quick-bar",
     dialogImport: loadQuickBar,
     dialogParams,
-    addHistory: false,
   });
 };

src/entrypoints/app.ts

@@ -1,11 +1,9 @@
-import {
-  setPassiveTouchGestures,
-  setCancelSyntheticClickEvents,
-} from "@polymer/polymer/lib/utils/settings";
+import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
 import "../layouts/home-assistant";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../util/legacy-support";
 
 setPassiveTouchGestures(true);
-setCancelSyntheticClickEvents(false);
+
+(window as any).frontendVersion = __VERSION__;

src/entrypoints/authorize.ts

@@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../auth/ha-authorize";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
-setCancelSyntheticClickEvents(false);
-
 /* polyfill for paper-dropdown */
 setTimeout(
   () => import("web-animations-js/web-animations-next-lite.min"),

src/entrypoints/core.ts

@@ -29,7 +29,6 @@ import { HomeAssistant } from "../types";
 import { MAIN_WINDOW_NAME } from "../data/main_window";
 
 window.name = MAIN_WINDOW_NAME;
-(window as any).frontendVersion = __VERSION__;
 
 declare global {
   interface Window {

src/entrypoints/custom-panel.ts

@@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../resources/safari-14-attachshadow-patch";
 
 import { PolymerElement } from "@polymer/polymer";
@@ -16,8 +15,6 @@ import { createCustomPanelElement } from "../util/custom-panel/create-custom-pan
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
 
-setCancelSyntheticClickEvents(false);
-
 declare global {
   interface Window {
     loadES5Adapter: () => Promise<unknown>;
@@ -50,7 +47,7 @@ function initialize(
 ) {
   const style = document.createElement("style");
 
-  style.innerHTML = `body { margin:0; }
+  style.innerHTML = `body { margin:0; } 
   @media (prefers-color-scheme: dark) {
     body {
       background-color: #111111;

src/entrypoints/onboarding.ts

@@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../onboarding/ha-onboarding";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";
 
-setCancelSyntheticClickEvents(false);
-
 declare global {
   interface Window {
     stepsPromise: Promise<Response>;

src/external_app/external_app_entrypoint.ts

@@ -1,52 +0,0 @@
-/*
-All commands that do UI stuff need to be loaded from the app bundle as UI stuff
-in core bundle slows things down and causes duplicate registration.
-
-This is the entry point for providing external app stuff from app entrypoint.
-*/
-
-import { fireEvent } from "../common/dom/fire_event";
-import { HomeAssistantMain } from "../layouts/home-assistant-main";
-import type { EMExternalMessageCommands } from "./external_messaging";
-
-export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
-  window.addEventListener("haptic", (ev) =>
-    hassMainEl.hass.auth.external!.fireMessage({
-      type: "haptic",
-      payload: { hapticType: ev.detail },
-    })
-  );
-
-  hassMainEl.hass.auth.external!.addCommandHandler((msg) =>
-    handleExternalMessage(hassMainEl, msg)
-  );
-};
-
-const handleExternalMessage = (
-  hassMainEl: HomeAssistantMain,
-  msg: EMExternalMessageCommands
-): boolean => {
-  const bus = hassMainEl.hass.auth.external!;
-
-  if (msg.command === "restart") {
-    hassMainEl.hass.connection.reconnect(true);
-    bus.fireMessage({
-      id: msg.id,
-      type: "result",
-      success: true,
-      result: null,
-    });
-  } else if (msg.command === "notifications/show") {
-    fireEvent(hassMainEl, "hass-show-notifications");
-    bus.fireMessage({
-      id: msg.id,
-      type: "result",
-      success: true,
-      result: null,
-    });
-  } else {
-    return false;
-  }
-
-  return true;
-};

src/external_app/external_auth.ts

@@ -128,14 +128,14 @@ export class ExternalAuth extends Auth {
   }
 }
 
-export const createExternalAuth = async (hassUrl: string) => {
+export const createExternalAuth = (hassUrl: string) => {
   const auth = new ExternalAuth(hassUrl);
   if (
     (window.externalApp && window.externalApp.externalBus) ||
     (window.webkit && window.webkit.messageHandlers.externalBus)
   ) {
     auth.external = new ExternalMessaging();
-    await auth.external.attach();
+    auth.external.attach();
   }
   return auth;
 };

src/external_app/external_config.ts

@@ -0,0 +1,18 @@
+import { ExternalMessaging } from "./external_messaging";
+
+export interface ExternalConfig {
+  hasSettingsScreen: boolean;
+  canWriteTag: boolean;
+  hasExoPlayer: boolean;
+}
+
+export const getExternalConfig = (
+  bus: ExternalMessaging
+): Promise<ExternalConfig> => {
+  if (!bus.cache.cfg) {
+    bus.cache.cfg = bus.sendMessage<ExternalConfig>({
+      type: "config/get",
+    });
+  }
+  return bus.cache.cfg;
+};

src/external_app/external_events_forwarder.ts

@@ -0,0 +1,15 @@
+import { ExternalMessaging } from "./external_messaging";
+
+export const externalForwardConnectionEvents = (bus: ExternalMessaging) => {
+  window.addEventListener("connection-status", (ev) =>
+    bus.fireMessage({
+      type: "connection-status",
+      payload: { event: ev.detail },
+    })
+  );
+};
+
+export const externalForwardHaptics = (bus: ExternalMessaging) =>
+  window.addEventListener("haptic", (ev) =>
+    bus.fireMessage({ type: "haptic", payload: { hapticType: ev.detail } })
+  );

src/external_app/external_messaging.ts

@@ -1,3 +1,9 @@
+import { Connection } from "home-assistant-js-websocket";
+import {
+  externalForwardConnectionEvents,
+  externalForwardHaptics,
+} from "./external_events_forwarder";
+
 const CALLBACK_EXTERNAL_BUS = "externalBus";
 
 interface CommandInFlight {
@@ -36,54 +42,24 @@ interface EMExternalMessageRestart {
   command: "restart";
 }
 
-interface EMExternMessageShowNotifications {
-  id: number;
-  type: "command";
-  command: "notifications/show";
-}
-
-export type EMExternalMessageCommands =
-  | EMExternalMessageRestart
-  | EMExternMessageShowNotifications;
-
 type ExternalMessage =
   | EMMessageResultSuccess
   | EMMessageResultError
-  | EMExternalMessageCommands;
-
-type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
-
-export interface ExternalConfig {
-  hasSettingsScreen: boolean;
-  hasSidebar: boolean;
-  canWriteTag: boolean;
-  hasExoPlayer: boolean;
-}
+  | EMExternalMessageRestart;
 
 export class ExternalMessaging {
-  public config!: ExternalConfig;
-
   public commands: { [msgId: number]: CommandInFlight } = {};
 
+  public connection?: Connection;
+
+  public cache: Record<string, any> = {};
+
   public msgId = 0;
 
-  private _commandHandler?: ExternalMessageHandler;
-
-  public async attach() {
+  public attach() {
+    externalForwardConnectionEvents(this);
+    externalForwardHaptics(this);
     window[CALLBACK_EXTERNAL_BUS] = (msg) => this.receiveMessage(msg);
-    window.addEventListener("connection-status", (ev) =>
-      this.fireMessage({
-        type: "connection-status",
-        payload: { event: ev.detail },
-      })
-    );
-    this.config = await this.sendMessage<ExternalConfig>({
-      type: "config/get",
-    });
-  }
-
-  public addCommandHandler(handler: ExternalMessageHandler) {
-    this._commandHandler = handler;
   }
 
   /**
@@ -121,25 +97,36 @@ export class ExternalMessaging {
     }
 
     if (msg.type === "command") {
-      if (!this._commandHandler || !this._commandHandler(msg)) {
-        let code: string;
-        let message: string;
-        if (this._commandHandler) {
-          code = "not_ready";
-          message = "Command handler not ready";
-        } else {
-          code = "unknown_command";
-          message = `Unknown command ${msg.command}`;
-        }
+      if (!this.connection) {
         // eslint-disable-next-line no-console
-        console.warn(message, msg);
+        console.warn("Received command without having connection set", msg);
         this.fireMessage({
           id: msg.id,
           type: "result",
           success: false,
           error: {
-            code,
-            message,
+            code: "commands_not_init",
+            message: `Commands connection not set`,
+          },
+        });
+      } else if (msg.command === "restart") {
+        this.connection.reconnect(true);
+        this.fireMessage({
+          id: msg.id,
+          type: "result",
+          success: true,
+          result: null,
+        });
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn("Received unknown command", msg.command, msg);
+        this.fireMessage({
+          id: msg.id,
+          type: "result",
+          success: false,
+          error: {
+            code: "unknown_command",
+            message: `Unknown command ${msg.command}`,
           },
         });
       }

src/html/_style_base.html.template

@@ -1,4 +1,4 @@
-<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1'>
+<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover'>
 <style>
   body {
     font-family: Roboto, sans-serif;

src/layouts/home-assistant-main.ts

@@ -38,7 +38,7 @@ interface EditSideBarEvent {
 }
 
 @customElement("home-assistant-main")
-export class HomeAssistantMain extends LitElement {
+class HomeAssistantMain extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public route?: Route;
@@ -47,8 +47,6 @@ export class HomeAssistantMain extends LitElement {
 
   @state() private _sidebarEditMode = false;
 
-  @state() private _externalSidebar = false;
-
   constructor() {
     super();
     listenMediaQuery("(max-width: 870px)", (matches) => {
@@ -58,12 +56,11 @@ export class HomeAssistantMain extends LitElement {
 
   protected render(): TemplateResult {
     const hass = this.hass;
-    const sidebarNarrow = this._sidebarNarrow || this._externalSidebar;
+    const sidebarNarrow = this._sidebarNarrow;
     const disableSwipe =
       this._sidebarEditMode ||
       !sidebarNarrow ||
-      NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1 ||
-      this._externalSidebar;
+      NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     // Style block in render because of the mixin that is not supported
     return html`
@@ -110,14 +107,6 @@ export class HomeAssistantMain extends LitElement {
   protected firstUpdated() {
     import(/* webpackPreload: true */ "../components/ha-sidebar");
 
-    if (this.hass.auth.external) {
-      this._externalSidebar =
-        this.hass.auth.external.config.hasSidebar === true;
-      import("../external_app/external_app_entrypoint").then((mod) =>
-        mod.attachExternalToApp(this)
-      );
-    }
-
     this.addEventListener(
       "hass-edit-sidebar",
       (ev: HASSDomEvent<EditSideBarEvent>) => {
@@ -140,12 +129,6 @@ export class HomeAssistantMain extends LitElement {
       if (this._sidebarEditMode) {
         return;
       }
-      if (this._externalSidebar) {
-        this.hass.auth.external!.fireMessage({
-          type: "sidebar/show",
-        });
-        return;
-      }
       if (this._sidebarNarrow) {
         if (this.drawer.opened) {
           this.drawer.close();

src/panels/config/areas/ha-config-area-page.ts

@@ -1,17 +1,13 @@
 import "@material/mwc-button";
-import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { HassEntity } from "home-assistant-js-websocket/dist/types";
+import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { caseInsensitiveStringCompare } from "../../../common/string/compare";
-import { groupBy } from "../../../common/util/group-by";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -21,19 +17,14 @@ import {
   deleteAreaRegistryEntry,
   updateAreaRegistryEntry,
 } from "../../../data/area_registry";
-import { AutomationEntity } from "../../../data/automation";
 import {
   computeDeviceName,
   DeviceRegistryEntry,
-  sortDeviceRegistryByName,
 } from "../../../data/device_registry";
 import {
   computeEntityRegistryName,
   EntityRegistryEntry,
-  sortEntityRegistryByName,
 } from "../../../data/entity_registry";
-import { SceneEntity } from "../../../data/scene";
-import { ScriptEntity } from "../../../data/script";
 import { findRelated, RelatedResult } from "../../../data/search";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
@@ -44,11 +35,11 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-
-declare type NameAndEntity<EntityType extends HassEntity> = {
-  name: string;
-  entity: EntityType;
-};
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { SceneEntity } from "../../../data/scene";
+import { ScriptEntity } from "../../../data/script";
+import { AutomationEntity } from "../../../data/automation";
+import { groupBy } from "../../../common/util/group-by";
 
 @customElement("ha-config-area-page")
 class HaConfigAreaPage extends LitElement {
@@ -145,59 +136,10 @@ class HaConfigAreaPage extends LitElement {
       this.entities
     );
 
-    // Pre-compute the entity and device names, so we can sort by them
-    if (devices) {
-      devices.forEach((entry) => {
-        entry.name = computeDeviceName(entry, this.hass);
-      });
-      sortDeviceRegistryByName(devices);
-    }
-    if (entities) {
-      entities.forEach((entry) => {
-        entry.name = computeEntityRegistryName(this.hass, entry);
-      });
-      sortEntityRegistryByName(entities);
-    }
-
-    // Group entities by domain
-    const groupedEntities = groupBy(entities, (entity) =>
+    const grouped = groupBy(entities, (entity) =>
       computeDomain(entity.entity_id)
     );
 
-    // Pre-compute the name also for the grouped and related entities so we can sort by them
-    let groupedAutomations: NameAndEntity<AutomationEntity>[] = [];
-    let groupedScenes: NameAndEntity<SceneEntity>[] = [];
-    let groupedScripts: NameAndEntity<ScriptEntity>[] = [];
-    let relatedAutomations: NameAndEntity<AutomationEntity>[] = [];
-    let relatedScenes: NameAndEntity<SceneEntity>[] = [];
-    let relatedScripts: NameAndEntity<ScriptEntity>[] = [];
-
-    if (isComponentLoaded(this.hass, "automation")) {
-      ({
-        groupedEntities: groupedAutomations,
-        relatedEntities: relatedAutomations,
-      } = this._prepareEntities<AutomationEntity>(
-        groupedEntities.automation,
-        this._related?.automation
-      ));
-    }
-
-    if (isComponentLoaded(this.hass, "scene")) {
-      ({ groupedEntities: groupedScenes, relatedEntities: relatedScenes } =
-        this._prepareEntities<SceneEntity>(
-          groupedEntities.scene,
-          this._related?.scene
-        ));
-    }
-
-    if (isComponentLoaded(this.hass, "script")) {
-      ({ groupedEntities: groupedScripts, relatedEntities: relatedScripts } =
-        this._prepareEntities<ScriptEntity>(
-          groupedEntities.script,
-          this._related?.script
-        ));
-    }
-
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -266,7 +208,9 @@ class HaConfigAreaPage extends LitElement {
                       html`
                         <a href="/config/devices/device/${device.id}">
                           <paper-item>
-                            <paper-item-body> ${device.name} </paper-item-body>
+                            <paper-item-body>
+                              ${computeDeviceName(device, this.hass)}
+                            </paper-item-body>
                             <ha-icon-next></ha-icon-next>
                           </paper-item>
                         </a>
@@ -296,7 +240,9 @@ class HaConfigAreaPage extends LitElement {
                             @click=${this._openEntity}
                             .entity=${entity}
                           >
-                            <paper-item-body> ${entity.name} </paper-item-body>
+                            <paper-item-body>
+                              ${computeEntityRegistryName(this.hass, entity)}
+                            </paper-item-body>
                             <ha-icon-next></ha-icon-next>
                           </paper-item>
                         `
@@ -315,36 +261,46 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.automation.automations_heading"
+                      "ui.panel.config.devices.automation.automations"
                     )}
                   >
-                    ${groupedAutomations?.length
+                    ${grouped.automation?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${groupedAutomations.map((automation) =>
-                            this._renderAutomation(
-                              automation.name,
-                              automation.entity
-                            )
-                          )}`
+                          ${grouped.automation.map((entity) => {
+                            const entityState = this.hass.states[
+                              entity.entity_id
+                            ] as AutomationEntity | undefined;
+                            return entityState
+                              ? this._renderAutomation(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${relatedAutomations?.length
+                    ${this._related?.automation?.filter(
+                      (entityId) =>
+                        !grouped.automation?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${relatedAutomations.map((automation) =>
-                            this._renderAutomation(
-                              automation.name,
-                              automation.entity
-                            )
-                          )}`
+                          ${this._related.automation.map((scene) => {
+                            const entityState = this.hass.states[scene] as
+                              | AutomationEntity
+                              | undefined;
+                            return entityState
+                              ? this._renderAutomation(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${!groupedAutomations?.length && !relatedAutomations?.length
+                    ${!grouped.automation?.length &&
+                    !this._related?.automation?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -362,30 +318,42 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.scene.scenes_heading"
+                      "ui.panel.config.devices.scene.scenes"
                     )}
                   >
-                    ${groupedScenes?.length
+                    ${grouped.scene?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${groupedScenes.map((scene) =>
-                            this._renderScene(scene.name, scene.entity)
-                          )}`
+                          ${grouped.scene.map((entity) => {
+                            const entityState =
+                              this.hass.states[entity.entity_id];
+                            return entityState
+                              ? this._renderScene(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${relatedScenes?.length
+                    ${this._related?.scene?.filter(
+                      (entityId) =>
+                        !grouped.scene?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${relatedScenes.map((scene) =>
-                            this._renderScene(scene.name, scene.entity)
-                          )}`
+                          ${this._related.scene.map((scene) => {
+                            const entityState = this.hass.states[scene];
+                            return entityState
+                              ? this._renderScene(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${!groupedScenes?.length && !relatedScenes?.length
+                    ${!grouped.scene?.length && !this._related?.scene?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -401,30 +369,45 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.script.scripts_heading"
+                      "ui.panel.config.devices.script.scripts"
                     )}
                   >
-                    ${groupedScripts?.length
+                    ${grouped.script?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${groupedScripts.map((script) =>
-                            this._renderScript(script.name, script.entity)
-                          )}`
+                          ${grouped.script.map((entity) => {
+                            const entityState = this.hass.states[
+                              entity.entity_id
+                            ] as ScriptEntity | undefined;
+                            return entityState
+                              ? this._renderScript(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${relatedScripts?.length
+                    ${this._related?.script?.filter(
+                      (entityId) =>
+                        !grouped.script?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${relatedScripts.map((script) =>
-                            this._renderScript(script.name, script.entity)
-                          )}`
+                          ${this._related.script.map((scene) => {
+                            const entityState = this.hass.states[scene] as
+                              | ScriptEntity
+                              | undefined;
+                            return entityState
+                              ? this._renderScript(entityState)
+                              : "";
+                          })}`
                       : ""}
-                    ${!groupedScripts?.length && !relatedScripts?.length
+                    ${!grouped.script?.length && !this._related?.script?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -442,51 +425,7 @@ class HaConfigAreaPage extends LitElement {
     `;
   }
 
-  private _prepareEntities<EntityType extends HassEntity>(
-    entries?: EntityRegistryEntry[],
-    relatedEntityIds?: string[]
-  ): {
-    groupedEntities: NameAndEntity<EntityType>[];
-    relatedEntities: NameAndEntity<EntityType>[];
-  } {
-    const groupedEntities: NameAndEntity<EntityType>[] = [];
-    const relatedEntities: NameAndEntity<EntityType>[] = [];
-
-    if (entries?.length) {
-      entries.forEach((entity) => {
-        const entityState = this.hass.states[
-          entity.entity_id
-        ] as unknown as EntityType;
-        if (entityState) {
-          groupedEntities.push({
-            name: computeStateName(entityState),
-            entity: entityState,
-          });
-        }
-      });
-      groupedEntities.sort((entry1, entry2) =>
-        caseInsensitiveStringCompare(entry1.name!, entry2.name!)
-      );
-    }
-    if (relatedEntityIds?.length) {
-      relatedEntityIds.forEach((entity) => {
-        const entityState = this.hass.states[entity] as EntityType;
-        if (entityState) {
-          relatedEntities.push({
-            name: entityState ? computeStateName(entityState) : "",
-            entity: entityState,
-          });
-        }
-      });
-      relatedEntities.sort((entry1, entry2) =>
-        caseInsensitiveStringCompare(entry1.name!, entry2.name!)
-      );
-    }
-
-    return { groupedEntities, relatedEntities };
-  }
-
-  private _renderScene(name: string, entityState: SceneEntity) {
+  private _renderScene(entityState: SceneEntity) {
     return html`<div>
       <a
         href=${ifDefined(
@@ -496,7 +435,7 @@ class HaConfigAreaPage extends LitElement {
         )}
       >
         <paper-item .disabled=${!entityState.attributes.id}>
-          <paper-item-body> ${name} </paper-item-body>
+          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
           <ha-icon-next></ha-icon-next>
         </paper-item>
       </a>
@@ -510,7 +449,7 @@ class HaConfigAreaPage extends LitElement {
     </div>`;
   }
 
-  private _renderAutomation(name: string, entityState: AutomationEntity) {
+  private _renderAutomation(entityState: AutomationEntity) {
     return html`<div>
       <a
         href=${ifDefined(
@@ -520,7 +459,7 @@ class HaConfigAreaPage extends LitElement {
         )}
       >
         <paper-item .disabled=${!entityState.attributes.id}>
-          <paper-item-body> ${name} </paper-item-body>
+          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
           <ha-icon-next></ha-icon-next>
         </paper-item>
       </a>
@@ -534,10 +473,10 @@ class HaConfigAreaPage extends LitElement {
     </div>`;
   }
 
-  private _renderScript(name: string, entityState: ScriptEntity) {
+  private _renderScript(entityState: ScriptEntity) {
     return html`<a href=${`/config/script/edit/${entityState.entity_id}`}>
       <paper-item>
-        <paper-item-body> ${name} </paper-item-body>
+        <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
         <ha-icon-next></ha-icon-next>
       </paper-item>
     </a>`;

src/panels/config/cloud/account/cloud-account.ts

@@ -1,8 +1,5 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import type { ActionDetail } from "@material/mwc-list";
 import "@polymer/paper-item/paper-item-body";
-import { mdiDotsVertical } from "@mdi/js";
 import { LitElement, css, html, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
@@ -10,8 +7,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
-import "../../../../components/ha-button-menu";
-import "../../../../components/ha-icon-button";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
@@ -26,10 +21,9 @@ import "./cloud-google-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 
 @customElement("cloud-account")
-export class CloudAccount extends SubscribeMixin(LitElement) {
+export class CloudAccount extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public isWide = false;
@@ -49,23 +43,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu
-          slot="toolbar-icon"
-          corner="BOTTOM_START"
-          @action=${this._handleMenuAction}
-          activatable
-        >
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <mwc-list-item>
-            ${this.hass.localize("ui.panel.config.cloud.account.sign_out")}
-          </mwc-list-item>
-        </ha-button-menu>
-
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
@@ -138,6 +115,11 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                     )}
                   </mwc-button>
                 </a>
+                <mwc-button @click=${this._handleLogout}
+                  >${this.hass.localize(
+                    "ui.panel.config.cloud.account.sign_out"
+                  )}</mwc-button
+                >
               </div>
             </ha-card>
           </ha-config-section>
@@ -218,33 +200,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected override hassSubscribe() {
-    const googleCheck = () => {
-      if (!this.cloudStatus?.google_registered) {
-        fireEvent(this, "ha-refresh-cloud-status");
-      }
-    };
-    return [
-      this.hass.connection.subscribeEvents(() => {
-        if (!this.cloudStatus?.alexa_registered) {
-          fireEvent(this, "ha-refresh-cloud-status");
-        }
-      }, "alexa_smart_home"),
-      this.hass.connection.subscribeEvents(
-        googleCheck,
-        "google_assistant_command"
-      ),
-      this.hass.connection.subscribeEvents(
-        googleCheck,
-        "google_assistant_query"
-      ),
-      this.hass.connection.subscribeEvents(
-        googleCheck,
-        "google_assistant_sync"
-      ),
-    ];
-  }
-
   private async _fetchSubscriptionInfo() {
     this._subscription = await fetchCloudSubscriptionInfo(this.hass);
     if (
@@ -256,12 +211,9 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        await cloudLogout(this.hass);
-        fireEvent(this, "ha-refresh-cloud-status");
-    }
+  private async _handleLogout() {
+    await cloudLogout(this.hass);
+    fireEvent(this, "ha-refresh-cloud-status");
   }
 
   _computeRTLDirection(hass) {
@@ -285,7 +237,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
       }
       .card-actions {
         display: flex;
-        flex-direction: row-reverse;
+        justify-content: space-between;
       }
       .card-actions a {
         text-decoration: none;

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -10,7 +10,7 @@ import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";
 
 export class CloudAlexaPref extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public cloudStatus?: CloudStatusLoggedIn;
 
@@ -21,7 +21,6 @@ export class CloudAlexaPref extends LitElement {
       return html``;
     }
 
-    const alexa_registered = this.cloudStatus.alexa_registered;
     const { alexa_enabled, alexa_report_state } = this.cloudStatus!.prefs;
 
     return html`
@@ -37,49 +36,33 @@ export class CloudAlexaPref extends LitElement {
           ></ha-switch>
         </div>
         <div class="card-content">
-          <p>
-            ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
-          </p>
-          ${!alexa_enabled
-            ? ""
-            : !alexa_registered
+          ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
+          <ul>
+            <li>
+              <a
+                href="https://skills-store.amazon.com/deeplink/dp/B0772J1QKB?deviceType=app"
+                target="_blank"
+                rel="noreferrer"
+              >
+                ${this.hass!.localize(
+                  "ui.panel.config.cloud.account.alexa.enable_ha_skill"
+                )}
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.nabucasa.com/config/amazon_alexa/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                ${this.hass!.localize(
+                  "ui.panel.config.cloud.account.alexa.config_documentation"
+                )}
+              </a>
+            </li>
+          </ul>
+          ${alexa_enabled
             ? html`
-                <ha-alert
-                  .title=${this.hass.localize(
-                    "ui.panel.config.cloud.account.alexa.not_configured_title"
-                  )}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.alexa.not_configured_text"
-                  )}
-
-                  <ul>
-                    <li>
-                      <a
-                        href="https://skills-store.amazon.com/deeplink/dp/B0772J1QKB?deviceType=app"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass!.localize(
-                          "ui.panel.config.cloud.account.alexa.enable_ha_skill"
-                        )}
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://www.nabucasa.com/config/amazon_alexa/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass!.localize(
-                          "ui.panel.config.cloud.account.alexa.config_documentation"
-                        )}
-                      </a>
-                    </li>
-                  </ul>
-                </ha-alert>
-              `
-            : html`
                 <div class="state-reporting">
                   <h3>
                     ${this.hass!.localize(
@@ -98,21 +81,18 @@ export class CloudAlexaPref extends LitElement {
                     "ui.panel.config.cloud.account.alexa.info_state_reporting"
                   )}
                 </p>
-              `}
-        </div>
-        <div class="card-actions">
-          ${alexa_registered
-            ? html`
-                <mwc-button
-                  @click=${this._handleSync}
-                  .disabled=${!alexa_enabled || this._syncing}
-                >
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.account.alexa.sync_entities"
-                  )}
-                </mwc-button>
               `
             : ""}
+        </div>
+        <div class="card-actions">
+          <mwc-button
+            @click=${this._handleSync}
+            .disabled=${!alexa_enabled || this._syncing}
+          >
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.account.alexa.sync_entities"
+            )}
+          </mwc-button>
           <div class="spacer"></div>
           <a href="/config/cloud/alexa">
             <mwc-button

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -1,14 +1,14 @@
 import "@material/mwc-button";
-import "@material/mwc-textfield/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property, state } from "lit/decorators";
+import { property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
+import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
-import { syncCloudGoogleEntities } from "../../../../data/google_assistant";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
@@ -16,16 +16,13 @@ import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 export class CloudGooglePref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
-
-  @state() private _syncing = false;
+  @property() public cloudStatus?: CloudStatusLoggedIn;
 
   protected render(): TemplateResult {
     if (!this.cloudStatus) {
       return html``;
     }
 
-    const google_registered = this.cloudStatus.google_registered;
     const { google_enabled, google_report_state, google_secure_devices_pin } =
       this.cloudStatus.prefs;
 
@@ -46,9 +43,7 @@ export class CloudGooglePref extends LitElement {
           <p>
             ${this.hass.localize("ui.panel.config.cloud.account.google.info")}
           </p>
-          ${!google_enabled
-            ? ""
-            : !google_registered
+          ${google_enabled && !this.cloudStatus.google_registered
             ? html`
                 <ha-alert
                   .title=${this.hass.localize(
@@ -85,30 +80,9 @@ export class CloudGooglePref extends LitElement {
                   </ul>
                 </ha-alert>
               `
-            : html`
-                ${this.cloudStatus.http_use_ssl
-                  ? html`
-                      <ha-alert
-                        alert-type="warning"
-                        .title=${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.http_use_ssl_warning_title"
-                        )}
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.http_use_ssl_warning_text"
-                        )}
-                        <a
-                          href="https://www.nabucasa.com/config/google_assistant/#local-communication"
-                          target="_blank"
-                          rel="noreferrer"
-                          >${this.hass.localize(
-                            "ui.panel.config.common.learn_more"
-                          )}</a
-                        >
-                      </ha-alert>
-                    `
-                  : ""}
-
+            : ""}
+          ${google_enabled
+            ? html`
                 <div class="state-reporting">
                   <h3>
                     ${this.hass.localize(
@@ -136,34 +110,32 @@ export class CloudGooglePref extends LitElement {
                   ${this.hass.localize(
                     "ui.panel.config.cloud.account.google.enter_pin_info"
                   )}
-                  <mwc-textfield
-                    id="google_secure_devices_pin"
-                    .label=${this.hass.localize(
+                  <paper-input
+                    label=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.devices_pin"
                     )}
-                    .placeholder=${this.hass.localize(
+                    id="google_secure_devices_pin"
+                    placeholder=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.enter_pin_hint"
                     )}
                     .value=${google_secure_devices_pin || ""}
                     @change=${this._pinChanged}
-                  ></mwc-textfield>
+                  ></paper-input>
                 </div>
-              `}
-        </div>
-        <div class="card-actions">
-          ${google_registered
-            ? html`
-                <mwc-button
-                  @click=${this._handleSync}
-                  .disabled=${!google_enabled || this._syncing}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.sync_entities"
-                  )}
-                </mwc-button>
               `
             : ""}
-          <div class="spacer"></div>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            .hass=${this.hass}
+            .disabled=${!google_enabled}
+            @hass-api-called=${this._syncEntitiesCalled}
+            path="cloud/google_actions/sync"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.google.sync_entities"
+            )}
+          </ha-call-api-button>
           <a href="/config/cloud/google-assistant">
             <mwc-button>
               ${this.hass.localize(
@@ -176,31 +148,24 @@ export class CloudGooglePref extends LitElement {
     `;
   }
 
-  private async _handleSync() {
-    this._syncing = true;
-    try {
-      await syncCloudGoogleEntities(this.hass!);
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          `ui.panel.config.cloud.account.google.${
-            err.status_code === 404
-              ? "not_configured_title"
-              : "sync_failed_title"
-          }`
-        ),
-        text: this.hass.localize(
-          `ui.panel.config.cloud.account.google.${
-            err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
-          }`
-        ),
-      });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } finally {
-      this._syncing = false;
+  private async _syncEntitiesCalled(ev: CustomEvent) {
+    if (!ev.detail.success && ev.detail.response.status_code === 404) {
+      this._syncFailed();
     }
   }
 
+  private async _syncFailed() {
+    showAlertDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.cloud.account.google.not_configured_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.cloud.account.google.not_configured_text"
+      ),
+    });
+    fireEvent(this, "ha-refresh-cloud-status");
+  }
+
   private async _enableToggleChanged(ev) {
     const toggle = ev.target as HaSwitch;
     try {
@@ -229,7 +194,7 @@ export class CloudGooglePref extends LitElement {
   }
 
   private async _pinChanged(ev) {
-    const input = ev.target as TextField;
+    const input = ev.target as PaperInputElement;
     try {
       await updateCloudPref(this.hass, {
         [input.id]: input.value || null,
@@ -242,7 +207,7 @@ export class CloudGooglePref extends LitElement {
           "ui.panel.config.cloud.account.google.enter_pin_error"
         )} ${err.message}`
       );
-      input.value = this.cloudStatus!.prefs.google_secure_devices_pin || "";
+      input.value = this.cloudStatus!.prefs.google_secure_devices_pin;
     }
   }
 
@@ -260,13 +225,16 @@ export class CloudGooglePref extends LitElement {
         right: auto;
         left: 24px;
       }
-      mwc-textfield {
+      ha-call-api-button {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+      paper-input {
         width: 250px;
-        display: block;
-        margin-top: 8px;
       }
       .card-actions {
         display: flex;
+        justify-content: space-between;
       }
       .card-actions a {
         text-decoration: none;
@@ -277,10 +245,6 @@ export class CloudGooglePref extends LitElement {
       .secure_devices {
         padding-top: 8px;
       }
-      .spacer {
-        flex-grow: 1;
-      }
-
       .state-reporting {
         display: flex;
         margin-top: 1.5em;

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -31,9 +31,9 @@ export class DialogTryTts extends LitElement {
 
   @query("#message") private _messageInput?: PaperTextareaElement;
 
-  @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
+  @LocalStorage("cloudTtsTryMessage") private _message!: string;
 
-  @LocalStorage("cloudTtsTryTarget", false, false) private _target!: string;
+  @LocalStorage("cloudTtsTryTarget") private _target!: string;
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -6,7 +6,6 @@ import {
   mdiCloseBox,
   mdiCloseBoxMultiple,
 } from "@mdi/js";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -34,14 +33,9 @@ import {
   updateCloudAlexaEntityConfig,
   updateCloudPref,
 } from "../../../../data/cloud";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../../../data/entity_registry";
 import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 
@@ -49,7 +43,7 @@ const DEFAULT_CONFIG_EXPOSE = true;
 const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
 
 @customElement("cloud-alexa")
-class CloudAlexa extends SubscribeMixin(LitElement) {
+class CloudAlexa extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property()
@@ -59,15 +53,9 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
 
   @state() private _entities?: AlexaEntity[];
 
-  @state()
+  @property()
   private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
 
-  @state()
-  private _entityCategories?: Record<
-    string,
-    EntityRegistryEntry["entity_category"]
-  >;
-
   private _popstateSyncAttached = false;
 
   private _popstateReloadStatusAttached = false;
@@ -84,7 +72,7 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
   );
 
   protected render(): TemplateResult {
-    if (this._entities === undefined || this._entityCategories === undefined) {
+    if (this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
     const emptyFilter = isEmptyFilter(this.cloudStatus.alexa_entities);
@@ -111,17 +99,10 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
         should_expose: null,
       };
       const isExposed = emptyFilter
-        ? this._configIsExposed(
-            entity.entity_id,
-            config,
-            this._entityCategories![entity.entity_id]
-          )
+        ? this._configIsExposed(entity.entity_id, config)
         : filterFunc(entity.entity_id);
       const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(
-            entity.entity_id,
-            this._entityCategories![entity.entity_id]
-          )
+        ? this._configIsDomainExposed(entity.entity_id)
         : filterFunc(entity.entity_id);
       if (isExposed) {
         selected++;
@@ -306,23 +287,6 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected override hassSubscribe(): (
-    | UnsubscribeFunc
-    | Promise<UnsubscribeFunc>
-  )[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection, (entries) => {
-        const categories = {};
-
-        for (const entry of entries) {
-          categories[entry.entity_id] = entry.entity_category;
-        }
-
-        this._entityCategories = categories;
-      }),
-    ];
-  }
-
   private async _fetchData() {
     const entities = await fetchCloudAlexaEntities(this.hass);
     entities.sort((a, b) => {
@@ -341,26 +305,15 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  private _configIsDomainExposed(
-    entityId: string,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
+  private _configIsDomainExposed(entityId: string) {
     const domain = computeDomain(entityId);
     return this.cloudStatus.prefs.alexa_default_expose
-      ? !entityCategory &&
-          this.cloudStatus.prefs.alexa_default_expose.includes(domain)
+      ? this.cloudStatus.prefs.alexa_default_expose.includes(domain)
       : DEFAULT_CONFIG_EXPOSE;
   }
 
-  private _configIsExposed(
-    entityId: string,
-    config: AlexaEntityConfig,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    return (
-      config.should_expose ??
-      this._configIsDomainExposed(entityId, entityCategory)
-    );
+  private _configIsExposed(entityId: string, config: AlexaEntityConfig) {
+    return config.should_expose ?? this._configIsDomainExposed(entityId);
   }
 
   private async _exposeChanged(ev: CustomEvent<ActionDetail>) {

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -6,7 +6,6 @@ import {
   mdiCloseBox,
   mdiCloseBoxMultiple,
 } from "@mdi/js";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -36,10 +35,6 @@ import {
   updateCloudGoogleEntityConfig,
   updateCloudPref,
 } from "../../../../data/cloud";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../../../data/entity_registry";
 import {
   fetchCloudGoogleEntities,
   GoogleEntity,
@@ -47,7 +42,6 @@ import {
 import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-subpage";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
@@ -55,7 +49,7 @@ import { showToast } from "../../../../util/toast";
 const DEFAULT_CONFIG_EXPOSE = true;
 
 @customElement("cloud-google-assistant")
-class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
+class CloudGoogleAssistant extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public cloudStatus!: CloudStatusLoggedIn;
@@ -64,15 +58,9 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
 
   @state() private _entities?: GoogleEntity[];
 
-  @state()
+  @property()
   private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
 
-  @state()
-  private _entityCategories?: Record<
-    string,
-    EntityRegistryEntry["entity_category"]
-  >;
-
   private _popstateSyncAttached = false;
 
   private _popstateReloadStatusAttached = false;
@@ -89,7 +77,7 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
   );
 
   protected render(): TemplateResult {
-    if (this._entities === undefined || this._entityCategories === undefined) {
+    if (this._entities === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
     const emptyFilter = isEmptyFilter(this.cloudStatus.google_entities);
@@ -117,17 +105,10 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
         should_expose: null,
       };
       const isExposed = emptyFilter
-        ? this._configIsExposed(
-            entity.entity_id,
-            config,
-            this._entityCategories![entity.entity_id]
-          )
+        ? this._configIsExposed(entity.entity_id, config)
         : filterFunc(entity.entity_id);
       const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(
-            entity.entity_id,
-            this._entityCategories![entity.entity_id]
-          )
+        ? this._configIsDomainExposed(entity.entity_id)
         : filterFunc(entity.entity_id);
       if (isExposed) {
         selected++;
@@ -330,43 +311,15 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected override hassSubscribe(): (
-    | UnsubscribeFunc
-    | Promise<UnsubscribeFunc>
-  )[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection, (entries) => {
-        const categories = {};
-
-        for (const entry of entries) {
-          categories[entry.entity_id] = entry.entity_category;
-        }
-
-        this._entityCategories = categories;
-      }),
-    ];
-  }
-
-  private _configIsDomainExposed(
-    entityId: string,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
+  private _configIsDomainExposed(entityId: string) {
     const domain = computeDomain(entityId);
     return this.cloudStatus.prefs.google_default_expose
-      ? !entityCategory &&
-          this.cloudStatus.prefs.google_default_expose.includes(domain)
+      ? this.cloudStatus.prefs.google_default_expose.includes(domain)
       : DEFAULT_CONFIG_EXPOSE;
   }
 
-  private _configIsExposed(
-    entityId: string,
-    config: GoogleEntityConfig,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    return (
-      config.should_expose ??
-      this._configIsDomainExposed(entityId, entityCategory)
-    );
+  private _configIsExposed(entityId: string, config: GoogleEntityConfig) {
+    return config.should_expose ?? this._configIsDomainExposed(entityId);
   }
 
   private async _fetchData() {

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

@@ -1,6 +1,4 @@
-import { mdiCloudLock, mdiDotsVertical, mdiMagnify } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
-import type { ActionDetail } from "@material/mwc-list";
+import { mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -11,19 +9,17 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-icon-button";
 import "../../../components/ha-menu-button";
-import "../../../components/ha-button-menu";
 import { CloudStatus } from "../../../data/cloud";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
 import {
-  refreshSupervisorAvailableUpdates,
-  SupervisorAvailableUpdates,
-} from "../../../data/supervisor/root";
-import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
+  ExternalConfig,
+  getExternalConfig,
+} from "../../../external_app/external_config";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -31,9 +27,6 @@ import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
 import "./ha-config-updates";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import { showToast } from "../../../util/toast";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -46,12 +39,21 @@ class HaConfigDashboard extends LitElement {
 
   @property() public cloudStatus?: CloudStatus;
 
-  // null means not available
   @property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
 
   @property() public showAdvanced!: boolean;
 
-  private _notifyUpdates = false;
+  @state() private _externalConfig?: ExternalConfig;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    if (this.hass && this.hass.auth.external) {
+      getExternalConfig(this.hass.auth.external).then((conf) => {
+        this._externalConfig = conf;
+      });
+    }
+  }
 
   protected render(): TemplateResult {
     return html`
@@ -63,25 +65,6 @@ class HaConfigDashboard extends LitElement {
               .narrow=${this.narrow}
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.config")}</div>
-            <ha-icon-button
-              .path=${mdiMagnify}
-              @click=${this._showQuickBar}
-            ></ha-icon-button>
-            <ha-button-menu
-              corner="BOTTOM_START"
-              @action=${this._handleMenuAction}
-              activatable
-            >
-              <ha-icon-button
-                slot="trigger"
-                .label=${this.hass.localize("ui.common.menu")}
-                .path=${mdiDotsVertical}
-              ></ha-icon-button>
-
-              <mwc-list-item>
-                ${this.hass.localize("ui.panel.config.updates.check_updates")}
-              </mwc-list-item>
-            </ha-button-menu>
           </app-toolbar>
         </app-header>
 
@@ -90,9 +73,9 @@ class HaConfigDashboard extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          ${this.supervisorUpdates === undefined
-            ? // Hide everything until updates loaded
-              html``
+          ${isComponentLoaded(this.hass, "hassio") &&
+          this.supervisorUpdates === undefined
+            ? html``
             : html`${this.supervisorUpdates?.length
                   ? html`<ha-card>
                       <ha-config-updates
@@ -130,6 +113,7 @@ class HaConfigDashboard extends LitElement {
                   <ha-config-navigation
                     .hass=${this.hass}
                     .narrow=${this.narrow}
+                    .externalConfig=${this._externalConfig}
                     .showAdvanced=${this.showAdvanced}
                     .pages=${configSections.dashboard}
                   ></ha-config-navigation>
@@ -139,59 +123,14 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
-  protected override updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (!changedProps.has("supervisorUpdates") || !this._notifyUpdates) {
-      return;
-    }
-    this._notifyUpdates = false;
-    if (this.supervisorUpdates?.length) {
-      showToast(this, {
-        message: this.hass.localize(
-          "ui.panel.config.updates.updates_refreshed"
-        ),
-      });
-    } else {
-      showToast(this, {
-        message: this.hass.localize("ui.panel.config.updates.no_new_updates"),
-      });
-    }
-  }
-
-  private _showQuickBar(): void {
-    showQuickBar(this, {
-      commandMode: true,
-      hint: this.hass.localize("ui.dialogs.quick-bar.key_c_hint"),
-    });
-  }
-
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        if (isComponentLoaded(this.hass, "hassio")) {
-          this._notifyUpdates = true;
-          await refreshSupervisorAvailableUpdates(this.hass);
-          fireEvent(this, "ha-refresh-supervisor");
-          return;
-        }
-        showAlertDialog(this, {
-          title: this.hass.localize(
-            "ui.panel.config.updates.check_unavailable.title"
-          ),
-          text: this.hass.localize(
-            "ui.panel.config.updates.check_unavailable.description"
-          ),
-          warning: true,
-        });
-        break;
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
+        app-header {
+          border-bottom: var(--app-header-border-bottom);
+          --header-height: 55px;
+        }
         :host(:not([narrow])) ha-card:last-child {
           margin-bottom: 24px;
         }

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,12 +20,14 @@ class HaConfigNavigation extends LitElement {
 
   @property() public pages!: PageNavigation[];
 
+  @property() public externalConfig?: ExternalConfig;
+
   protected render(): TemplateResult {
     return html`
       ${this.pages.map((page) =>
         (
           page.path === "#external-app-configuration"
-            ? this.hass.auth.external?.config.hasSettingsScreen
+            ? this.externalConfig?.hasSettingsScreen
             : canShowPage(this.hass, page)
         )
           ? html`

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

@@ -7,9 +7,9 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-logo-svg";
 import "../../../components/ha-svg-icon";
-import { SupervisorAvailableUpdates } from "../../../data/supervisor/root";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import { buttonLinkStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
-import "../../../components/ha-icon-next";
 
 export const SUPERVISOR_UPDATE_NAMES = {
   core: "Home Assistant Core",
@@ -46,38 +46,39 @@ class HaConfigUpdates extends LitElement {
       </div>
       ${updates.map(
         (update) => html`
-          <a href="/hassio${update.panel_path}">
-            <paper-icon-item>
-              <span slot="item-icon" class="icon">
-                ${update.update_type === "addon"
-                  ? update.icon
-                    ? html`<img src="/api/hassio${update.icon}" />`
-                    : html`<ha-svg-icon
-                        .path=${mdiPackageVariant}
-                      ></ha-svg-icon>`
-                  : html`<ha-logo-svg></ha-logo-svg>`}
-              </span>
-              <paper-item-body two-line>
-                ${update.update_type === "addon"
-                  ? update.name
-                  : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
-                <div secondary>
-                  ${this.hass.localize(
-                    "ui.panel.config.updates.version_available",
-                    {
-                      version_available: update.version_latest,
-                    }
-                  )}
-                </div>
-              </paper-item-body>
-              ${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
-            </paper-icon-item>
-          </a>
+          <paper-icon-item>
+            <span slot="item-icon" class="icon">
+              ${update.update_type === "addon"
+                ? update.icon
+                  ? html`<img src="/api/hassio${update.icon}" />`
+                  : html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
+                : html`<ha-logo-svg></ha-logo-svg>`}
+            </span>
+            <paper-item-body two-line>
+              ${update.update_type === "addon"
+                ? update.name
+                : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
+              <div secondary>
+                ${this.hass.localize(
+                  "ui.panel.config.updates.version_available",
+                  {
+                    version_available: update.version_latest,
+                  }
+                )}
+              </div>
+            </paper-item-body>
+            <a href="/hassio${update.panel_path}">
+              <mwc-button
+                .label=${this.hass.localize("ui.panel.config.updates.show")}
+              >
+              </mwc-button>
+            </a>
+          </paper-icon-item>
         `
       )}
       ${!this._showAll && this.supervisorUpdates.length >= 4
         ? html`
-            <button class="show-more" @click=${this._showAllClicked}>
+            <button class="link show-all" @click=${this._showAllClicked}>
               ${this.hass.localize("ui.panel.config.updates.more_updates", {
                 count: this.supervisorUpdates!.length - updates.length,
               })}
@@ -93,6 +94,7 @@ class HaConfigUpdates extends LitElement {
 
   static get styles(): CSSResultGroup[] {
     return [
+      buttonLinkStyle,
       css`
         .title {
           font-size: 16px;
@@ -118,26 +120,10 @@ class HaConfigUpdates extends LitElement {
         ha-logo-svg {
           color: var(--secondary-text-color);
         }
-        ha-icon-next {
-          color: var(--secondary-text-color);
-          height: 24px;
-          width: 24px;
-        }
-        button.show-more {
+        button.show-all {
           color: var(--primary-color);
-          text-align: left;
-          cursor: pointer;
-          background: none;
-          border-width: initial;
-          border-style: none;
-          border-color: initial;
-          border-image: initial;
-          padding: 16px;
-          font: inherit;
-        }
-        button.show-more:focus {
-          outline: none;
-          text-decoration: underline;
+          text-decoration: none;
+          margin: 16px;
         }
       `,
     ];

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -23,15 +23,7 @@ export class HaDeviceCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        .header=${this.hass.localize(
-          "ui.panel.config.devices.device_info",
-          "type",
-          this.hass.localize(
-            `ui.panel.config.devices.type.${
-              this.device.entry_type || "device"
-            }_heading`
-          )
-        )}
+        .header=${this.hass.localize("ui.panel.config.devices.device_info")}
       >
         <div class="card-content">
           ${this.device.model
@@ -67,12 +59,7 @@ export class HaDeviceCard extends LitElement {
             ? html`
                 <div class="extra-info">
                   ${this.hass.localize(
-                    `ui.panel.config.integrations.config_entry.${
-                      this.device.entry_type === "service" &&
-                      !this.device.hw_version
-                        ? "version"
-                        : "firmware"
-                    }`,
+                    "ui.panel.config.integrations.config_entry.firmware",
                     "version",
                     this.device.sw_version
                   )}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -82,26 +82,12 @@ class DialogDeviceRegistryDetail extends LitElement {
               </ha-switch>
               <div>
                 <div>
-                  ${this.hass.localize(
-                    "ui.panel.config.devices.enabled_label",
-                    "type",
-                    this.hass.localize(
-                      `ui.panel.config.devices.type.${
-                        device.entry_type || "device"
-                      }`
-                    )
-                  )}
+                  ${this.hass.localize("ui.panel.config.devices.enabled_label")}
                 </div>
                 <div class="secondary">
                   ${this._disabledBy && this._disabledBy !== "user"
                     ? this.hass.localize(
                         "ui.panel.config.devices.enabled_cause",
-                        "type",
-                        this.hass.localize(
-                          `ui.panel.config.devices.type.${
-                            device.entry_type || "device"
-                          }`
-                        ),
                         "cause",
                         this.hass.localize(
                           `config_entry.disabled_by.${this._disabledBy}`

src/panels/config/devices/ha-config-device-page.ts

@@ -3,6 +3,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -89,10 +90,9 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _related?: RelatedResult;
 
-  // If a number, it's the request ID so we make sure we don't show older info
-  @state() private _diagnosticDownloadLinks?:
-    | number
-    | (TemplateResult | string)[];
+  @state() private _diagnosticDownloadLinks?: Promise<
+    (TemplateResult | string)[]
+  >;
 
   private _device = memoizeOne(
     (
@@ -196,18 +196,20 @@ export class HaConfigDevicePage extends LitElement {
       return;
     }
 
-    this._diagnosticDownloadLinks = Math.random();
-    this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
+    this._diagnosticDownloadLinks = this._renderDiagnosticButtons();
   }
 
-  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+  private async _renderDiagnosticButtons(): Promise<
+    (TemplateResult | string)[]
+  > {
+    const result: TemplateResult[] = [];
     const device = this._device(this.deviceId, this.devices);
 
     if (!device) {
-      return;
+      return result;
     }
 
-    let links = await Promise.all(
+    return Promise.all(
       this._integrations(device, this.entries)
         .filter((entry) => entry.state === "loaded")
         .map(async (entry) => {
@@ -230,13 +232,6 @@ export class HaConfigDevicePage extends LitElement {
           `;
         })
     );
-    if (this._diagnosticDownloadLinks !== requestId) {
-      return;
-    }
-    links = links.filter(Boolean);
-    if (links.length > 0) {
-      this._diagnosticDownloadLinks = links;
-    }
   }
 
   protected firstUpdated(changedProps) {
@@ -296,10 +291,6 @@ export class HaConfigDevicePage extends LitElement {
           <ha-alert alert-type="warning">
             ${this.hass.localize(
               "ui.panel.config.devices.enabled_cause",
-              "type",
-              this.hass.localize(
-                `ui.panel.config.devices.type.${device.entry_type || "device"}`
-              ),
               "cause",
               this.hass.localize(
                 `ui.panel.config.devices.disabled_by.${device.disabled_by}`
@@ -317,7 +308,7 @@ export class HaConfigDevicePage extends LitElement {
       );
     }
 
-    const deviceActions: (TemplateResult | string)[] = [];
+    const deviceActions: TemplateResult[] = [];
 
     if (configurationUrl) {
       deviceActions.push(html`
@@ -348,8 +339,8 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions
     );
 
-    if (Array.isArray(this._diagnosticDownloadLinks)) {
-      deviceActions.push(...this._diagnosticDownloadLinks);
+    if (this._diagnosticDownloadLinks) {
+      deviceActions.push(html`${until(this._diagnosticDownloadLinks)}`);
     }
 
     return html`
@@ -489,29 +480,17 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.automation.automations_heading"
+                          "ui.panel.config.devices.automation.automations"
                         )}
                         <ha-icon-button
                           @click=${this._showAutomationDialog}
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.automation.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.automation.create_disabled"
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.automation.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.automation.create"
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -563,12 +542,6 @@ export class HaConfigDevicePage extends LitElement {
                                 "name",
                                 this.hass.localize(
                                   "ui.panel.config.devices.automation.automations"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
                                 )
                               )}
                             </div>
@@ -583,7 +556,7 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.scene.scenes_heading"
+                          "ui.panel.config.devices.scene.scenes"
                         )}
 
                         <ha-icon-button
@@ -591,22 +564,10 @@ export class HaConfigDevicePage extends LitElement {
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.scene.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.scene.create_disabled"
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.scene.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.scene.create"
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -661,12 +622,6 @@ export class HaConfigDevicePage extends LitElement {
                                 "name",
                                 this.hass.localize(
                                   "ui.panel.config.devices.scene.scenes"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
                                 )
                               )}
                             </div>
@@ -681,29 +636,17 @@ export class HaConfigDevicePage extends LitElement {
                       <ha-card>
                         <h1 class="card-header">
                           ${this.hass.localize(
-                            "ui.panel.config.devices.script.scripts_heading"
+                            "ui.panel.config.devices.script.scripts"
                           )}
                           <ha-icon-button
                             @click=${this._showScriptDialog}
                             .disabled=${device.disabled_by}
                             .label=${device.disabled_by
                               ? this.hass.localize(
-                                  "ui.panel.config.devices.script.create_disabled",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
+                                  "ui.panel.config.devices.script.create_disabled"
                                 )
                               : this.hass.localize(
-                                  "ui.panel.config.devices.script.create",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
+                                  "ui.panel.config.devices.script.create"
                                 )}
                             .path=${mdiPlusCircle}
                           ></ha-icon-button>
@@ -737,12 +680,6 @@ export class HaConfigDevicePage extends LitElement {
                                   "name",
                                   this.hass.localize(
                                     "ui.panel.config.devices.script.scripts"
-                                  ),
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
                                   )
                                 )}
                               </div>
@@ -802,7 +739,7 @@ export class HaConfigDevicePage extends LitElement {
     device,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
-    deviceActions: (string | TemplateResult)[]
+    deviceActions: TemplateResult[]
   ): TemplateResult[] {
     const domains = integrations.map((int) => int.domain);
     const templates: TemplateResult[] = [];
@@ -1123,7 +1060,6 @@ export class HaConfigDevicePage extends LitElement {
           align-self: center;
           align-items: center;
           display: flex;
-          white-space: nowrap;
         }
 
         .column > *:not(:first-child) {

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

@@ -197,7 +197,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         ),
         model: device.model || "<unknown>",
         manufacturer: device.manufacturer || "<unknown>",
-        area: device.area_id ? areaLookup[device.area_id].name : "—",
+        area: device.area_id ? areaLookup[device.area_id].name : undefined,
         integration: device.config_entries.length
           ? device.config_entries
               .filter((entId) => entId in entryLookup)
@@ -320,7 +320,7 @@ export class HaConfigDeviceDashboard extends LitElement {
                   .batteryChargingStateObj=${batteryCharging}
                 ></ha-battery-icon>
               `
-            : html`—`;
+            : html` - `;
         },
       };
       if (showDisabled) {
@@ -338,7 +338,7 @@ export class HaConfigDeviceDashboard extends LitElement {
                     ${this.hass.localize("ui.panel.config.devices.disabled")}
                   </paper-tooltip>
                 </div>`
-              : "—",
+              : "",
         };
       }
       return columns;

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

@@ -73,7 +73,7 @@ class HaConfigEnergy extends LitElement {
         .narrow=${this.narrow}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
-          : "/config/lovelace/dashboards"}
+          : "/config"}
         .header=${this.hass.localize("ui.panel.config.energy.caption")}
       >
         <ha-alert>

src/panels/config/entities/entity-registry-settings.ts

@@ -42,7 +42,7 @@ import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
 
 const OVERRIDE_DEVICE_CLASSES = {
-  cover: ["window", "door", "garage", "gate"],
+  cover: ["window", "door", "garage"],
   binary_sensor: ["window", "door", "garage_door", "opening"],
 };
 

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

@@ -76,7 +76,7 @@ export interface StateEntity extends EntityRegistryEntry {
 }
 
 export interface EntityRow extends StateEntity {
-  entity?: HassEntity;
+  entity: HassEntity;
   unavailable: boolean;
   restored: boolean;
   status: string;
@@ -165,13 +165,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   );
 
   private _columns = memoize(
-    (narrow, _language, showDisabled): DataTableColumnContainer<EntityRow> => ({
+    (narrow, _language, showDisabled): DataTableColumnContainer => ({
       icon: {
         title: "",
         type: "icon",
-        template: (_, entry: EntityRow) => html`
+        template: (_, entry: any) => html`
           <ha-state-icon
-            .title=${entry.entity?.state}
             slot="item-icon"
             .state=${entry.entity}
           ></ha-state-icon>
@@ -186,7 +185,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         direction: "asc",
         grows: true,
         template: narrow
-          ? (name, entity: EntityRow) =>
+          ? (name, entity: any) =>
               html`
                 ${name}<br />
                 <div class="secondary">
@@ -237,9 +236,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         template: (disabled_by) =>
           this.hass.localize(
             `ui.panel.config.devices.disabled_by.${disabled_by}`
-          ) ||
-          disabled_by ||
-          "—",
+          ) || disabled_by,
       },
       status: {
         title: this.hass.localize(
@@ -249,7 +246,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         sortable: true,
         filterable: true,
         width: "68px",
-        template: (_status, entity: EntityRow) =>
+        template: (_status, entity: any) =>
           entity.unavailable || entity.disabled_by || entity.readonly
             ? html`
                 <div
@@ -287,7 +284,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                   </paper-tooltip>
                 </div>
               `
-            : "—",
+            : "",
       },
     })
   );
@@ -380,7 +377,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           name: computeEntityRegistryName(this.hass!, entry),
           unavailable,
           restored,
-          area: area ? area.name : "—",
+          area: area ? area.name : undefined,
           status: restored
             ? this.hass.localize(
                 "ui.panel.config.entities.picker.status.restored"

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

@@ -4,6 +4,7 @@ import {
   mdiCellphoneCog,
   mdiCog,
   mdiDevices,
+  mdiHammer,
   mdiHomeAssistant,
   mdiInformation,
   mdiLightningBolt,
@@ -32,7 +33,7 @@ import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
 import {
   fetchSupervisorAvailableUpdates,
   SupervisorAvailableUpdates,
-} from "../../data/supervisor/root";
+} from "../../data/supervisor/supervisor";
 import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -42,7 +43,6 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "ha-refresh-cloud-status": undefined;
-    "ha-refresh-supervisor": undefined;
   }
 }
 
@@ -73,7 +73,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/hassio",
       translationKey: "supervisor",
       iconPath: mdiHomeAssistant,
-      iconColor: "#4084CD",
+      iconColor: "#F1C447",
       component: "hassio",
     },
     {
@@ -83,6 +83,13 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#B1345C",
       component: "lovelace",
     },
+    {
+      path: "/config/energy",
+      translationKey: "energy",
+      iconPath: mdiLightningBolt,
+      iconColor: "#F1C447",
+      component: "energy",
+    },
     {
       path: "/config/tags",
       translationKey: "tags",
@@ -110,6 +117,12 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#4A5963",
       core: true,
     },
+    {
+      path: "/developer-tools",
+      translationKey: "developer_tools",
+      iconPath: mdiHammer,
+      iconColor: "#4084CD",
+    },
   ],
   devices: [
     {
@@ -194,7 +207,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#616161",
     },
   ],
-  // Not used as a tab, but this way it will stay in the quick bar
   energy: [
     {
       component: "energy",
@@ -447,9 +459,6 @@ class HaPanelConfig extends HassRouterPage {
     }
     if (isComponentLoaded(this.hass, "hassio")) {
       this._loadSupervisorUpdates();
-      this.addEventListener("ha-refresh-supervisor", () => {
-        this._loadSupervisorUpdates();
-      });
       this.addEventListener("connection-status", (ev) => {
         if (ev.detail === "connected") {
           this._loadSupervisorUpdates();

src/panels/config/info/integrations-card.ts

@@ -12,7 +12,6 @@ import {
 } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
-import { documentationUrl } from "../../../util/documentation-url";
 
 @customElement("integrations-card")
 class IntegrationsCard extends LitElement {
@@ -67,12 +66,7 @@ class IntegrationsCard extends LitElement {
                 const manifest = this._manifests && this._manifests[domain];
                 const docLink = manifest
                   ? html`<a
-                      href=${manifest.is_built_in
-                        ? documentationUrl(
-                            this.hass,
-                            `/integrations/${manifest.domain}`
-                          )
-                        : manifest.documentation}
+                      href=${manifest.documentation}
                       target="_blank"
                       rel="noreferrer"
                       >${this.hass.localize(

src/panels/config/integrations/ha-config-flow-card.ts

@@ -15,7 +15,6 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import type { HomeAssistant } from "../../../types";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import "./ha-integration-action-card";
-import { documentationUrl } from "../../../util/documentation-url";
 
 @customElement("ha-config-flow-card")
 export class HaConfigFlowCard extends LitElement {
@@ -83,12 +82,7 @@ export class HaConfigFlowCard extends LitElement {
             : ""}
           ${this.manifest
             ? html`<a
-                href=${this.manifest.is_built_in
-                  ? documentationUrl(
-                      this.hass,
-                      `/integrations/${this.manifest.domain}`
-                    )
-                  : this.manifest.documentation}
+                href=${this.manifest.documentation}
                 rel="noreferrer"
                 target="_blank"
               >