20220203.0 (#11533)

* Only upload wheels to PyPI (#11514)

* Make sure we load data in update card (#11516)

* Guard load diagnostics (#11518)

* Design home - Fix GitHub Links (#11519)

* Add filtering to system log card and error log card (#11166)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Handle unknown toggle state (#11522)

* Fix dialog heading aria label (#11524)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

* Use css to hide hint in quickbar (#11527)

* Revert "Mobile click accessibility" (#11526)

* Clear old src when disconnected so we can't fetch it with the wrong t… (#11528)

* Add name of integration to diagnostics when more than 1 (#11523)

* Bumped version to 20220203.0

Co-authored-by: Marc Mueller <30130371+cdce8p@users.noreply.github.com>
Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
Co-authored-by: fpro1212 <75439345+fpro1212@users.noreply.github.com>
Co-authored-by: Kuba Wolanin <hi@kubawolanin.com>
Co-authored-by: Zack Barett <arnett.zackary@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
+          python3 -m pip install twine build
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
 

MANIFEST.in

@@ -1,5 +1,4 @@
 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.py"), "utf8")
-      .match(/\d{8}\.\d+/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
+      .match(/version\W+=\W(\d{8}\.\d)/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[0];
+    return version[1];
   },
 };

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,6 +20,7 @@ module.exports = [
       "editor-trigger",
       "editor-condition",
       "editor-action",
+      "selectors",
       "trace",
       "trace-timeline",
     ],

gallery/src/ha-gallery.ts

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

gallery/src/pages/automation/selectors.markdown

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

gallery/src/pages/automation/selectors.ts

@@ -0,0 +1,102 @@
+/* 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;
+  }
+}

gallery/src/pages/concepts/home.markdown

@@ -17,7 +17,7 @@ We want to make it as easy for designers to contribute as it is for developers.
 
 - Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
-- Find the lates UX <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
+- Find the lates UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 
 
 ## Developers

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.hass.localize("common.menu")}
+                .label=${this.supervisor.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.hass.localize("common.menu")}
+            .label=${this.supervisor?.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 _params?: HassioBackupUploadDialogParams;
+  @state() private _dialogParams?: HassioBackupUploadDialogParams;
 
   public async showDialog(
-    params: HassioBackupUploadDialogParams
+    dialogParams: HassioBackupUploadDialogParams
   ): Promise<void> {
-    this._params = params;
+    this._dialogParams = dialogParams;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    if (this._params && !this._params.onboarding) {
-      if (this._params.reloadBackup) {
-        this._params.reloadBackup();
+    if (this._dialogParams && !this._dialogParams.onboarding) {
+      if (this._dialogParams.reloadBackup) {
+        this._dialogParams.reloadBackup();
       }
     }
-    this._params = undefined;
+    this._dialogParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._params) {
+    if (!this._dialogParams) {
       return html``;
     }
 
@@ -47,14 +47,20 @@ export class DialogHassioBackupUpload
         scrimClickAction
         escapeKeyAction
         hideActions
-        .heading=${true}
+        .heading=${this.hass?.localize(
+          "ui.panel.page-onboarding.restore.upload_backup"
+        ) || "Upload backup"}
         @closed=${this.closeDialog}
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> Upload backup </span>
+            <span slot="title"
+              >${this.hass?.localize(
+                "ui.panel.page-onboarding.restore.upload_backup"
+              ) || "Upload backup"}</span
+            >
             <ha-icon-button
-              .label=${this.hass?.localize("common.close") || "close"}
+              .label=${this.hass?.localize("ui.common.close") || "Close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -71,7 +77,7 @@ export class DialogHassioBackupUpload
 
   private _backupUploaded(ev) {
     const backup = ev.detail.backup;
-    this._params?.showBackup(backup.slug);
+    this._dialogParams?.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(params: HassioBackupDialogParams) {
-    this._backup = await fetchHassioBackupInfo(this.hass, params.slug);
-    this._dialogParams = params;
+  public async showDialog(dialogParams: HassioBackupDialogParams) {
+    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
+    this._dialogParams = dialogParams;
     this._restoringBackup = false;
   }
 
@@ -71,13 +71,13 @@ class HassioBackupDialog
         open
         scrimClickAction
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._backup.name}
       >
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
             <ha-icon-button
-              .label=${this.hass?.localize("common.close") || "close"}
+              .label=${this.hass?.localize("ui.common.close") || "Close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -114,12 +114,20 @@ class HassioBackupDialog
               @closed=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this.hass!.localize("common.menu")}
+                .label=${this.hass!.localize("ui.common.menu") || "Menu"}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
-              <mwc-list-item>Download Backup</mwc-list-item>
-              <mwc-list-item class="error">Delete Backup</mwc-list-item>
+              <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
+              >
             </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(params: HassioCreateBackupDialogParams) {
-    this._dialogParams = params;
+  public showDialog(dialogParams: HassioCreateBackupDialogParams) {
+    this._dialogParams = dialogParams;
     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(params: HassioHardwareDialogParams) {
-    this._dialogParams = params;
+  public showDialog(dialogParams: HassioHardwareDialogParams) {
+    this._dialogParams = dialogParams;
   }
 
   public closeDialog() {
@@ -65,14 +65,16 @@ class HassioHardwareDialog extends LitElement {
         scrimClickAction
         hideActions
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._dialogParams.supervisor.localize(
+          "dialog.hardware.title"
+        )}
       >
         <div class="header" slot="heading">
           <h2>
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
           <ha-icon-button
-            .label=${this.hass.localize("common.close")}
+            .label=${this._dialogParams.supervisor.localize("common.close")}
             .path=${mdiClose}
             dialogAction="close"
           ></ha-icon-button>

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

@@ -94,7 +94,7 @@ export class DialogHassioNetwork
         open
         scrimClickAction
         escapeKeyAction
-        .heading=${true}
+        .heading=${this.supervisor.localize("dialog.network.title")}
         hideActions
         @closed=${this.closeDialog}
       >
@@ -104,7 +104,7 @@ export class DialogHassioNetwork
               ${this.supervisor.localize("dialog.network.title")}
             </span>
             <ha-icon-button
-              .label=${this.hass.localize("common.close")}
+              .label=${this.supervisor.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.hass.localize("common.menu")}
+              .label=${this.supervisor.localize("common.menu")}
               .path=${mdiDotsVertical}
               slot="trigger"
             ></ha-icon-button>

hassio/src/update-available/update-available-card.ts

@@ -33,8 +33,12 @@ import {
   extractApiErrorMessage,
   ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
-import { updateOS } from "../../../src/data/hassio/host";
-import { updateSupervisor } from "../../../src/data/hassio/supervisor";
+import { fetchHassioHassOsInfo, updateOS } from "../../../src/data/hassio/host";
+import {
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  updateSupervisor,
+} from "../../../src/data/hassio/supervisor";
 import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -212,11 +216,22 @@ class UpdateAvailableCard extends LitElement {
       : "addon";
     this._updateType = updateType as updateType;
 
-    if (updateType === "addon") {
-      if (!this.addonSlug) {
-        this.addonSlug = pathPart;
-      }
-      this._loadAddonData();
+    switch (updateType) {
+      case "addon":
+        if (!this.addonSlug) {
+          this.addonSlug = pathPart;
+        }
+        this._loadAddonData();
+        break;
+      case "core":
+        this._loadCoreData();
+        break;
+      case "supervisor":
+        this._loadSupervisorData();
+        break;
+      case "os":
+        this._loadOsData();
+        break;
     }
   }
 
@@ -308,6 +323,42 @@ class UpdateAvailableCard extends LitElement {
     }
   }
 
+  private async _loadSupervisorData() {
+    try {
+      const supervisor = await fetchHassioSupervisorInfo(this.hass);
+      fireEvent(this, "supervisor-update", { supervisor });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadCoreData() {
+    try {
+      const core = await fetchHassioHomeAssistantInfo(this.hass);
+      fireEvent(this, "supervisor-update", { core });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadOsData() {
+    try {
+      const os = await fetchHassioHassOsInfo(this.hass);
+      fireEvent(this, "supervisor-update", { os });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
   private async _update() {
     this._error = undefined;
     this._updating = true;

package.json

@@ -110,7 +110,7 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.2",
+    "lit": "^2.1.2",
     "lit-vaadin-helpers": "^0.2.1",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
@@ -168,6 +168,7 @@
     "@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",
@@ -235,10 +236,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.0.2",
-    "lit-html": "2.0.1",
-    "lit-element": "3.0.1",
-    "@lit/reactive-element": "1.0.1"
+    "lit": "^2.1.2",
+    "lit-html": "2.1.2",
+    "lit-element": "3.1.2",
+    "@lit/reactive-element": "1.2.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

pyproject.toml

@@ -0,0 +1,3 @@
+[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
-python3 setup.py -q sdist
-python3 -m twine upload dist/* --skip-existing
+rm -rf dist home_assistant_frontend.egg-info
+python3 -m build
+python3 -m twine upload dist/*.whl --skip-existing

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("setup.py", "utf8");
+  const setup = fs.readFileSync("setup.cfg", "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.py", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -0,0 +1,21 @@
+[metadata]
+name         = home-assistant-frontend
+version      = 20220203.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,14 +1,7 @@
-from setuptools import setup, find_packages
+"""
+Entry point for setuptools. Required for editable installs.
+TODO: Remove file after updating to pip 21.3
+"""
+from setuptools import 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,
-)
+setup()

src/common/const.ts

@@ -184,6 +184,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "person",
   "remote",
   "script",
+  "scene",
   "sun",
   "timer",
   "vacuum",
@@ -234,7 +235,7 @@ export const DOMAINS_INPUT_ROW = [
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */
-export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
 
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];

src/common/datetime/format_date_time.ts

@@ -13,14 +13,19 @@ export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(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 === "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),
+      }
+    )
 );
 
 // August 9, 2021, 8:23:15 AM
@@ -31,15 +36,20 @@ export const formatDateTimeWithSeconds = (
 
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    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),
-    })
+    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),
+      }
+    )
 );
 
 // 9/8/2021, 8:23 AM
@@ -50,12 +60,17 @@ export const formatDateTimeNumeric = (
 
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(locale.language, {
-      year: "numeric",
-      month: "numeric",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: useAmPm(locale),
-    })
+    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),
+      }
+    )
 );

