Fix accidentally removed tag

.github/workflows/release.yaml

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

MANIFEST.in

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

build-scripts/env.js

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

gallery/src/ha-gallery.ts

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

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

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

hassio/src/backups/hassio-backups.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

package.json

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

pyproject.toml

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

script/release

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

script/version_bump.js

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

setup.cfg

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

setup.py

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

src/common/const.ts

@@ -184,7 +184,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "person",
   "remote",
   "script",
-  "scene",
   "sun",
   "timer",
   "vacuum",
@@ -235,7 +234,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"];
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
 
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];

src/common/datetime/format_date_time.ts

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

src/common/datetime/format_time.ts

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

src/common/entity/compute_state_display.ts

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

src/common/translations/localize.ts

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -51,6 +51,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
+  @property() public label?: string;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -58,6 +60,7 @@ class HaEntitiesPickerLight extends LitElement {
 
     const currentEntities = this._currentEntities;
     return html`
+      <h3>${this.label}</h3>
       ${currentEntities.map(
         (entityId) => html`
           <div>
@@ -145,6 +148,14 @@ class HaEntitiesPickerLight extends LitElement {
 
     this._updateEntities([...currentEntities, toAdd]);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: var(--entity-picker-display);
+      }
+    `;
+  }
 }
 
 declare global {

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-statistic-picker.ts

@@ -296,6 +296,10 @@ export class HaStatisticPicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: var(--entity-picker-display);
+      }
+
       paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;

src/components/ha-attributes.ts

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

src/components/ha-climate-control.js

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

src/components/ha-climate-control.ts

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

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

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

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

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

src/components/ha-service-control.ts

@@ -17,7 +17,6 @@ import {
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-icon-button";
 import "./ha-selector/ha-selector";
@@ -231,12 +230,7 @@ export class HaServiceControl extends LitElement {
         <p>${serviceData?.description}</p>
         ${this._manifest
           ? html` <a
-              href=${this._manifest.is_built_in
-                ? documentationUrl(
-                    this.hass,
-                    `/integrations/${this._manifest.domain}`
-                  )
-                : this._manifest.documentation}
+              href=${this._manifest.documentation}
               title=${this.hass.localize(
                 "ui.components.service-control.integration_doc"
               )}

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

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

src/data/cloud.ts

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

src/data/config_flow.ts

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

src/data/device_registry.ts

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

src/data/entity_attributes.ts

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

src/data/entity_registry.ts

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

src/data/google_assistant.ts

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

src/data/media-player.ts

@@ -88,7 +88,7 @@ export const BROWSER_PLAYER = "browser";
 export type MediaClassBrowserSetting = {
   icon: string;
   thumbnail_ratio?: string;
-  layout?: "grid";
+  layout?: string;
   show_list_images?: boolean;
 };
 
@@ -185,6 +185,15 @@ export const browseMediaPlayer = (
     media_content_type: mediaContentType,
   });
 
+export const browseLocalMediaPlayer = (
+  hass: HomeAssistant,
+  mediaContentId?: string
+): Promise<MediaPlayerItem> =>
+  hass.callWS<MediaPlayerItem>({
+    type: "media_source/browse_media",
+    media_content_id: mediaContentId,
+  });
+
 export const getCurrentProgress = (stateObj: MediaPlayerEntity): number => {
   let progress = stateObj.attributes.media_position!;
 
@@ -312,8 +321,8 @@ export const computeMediaControls = (
   return buttons.length > 0 ? buttons : undefined;
 };
 
-export const formatMediaTime = (seconds: number | undefined): string => {
-  if (seconds === undefined) {
+export const formatMediaTime = (seconds: number): string => {
+  if (!seconds) {
     return "";
   }
 

src/data/media_source.ts

@@ -1,5 +1,4 @@
 import { HomeAssistant } from "../types";
-import { MediaPlayerItem } from "./media-player";
 
 export interface ResolvedMediaSource {
   url: string;
@@ -14,12 +13,3 @@ export const resolveMediaSource = (
     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/dialogs/config-flow/dialog-data-entry-flow.ts

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

src/dialogs/make-dialog-manager.ts

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

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

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

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

@@ -108,9 +108,7 @@ 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._narrow = matchMedia("(max-width: 600px)").matches;
     this._initializeItemsIfNeeded();
     this._opened = true;
   }
@@ -156,7 +154,7 @@ export class QuickBar extends LitElement {
             )}
             .value=${this._commandMode ? `>${this._search}` : this._search}
             .icon=${true}
-            .iconTrailing=${this._search !== undefined || this._narrow}
+            .iconTrailing=${this._search !== undefined}
             @input=${this._handleSearchChange}
             @keydown=${this._handleInputKeyDown}
             @focus=${this._setFocusFirstListItem}
@@ -176,27 +174,24 @@ export class QuickBar extends LitElement {
                     .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>
-                `
-              : ""}
+            ${this._search &&
+            html`
+              <ha-icon-button
+                slot="trailingIcon"
+                @click=${this._clearSearch}
+                .label=${this.hass!.localize("ui.common.clear")}
+                .path=${mdiClose}
+              ></ha-icon-button>
+            `}
           </ha-textfield>
+          ${this._narrow
+            ? html`
+                <mwc-button
+                  .label=${this.hass!.localize("ui.common.close")}
+                  @click=${this.closeDialog}
+                ></mwc-button>
+              `
+            : ""}
         </div>
         ${!items
           ? html`<ha-circular-progress
@@ -215,12 +210,10 @@ export class QuickBar extends LitElement {
                 @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`,
+                  height: `${Math.min(
+                    items.length * (this._commandMode ? 56 : 72) + 26,
+                    this._done ? 500 : 0
+                  )}px`,
                 })}
               >
                 ${scroll({
@@ -712,12 +705,6 @@ export class QuickBar extends LitElement {
           }
         }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-textfield {
-            --mdc-shape-small: 0;
-          }
-        }
-
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;
@@ -771,11 +758,6 @@ export class QuickBar extends LitElement {
           padding: 16px 0px;
           text-align: center;
         }
-
-        div[slot="trailingIcon"] {
-          display: flex;
-          align-items: center;
-        }
       `,
     ];
   }

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

@@ -16,6 +16,5 @@ export const showQuickBar = (
     dialogTag: "ha-quick-bar",
     dialogImport: loadQuickBar,
     dialogParams,
-    addHistory: false,
   });
 };

src/entrypoints/app.ts

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

src/entrypoints/authorize.ts

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

src/entrypoints/core.ts

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

src/entrypoints/custom-panel.ts

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

src/entrypoints/onboarding.ts

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

src/html/_style_base.html.template

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,14 +3,7 @@ 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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
@@ -33,7 +26,6 @@ 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 {
@@ -51,8 +43,6 @@ class HaConfigDashboard extends LitElement {
 
   @property() public showAdvanced!: boolean;
 
-  private _notifyUpdates = false;
-
   protected render(): TemplateResult {
     return html`
       <ha-app-layout>
@@ -139,26 +129,6 @@ 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,
@@ -170,7 +140,6 @@ class HaConfigDashboard extends LitElement {
     switch (ev.detail.index) {
       case 0:
         if (isComponentLoaded(this.hass, "hassio")) {
-          this._notifyUpdates = true;
           await refreshSupervisorAvailableUpdates(this.hass);
           fireEvent(this, "ha-refresh-supervisor");
           return;
@@ -192,6 +161,10 @@ class HaConfigDashboard extends LitElement {
     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-updates.ts

@@ -8,6 +8,7 @@ import "../../../components/ha-alert";
 import "../../../components/ha-logo-svg";
 import "../../../components/ha-svg-icon";
 import { SupervisorAvailableUpdates } from "../../../data/supervisor/root";
+import { buttonLinkStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import "../../../components/ha-icon-next";
 
@@ -77,7 +78,7 @@ class HaConfigUpdates extends LitElement {
       )}
       ${!this._showAll && this.supervisorUpdates.length >= 4
         ? html`
-            <button class="show-more" @click=${this._showAllClicked}>
+            <button class="link show-all" @click=${this._showAllClicked}>
               ${this.hass.localize("ui.panel.config.updates.more_updates", {
                 count: this.supervisorUpdates!.length - updates.length,
               })}
@@ -93,6 +94,7 @@ class HaConfigUpdates extends LitElement {
 
   static get styles(): CSSResultGroup[] {
     return [
+      buttonLinkStyle,
       css`
         .title {
           font-size: 16px;
@@ -123,22 +125,6 @@ class HaConfigUpdates extends LitElement {
           height: 24px;
           width: 24px;
         }
-        button.show-more {
-          color: var(--primary-color);
-          text-align: left;
-          cursor: pointer;
-          background: none;
-          border-width: initial;
-          border-style: none;
-          border-color: initial;
-          border-image: initial;
-          padding: 16px;
-          font: inherit;
-        }
-        button.show-more:focus {
-          outline: none;
-          text-decoration: underline;
-        }
       `,
     ];
   }

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

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

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

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

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

@@ -296,10 +296,6 @@ export class HaConfigDevicePage extends LitElement {
           <ha-alert alert-type="warning">
             ${this.hass.localize(
               "ui.panel.config.devices.enabled_cause",
-              "type",
-              this.hass.localize(
-                `ui.panel.config.devices.type.${device.entry_type || "device"}`
-              ),
               "cause",
               this.hass.localize(
                 `ui.panel.config.devices.disabled_by.${device.disabled_by}`
@@ -489,29 +485,17 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.automation.automations_heading"
+                          "ui.panel.config.devices.automation.automations"
                         )}
                         <ha-icon-button
                           @click=${this._showAutomationDialog}
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.automation.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.automation.create_disabled"
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.automation.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.automation.create"
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -563,12 +547,6 @@ export class HaConfigDevicePage extends LitElement {
                                 "name",
                                 this.hass.localize(
                                   "ui.panel.config.devices.automation.automations"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
                                 )
                               )}
                             </div>
@@ -583,7 +561,7 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-card>
                       <h1 class="card-header">
                         ${this.hass.localize(
-                          "ui.panel.config.devices.scene.scenes_heading"
+                          "ui.panel.config.devices.scene.scenes"
                         )}
 
                         <ha-icon-button
@@ -591,22 +569,10 @@ export class HaConfigDevicePage extends LitElement {
                           .disabled=${device.disabled_by}
                           .label=${device.disabled_by
                             ? this.hass.localize(
-                                "ui.panel.config.devices.scene.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.scene.create_disabled"
                               )
                             : this.hass.localize(
-                                "ui.panel.config.devices.scene.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
+                                "ui.panel.config.devices.scene.create"
                               )}
                           .path=${mdiPlusCircle}
                         ></ha-icon-button>
@@ -661,12 +627,6 @@ export class HaConfigDevicePage extends LitElement {
                                 "name",
                                 this.hass.localize(
                                   "ui.panel.config.devices.scene.scenes"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
                                 )
                               )}
                             </div>
@@ -681,29 +641,17 @@ export class HaConfigDevicePage extends LitElement {
                       <ha-card>
                         <h1 class="card-header">
                           ${this.hass.localize(
-                            "ui.panel.config.devices.script.scripts_heading"
+                            "ui.panel.config.devices.script.scripts"
                           )}
                           <ha-icon-button
                             @click=${this._showScriptDialog}
                             .disabled=${device.disabled_by}
                             .label=${device.disabled_by
                               ? this.hass.localize(
-                                  "ui.panel.config.devices.script.create_disabled",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
+                                  "ui.panel.config.devices.script.create_disabled"
                                 )
                               : this.hass.localize(
-                                  "ui.panel.config.devices.script.create",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
+                                  "ui.panel.config.devices.script.create"
                                 )}
                             .path=${mdiPlusCircle}
                           ></ha-icon-button>
@@ -737,12 +685,6 @@ export class HaConfigDevicePage extends LitElement {
                                   "name",
                                   this.hass.localize(
                                     "ui.panel.config.devices.script.scripts"
-                                  ),
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
                                   )
                                 )}
                               </div>
@@ -1123,7 +1065,6 @@ export class HaConfigDevicePage extends LitElement {
           align-self: center;
           align-items: center;
           display: flex;
-          white-space: nowrap;
         }
 
         .column > *:not(:first-child) {

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

@@ -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/entities/entity-registry-settings.ts

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

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

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

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

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

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

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

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

@@ -46,7 +46,6 @@ import {
 } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleScrollbar } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { documentationUrl } from "../../../util/documentation-url";
 import { fileDownload } from "../../../util/file_download";
 import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-header";
@@ -332,12 +331,7 @@ export class HaIntegrationCard extends LitElement {
           </mwc-list-item>
           ${this.manifest
             ? html` <a
-                href=${this.manifest.is_built_in
-                  ? documentationUrl(
-                      this.hass,
-                      `/integrations/${this.manifest.domain}`
-                    )
-                  : this.manifest.documentation}
+                href=${this.manifest.documentation}
                 rel="noreferrer"
                 target="_blank"
               >

src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts

@@ -21,7 +21,6 @@ import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
 import "../../../ha-config-section";
-import "../../../../../components/ha-alert";
 
 export const ozwTabs: PageNavigation[] = [];
 
@@ -65,30 +64,6 @@ class OZWConfigDashboard extends LitElement {
         .tabs=${ozwTabs}
         back-path="/config/integrations"
       >
-        <ha-alert
-          alert-type="warning"
-          title="This integration will stop working soon"
-        >
-          The OpenZWave integration is deprecated and will no longer receive any
-          updates. The technical dependencies will render this integration
-          unusable in the near future. We strongly advise you to migrate to the
-          new
-          <a
-            href="https://www.home-assistant.io/integrations/zwave_js"
-            target="_blank"
-            rel="noreferrer"
-            >Z-Wave JS integration</a
-          >.
-          <a
-            slot="action"
-            href="https://alerts.home-assistant.io/#ozw.markdown"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <mwc-button>learn more</mwc-button>
-          </a>
-        </ha-alert>
-
         <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
           <div slot="header">
             ${this.hass.localize("ui.panel.config.ozw.select_instance.header")}
@@ -187,13 +162,6 @@ class OZWConfigDashboard extends LitElement {
         :host([narrow]) ha-config-section {
           margin-top: -20px;
         }
-        ha-alert {
-          display: block;
-          margin: 16px;
-        }
-        ha-alert a {
-          text-decoration: none;
-        }
         ha-card {
           overflow: hidden;
         }

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -55,7 +55,6 @@ class DialogZHAReconfigureDevice extends LitElement {
     this._status = undefined;
     this._stages = undefined;
     this._clusterConfigurationStatuses = undefined;
-    this._showDetails = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -226,10 +225,10 @@ class DialogZHAReconfigureDevice extends LitElement {
                   )}
                 </h2>
 
-                ${this._clusterConfigurationStatuses?.size
+                ${this._clusterConfigurationStatuses!.size > 0
                   ? html`
                       ${Array.from(
-                        this._clusterConfigurationStatuses.values()
+                        this._clusterConfigurationStatuses!.values()
                       ).map(
                         (clusterStatus) => html`
                           <div class="grid-item">

src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js

@@ -12,7 +12,6 @@ import { computeStateName } from "../../../../../common/entity/compute_state_nam
 import { sortStatesByName } from "../../../../../common/entity/states_sort_by_name";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-alert";
 import "../../../../../components/ha-icon";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-icon-button-arrow-prev";
@@ -44,14 +43,6 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
           border-bottom: 1px solid var(--divider-color);
         }
 
-        ha-alert {
-          display: block;
-          margin: 16px;
-        }
-        ha-alert a {
-          text-decoration: none;
-        }
-
         .content {
           margin-top: 24px;
         }
@@ -110,30 +101,6 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
           </app-toolbar>
         </app-header>
 
-        <ha-alert
-          alert-type="warning"
-          title="This integration will stop working soon"
-        >
-          This Z-Wave integration is deprecated and will no longer receive any
-          updates. The technical dependencies will render this integration
-          unusable in the near future. We strongly advise you to migrate to the
-          new
-          <a
-            href="https://www.home-assistant.io/integrations/zwave_js"
-            target="_blank"
-            rel="noreferrer"
-            >Z-Wave JS integration</a
-          >.
-          <a
-            slot="action"
-            href="https://alerts.home-assistant.io/#zwave.markdown"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <mwc-button>learn more</mwc-button>
-          </a>
-        </ha-alert>
-
         <ha-config-section is-wide="[[isWide]]">
           <ha-card
             class="content"

src/panels/config/logs/dialog-system-log-detail.ts

@@ -21,7 +21,6 @@ import {
 } from "../../../data/system_log";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
@@ -118,12 +117,7 @@ class DialogSystemLogDetail extends LitElement {
                     ? ""
                     : html`
                         (<a
-                          href=${this._manifest.is_built_in
-                            ? documentationUrl(
-                                this.hass,
-                                `/integrations/${this._manifest.domain}`
-                              )
-                            : this._manifest.documentation}
+                          href=${this._manifest.documentation}
                           target="_blank"
                           rel="noreferrer"
                           >documentation</a

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -7,9 +7,7 @@ import {
 import "@polymer/paper-tooltip/paper-tooltip";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import memoize from "memoize-one";
-import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { navigate } from "../../../../common/navigate";
 import { stringCompare } from "../../../../common/string/compare";
 import {
@@ -54,19 +52,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
         icon: {
           title: "",
           type: "icon",
-          template: (icon, dashboard) =>
+          template: (icon) =>
             icon
-              ? html`
-                  <ha-icon
-                    slot="item-icon"
-                    .icon=${icon}
-                    style=${ifDefined(
-                      dashboard.iconColor
-                        ? `color: ${dashboard.iconColor}`
-                        : undefined
-                    )}
-                  ></ha-icon>
-                `
+              ? html` <ha-icon slot="item-icon" .icon=${icon}></ha-icon> `
               : html``,
         },
         title: {
@@ -75,6 +63,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           ),
           sortable: true,
           filterable: true,
+          direction: "asc",
           grows: true,
           template: (title, dashboard: any) => {
             const titleTemplate = html`
@@ -194,41 +183,29 @@ export class HaConfigLovelaceDashboards extends LitElement {
     ).mode;
     const defaultUrlPath = this.hass.defaultPanel;
     const isDefault = defaultUrlPath === "lovelace";
-    const result: Record<string, any>[] = [
+    return [
       {
         icon: "hass:view-dashboard",
         title: this.hass.localize("panel.states"),
         default: isDefault,
-        show_in_sidebar: isDefault,
+        sidebar: isDefault,
         require_admin: false,
         url_path: "lovelace",
         mode: defaultMode,
         filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
-        iconColor: "var(--primary-color)",
       },
-    ];
-    if (isComponentLoaded(this.hass, "energy")) {
-      result.push({
+      {
         icon: "hass:lightning-bolt",
         title: this.hass.localize(`ui.panel.config.dashboard.energy.title`),
-        show_in_sidebar: true,
-        mode: "storage",
         url_path: "energy",
         filename: "",
-        iconColor: "var(--label-badge-yellow)",
-      });
-    }
-
-    result.push(
-      ...dashboards
-        .sort((a, b) => stringCompare(a.title, b.title))
-        .map((dashboard) => ({
-          filename: "",
-          ...dashboard,
-          default: defaultUrlPath === dashboard.url_path,
-        }))
-    );
-    return result;
+      },
+      ...dashboards.map((dashboard) => ({
+        filename: "",
+        ...dashboard,
+        default: defaultUrlPath === dashboard.url_path,
+      })),
+    ];
   });
 
   protected render(): TemplateResult {

src/panels/config/tags/dialog-tag-detail.ts

@@ -42,8 +42,6 @@ class DialogTagDetail
       this._id = "";
       this._name = "";
     }
-
-    this._generateQR();
   }
 
   public closeDialog(): void {
@@ -123,9 +121,16 @@ class DialogTagDetail
                     )}
                   </p>
                 </div>
-                ${this._qrCode
-                  ? html` <div id="qr">${this._qrCode}</div> `
-                  : ""}
+
+                <div id="qr">
+                  ${this._qrCode
+                    ? this._qrCode
+                    : html`
+                        <mwc-button @click=${this._generateQR}
+                          >Generate QR code
+                        </mwc-button>
+                      `}
+                </div>
               `
             : ``}
         </div>
@@ -220,9 +225,6 @@ class DialogTagDetail
       {
         width: 180,
         errorCorrectionLevel: "Q",
-        color: {
-          light: "#fff",
-        },
       }
     );
     const context = canvas.getContext("2d");

src/panels/energy/cards/energy-setup-wizard-card.ts

@@ -51,12 +51,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
 
   protected render(): TemplateResult {
     return html`
-      <p>
-        ${this.hass.localize("ui.panel.energy.setup.step", {
-          step: this._step + 1,
-          steps: 5,
-        })}
-      </p>
+      <p>Step ${this._step + 1} of 5</p>
       ${this._step === 0
         ? html`<ha-energy-grid-settings
             .hass=${this.hass}

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

@@ -12,11 +12,7 @@ import {
 } from "date-fns";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
-import { navigate } from "../../common/navigate";
-import {
-  createSearchParam,
-  extractSearchParam,
-} from "../../common/url/search-params";
+import { extractSearchParam } from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/chart/state-history-charts";
 import "../../components/entity/ha-entity-picker";
@@ -148,10 +144,6 @@ class HaPanelHistory extends LitElement {
     if (startDate) {
       this._startDate = new Date(startDate);
     }
-    const endDate = extractSearchParam("end_date");
-    if (endDate) {
-      this._endDate = new Date(endDate);
-    }
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -199,32 +191,10 @@ class HaPanelHistory extends LitElement {
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);
     }
     this._endDate = endDate;
-
-    this._updatePath();
   }
 
   private _entityPicked(ev) {
     this._entityId = ev.target.value;
-
-    this._updatePath();
-  }
-
-  private _updatePath() {
-    const params: Record<string, string> = {};
-
-    if (this._entityId) {
-      params.entity_id = this._entityId;
-    }
-
-    if (this._startDate) {
-      params.start_date = this._startDate.toISOString();
-    }
-
-    if (this._endDate) {
-      params.end_date = this._endDate.toISOString();
-    }
-
-    navigate(`/history?${createSearchParam(params)}`, { replace: true });
   }
 
   static get styles() {

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

@@ -1,6 +1,8 @@
 import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   addDays,
   endOfToday,
@@ -10,15 +12,8 @@ import {
   startOfWeek,
   startOfYesterday,
 } from "date-fns";
-import { css, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { navigate } from "../../common/navigate";
-import {
-  createSearchParam,
-  extractSearchParam,
-} from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
@@ -38,6 +33,7 @@ import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "./ha-logbook";
+import { extractSearchParam } from "../../common/url/search-params";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -170,10 +166,6 @@ export class HaPanelLogbook extends LitElement {
     if (startDate) {
       this._startDate = new Date(startDate);
     }
-    const endDate = extractSearchParam("end_date");
-    if (endDate) {
-      this._endDate = new Date(endDate);
-    }
   }
 
   protected updated(changedProps: PropertyValues<this>) {
@@ -231,32 +223,10 @@ export class HaPanelLogbook extends LitElement {
       endDate.setMilliseconds(endDate.getMilliseconds() - 1);
     }
     this._endDate = endDate;
-
-    this._updatePath();
   }
 
   private _entityPicked(ev) {
     this._entityId = ev.target.value;
-
-    this._updatePath();
-  }
-
-  private _updatePath() {
-    const params: Record<string, string> = {};
-
-    if (this._entityId) {
-      params.entity_id = this._entityId;
-    }
-
-    if (this._startDate) {
-      params.start_date = this._startDate.toISOString();
-    }
-
-    if (this._endDate) {
-      params.end_date = this._endDate.toISOString();
-    }
-
-    navigate(`/logbook?${createSearchParam(params)}`, { replace: true });
   }
 
   private _refreshLogbook() {

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -170,21 +170,6 @@ export class HuiEnergyDevicesGraphCard
       dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
     );
 
-    const startMinHour = addHours(energyData.start, -1);
-
-    Object.values(this._data).forEach((stat) => {
-      // if the start of the first value is after the requested period, we have the first data point, and should add a zero point
-      if (stat.length && new Date(stat[0].start) > startMinHour) {
-        stat.unshift({
-          ...stat[0],
-          start: startMinHour.toISOString(),
-          end: startMinHour.toISOString(),
-          sum: 0,
-          state: 0,
-        });
-      }
-    });
-
     const data: Array<ChartDataset<"bar", ParsedDataType<"bar">>["data"]> = [];
     const borderColor: string[] = [];
     const backgroundColor: string[] = [];

src/panels/lovelace/cards/hui-entity-card.ts

@@ -23,8 +23,8 @@ import { iconColorCSS } from "../../../common/style/icon_color_css";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
-import { formatAttributeValue } from "../../../data/entity_attributes";
 import { HomeAssistant } from "../../../types";
+import { formatAttributeValue } from "../../../util/hass-attributes-util";
 import { computeCardSize } from "../common/compute-card-size";
 import { findEntities } from "../common/find-entities";
 import { hasConfigOrEntityChanged } from "../common/has-changed";

src/panels/lovelace/cards/hui-entity-filter-card.ts

@@ -8,10 +8,15 @@ import { findEntities } from "../common/find-entities";
 import { processConfigEntities } from "../common/process-config-entities";
 import { createCardElement } from "../create-element/create-card-element";
 import { EntityFilterEntityConfig } from "../entity-rows/types";
-import { LovelaceCard } from "../types";
+import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { EntityFilterCardConfig } from "./types";
 
 class EntityFilterCard extends ReactiveElement implements LovelaceCard {
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import("../editor/config-elements/hui-entity-filter-card-editor");
+    return document.createElement("hui-entity-filter-card-editor");
+  }
+
   public static getStubConfig(
     hass: HomeAssistant,
     entities: string[],
@@ -57,7 +62,7 @@ class EntityFilterCard extends ReactiveElement implements LovelaceCard {
   }
 
   public setConfig(config: EntityFilterCardConfig): void {
-    if (!config.entities.length || !Array.isArray(config.entities)) {
+    if (!config.entities || !Array.isArray(config.entities)) {
       throw new Error("Entities must be specified");
     }
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -186,6 +186,10 @@ export class HuiEntityEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        :host {
+          display: var(--entity-picker-display);
+        }
+
         .entity {
           display: flex;
           align-items: center;

src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts

@@ -111,15 +111,12 @@ export class HuiCalendarCardEditor
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
       </div>
-      <h3>
-        ${this.hass.localize(
-          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
-        ) +
-        " (" +
-        this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
-        ")"}
-      </h3>
       <ha-entities-picker
+        .label=${`${this.hass.localize(
+          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.required"
+        )})`}
         .hass=${this.hass!}
         .value=${this._configEntities}
         .includeDomains=${["calendar"]}

src/panels/lovelace/editor/config-elements/hui-entity-filter-card-editor.ts

@@ -0,0 +1,393 @@
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
+import { mdiClose } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import {
+  any,
+  array,
+  assert,
+  assign,
+  boolean,
+  object,
+  optional,
+  string,
+} from "superstruct";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/entity/ha-entity-picker";
+import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
+import { HomeAssistant } from "../../../../types";
+import { EntityFilterCardConfig } from "../../cards/types";
+import {
+  EntityFilterEntityConfig,
+  LovelaceRowConfig,
+} from "../../entity-rows/types";
+import { LovelaceCardEditor } from "../../types";
+import "../card-editor/hui-card-element-editor";
+import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
+import "../card-editor/hui-card-picker";
+import "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { entitiesConfigStruct } from "../structs/entities-struct";
+import { EntitiesEditorEvent, GUIModeChangedEvent } from "../types";
+import { configElementStyle } from "./config-elements-style";
+import { processEditorEntities } from "../process-editor-entities";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+
+const cardConfigStruct = assign(
+  baseLovelaceCardConfig,
+  object({
+    card: optional(any()),
+    entities: array(entitiesConfigStruct),
+    state_filter: array(string()),
+    show_empty: optional(boolean()),
+  })
+);
+
+@customElement("hui-entity-filter-card-editor")
+export class HuiEntityFilterCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public lovelace?: LovelaceConfig;
+
+  @state() protected _config?: EntityFilterCardConfig;
+
+  @state() private _configEntities?: LovelaceRowConfig[];
+
+  @state() private _GUImode = true;
+
+  @state() private _guiModeAvailable? = true;
+
+  @state() private _cardTab = false;
+
+  @query("hui-card-element-editor")
+  private _cardEditorEl?: HuiCardElementEditor;
+
+  public setConfig(config: EntityFilterCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+    this._configEntities = processEditorEntities(config.entities);
+  }
+
+  public focusYamlEditor() {
+    this._cardEditorEl?.focusYamlEditor();
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      <mwc-tab-bar
+        .activeIndex=${this._cardTab ? 1 : 0}
+        @MDCTabBar:activated=${this._selectTab}
+      >
+        <mwc-tab
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entity-filter.filters"
+          )}
+        ></mwc-tab>
+        <mwc-tab
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entity-filter.card"
+          )}
+        ></mwc-tab>
+      </mwc-tab-bar>
+      ${this._cardTab ? this._renderCardEditor() : this._renderFilterEditor()}
+    `;
+  }
+
+  private _renderFilterEditor(): TemplateResult {
+    return html`
+      <div class="entities">
+        <hui-entity-editor
+          .hass=${this.hass}
+          .entities=${this._configEntities}
+          @entities-changed=${this._entitiesChanged}
+        ></hui-entity-editor>
+      </div>
+      <div class="states">
+        <h3>
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entity-filter.display_states"
+          )}
+          (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})
+        </h3>
+        ${this._config!.state_filter.map(
+          (stte, idx) => html`<div class="state">
+            <paper-input
+              .label=${this.hass!.localize(
+                "ui.panel.lovelace.editor.card.entity-filter.state"
+              )}
+              .value=${stte as string}
+              .index=${idx}
+              @change=${this._stateChanged}
+            >
+              <ha-icon-button
+                .label=${this.hass!.localize(
+                  "ui.panel.lovelace.editor.card.entity-filter.delete_state"
+                )}
+                .path=${mdiClose}
+                tabindex="-1"
+                no-ripple
+                .index=${idx}
+                slot="suffix"
+                @click=${this._stateDeleted}
+              >
+              </ha-icon-button>
+            </paper-input>
+          </div>`
+        )}
+        <paper-input
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entity-filter.state"
+          )}
+          @change=${this._stateAdded}
+        ></paper-input>
+      </div>
+    `;
+  }
+
+  private _renderCardEditor(): TemplateResult {
+    return html`
+      <div class="card">
+        <ha-formfield
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entity-filter.show_empty"
+          )}
+          .dir=${computeRTLDirection(this.hass!)}
+        >
+          <ha-switch
+            .checked=${this._config!.show_empty !== false}
+            @change=${this._showEmptyToggle}
+          ></ha-switch>
+        </ha-formfield>
+        ${this._config!.card && this._config!.card.type !== undefined
+          ? html`
+              <div class="card-options">
+                <mwc-button
+                  @click=${this._toggleMode}
+                  .disabled=${!this._guiModeAvailable}
+                  class="gui-mode-button"
+                >
+                  ${this.hass!.localize(
+                    !this._cardEditorEl || this._GUImode
+                      ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                      : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                  )}
+                </mwc-button>
+                <mwc-button @click=${this._handleReplaceCard}
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.card.conditional.change_type"
+                  )}</mwc-button
+                >
+              </div>
+              <hui-card-element-editor
+                .hass=${this.hass}
+                .value=${this._getCardConfig()}
+                .lovelace=${this.lovelace}
+                @config-changed=${this._handleCardChanged}
+                @GUImode-changed=${this._handleGUIModeChanged}
+              ></hui-card-element-editor>
+            `
+          : html`
+              <hui-card-picker
+                .hass=${this.hass}
+                .lovelace=${this.lovelace}
+                @config-changed=${this._handleCardPicked}
+              ></hui-card-picker>
+            `}
+      </div>
+    `;
+  }
+
+  private _selectTab(ev: MDCTabBarActivatedEvent): void {
+    this._cardTab = ev.detail.index === 1;
+  }
+
+  private _toggleMode(): void {
+    this._cardEditorEl?.toggleMode();
+  }
+
+  private _setMode(value: boolean): void {
+    this._GUImode = value;
+    if (this._cardEditorEl) {
+      this._cardEditorEl.GUImode = value;
+    }
+  }
+
+  private _showEmptyToggle(): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    this._config = {
+      ...this._config,
+      show_empty: this._config.show_empty === false,
+    };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _entitiesChanged(ev: EntitiesEditorEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    if (!ev.detail || !ev.detail.entities) {
+      return;
+    }
+
+    this._config = {
+      ...this._config,
+      entities: ev.detail.entities as EntityFilterEntityConfig[],
+    };
+    this._configEntities = processEditorEntities(this._config.entities);
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _stateDeleted(ev: Event): void {
+    const target = ev.target! as any;
+    if (target.value === "" || !this._config) {
+      return;
+    }
+    const state_filter = [...this._config.state_filter];
+    state_filter.splice(target.index, 1);
+
+    this._config = { ...this._config, state_filter };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _stateAdded(ev: Event): void {
+    const target = ev.target! as any;
+    if (target.value === "" || !this._config) {
+      return;
+    }
+    const state_filter = [...this._config.state_filter];
+    state_filter.push(target.value);
+
+    this._config = { ...this._config, state_filter };
+    target.value = "";
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _stateChanged(ev: Event): void {
+    const target = ev.target! as any;
+    if (target.value === "" || !this._config) {
+      return;
+    }
+    const state_filter = [...this._config.state_filter];
+    state_filter[target.index] = target.value;
+
+    this._config = { ...this._config, state_filter };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
+    ev.stopPropagation();
+    this._GUImode = ev.detail.guiMode;
+    this._guiModeAvailable = ev.detail.guiModeAvailable;
+  }
+
+  private _handleCardPicked(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._config) {
+      return;
+    }
+    const cardConfig = { ...ev.detail.config } as LovelaceCardConfig;
+    delete cardConfig.entities;
+    this._setMode(true);
+    this._guiModeAvailable = true;
+    this._config = { ...this._config, card: cardConfig };
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _handleCardChanged(ev: HASSDomEvent<ConfigChangedEvent>): void {
+    ev.stopPropagation();
+    if (!this._config) {
+      return;
+    }
+    const cardConfig = { ...ev.detail.config } as LovelaceCardConfig;
+    delete cardConfig.entities;
+    this._config = {
+      ...this._config,
+      card: cardConfig,
+    };
+    this._guiModeAvailable = ev.detail.guiModeAvailable;
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _handleReplaceCard(): void {
+    if (!this._config) {
+      return;
+    }
+    // @ts-ignore
+    this._config = { ...this._config, card: {} };
+    // @ts-ignore
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
+  private _getCardConfig(): LovelaceCardConfig {
+    const cardConfig = { ...this._config!.card } as LovelaceCardConfig;
+    cardConfig.entities = [];
+    return cardConfig;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      configElementStyle,
+      css`
+        mwc-tab-bar {
+          border-bottom: 1px solid var(--divider-color);
+        }
+
+        .entities,
+        .states,
+        .card {
+          margin-top: 8px;
+          padding: 12px;
+        }
+        @media (max-width: 450px) {
+          .entities,
+          .states,
+          .card {
+            margin: 8px -12px 0;
+          }
+        }
+        .card {
+          --entity-picker-display: none;
+        }
+
+        .state {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+        }
+        .state paper-input {
+          flex-grow: 1;
+        }
+
+        .card .card-options {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+        }
+        .gui-mode-button {
+          margin-right: auto;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entity-filter-card-editor": HuiEntityFilterCardEditor;
+  }
+}

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -102,14 +102,12 @@ export class HuiLogbookCardEditor
             @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
-        <h3>
-          ${`${this.hass!.localize(
+        <ha-entities-picker
+          .label=${`${this.hass!.localize(
             "ui.panel.lovelace.editor.card.generic.entities"
           )} (${this.hass!.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})`}
-        </h3>
-        <ha-entities-picker
           .hass=${this.hass}
           .value=${this._configEntities}
           @value-changed=${this._valueChanged}

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -253,6 +253,10 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        :host {
+          display: var(--entity-picker-display);
+        }
+
         .entity {
           display: flex;
           align-items: center;

src/panels/lovelace/hui-root.ts

@@ -130,7 +130,6 @@ class HUIRoot extends LitElement {
                     ></ha-icon-button>
                   </div>
                   <mwc-button
-                    outlined
                     class="exit-edit-mode"
                     .label=${this.hass!.localize(
                       "ui.panel.lovelace.menu.exit_edit_mode"
@@ -939,8 +938,7 @@ class HUIRoot extends LitElement {
           );
         }
         .exit-edit-mode {
-          --mdc-theme-primary: var(--app-header-edit-text-color, #fff);
-          --mdc-button-outline-color: var(--app-header-edit-text-color, #fff);
+          --mdc-theme-primary: var(--primary-text-color);
           --mdc-typography-button-font-size: 14px;
         }
       `,

src/panels/lovelace/special-rows/hui-attribute-row.ts

@@ -9,8 +9,8 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import checkValidDate from "../../../common/datetime/check_valid_date";
 import { formatNumber } from "../../../common/number/format_number";
-import { formatAttributeValue } from "../../../data/entity_attributes";
 import { HomeAssistant } from "../../../types";
+import { formatAttributeValue } from "../../../util/hass-attributes-util";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import "../components/hui-timestamp-display";

src/panels/lovelace/strategies/original-states-strategy.ts

@@ -3,7 +3,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { subscribeOne } from "../../../common/util/subscribe-one";
 import { subscribeAreaRegistry } from "../../../data/area_registry";
 import { subscribeDeviceRegistry } from "../../../data/device_registry";
-import { getEnergyPreferences } from "../../../data/energy";
+import { EnergyPreferences, getEnergyPreferences } from "../../../data/energy";
 import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import { generateDefaultViewConfig } from "../common/generate-lovelace-config";
 import {
@@ -39,18 +39,30 @@ export class OriginalStatesStrategy {
       subscribeEntityRegistry(hass.connection, () => undefined);
     }
 
-    const [areaEntries, deviceEntries, entityEntries, localize, energyPrefs] =
+    let energyPromise: Promise<EnergyPreferences> | undefined;
+
+    if (isComponentLoaded(hass, "energy")) {
+      energyPromise = getEnergyPreferences(hass);
+    }
+
+    const [areaEntries, deviceEntries, entityEntries, localize] =
       await Promise.all([
         subscribeOne(hass.connection, subscribeAreaRegistry),
         subscribeOne(hass.connection, subscribeDeviceRegistry),
         subscribeOne(hass.connection, subscribeEntityRegistry),
         hass.loadBackendTranslation("title"),
-        isComponentLoaded(hass, "energy")
-          ? // It raises if not configured, just swallow that.
-            getEnergyPreferences(hass).catch(() => undefined)
-          : undefined,
       ]);
 
+    let energyPrefs: EnergyPreferences | undefined;
+
+    if (energyPromise) {
+      try {
+        energyPrefs = await energyPromise;
+      } catch (_) {
+        // Nothing to do here
+      }
+    }
+
     // User can override default view. If they didn't, we will add one
     // that contains all entities.
     const view = generateDefaultViewConfig(

src/panels/media-browser/ha-bar-media-player.ts

@@ -19,7 +19,6 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -115,9 +114,7 @@ class BarMediaPlayer extends LitElement {
   protected render(): TemplateResult {
     const isBrowser = this.entityId === BROWSER_PLAYER;
     const stateObj = this._stateObj;
-    const controls = !stateObj
-      ? undefined
-      : !this.narrow
+    const controls = !this.narrow
       ? computeMediaControls(stateObj)
       : (stateObj.state === "playing" &&
           (supportsFeature(stateObj, SUPPORT_PAUSE) ||
@@ -146,22 +143,16 @@ class BarMediaPlayer extends LitElement {
           },
         ]
       : [{}];
-    const mediaDescription = stateObj ? computeMediaDescription(stateObj) : "";
-    const mediaDuration = formatMediaTime(stateObj?.attributes.media_duration);
-    const mediaTitleClean = cleanupMediaTitle(
-      stateObj?.attributes.media_title || ""
-    );
+    const mediaDescription = computeMediaDescription(stateObj);
+    const mediaDuration = formatMediaTime(stateObj!.attributes.media_duration!);
+    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
 
-    const mediaArt = stateObj
-      ? stateObj.attributes.entity_picture_local ||
-        stateObj.attributes.entity_picture
-      : undefined;
+    const mediaArt =
+      stateObj.attributes.entity_picture_local ||
+      stateObj.attributes.entity_picture;
 
     return html`
-      <div
-        class="info ${!isBrowser ? "pointer" : ""}"
-        @click=${this._openMoreInfo}
-      >
+      <div class="info">
         ${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
         <div class="media-info">
           <hui-marquee
@@ -221,7 +212,7 @@ class BarMediaPlayer extends LitElement {
                   slot="trigger"
                   .label=${this.narrow
                     ? ""
-                    : `${stateObj ? computeStateName(stateObj) : this.entityId}
+                    : `${computeStateName(stateObj)}
                 `}
                 >
                   <ha-svg-icon
@@ -293,7 +284,7 @@ class BarMediaPlayer extends LitElement {
     if (
       !this._progressInterval &&
       this._showProgressBar &&
-      stateObj?.state === "playing"
+      stateObj.state === "playing"
     ) {
       this._progressInterval = window.setInterval(
         () => this._updateProgressBar(),
@@ -301,27 +292,21 @@ class BarMediaPlayer extends LitElement {
       );
     } else if (
       this._progressInterval &&
-      (!this._showProgressBar || stateObj?.state !== "playing")
+      (!this._showProgressBar || stateObj.state !== "playing")
     ) {
       clearInterval(this._progressInterval);
       this._progressInterval = undefined;
     }
   }
 
-  private get _stateObj(): MediaPlayerEntity | undefined {
-    if (this.entityId === BROWSER_PLAYER) {
-      return this._browserPlayer
-        ? this._browserPlayer.toStateObj()
-        : BrowserMediaPlayer.idleStateObj();
-    }
-    return this.hass!.states[this.entityId] as MediaPlayerEntity | undefined;
-  }
-
-  private _openMoreInfo() {
+  private get _stateObj(): MediaPlayerEntity {
     if (this._browserPlayer) {
-      return;
+      return this._browserPlayer.toStateObj();
     }
-    fireEvent(this, "hass-more-info", { entityId: this.entityId });
+    return (
+      (this.hass!.states[this.entityId] as MediaPlayerEntity | undefined) ||
+      BrowserMediaPlayer.idleStateObj()
+    );
   }
 
   private get _showProgressBar() {
@@ -332,7 +317,6 @@ class BarMediaPlayer extends LitElement {
     const stateObj = this._stateObj;
 
     return (
-      stateObj &&
       (stateObj.state === "playing" || stateObj.state === "paused") &&
       "media_duration" in stateObj.attributes &&
       "media_position" in stateObj.attributes
@@ -348,21 +332,19 @@ class BarMediaPlayer extends LitElement {
   }
 
   private _updateProgressBar(): void {
-    const stateObj = this._stateObj;
-
-    if (!this._progressBar || !this._currentProgress || !stateObj) {
+    if (!this._progressBar || !this._currentProgress) {
       return;
     }
 
-    if (!stateObj.attributes.media_duration) {
+    if (!this._stateObj.attributes.media_duration) {
       this._progressBar.progress = 0;
       this._currentProgress.innerHTML = "";
       return;
     }
 
-    const currentProgress = getCurrentProgress(stateObj);
+    const currentProgress = getCurrentProgress(this._stateObj);
     this._progressBar.progress =
-      currentProgress / stateObj.attributes.media_duration;
+      currentProgress / this._stateObj.attributes.media_duration;
 
     if (this._currentProgress) {
       this._currentProgress.innerHTML = formatMediaTime(currentProgress);
@@ -436,10 +418,6 @@ class BarMediaPlayer extends LitElement {
         overflow: hidden;
       }
 
-      .pointer {
-        cursor: pointer;
-      }
-
       .secondary,
       .progress {
         color: var(--secondary-text-color);
@@ -455,7 +433,6 @@ class BarMediaPlayer extends LitElement {
 
       .controls {
         height: 48px;
-        padding-bottom: 4px;
       }
 
       .controls-progress {
@@ -509,7 +486,6 @@ class BarMediaPlayer extends LitElement {
 
       :host([narrow]) .controls {
         display: flex;
-        padding-bottom: 0;
       }
 
       :host([narrow]) .choose-player {

src/panels/media-browser/ha-panel-media-browser.ts

@@ -1,4 +1,3 @@
-import { mdiArrowLeft } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -14,21 +13,15 @@ import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
-import "../../components/ha-icon-button";
 import "../../components/media-player/ha-media-player-browse";
 import type { MediaPlayerItemId } from "../../components/media-player/ha-media-player-browse";
-import {
-  BROWSER_PLAYER,
-  MediaPickedEvent,
-  MediaPlayerItem,
-} from "../../data/media-player";
+import { BROWSER_PLAYER, MediaPickedEvent } from "../../data/media-player";
 import { resolveMediaSource } from "../../data/media_source";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
 import "./ha-bar-media-player";
 import { showWebBrowserPlayMediaDialog } from "./show-media-player-dialog";
-import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 
 @customElement("ha-panel-media-browser")
 class PanelMediaBrowser extends LitElement {
@@ -39,8 +32,6 @@ class PanelMediaBrowser extends LitElement {
 
   @property() public route!: Route;
 
-  @property() _currentItem?: MediaPlayerItem;
-
   private _navigateIds: MediaPlayerItemId[] = [
     {
       media_content_id: undefined,
@@ -56,26 +47,15 @@ class PanelMediaBrowser extends LitElement {
       <ha-app-layout>
         <app-header fixed slot="header">
           <app-toolbar>
-            ${this._navigateIds.length > 1
-              ? html`
-                  <ha-icon-button
-                    .path=${mdiArrowLeft}
-                    @click=${this._goBack}
-                  ></ha-icon-button>
-                `
-              : html`
-                  <ha-menu-button
-                    .hass=${this.hass}
-                    .narrow=${this.narrow}
-                  ></ha-menu-button>
-                `}
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
             <div main-title class="heading">
               <div>
-                ${!this._currentItem
-                  ? this.hass.localize(
-                      "ui.components.media-browser.media-player-browser"
-                    )
-                  : this._currentItem.title}
+                ${this.hass.localize(
+                  "ui.components.media-browser.media-player-browser"
+                )}
               </div>
             </div>
           </app-toolbar>
@@ -113,23 +93,6 @@ class PanelMediaBrowser extends LitElement {
       .split("/");
 
     if (routePlayer !== this._entityId) {
-      // Detect if picked player doesn't exist (anymore)
-      // Can happen if URL bookmarked or stored in local storage
-      if (
-        routePlayer !== BROWSER_PLAYER &&
-        this.hass.states[routePlayer] === undefined
-      ) {
-        navigate(`/media-browser/${BROWSER_PLAYER}`, { replace: true });
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.panel.media-browser.error.player_not_exist",
-            {
-              name: routePlayer,
-            }
-          ),
-        });
-        return;
-      }
       this._entityId = routePlayer;
     }
 
@@ -147,19 +110,13 @@ class PanelMediaBrowser extends LitElement {
         };
       }),
     ];
-    this._currentItem = undefined;
   }
 
-  private _goBack() {
-    history.back();
-  }
-
-  private _mediaBrowsed(ev: { detail: HASSDomEvents["media-browsed"] }) {
-    if (ev.detail.ids === this._navigateIds) {
-      this._currentItem = ev.detail.current;
+  private _mediaBrowsed(ev) {
+    if (ev.detail.back) {
+      history.back();
       return;
     }
-
     let path = "";
     for (const item of ev.detail.ids.slice(1)) {
       path +=
@@ -195,7 +152,6 @@ class PanelMediaBrowser extends LitElement {
         sourceUrl: resolvedUrl.url,
         sourceType: resolvedUrl.mime_type,
         title: item.title,
-        can_play: item.can_play,
       });
     }
   }

src/panels/media-browser/show-media-player-dialog.ts

@@ -4,7 +4,6 @@ export interface WebBrowserPlayMediaDialogParams {
   sourceUrl: string;
   sourceType: string;
   title?: string;
-  can_play?: boolean;
 }
 
 export const showWebBrowserPlayMediaDialog = (

src/panels/profile/ha-long-lived-access-token-dialog.ts

@@ -65,7 +65,7 @@ export class HaLongLivedAccessTokenDialog extends LitElement {
 
   private async _generateQR() {
     const qrcode = await import("qrcode");
-    const canvas = await qrcode.toCanvas(this._params!.token, {
+    const canvas = await qrcode.toCanvas(this._params?.token, {
       width: 180,
       errorCorrectionLevel: "Q",
     });

src/resources/compatibility.ts

@@ -1,4 +1,3 @@
-// Caution before editing - For latest builds, this module is replaced with emptiness and thus not imported (see build-scripts/bundle.js)
 import "core-js";
 import "regenerator-runtime/runtime";
 import "lit/polyfill-support";

src/resources/styles.ts

@@ -184,8 +184,6 @@ export const haStyle = css`
 
   app-toolbar {
     height: var(--header-height);
-    border-bottom: var(--app-header-border-bottom);
-    box-sizing: border-box;
   }
 
   app-header div[sticky] {

src/translations/en.json

@@ -105,9 +105,6 @@
     }
   },
   "ui": {
-    "backup": {
-      "upload_backup": "Upload backup"
-    },
     "card": {
       "alarm_control_panel": {
         "code": "Code",
@@ -558,10 +555,6 @@
         "not_supported": "Your browser doesn't support QR scanning.",
         "manual_input": "You can scan the QR code with another QR scanner and paste the code in the input below",
         "enter_qr_code": "Enter QR code value"
-      },
-      "climate-control": {
-        "temperature_up": "Increase temperature",
-        "temperature_down": "Decrease temperature"
       }
     },
     "dialogs": {
@@ -733,7 +726,6 @@
             "cover": {
               "door": "Door",
               "garage": "Garage door",
-              "gate": "Gate",
               "window": "Window"
             }
           },
@@ -1012,12 +1004,10 @@
             "description": "You need to run the Home Assistant operating system to be able to check and install updates from the Home Assistant user interface."
           },
           "check_updates": "Check for updates",
-          "no_new_updates": "No new updates found",
-          "updates_refreshed": "Updates refreshed",
           "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to load updates",
           "version_available": "Version {version_available} is available",
-          "more_updates": "+{count} updates",
+          "more_updates": "+ {count} Updates",
           "show": "show"
         },
         "areas": {
@@ -2122,30 +2112,25 @@
               "sync_entities_error": "Failed to sync entities:",
               "state_reporting_error": "Unable to {enable_disable} report state.",
               "enable": "enable",
-              "disable": "disable",
-              "not_configured_title": "Alexa is not activated",
-              "not_configured_text": "Before you can use Alexa, you need to activate the Home Assistant skill for Alexa in the Alexa app."
+              "disable": "disable"
             },
             "google": {
               "title": "Google Assistant",
               "info": "With the Google Assistant integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Google Assistant-enabled device.",
-              "http_use_ssl_warning_title": "Local communication unavailable",
-              "http_use_ssl_warning_text": "Google devices will not be able to talk locally with Home Assistant because you have configured an SSL certificate for your HTTP integration.",
               "enable_ha_skill": "Activate the Home Assistant Cloud skill for Google Assistant",
               "config_documentation": "Configuration documentation",
               "enable_state_reporting": "Enable State Reporting",
-              "info_state_reporting": "If you enable state reporting, Home Assistant will send all state changes of exposed entities to Google. This speeds up voice commands and allows you to always see the latest states in the Google app.",
+              "info_state_reporting": "If you enable state reporting, Home Assistant will send all state changes of exposed entities to Google. This allows you to always see the latest states in the Google app.",
               "security_devices": "Security Devices",
               "enter_pin_info": "Please enter a PIN to interact with security devices. Security devices are doors, garage doors and locks. You will be asked to say/enter this PIN when interacting with such devices via Google Assistant.",
               "devices_pin": "Security Devices PIN",
               "enter_pin_hint": "Enter a PIN to use security devices",
               "sync_entities": "Sync Entities to Google",
+              "sync_entities_404_message": "Failed to sync your entities to Google, ask Google 'Hey Google, sync my devices' to sync your entities.",
               "manage_entities": "Manage Entities",
               "enter_pin_error": "Unable to store PIN:",
               "not_configured_title": "Google Assistant is not activated",
-              "not_configured_text": "Before you can use Google Assistant, you need to activate the Home Assistant Cloud skill for Google Assistant in the Google Home app.",
-              "sync_failed_title": "Syncing failed",
-              "sync_failed_text": "Syncing your entities failed, try again or check the logs."
+              "not_configured_text": "Before you can use Google Assistant, you need to activate the Home Assistant Cloud skill for Google Assistant in the Google Home app."
             },
             "webhooks": {
               "title": "Webhooks",
@@ -2208,18 +2193,18 @@
           }
         },
         "devices": {
-          "add_prompt": "No {name} have been added using this {type} yet. You can add one by clicking the + button above.",
+          "add_prompt": "No {name} have been added using this device yet. You can add one by clicking the + button above.",
           "caption": "Devices",
           "description": "Manage configured devices",
-          "device_info": "{type} info",
+          "device_info": "Device info",
           "edit_settings": "Edit settings",
-          "unnamed_device": "Unnamed {type}",
+          "unnamed_device": "Unnamed device",
           "unknown_error": "Unknown error",
           "name": "Name",
           "update": "Update",
           "no_devices": "No devices",
-          "enabled_label": "Enable {type}",
-          "enabled_cause": "The {type} is disabled by {cause}.",
+          "enabled_label": "Enable device",
+          "enabled_cause": "The device is disabled by {cause}.",
           "disabled_by": {
             "user": "User",
             "integration": "Integration",
@@ -2229,19 +2214,12 @@
           "open_configuration_url_device": "Visit device",
           "open_configuration_url_service": "Visit service",
           "download_diagnostics": "Download diagnostics",
-          "type": {
-            "device_heading": "Device",
-            "device": "device",
-            "service_heading": "Service",
-            "service": "service"
-          },
           "automation": {
-            "automations_heading": "Automations",
-            "automations": "automations",
+            "automations": "Automations",
             "no_automations": "No automations",
             "unknown_automation": "Unknown automation",
-            "create": "Create automation with {type}",
-            "create_disable": "Can't create automation with disabled {type}",
+            "create": "Create automation with device",
+            "create_disable": "Can't create automation with disabled device",
             "triggers": {
               "caption": "Do something when…",
               "no_triggers": "No triggers",
@@ -2260,21 +2238,19 @@
             "no_device_automations": "There are no automations available for this device."
           },
           "script": {
-            "scripts_heading": "Scripts",
-            "scripts": "scripts",
+            "scripts": "Scripts",
             "no_scripts": "No scripts",
-            "create": "Create script with {type}",
-            "create_disable": "Can't create script with disabled {type}"
+            "create": "Create script with device",
+            "create_disable": "Can't create script with disabled device"
           },
           "scene": {
-            "scenes_heading": "Scenes",
-            "scenes": "scenes",
+            "scenes": "Scenes",
             "no_scenes": "No scenes",
-            "create": "Create scene with {type}",
-            "create_disable": "Can't create scene with disabled {type}"
+            "create": "Create scene with device",
+            "create_disable": "Can't create scene with disabled device"
           },
           "cant_edit": "You can only edit items that are created in the UI.",
-          "device_not_found": "Device / service not found.",
+          "device_not_found": "Device not found.",
           "entities": {
             "entities": "Entities",
             "control": "Controls",
@@ -2286,6 +2262,8 @@
             "hide_disabled": "Hide disabled",
             "disabled_entities": "+{count} {count, plural,\n  one {disabled entity}\n  other {disabled entities}\n}"
           },
+          "scripts": "Scripts",
+          "scenes": "Scenes",
           "confirm_rename_entity_ids": "Do you also want to rename the entity IDs of your entities?",
           "confirm_rename_entity_ids_warning": "This will not change any configuration (like automations, scripts, scenes, dashboards) that is currently using these entities! You will have to update them yourself to use the new entity IDs!",
           "confirm_disable_config_entry": "There are no more devices for the config entry {entry_name}, do you want to instead disable the config entry?",
@@ -2489,7 +2467,6 @@
             "via": "Connected via",
             "firmware": "Firmware: {version}",
             "hardware": "Hardware: {version}",
-            "version": "Version: {version}",
             "unnamed_entry": "Unnamed entry",
             "unknown_via_device": "Unknown device",
             "area": "In {area}",
@@ -3425,7 +3402,13 @@
             },
             "entity-filter": {
               "name": "Entity Filter",
-              "description": "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state."
+              "description": "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state.",
+              "filters": "Filters",
+              "card": "Card",
+              "display_states": "States to show",
+              "show_empty": "Show when empty",
+              "state": "state",
+              "delete_state": "Delete state"
             },
             "gauge": {
               "name": "Gauge",
@@ -3654,11 +3637,6 @@
         "delete_prompt": "Delete this message?",
         "delete_button": "Delete"
       },
-      "media-browser": {
-        "error": {
-          "player_not_exist": "Media player {name} does not exist"
-        }
-      },
       "map": {
         "edit_zones": "Edit Zones"
       },
@@ -4096,8 +4074,7 @@
           "addons": "[%key:supervisor::backup::addons%]",
           "password_protection": "[%key:supervisor::backup::password_protection%]",
           "password": "[%key:supervisor::backup::password%]",
-          "confirm_password": "[%key:supervisor::backup::confirm_password%]",
-          "upload_backup": "[%key:supervisor::backup::upload_backup%]"
+          "confirm_password": "[%key:supervisor::backup::confirm_password%]"
         }
       },
       "custom": {
@@ -4111,8 +4088,7 @@
         "setup": {
           "next": "Next",
           "back": "Back",
-          "done": "Show me my energy dashboard!",
-          "step": "Step {step} of {steps}"
+          "done": "Show me my energy dashboard!"
         },
         "charts": {
           "stat_house_energy_meter": "Total energy consumption",
@@ -4474,7 +4450,6 @@
       "failed_to_delete": "Failed to delete",
       "could_not_create": "Could not create backup",
       "upload_backup": "Upload backup",
-      "download_backup": "Download backup",
       "create_backup": "Create backup",
       "create": "Create",
       "created": "Created",