src/common/datetime/format_time.ts

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

src/common/decorators/local-storage.ts

@@ -5,7 +5,10 @@ import type { ClassElement } from "../../types";
 type Callback = (oldValue: any, newValue: any) => void;
 
 class Storage {
-  constructor() {
+  constructor(subscribe = true) {
+    if (!subscribe) {
+      return;
+    }
     window.addEventListener("storage", (ev: StorageEvent) => {
       if (ev.key && this.hasKey(ev.key)) {
         this._storage[ev.key] = ev.newValue
@@ -80,15 +83,18 @@ class Storage {
   }
 }
 
-const storage = new Storage();
+const subscribeStorage = 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
@@ -97,7 +103,7 @@ export const LocalStorage =
 
     storage.addFromStorage(storageKey);
 
-    const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
+    const subscribeChanges = (el: ReactiveElement): UnsubscribeFunc =>
       storage.subscribeChanges(storageKey!, (oldValue) => {
         el.requestUpdate(clsElement.key, oldValue);
       });
@@ -131,17 +137,19 @@ export const LocalStorage =
         configurable: true,
       },
       finisher(cls: typeof ReactiveElement) {
-        if (property) {
+        if (property && subscribe) {
           const connectedCallback = cls.prototype.connectedCallback;
           const disconnectedCallback = cls.prototype.disconnectedCallback;
           cls.prototype.connectedCallback = function () {
             connectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`] = subscribe(this);
+            this[`__unbsubLocalStorage${key}`] = subscribeChanges(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 explict state to `Date` then format.
+      // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
       // Attributes aren't available, we have to use `state`.
       try {
         const components = state.split(" ");
@@ -120,6 +120,7 @@ export const computeStateDisplay = (
   if (
     domain === "button" ||
     domain === "input_button" ||
+    domain === "scene" ||
     (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
   ) {
     return formatDateTime(new Date(compareState), locale);

src/common/number/clamp.ts

@@ -1,2 +1,10 @@
 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);
 
-  // Everytime any of the parameters change, invalidate the strings cache.
+  // Every time any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 
   return (key, ...args) => {

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

@@ -68,6 +68,7 @@ export class HaProgressButton extends LitElement {
         --mdc-theme-primary: white;
         background-color: var(--success-color);
         transition: none;
+        border-radius: 4px;
       }
 
       mwc-button[raised].success {
@@ -79,6 +80,7 @@ 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,12 +183,7 @@ class StateHistoryChartLine extends LitElement {
         prevValues = datavalues;
       };
 
-      const addDataSet = (
-        nameY: string,
-        step = false,
-        fill = false,
-        color?: string
-      ) => {
+      const addDataSet = (nameY: string, fill = false, color?: string) => {
         if (!color) {
           color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
@@ -198,7 +193,7 @@ class StateHistoryChartLine extends LitElement {
           fill: fill ? "origin" : false,
           borderColor: color,
           backgroundColor: color + "7F",
-          stepped: step ? "before" : false,
+          stepped: "before",
           pointRadius: 0,
           data: [],
         });
@@ -239,14 +234,12 @@ 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
@@ -256,7 +249,6 @@ 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
@@ -268,22 +260,19 @@ 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
+            })}`
           );
         }
 
@@ -318,14 +307,12 @@ 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
         );
 
@@ -337,9 +324,7 @@ class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        // Only interpolate for sensors
-        const isStep = domain !== "sensor";
-        addDataSet(name, isStep);
+        addDataSet(name);
 
         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-entity-toggle.ts

@@ -12,7 +12,7 @@ import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -39,21 +39,26 @@ export class HaEntityToggle extends LitElement {
       return html` <ha-switch disabled></ha-switch> `;
     }
 
-    if (this.stateObj.attributes.assumed_state) {
+    if (
+      this.stateObj.attributes.assumed_state ||
+      this.stateObj.state === UNKNOWN
+    ) {
       return html`
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} off`}
           .path=${mdiFlashOff}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
-          ?state-active=${!this._isOn}
+          class=${!this._isOn && this.stateObj.state !== UNKNOWN
+            ? "state-active"
+            : ""}
         ></ha-icon-button>
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} on`}
           .path=${mdiFlash}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
-          ?state-active=${this._isOn}
+          class=${this._isOn ? "state-active" : ""}
         ></ha-icon-button>
       `;
     }
@@ -63,7 +68,7 @@ export class HaEntityToggle extends LitElement {
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
-      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      .disabled=${this.stateObj.state === UNAVAILABLE}
       @change=${this._toggleChanged}
     ></ha-switch>`;
 
@@ -156,10 +161,11 @@ export class HaEntityToggle extends LitElement {
         min-width: 38px;
       }
       ha-icon-button {
+        --mdc-icon-button-size: 40px;
         color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
         transition: color 0.5s;
       }
-      ha-icon-button[state-active] {
+      ha-icon-button.state-active {
         color: var(--ha-icon-button-active-color, var(--primary-color));
       }
       ha-switch {

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

@@ -1,141 +0,0 @@
-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

@@ -0,0 +1,138 @@
+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,6 +1,5 @@
 import "@material/mwc-textfield";
 import type { TextField } from "@material/mwc-textfield";
-import "@material/mwc-slider";
 import type { Slider } from "@material/mwc-slider";
 import {
   css,
@@ -14,6 +13,7 @@ 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,15 +54,16 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   ></ha-checkbox>
                 `
               : ""}
-            <mwc-slider
-              discrete
+            <ha-slider
+              pin
+              ignore-bar-touch
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
               (this.data === undefined && this.schema.optional)}
               @change=${this._valueChanged}
-            ></mwc-slider>
+            ></ha-slider>
           </div>
         </div>
       `;
@@ -168,7 +169,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
-      mwc-slider {
+      ha-slider {
         flex: 1;
       }
       mwc-textfield {

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

@@ -68,7 +68,6 @@ 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: auto;
+        overflow: clip visible;
       }
       .root > * {
         display: block;

src/components/ha-gauge.ts

@@ -1,16 +1,10 @@
 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);
@@ -65,12 +59,12 @@ export class Gauge extends LitElement {
 
   protected render() {
     return svg`
-      <svg viewBox="0 0 100 50" class="gauge">
+      <svg viewBox="-50 -50 100 50" class="gauge">
         ${
           !this.needle || !this.levels
             ? svg`<path
           class="dial"
-          d="M 10 50 A 40 40 0 0 1 90 50"
+          d="M -40 0 A 40 40 0 0 1 40 0"
         ></path>`
             : ""
         }
@@ -87,9 +81,9 @@ export class Gauge extends LitElement {
                         stroke="var(--info-color)"
                         class="level"
                         d="M
-                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
-                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
-                         A 40 40 0 0 1 90 50
+                          ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
+                         A 40 40 0 0 1 40 0
                         "
                       ></path>`;
                   }
@@ -98,9 +92,9 @@ export class Gauge extends LitElement {
                       stroke="${level.stroke}"
                       class="level"
                       d="M
-                        ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
-                        ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
-                       A 40 40 0 0 1 90 50
+                        ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
+                        ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
+                       A 40 40 0 0 1 40 0
                       "
                     ></path>`;
                 })
@@ -110,46 +104,16 @@ export class Gauge extends LitElement {
           this.needle
             ? svg`<path
                 class="needle"
-                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
-                )}
+                d="M -25 -2.5 L -47.5 0 L -25 2.5 z"
+                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
               >
               `
             : svg`<path
                 class="value"
-                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
-                )}
+                d="M -40 0 A 40 40 0 1 0 40 0"
+                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
               >`
         }
-        ${
-          // 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">
@@ -187,12 +151,10 @@ 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,7 +9,6 @@ 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";
 
@@ -91,18 +90,9 @@ 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"))
@@ -126,7 +116,8 @@ class HaHLSPlayer extends LitElement {
       return;
     }
 
-    const useExoPlayer = await useExoPlayerPromise;
+    const useExoPlayer =
+      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
     if (!this.isConnected) {

src/components/ha-service-control.ts

@@ -17,6 +17,7 @@ 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";
@@ -130,6 +131,33 @@ 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) {
@@ -203,7 +231,12 @@ export class HaServiceControl extends LitElement {
         <p>${serviceData?.description}</p>
         ${this._manifest
           ? html` <a
-              href=${this._manifest.documentation}
+              href=${this._manifest.is_built_in
+                ? documentationUrl(
+                    this.hass,
+                    `/integrations/${this._manifest.domain}`
+                  )
+                : this._manifest.documentation}
               title=${this.hass.localize(
                 "ui.components.service-control.integration_doc"
               )}

src/components/ha-sidebar.ts

@@ -8,6 +8,7 @@ import {
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
+  mdiHammer,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -43,10 +44,6 @@ 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";
@@ -56,7 +53,7 @@ import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config"];
+const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -65,12 +62,14 @@ 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,
@@ -189,8 +188,6 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  @state() private _externalConfig?: ExternalConfig;
-
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -267,13 +264,6 @@ 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;
     });
@@ -556,8 +546,7 @@ class HaSidebar extends LitElement {
 
   private _renderExternalConfiguration() {
     return html`${!this.hass.user?.is_admin &&
-    this._externalConfig &&
-    this._externalConfig.hasSettingsScreen
+    this.hass.auth.external?.config.hasSettingsScreen
       ? html`
           <a
             role="option"
@@ -1030,6 +1019,19 @@ 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,7 +12,10 @@ export class HaSvgIcon extends LitElement {
     <svg
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
-      focusable="false">
+      focusable="false"
+      role="img" 
+      aria-hidden="true"
+    >
       <g>
       ${this.path ? svg`<path d=${this.path}></path>` : ""}
       </g>

src/components/ha-textfield.ts

@@ -0,0 +1,25 @@
+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,6 +60,7 @@ 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,9 +1,13 @@
+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";
@@ -16,6 +20,8 @@ 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;
@@ -33,11 +39,12 @@ 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) {
+    if (!this._params || !this._navigateIds) {
       return html``;
     }
 
@@ -48,8 +55,40 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
+        .heading=${!this._currentItem
+          ? this.hass.localize(
+              "ui.components.media-browser.media-player-browser"
+            )
+          : this._currentItem.title}
         @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}
@@ -64,8 +103,14 @@ class DialogMediaPlayerBrowse extends LitElement {
     `;
   }
 
-  private _mediaBrowsed(ev) {
+  private _goBack() {
+    this._navigateIds = this._navigateIds?.slice(0, -1);
+    this._currentItem = undefined;
+  }
+
+  private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
     this._navigateIds = ev.detail.ids;
+    this._currentItem = ev.detail.current;
   }
 
   private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
@@ -89,7 +134,7 @@ class DialogMediaPlayerBrowse extends LitElement {
         }
 
         ha-media-player-browse {
-          --media-browser-max-height: 100vh;
+          --media-browser-max-height: calc(100vh - 65px);
         }
 
         @media (min-width: 800px) {
@@ -101,10 +146,17 @@ class DialogMediaPlayerBrowse extends LitElement {
           }
           ha-media-player-browse {
             position: initial;
-            --media-browser-max-height: 100vh - 72px;
+            --media-browser-max-height: 100vh - 137px;
             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,6 +17,7 @@ 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,6 +17,7 @@ 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,6 +150,7 @@ 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,11 +51,13 @@ 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,18 +104,19 @@ export const localizeConfigFlowTitle = (
   localize: LocalizeFunc,
   flow: DataEntryFlowProgress
 ) => {
-  const placeholders = flow.context.title_placeholders || {};
-  const placeholderKeys = Object.keys(placeholders);
-  if (placeholderKeys.length === 0) {
+  if (
+    !flow.context.title_placeholders ||
+    Object.keys(flow.context.title_placeholders).length === 0
+  ) {
     return 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);
+  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))
+  );
 };

src/data/device_registry.ts

@@ -1,5 +1,6 @@
 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";
@@ -54,7 +55,13 @@ export const computeDeviceName = (
   device.name_by_user ||
   device.name ||
   (entities && fallbackDeviceName(hass, entities)) ||
-  hass.localize("ui.panel.config.devices.unnamed_device");
+  hass.localize(
+    "ui.panel.config.devices.unnamed_device",
+    "type",
+    hass.localize(
+      `ui.panel.config.devices.type.${device.entry_type || "device"}`
+    )
+  );
 
 export const devicesInArea = (devices: DeviceRegistryEntry[], areaId: string) =>
   devices.filter((device) => device.area_id === areaId);
@@ -99,3 +106,8 @@ export const subscribeDeviceRegistry = (
     conn,
     onChange
   );
+
+export const sortDeviceRegistryByName = (entries: DeviceRegistryEntry[]) =>
+  entries.sort((entry1, entry2) =>
+    caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
+  );

src/data/entity_attributes.ts

@@ -0,0 +1,105 @@
+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,6 +1,7 @@
 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";
 
@@ -133,3 +134,8 @@ 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,3 +8,6 @@ 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?: string;
+  layout?: "grid";
   show_list_images?: boolean;
 };
 
@@ -185,15 +185,6 @@ 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!;
 
@@ -321,8 +312,8 @@ export const computeMediaControls = (
   return buttons.length > 0 ? buttons : undefined;
 };
 
-export const formatMediaTime = (seconds: number): string => {
-  if (!seconds) {
+export const formatMediaTime = (seconds: number | undefined): string => {
+  if (seconds === undefined) {
     return "";
   }
 
@@ -333,3 +324,12 @@ export const formatMediaTime = (seconds: number): 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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,58 @@
+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,42 +70,6 @@ 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
@@ -118,7 +82,7 @@ async function processEvent(
   event: SupervisorEvent,
   key: string
 ) {
-  if (event.event !== "supervisor-update" || event.update_key !== key) {
+  if (event.event !== "supervisor_update" || event.update_key !== key) {
     return;
   }
 
@@ -175,14 +139,3 @@ 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,3 +436,19 @@ 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,15 +116,14 @@ class DataEntryFlowDialog extends LitElement {
           params.continueFlowId
         );
       } catch (err: any) {
-        this._step = undefined;
-        this._params = undefined;
+        this.closeDialog();
         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;
       }
@@ -177,6 +176,7 @@ class DataEntryFlowDialog extends LitElement {
       });
     }
 
+    this._loading = undefined;
     this._step = undefined;
     this._params = undefined;
     this._devices = undefined;
@@ -372,15 +372,14 @@ class DataEntryFlowDialog extends LitElement {
       try {
         step = await this._params!.flowConfig.createFlow(this.hass, handler);
       } catch (err: any) {
-        this._step = undefined;
-        this._params = undefined;
+        this.closeDialog();
         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 {
@@ -405,6 +404,15 @@ 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,6 +26,7 @@ interface ShowDialogParams<T> {
   dialogTag: keyof HTMLElementTagNameMap;
   dialogImport: () => Promise<unknown>;
   dialogParams: T;
+  addHistory?: boolean;
 }
 
 export interface DialogClosedParams {
@@ -124,8 +125,15 @@ export const makeDialogManager = (
   element.addEventListener(
     "show-dialog",
     (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
-      const { dialogTag, dialogImport, dialogParams } = e.detail;
-      showDialog(element, root, dialogTag, dialogParams, dialogImport);
+      const { dialogTag, dialogImport, dialogParams, addHistory } = e.detail;
+      showDialog(
+        element,
+        root,
+        dialogTag,
+        dialogParams,
+        dialogImport,
+        addHistory
+      );
     }
   );
 };

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

@@ -103,8 +103,9 @@ class MoreInfoClimate extends LitElement {
             stateObj.attributes.temperature !== null
               ? html`
                   <ha-climate-control
+                    .hass=${this.hass}
                     .value=${stateObj.attributes.temperature}
-                    .units=${hass.config.unit_system.temperature}
+                    .unit=${hass.config.unit_system.temperature}
                     .step=${temperatureStepSize}
                     .min=${stateObj.attributes.min_temp}
                     .max=${stateObj.attributes.max_temp}
@@ -118,8 +119,9 @@ class MoreInfoClimate extends LitElement {
               stateObj.attributes.target_temp_high !== null)
               ? html`
                   <ha-climate-control
+                    .hass=${this.hass}
                     .value=${stateObj.attributes.target_temp_low}
-                    .units=${hass.config.unit_system.temperature}
+                    .unit=${hass.config.unit_system.temperature}
                     .step=${temperatureStepSize}
                     .min=${stateObj.attributes.min_temp}
                     .max=${stateObj.attributes.target_temp_high}
@@ -127,8 +129,9 @@ class MoreInfoClimate extends LitElement {
                     @change=${this._targetTemperatureLowChanged}
                   ></ha-climate-control>
                   <ha-climate-control
+                    .hass=${this.hass}
                     .value=${stateObj.attributes.target_temp_high}
-                    .units=${hass.config.unit_system.temperature}
+                    .unit=${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,7 +33,11 @@ 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 } from "../../../data/weather";
+import {
+  getWeatherUnit,
+  getWind,
+  isForecastHourly,
+} from "../../../data/weather";
 import { HomeAssistant } from "../../../types";
 
 const weatherIcons = {
@@ -82,6 +86,8 @@ 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>
@@ -169,48 +175,49 @@ class MoreInfoWeather extends LitElement {
             <div class="section">
               ${this.hass.localize("ui.card.weather.forecast")}:
             </div>
-            ${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")}`
+            ${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>
+                        `
                       : ""}
-                  </div>
-                </div>
-              `
+                    ${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>`
+                : ""
             )}
           `
         : ""}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -105,7 +105,7 @@ export class MoreInfoDialog extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${name}
         hideActions
         data-domain=${domain}
       >

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

@@ -1,3 +1,4 @@
+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";
@@ -33,7 +34,6 @@ 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,7 +95,11 @@ export class QuickBar extends LitElement {
 
   @state() private _done = false;
 
-  @query("paper-input", false) private _filterInputField?: HTMLElement;
+  @state() private _narrow = false;
+
+  @state() private _hint?: string;
+
+  @query("ha-textfield", false) private _filterInputField?: HTMLElement;
 
   private _focusSet = false;
 
@@ -103,6 +107,10 @@ 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;
   }
@@ -131,69 +139,99 @@ export class QuickBar extends LitElement {
 
     return html`
       <ha-dialog
-        .heading=${true}
+        .heading=${this.hass.localize("ui.dialogs.quick-bar.title")}
         open
         @opened=${this._handleOpened}
         @closed=${this.closeDialog}
         hideActions
       >
-        <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>
+        <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>
         ${!items
           ? html`<ha-circular-progress
               size="small"
               active
             ></ha-circular-progress>`
-          : 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>`}
+          : 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._hint ? html`<div class="hint">${this._hint}</div>` : ""}
       </ha-dialog>
     `;
   }
@@ -337,15 +375,29 @@ export class QuickBar extends LitElement {
   }
 
   private _handleSearchChange(ev: CustomEvent): void {
-    const newFilter = ev.detail.value;
+    const newFilter = (ev.currentTarget as any).value;
     const oldCommandMode = this._commandMode;
+    const oldSearch = this._search;
+    let newCommandMode: boolean;
+    let newSearch: string;
 
     if (newFilter.startsWith(">")) {
-      this._commandMode = true;
-      this._search = newFilter.substring(1);
+      newCommandMode = true;
+      newSearch = newFilter.substring(1);
     } else {
-      this._commandMode = false;
-      this._search = newFilter;
+      newCommandMode = false;
+      newSearch = newFilter;
+    }
+
+    if (oldCommandMode === newCommandMode && oldSearch === newSearch) {
+      return;
+    }
+
+    this._commandMode = newCommandMode;
+    this._search = newSearch;
+
+    if (this._hint) {
+      this._hint = undefined;
     }
 
     if (oldCommandMode !== this._commandMode) {
@@ -539,21 +591,27 @@ export class QuickBar extends LitElement {
 
     for (const sectionKey of Object.keys(configSections)) {
       for (const page of configSections[sectionKey]) {
-        if (canShowPage(this.hass, page)) {
-          if (page.component) {
-            const info = this._getNavigationInfoFromConfig(page);
-
-            // 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);
-            }
-          }
+        if (!canShowPage(this.hass, page)) {
+          continue;
         }
+        if (!page.component) {
+          continue;
+        }
+        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 (
+          items.some(
+            (e) => e.path === info.path && e.component === info.component
+          )
+        ) {
+          continue;
+        }
+
+        items.push(info);
       }
     }
 
@@ -563,14 +621,15 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    if (page.component) {
-      const caption = this.hass.localize(
-        `ui.dialogs.quick-bar.commands.navigation.${page.component}`
-      );
+    if (!page.component) {
+      return undefined;
+    }
+    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;
@@ -627,7 +686,13 @@ export class QuickBar extends LitElement {
       haStyleDialog,
       css`
         .heading {
-          padding: 8px 20px 0px;
+          display: flex;
+          align-items: center;
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+
+        .heading ha-textfield {
+          flex-grow: 1;
         }
 
         ha-dialog {
@@ -645,17 +710,28 @@ export class QuickBar extends LitElement {
           }
         }
 
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-textfield {
+            --mdc-shape-small: 0;
+          }
+        }
+
+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          .hint {
+            display: none;
+          }
+        }
+
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;
         }
 
         ha-svg-icon.prefix {
-          margin: 8px;
           color: var(--primary-text-color);
         }
 
-        paper-input ha-icon-button {
+        ha-textfield ha-icon-button {
           --mdc-icon-button-size: 24px;
           color: var(--primary-text-color);
         }
@@ -688,6 +764,22 @@ 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,6 +3,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 export interface QuickBarParams {
   entityFilter?: string;
   commandMode?: boolean;
+  hint?: string;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");
@@ -15,5 +16,6 @@ export const showQuickBar = (
     dialogTag: "ha-quick-bar",
     dialogImport: loadQuickBar,
     dialogParams,
+    addHistory: false,
   });
 };

src/entrypoints/app.ts

@@ -5,5 +5,3 @@ import "../resources/roboto";
 import "../util/legacy-support";
 
 setPassiveTouchGestures(true);
-
-(window as any).frontendVersion = __VERSION__;

src/entrypoints/core.ts

@@ -29,6 +29,7 @@ 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/external_app/external_app_entrypoint.ts

@@ -0,0 +1,52 @@
+/*
+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 = (hassUrl: string) => {
+export const createExternalAuth = async (hassUrl: string) => {
   const auth = new ExternalAuth(hassUrl);
   if (
     (window.externalApp && window.externalApp.externalBus) ||
     (window.webkit && window.webkit.messageHandlers.externalBus)
   ) {
     auth.external = new ExternalMessaging();
-    auth.external.attach();
+    await auth.external.attach();
   }
   return auth;
 };

src/external_app/external_config.ts

@@ -1,18 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,9 +1,3 @@
-import { Connection } from "home-assistant-js-websocket";
-import {
-  externalForwardConnectionEvents,
-  externalForwardHaptics,
-} from "./external_events_forwarder";
-
 const CALLBACK_EXTERNAL_BUS = "externalBus";
 
 interface CommandInFlight {
@@ -42,24 +36,54 @@ interface EMExternalMessageRestart {
   command: "restart";
 }
 
+interface EMExternMessageShowNotifications {
+  id: number;
+  type: "command";
+  command: "notifications/show";
+}
+
+export type EMExternalMessageCommands =
+  | EMExternalMessageRestart
+  | EMExternMessageShowNotifications;
+
 type ExternalMessage =
   | EMMessageResultSuccess
   | EMMessageResultError
-  | EMExternalMessageRestart;
+  | EMExternalMessageCommands;
+
+type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
+
+export interface ExternalConfig {
+  hasSettingsScreen: boolean;
+  hasSidebar: boolean;
+  canWriteTag: boolean;
+  hasExoPlayer: boolean;
+}
 
 export class ExternalMessaging {
+  public config!: ExternalConfig;
+
   public commands: { [msgId: number]: CommandInFlight } = {};
 
-  public connection?: Connection;
-
-  public cache: Record<string, any> = {};
-
   public msgId = 0;
 
-  public attach() {
-    externalForwardConnectionEvents(this);
-    externalForwardHaptics(this);
+  private _commandHandler?: ExternalMessageHandler;
+
+  public async attach() {
     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;
   }
 
   /**
@@ -97,36 +121,25 @@ export class ExternalMessaging {
     }
 
     if (msg.type === "command") {
-      if (!this.connection) {
+      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}`;
+        }
         // eslint-disable-next-line no-console
-        console.warn("Received command without having connection set", msg);
+        console.warn(message, msg);
         this.fireMessage({
           id: msg.id,
           type: "result",
           success: false,
           error: {
-            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}`,
+            code,
+            message,
           },
         });
       }

src/html/_style_base.html.template

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

src/layouts/home-assistant-main.ts

@@ -38,7 +38,7 @@ interface EditSideBarEvent {
 }
 
 @customElement("home-assistant-main")
-class HomeAssistantMain extends LitElement {
+export class HomeAssistantMain extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public route?: Route;
@@ -47,6 +47,8 @@ class HomeAssistantMain extends LitElement {
 
   @state() private _sidebarEditMode = false;
 
+  @state() private _externalSidebar = false;
+
   constructor() {
     super();
     listenMediaQuery("(max-width: 870px)", (matches) => {
@@ -56,11 +58,12 @@ class HomeAssistantMain extends LitElement {
 
   protected render(): TemplateResult {
     const hass = this.hass;
-    const sidebarNarrow = this._sidebarNarrow;
+    const sidebarNarrow = this._sidebarNarrow || this._externalSidebar;
     const disableSwipe =
       this._sidebarEditMode ||
       !sidebarNarrow ||
-      NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
+      NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1 ||
+      this._externalSidebar;
 
     // Style block in render because of the mixin that is not supported
     return html`
@@ -107,6 +110,14 @@ 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>) => {
@@ -129,6 +140,12 @@ 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,13 +1,17 @@
 import "@material/mwc-button";
+import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { mdiImagePlus, mdiPencil } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket/dist/types";
 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";
@@ -17,14 +21,19 @@ 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";
@@ -35,11 +44,11 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-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";
+
+declare type NameAndEntity<EntityType extends HassEntity> = {
+  name: string;
+  entity: EntityType;
+};
 
 @customElement("ha-config-area-page")
 class HaConfigAreaPage extends LitElement {
@@ -136,10 +145,59 @@ class HaConfigAreaPage extends LitElement {
       this.entities
     );
 
-    const grouped = groupBy(entities, (entity) =>
+    // 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) =>
       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}
@@ -208,9 +266,7 @@ class HaConfigAreaPage extends LitElement {
                       html`
                         <a href="/config/devices/device/${device.id}">
                           <paper-item>
-                            <paper-item-body>
-                              ${computeDeviceName(device, this.hass)}
-                            </paper-item-body>
+                            <paper-item-body> ${device.name} </paper-item-body>
                             <ha-icon-next></ha-icon-next>
                           </paper-item>
                         </a>
@@ -240,9 +296,7 @@ class HaConfigAreaPage extends LitElement {
                             @click=${this._openEntity}
                             .entity=${entity}
                           >
-                            <paper-item-body>
-                              ${computeEntityRegistryName(this.hass, entity)}
-                            </paper-item-body>
+                            <paper-item-body> ${entity.name} </paper-item-body>
                             <ha-icon-next></ha-icon-next>
                           </paper-item>
                         `
@@ -261,46 +315,36 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.automation.automations"
+                      "ui.panel.config.devices.automation.automations_heading"
                     )}
                   >
-                    ${grouped.automation?.length
+                    ${groupedAutomations?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${grouped.automation.map((entity) => {
-                            const entityState = this.hass.states[
-                              entity.entity_id
-                            ] as AutomationEntity | undefined;
-                            return entityState
-                              ? this._renderAutomation(entityState)
-                              : "";
-                          })}`
+                          ${groupedAutomations.map((automation) =>
+                            this._renderAutomation(
+                              automation.name,
+                              automation.entity
+                            )
+                          )}`
                       : ""}
-                    ${this._related?.automation?.filter(
-                      (entityId) =>
-                        !grouped.automation?.find(
-                          (entity) => entity.entity_id === entityId
-                        )
-                    ).length
+                    ${relatedAutomations?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${this._related.automation.map((scene) => {
-                            const entityState = this.hass.states[scene] as
-                              | AutomationEntity
-                              | undefined;
-                            return entityState
-                              ? this._renderAutomation(entityState)
-                              : "";
-                          })}`
+                          ${relatedAutomations.map((automation) =>
+                            this._renderAutomation(
+                              automation.name,
+                              automation.entity
+                            )
+                          )}`
                       : ""}
-                    ${!grouped.automation?.length &&
-                    !this._related?.automation?.length
+                    ${!groupedAutomations?.length && !relatedAutomations?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -318,42 +362,30 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.scene.scenes"
+                      "ui.panel.config.devices.scene.scenes_heading"
                     )}
                   >
-                    ${grouped.scene?.length
+                    ${groupedScenes?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${grouped.scene.map((entity) => {
-                            const entityState =
-                              this.hass.states[entity.entity_id];
-                            return entityState
-                              ? this._renderScene(entityState)
-                              : "";
-                          })}`
+                          ${groupedScenes.map((scene) =>
+                            this._renderScene(scene.name, scene.entity)
+                          )}`
                       : ""}
-                    ${this._related?.scene?.filter(
-                      (entityId) =>
-                        !grouped.scene?.find(
-                          (entity) => entity.entity_id === entityId
-                        )
-                    ).length
+                    ${relatedScenes?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${this._related.scene.map((scene) => {
-                            const entityState = this.hass.states[scene];
-                            return entityState
-                              ? this._renderScene(entityState)
-                              : "";
-                          })}`
+                          ${relatedScenes.map((scene) =>
+                            this._renderScene(scene.name, scene.entity)
+                          )}`
                       : ""}
-                    ${!grouped.scene?.length && !this._related?.scene?.length
+                    ${!groupedScenes?.length && !relatedScenes?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -369,45 +401,30 @@ class HaConfigAreaPage extends LitElement {
               ? html`
                   <ha-card
                     .header=${this.hass.localize(
-                      "ui.panel.config.devices.script.scripts"
+                      "ui.panel.config.devices.script.scripts_heading"
                     )}
                   >
-                    ${grouped.script?.length
+                    ${groupedScripts?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.assigned_to_area"
                             )}:
                           </h3>
-                          ${grouped.script.map((entity) => {
-                            const entityState = this.hass.states[
-                              entity.entity_id
-                            ] as ScriptEntity | undefined;
-                            return entityState
-                              ? this._renderScript(entityState)
-                              : "";
-                          })}`
+                          ${groupedScripts.map((script) =>
+                            this._renderScript(script.name, script.entity)
+                          )}`
                       : ""}
-                    ${this._related?.script?.filter(
-                      (entityId) =>
-                        !grouped.script?.find(
-                          (entity) => entity.entity_id === entityId
-                        )
-                    ).length
+                    ${relatedScripts?.length
                       ? html`<h3>
                             ${this.hass.localize(
                               "ui.panel.config.areas.targeting_area"
                             )}:
                           </h3>
-                          ${this._related.script.map((scene) => {
-                            const entityState = this.hass.states[scene] as
-                              | ScriptEntity
-                              | undefined;
-                            return entityState
-                              ? this._renderScript(entityState)
-                              : "";
-                          })}`
+                          ${relatedScripts.map((script) =>
+                            this._renderScript(script.name, script.entity)
+                          )}`
                       : ""}
-                    ${!grouped.script?.length && !this._related?.script?.length
+                    ${!groupedScripts?.length && !relatedScripts?.length
                       ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
@@ -425,7 +442,51 @@ class HaConfigAreaPage extends LitElement {
     `;
   }
 
-  private _renderScene(entityState: SceneEntity) {
+  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) {
     return html`<div>
       <a
         href=${ifDefined(
@@ -435,7 +496,7 @@ class HaConfigAreaPage extends LitElement {
         )}
       >
         <paper-item .disabled=${!entityState.attributes.id}>
-          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+          <paper-item-body> ${name} </paper-item-body>
           <ha-icon-next></ha-icon-next>
         </paper-item>
       </a>
@@ -449,7 +510,7 @@ class HaConfigAreaPage extends LitElement {
     </div>`;
   }
 
-  private _renderAutomation(entityState: AutomationEntity) {
+  private _renderAutomation(name: string, entityState: AutomationEntity) {
     return html`<div>
       <a
         href=${ifDefined(
@@ -459,7 +520,7 @@ class HaConfigAreaPage extends LitElement {
         )}
       >
         <paper-item .disabled=${!entityState.attributes.id}>
-          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+          <paper-item-body> ${name} </paper-item-body>
           <ha-icon-next></ha-icon-next>
         </paper-item>
       </a>
@@ -473,10 +534,10 @@ class HaConfigAreaPage extends LitElement {
     </div>`;
   }
 
-  private _renderScript(entityState: ScriptEntity) {
+  private _renderScript(name: string, entityState: ScriptEntity) {
     return html`<a href=${`/config/script/edit/${entityState.entity_id}`}>
       <paper-item>
-        <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+        <paper-item-body> ${name} </paper-item-body>
         <ha-icon-next></ha-icon-next>
       </paper-item>
     </a>`;

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

@@ -1,5 +1,8 @@
 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";
@@ -7,6 +10,8 @@ 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,
@@ -21,9 +26,10 @@ 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 LitElement {
+export class CloudAccount extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public isWide = false;
@@ -43,6 +49,23 @@ export class CloudAccount extends 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>
@@ -115,11 +138,6 @@ export class CloudAccount extends 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>
@@ -200,6 +218,33 @@ export class CloudAccount extends 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 (
@@ -211,9 +256,12 @@ export class CloudAccount extends LitElement {
     }
   }
 
-  private async _handleLogout() {
-    await cloudLogout(this.hass);
-    fireEvent(this, "ha-refresh-cloud-status");
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        await cloudLogout(this.hass);
+        fireEvent(this, "ha-refresh-cloud-status");
+    }
   }
 
   _computeRTLDirection(hass) {
@@ -237,7 +285,7 @@ export class CloudAccount extends LitElement {
       }
       .card-actions {
         display: flex;
-        justify-content: space-between;
+        flex-direction: row-reverse;
       }
       .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,6 +21,7 @@ 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`
@@ -36,33 +37,49 @@ export class CloudAlexaPref extends LitElement {
           ></ha-switch>
         </div>
         <div class="card-content">
-          ${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
+          <p>
+            ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
+          </p>
+          ${!alexa_enabled
+            ? ""
+            : !alexa_registered
             ? 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(
@@ -81,18 +98,21 @@ export class CloudAlexaPref extends LitElement {
                     "ui.panel.config.cloud.account.alexa.info_state_reporting"
                   )}
                 </p>
-              `
-            : ""}
+              `}
         </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>
+          ${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 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 "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/buttons/ha-call-api-button";
-import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
 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,13 +16,16 @@ import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 export class CloudGooglePref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public cloudStatus?: CloudStatusLoggedIn;
+  @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
+
+  @state() private _syncing = false;
 
   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;
 
@@ -43,7 +46,9 @@ export class CloudGooglePref extends LitElement {
           <p>
             ${this.hass.localize("ui.panel.config.cloud.account.google.info")}
           </p>
-          ${google_enabled && !this.cloudStatus.google_registered
+          ${!google_enabled
+            ? ""
+            : !google_registered
             ? html`
                 <ha-alert
                   .title=${this.hass.localize(
@@ -80,9 +85,30 @@ export class CloudGooglePref extends LitElement {
                   </ul>
                 </ha-alert>
               `
-            : ""}
-          ${google_enabled
-            ? html`
+            : 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>
+                    `
+                  : ""}
+
                 <div class="state-reporting">
                   <h3>
                     ${this.hass.localize(
@@ -110,32 +136,34 @@ export class CloudGooglePref extends LitElement {
                   ${this.hass.localize(
                     "ui.panel.config.cloud.account.google.enter_pin_info"
                   )}
-                  <paper-input
-                    label=${this.hass.localize(
+                  <mwc-textfield
+                    id="google_secure_devices_pin"
+                    .label=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.devices_pin"
                     )}
-                    id="google_secure_devices_pin"
-                    placeholder=${this.hass.localize(
+                    .placeholder=${this.hass.localize(
                       "ui.panel.config.cloud.account.google.enter_pin_hint"
                     )}
                     .value=${google_secure_devices_pin || ""}
                     @change=${this._pinChanged}
-                  ></paper-input>
+                  ></mwc-textfield>
                 </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>
+          ${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>
           <a href="/config/cloud/google-assistant">
             <mwc-button>
               ${this.hass.localize(
@@ -148,24 +176,31 @@ export class CloudGooglePref extends LitElement {
     `;
   }
 
-  private async _syncEntitiesCalled(ev: CustomEvent) {
-    if (!ev.detail.success && ev.detail.response.status_code === 404) {
-      this._syncFailed();
+  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 _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 {
@@ -194,7 +229,7 @@ export class CloudGooglePref extends LitElement {
   }
 
   private async _pinChanged(ev) {
-    const input = ev.target as PaperInputElement;
+    const input = ev.target as TextField;
     try {
       await updateCloudPref(this.hass, {
         [input.id]: input.value || null,
@@ -207,7 +242,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 || "";
     }
   }
 
@@ -225,16 +260,13 @@ export class CloudGooglePref extends LitElement {
         right: auto;
         left: 24px;
       }
-      ha-call-api-button {
-        color: var(--primary-color);
-        font-weight: 500;
-      }
-      paper-input {
+      mwc-textfield {
         width: 250px;
+        display: block;
+        margin-top: 8px;
       }
       .card-actions {
         display: flex;
-        justify-content: space-between;
       }
       .card-actions a {
         text-decoration: none;
@@ -245,6 +277,10 @@ 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") private _message!: string;
+  @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
 
-  @LocalStorage("cloudTtsTryTarget") private _target!: string;
+  @LocalStorage("cloudTtsTryTarget", false, false) private _target!: string;
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;

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

@@ -6,6 +6,7 @@ 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";
@@ -33,9 +34,14 @@ 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";
 
@@ -43,7 +49,7 @@ const DEFAULT_CONFIG_EXPOSE = true;
 const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
 
 @customElement("cloud-alexa")
-class CloudAlexa extends LitElement {
+class CloudAlexa extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property()
@@ -53,9 +59,15 @@ class CloudAlexa extends LitElement {
 
   @state() private _entities?: AlexaEntity[];
 
-  @property()
+  @state()
   private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
 
+  @state()
+  private _entityCategories?: Record<
+    string,
+    EntityRegistryEntry["entity_category"]
+  >;
+
   private _popstateSyncAttached = false;
 
   private _popstateReloadStatusAttached = false;
@@ -72,7 +84,7 @@ class CloudAlexa extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (this._entities === undefined) {
+    if (this._entities === undefined || this._entityCategories === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
     const emptyFilter = isEmptyFilter(this.cloudStatus.alexa_entities);
@@ -99,10 +111,17 @@ class CloudAlexa extends LitElement {
         should_expose: null,
       };
       const isExposed = emptyFilter
-        ? this._configIsExposed(entity.entity_id, config)
+        ? this._configIsExposed(
+            entity.entity_id,
+            config,
+            this._entityCategories![entity.entity_id]
+          )
         : filterFunc(entity.entity_id);
       const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(entity.entity_id)
+        ? this._configIsDomainExposed(
+            entity.entity_id,
+            this._entityCategories![entity.entity_id]
+          )
         : filterFunc(entity.entity_id);
       if (isExposed) {
         selected++;
@@ -287,6 +306,23 @@ class CloudAlexa extends 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) => {
@@ -305,15 +341,26 @@ class CloudAlexa extends LitElement {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  private _configIsDomainExposed(entityId: string) {
+  private _configIsDomainExposed(
+    entityId: string,
+    entityCategory: EntityRegistryEntry["entity_category"] | undefined
+  ) {
     const domain = computeDomain(entityId);
     return this.cloudStatus.prefs.alexa_default_expose
-      ? this.cloudStatus.prefs.alexa_default_expose.includes(domain)
+      ? !entityCategory &&
+          this.cloudStatus.prefs.alexa_default_expose.includes(domain)
       : DEFAULT_CONFIG_EXPOSE;
   }
 
-  private _configIsExposed(entityId: string, config: AlexaEntityConfig) {
-    return config.should_expose ?? this._configIsDomainExposed(entityId);
+  private _configIsExposed(
+    entityId: string,
+    config: AlexaEntityConfig,
+    entityCategory: EntityRegistryEntry["entity_category"] | undefined
+  ) {
+    return (
+      config.should_expose ??
+      this._configIsDomainExposed(entityId, entityCategory)
+    );
   }
 
   private async _exposeChanged(ev: CustomEvent<ActionDetail>) {

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

@@ -6,6 +6,7 @@ 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";
@@ -35,6 +36,10 @@ import {
   updateCloudGoogleEntityConfig,
   updateCloudPref,
 } from "../../../../data/cloud";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../../../data/entity_registry";
 import {
   fetchCloudGoogleEntities,
   GoogleEntity,
@@ -42,6 +47,7 @@ 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";
@@ -49,7 +55,7 @@ import { showToast } from "../../../../util/toast";
 const DEFAULT_CONFIG_EXPOSE = true;
 
 @customElement("cloud-google-assistant")
-class CloudGoogleAssistant extends LitElement {
+class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public cloudStatus!: CloudStatusLoggedIn;
@@ -58,9 +64,15 @@ class CloudGoogleAssistant extends LitElement {
 
   @state() private _entities?: GoogleEntity[];
 
-  @property()
+  @state()
   private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
 
+  @state()
+  private _entityCategories?: Record<
+    string,
+    EntityRegistryEntry["entity_category"]
+  >;
+
   private _popstateSyncAttached = false;
 
   private _popstateReloadStatusAttached = false;
@@ -77,7 +89,7 @@ class CloudGoogleAssistant extends LitElement {
   );
 
   protected render(): TemplateResult {
-    if (this._entities === undefined) {
+    if (this._entities === undefined || this._entityCategories === undefined) {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
     const emptyFilter = isEmptyFilter(this.cloudStatus.google_entities);
@@ -105,10 +117,17 @@ class CloudGoogleAssistant extends LitElement {
         should_expose: null,
       };
       const isExposed = emptyFilter
-        ? this._configIsExposed(entity.entity_id, config)
+        ? this._configIsExposed(
+            entity.entity_id,
+            config,
+            this._entityCategories![entity.entity_id]
+          )
         : filterFunc(entity.entity_id);
       const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(entity.entity_id)
+        ? this._configIsDomainExposed(
+            entity.entity_id,
+            this._entityCategories![entity.entity_id]
+          )
         : filterFunc(entity.entity_id);
       if (isExposed) {
         selected++;
@@ -311,15 +330,43 @@ class CloudGoogleAssistant extends LitElement {
     }
   }
 
-  private _configIsDomainExposed(entityId: string) {
+  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
+  ) {
     const domain = computeDomain(entityId);
     return this.cloudStatus.prefs.google_default_expose
-      ? this.cloudStatus.prefs.google_default_expose.includes(domain)
+      ? !entityCategory &&
+          this.cloudStatus.prefs.google_default_expose.includes(domain)
       : DEFAULT_CONFIG_EXPOSE;
   }
 
-  private _configIsExposed(entityId: string, config: GoogleEntityConfig) {
-    return config.should_expose ?? this._configIsDomainExposed(entityId);
+  private _configIsExposed(
+    entityId: string,
+    config: GoogleEntityConfig,
+    entityCategory: EntityRegistryEntry["entity_category"] | undefined
+  ) {
+    return (
+      config.should_expose ??
+      this._configIsDomainExposed(entityId, entityCategory)
+    );
   }
 
   private async _fetchData() {

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

@@ -1,4 +1,6 @@
-import { mdiCloudLock } from "@mdi/js";
+import { mdiCloudLock, mdiDotsVertical, mdiMagnify } from "@mdi/js";
+import "@material/mwc-list/mwc-list-item";
+import type { ActionDetail } from "@material/mwc-list";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -9,17 +11,19 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } 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 {
-  ExternalConfig,
-  getExternalConfig,
-} from "../../../external_app/external_config";
+  refreshSupervisorAvailableUpdates,
+  SupervisorAvailableUpdates,
+} from "../../../data/supervisor/root";
+import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -27,6 +31,9 @@ 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 {
@@ -39,21 +46,12 @@ class HaConfigDashboard extends LitElement {
 
   @property() public cloudStatus?: CloudStatus;
 
+  // null means not available
   @property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
 
   @property() public showAdvanced!: boolean;
 
-  @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;
-      });
-    }
-  }
+  private _notifyUpdates = false;
 
   protected render(): TemplateResult {
     return html`
@@ -65,6 +63,25 @@ 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>
 
@@ -73,9 +90,9 @@ class HaConfigDashboard extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          ${isComponentLoaded(this.hass, "hassio") &&
-          this.supervisorUpdates === undefined
-            ? html``
+          ${this.supervisorUpdates === undefined
+            ? // Hide everything until updates loaded
+              html``
             : html`${this.supervisorUpdates?.length
                   ? html`<ha-card>
                       <ha-config-updates
@@ -113,7 +130,6 @@ 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>
@@ -123,14 +139,59 @@ 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,7 +6,6 @@ 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";
 
@@ -20,14 +19,12 @@ 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.externalConfig?.hasSettingsScreen
+            ? this.hass.auth.external?.config.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/supervisor";
-import { buttonLinkStyle } from "../../../resources/styles";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/root";
 import { HomeAssistant } from "../../../types";
+import "../../../components/ha-icon-next";
 
 export const SUPERVISOR_UPDATE_NAMES = {
   core: "Home Assistant Core",
@@ -46,39 +46,38 @@ class HaConfigUpdates extends LitElement {
       </div>
       ${updates.map(
         (update) => html`
-          <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>
+          <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>
         `
       )}
       ${!this._showAll && this.supervisorUpdates.length >= 4
         ? html`
-            <button class="link show-all" @click=${this._showAllClicked}>
+            <button class="show-more" @click=${this._showAllClicked}>
               ${this.hass.localize("ui.panel.config.updates.more_updates", {
                 count: this.supervisorUpdates!.length - updates.length,
               })}
@@ -94,7 +93,6 @@ class HaConfigUpdates extends LitElement {
 
   static get styles(): CSSResultGroup[] {
     return [
-      buttonLinkStyle,
       css`
         .title {
           font-size: 16px;
@@ -120,10 +118,26 @@ class HaConfigUpdates extends LitElement {
         ha-logo-svg {
           color: var(--secondary-text-color);
         }
-        button.show-all {
+        ha-icon-next {
+          color: var(--secondary-text-color);
+          height: 24px;
+          width: 24px;
+        }
+        button.show-more {
           color: var(--primary-color);
-          text-decoration: none;
-          margin: 16px;
+          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;
         }
       `,
     ];

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

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

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

@@ -82,12 +82,26 @@ class DialogDeviceRegistryDetail extends LitElement {
               </ha-switch>
               <div>
                 <div>
-                  ${this.hass.localize("ui.panel.config.devices.enabled_label")}
+                  ${this.hass.localize(
+                    "ui.panel.config.devices.enabled_label",
+                    "type",
+                    this.hass.localize(
+                      `ui.panel.config.devices.type.${
+                        device.entry_type || "device"
+                      }`
+                    )
+                  )}
                 </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,7 +3,6 @@ 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";
@@ -40,6 +39,7 @@ import {
   findBatteryEntity,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import { domainToName } from "../../../data/integration";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
 import {
@@ -90,9 +90,10 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _related?: RelatedResult;
 
-  @state() private _diagnosticDownloadLinks?: Promise<
-    (TemplateResult | string)[]
-  >;
+  // If a number, it's the request ID so we make sure we don't show older info
+  @state() private _diagnosticDownloadLinks?:
+    | number
+    | (TemplateResult | string)[];
 
   private _device = memoizeOne(
     (
@@ -196,42 +197,70 @@ export class HaConfigDevicePage extends LitElement {
       return;
     }
 
-    this._diagnosticDownloadLinks = this._renderDiagnosticButtons();
+    this._diagnosticDownloadLinks = Math.random();
+    this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
   }
 
-  private async _renderDiagnosticButtons(): Promise<
-    (TemplateResult | string)[]
-  > {
-    const result: TemplateResult[] = [];
+  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+    if (!isComponentLoaded(this.hass, "diagnostics")) {
+      return;
+    }
+
     const device = this._device(this.deviceId, this.devices);
 
     if (!device) {
-      return result;
+      return;
     }
 
-    return Promise.all(
-      this._integrations(device, this.entries)
-        .filter((entry) => entry.state === "loaded")
-        .map(async (entry) => {
-          const info = await fetchDiagnosticHandler(this.hass, entry.domain);
+    let links = await Promise.all(
+      this._integrations(device, this.entries).map(async (entry) => {
+        if (entry.state !== "loaded") {
+          return false;
+        }
+        const info = await fetchDiagnosticHandler(this.hass, entry.domain);
 
-          if (!info.handlers.device && !info.handlers.config_entry) {
-            return "";
-          }
-          const link = info.handlers.device
+        if (!info.handlers.device && !info.handlers.config_entry) {
+          return false;
+        }
+        return {
+          link: info.handlers.device
             ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
-            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id);
-          return html`
-            <a href=${link} @click=${this._signUrl}>
-              <mwc-button>
-                ${this.hass.localize(
-                  `ui.panel.config.devices.download_diagnostics`
-                )}
-              </mwc-button>
-            </a>
-          `;
-        })
+            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
+          domain: entry.domain,
+        };
+      })
     );
+
+    links = links.filter(Boolean);
+
+    if (this._diagnosticDownloadLinks !== requestId) {
+      return;
+    }
+    if (links.length > 0) {
+      this._diagnosticDownloadLinks = (
+        links as { link: string; domain: string }[]
+      ).map(
+        (link) => html`
+          <a href=${link.link} @click=${this._signUrl}>
+            <mwc-button>
+              ${links.length > 1
+                ? this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics_integration`,
+                    {
+                      integration: domainToName(
+                        this.hass.localize,
+                        link.domain
+                      ),
+                    }
+                  )
+                : this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics`
+                  )}
+            </mwc-button>
+          </a>
+        `
+      );
+    }
   }
 
   protected firstUpdated(changedProps) {
@@ -291,6 +320,10 @@ 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}`
@@ -308,7 +341,7 @@ export class HaConfigDevicePage extends LitElement {
       );
     }
 
-    const deviceActions: TemplateResult[] = [];
+    const deviceActions: (TemplateResult | string)[] = [];
 
     if (configurationUrl) {
       deviceActions.push(html`
@@ -339,8 +372,8 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions
     );
 
-    if (this._diagnosticDownloadLinks) {
-      deviceActions.push(html`${until(this._diagnosticDownloadLinks)}`);
+    if (Array.isArray(this._diagnosticDownloadLinks)) {
+      deviceActions.push(...this._diagnosticDownloadLinks);
     }
 
     return html`
@@ -480,17 +513,29 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.automation.automations"
+                          "ui.panel.config.devices.automation.automations_heading"
                         )}
                         <ha-icon-button
                           @click=${this._showAutomationDialog}
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.automation.create_disabled"
+                                "ui.panel.config.devices.automation.create_disabled",
+                                "type",
+                                this.hass.localize(
+                                  `ui.panel.config.devices.type.${
+                                    device.entry_type || "device"
+                                  }`
+                                )
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.automation.create"
+                                "ui.panel.config.devices.automation.create",
+                                "type",
+                                this.hass.localize(
+                                  `ui.panel.config.devices.type.${
+                                    device.entry_type || "device"
+                                  }`
+                                )
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -542,6 +587,12 @@ 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>
@@ -556,7 +607,7 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.scene.scenes"
+                          "ui.panel.config.devices.scene.scenes_heading"
                         )}
 
                         <ha-icon-button
@@ -564,10 +615,22 @@ export class HaConfigDevicePage extends LitElement {
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.scene.create_disabled"
+                                "ui.panel.config.devices.scene.create_disabled",
+                                "type",
+                                this.hass.localize(
+                                  `ui.panel.config.devices.type.${
+                                    device.entry_type || "device"
+                                  }`
+                                )
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.scene.create"
+                                "ui.panel.config.devices.scene.create",
+                                "type",
+                                this.hass.localize(
+                                  `ui.panel.config.devices.type.${
+                                    device.entry_type || "device"
+                                  }`
+                                )
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -622,6 +685,12 @@ 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>
@@ -636,17 +705,29 @@ export class HaConfigDevicePage extends LitElement {
                       <ha-card>
                         <h1 class="card-header">
                           ${this.hass.localize(
-                            "ui.panel.config.devices.script.scripts"
+                            "ui.panel.config.devices.script.scripts_heading"
                           )}
                           <ha-icon-button
                             @click=${this._showScriptDialog}
                             .disabled=${device.disabled_by}
                             .label=${device.disabled_by
                               ? this.hass.localize(
-                                  "ui.panel.config.devices.script.create_disabled"
+                                  "ui.panel.config.devices.script.create_disabled",
+                                  "type",
+                                  this.hass.localize(
+                                    `ui.panel.config.devices.type.${
+                                      device.entry_type || "device"
+                                    }`
+                                  )
                                 )
                               : this.hass.localize(
-                                  "ui.panel.config.devices.script.create"
+                                  "ui.panel.config.devices.script.create",
+                                  "type",
+                                  this.hass.localize(
+                                    `ui.panel.config.devices.type.${
+                                      device.entry_type || "device"
+                                    }`
+                                  )
                                 )}
                             .path=${mdiPlusCircle}
                           ></ha-icon-button>
@@ -680,6 +761,12 @@ 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>
@@ -739,7 +826,7 @@ export class HaConfigDevicePage extends LitElement {
     device,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
-    deviceActions: TemplateResult[]
+    deviceActions: (string | TemplateResult)[]
   ): TemplateResult[] {
     const domains = integrations.map((int) => int.domain);
     const templates: TemplateResult[] = [];
@@ -1060,6 +1147,7 @@ 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 : undefined,
+        area: device.area_id ? areaLookup[device.area_id].name : "—",
         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"}
+          : "/config/lovelace/dashboards"}
         .header=${this.hass.localize("ui.panel.config.energy.caption")}
       >
         <ha-alert>

src/panels/config/entities/dialog-entity-editor.ts

@@ -74,7 +74,9 @@ export class DialogEntityEditor extends LitElement {
     return html`
       <ha-dialog
         open
-        .heading=${true}
+        .heading=${stateObj
+          ? computeStateName(stateObj)
+          : entry?.name || entityId}
         hideActions
         @closed=${this.closeDialog}
         @close-dialog=${this.closeDialog}

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