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 {

gallery/src/pages/concepts/home.markdown

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

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

@@ -114,7 +114,7 @@ class HassioAddonConfig extends LitElement {
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
               <ha-icon-button
-                .label=${this.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``;
     }
 
@@ -47,20 +47,14 @@ export class DialogHassioBackupUpload
         scrimClickAction
         escapeKeyAction
         hideActions
-        .heading=${this.hass?.localize(
-          "ui.panel.page-onboarding.restore.upload_backup"
-        ) || "Upload backup"}
+        .heading=${true}
         @closed=${this.closeDialog}
       >
         <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"
@@ -77,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;
   }
 
@@ -71,13 +71,13 @@ class HassioBackupDialog
         open
         scrimClickAction
         @closed=${this.closeDialog}
-        .heading=${this._backup.name}
+        .heading=${true}
       >
         <div slot="heading">
           <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() {
@@ -65,16 +65,14 @@ class HassioHardwareDialog extends LitElement {
         scrimClickAction
         hideActions
         @closed=${this.closeDialog}
-        .heading=${this._dialogParams.supervisor.localize(
-          "dialog.hardware.title"
-        )}
+        .heading=${true}
       >
         <div class="header" slot="heading">
           <h2>
             ${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

@@ -94,7 +94,7 @@ export class DialogHassioNetwork
         open
         scrimClickAction
         escapeKeyAction
-        .heading=${this.supervisor.localize("dialog.network.title")}
+        .heading=${true}
         hideActions
         @closed=${this.closeDialog}
       >
@@ -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>

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

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

package.json

@@ -110,7 +110,7 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.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
-python3 -m twine upload dist/*.whl --skip-existing
+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      = 20220203.0
-author       = The Home Assistant Authors
-author_email = hello@home-assistant.io
-license      = Apache-2.0
-platforms    = any
-description  = The Home Assistant frontend
-long_description = file: README.md
-long_description_content_type = text/markdown
-url          = https://github.com/home-assistant/frontend
-
-[options]
-packages = find:
-zip_safe = False
-include_package_data = True
-python_requires = >= 3.4.0
-
-[options.packages.find]
-include =
-    hass_frontend*

setup.py

@@ -1,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-entity-toggle.ts

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

src/components/entity/ha-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,40 +48,8 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
-        .heading=${!this._currentItem
-          ? this.hass.localize(
-              "ui.components.media-browser.media-player-browser"
-            )
-          : this._currentItem.title}
         @closed=${this.closeDialog}
       >
-        <ha-header-bar slot="heading">
-          ${this._navigateIds.length > 1
-            ? html`
-                <ha-icon-button
-                  slot="navigationIcon"
-                  .path=${mdiArrowLeft}
-                  @click=${this._goBack}
-                ></ha-icon-button>
-              `
-            : ""}
-          <span slot="title">
-            ${!this._currentItem
-              ? this.hass.localize(
-                  "ui.components.media-browser.media-player-browser"
-                )
-              : this._currentItem.title}
-          </span>
-
-          <ha-icon-button
-            .label=${this.hass.localize("ui.dialogs.generic.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            slot="actionItems"
-            class="header_button"
-            dir=${computeRTLDirection(this.hass)}
-          ></ha-icon-button>
-        </ha-header-bar>
         <ha-media-player-browse
           dialog
           .hass=${this.hass}
@@ -103,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 {
@@ -134,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) {
@@ -146,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/data/supervisor/supervisor.ts

@@ -82,7 +82,7 @@ async function processEvent(
   event: SupervisorEvent,
   key: string
 ) {
-  if (event.event !== "supervisor_update" || event.update_key !== key) {
+  if (event.event !== "supervisor-update" || event.update_key !== key) {
     return;
   }
 

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

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

src/dialogs/make-dialog-manager.ts

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

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

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

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

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

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;
   }
@@ -139,7 +137,7 @@ export class QuickBar extends LitElement {
 
     return html`
       <ha-dialog
-        .heading=${this.hass.localize("ui.dialogs.quick-bar.title")}
+        .heading=${true}
         open
         @opened=${this._handleOpened}
         @closed=${this.closeDialog}
@@ -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({
@@ -231,7 +224,9 @@ export class QuickBar extends LitElement {
                 })}
               </mwc-list>
             `}
-        ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
+        ${!this._narrow && this._hint
+          ? html`<div class="hint">${this._hint}</div>`
+          : ""}
       </ha-dialog>
     `;
   }
@@ -710,18 +705,6 @@ export class QuickBar extends LitElement {
           }
         }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-textfield {
-            --mdc-shape-small: 0;
-          }
-        }
-
-        @media all and (max-width: 450px), all and (max-height: 690px) {
-          .hint {
-            display: none;
-          }
-        }
-
         ha-icon.entity,
         ha-svg-icon.entity {
           margin-left: 20px;
@@ -775,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

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

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/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

@@ -39,7 +39,6 @@ import {
   findBatteryEntity,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
-import { domainToName } from "../../../data/integration";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
 import {
@@ -202,10 +201,6 @@ export class HaConfigDevicePage extends LitElement {
   }
 
   private async _renderDiagnosticButtons(requestId: number): Promise<void> {
-    if (!isComponentLoaded(this.hass, "diagnostics")) {
-      return;
-    }
-
     const device = this._device(this.deviceId, this.devices);
 
     if (!device) {
@@ -213,53 +208,34 @@ export class HaConfigDevicePage extends LitElement {
     }
 
     let links = await Promise.all(
-      this._integrations(device, this.entries).map(async (entry) => {
-        if (entry.state !== "loaded") {
-          return false;
-        }
-        const info = await fetchDiagnosticHandler(this.hass, entry.domain);
+      this._integrations(device, this.entries)
+        .filter((entry) => entry.state === "loaded")
+        .map(async (entry) => {
+          const info = await fetchDiagnosticHandler(this.hass, entry.domain);
 
-        if (!info.handlers.device && !info.handlers.config_entry) {
-          return false;
-        }
-        return {
-          link: info.handlers.device
+          if (!info.handlers.device && !info.handlers.config_entry) {
+            return "";
+          }
+          const link = info.handlers.device
             ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
-            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
-          domain: entry.domain,
-        };
-      })
+            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id);
+          return html`
+            <a href=${link} @click=${this._signUrl}>
+              <mwc-button>
+                ${this.hass.localize(
+                  `ui.panel.config.devices.download_diagnostics`
+                )}
+              </mwc-button>
+            </a>
+          `;
+        })
     );
-
-    links = links.filter(Boolean);
-
     if (this._diagnosticDownloadLinks !== requestId) {
       return;
     }
+    links = links.filter(Boolean);
     if (links.length > 0) {
-      this._diagnosticDownloadLinks = (
-        links as { link: string; domain: string }[]
-      ).map(
-        (link) => html`
-          <a href=${link.link} @click=${this._signUrl}>
-            <mwc-button>
-              ${links.length > 1
-                ? this.hass.localize(
-                    `ui.panel.config.devices.download_diagnostics_integration`,
-                    {
-                      integration: domainToName(
-                        this.hass.localize,
-                        link.domain
-                      ),
-                    }
-                  )
-                : this.hass.localize(
-                    `ui.panel.config.devices.download_diagnostics`
-                  )}
-            </mwc-button>
-          </a>
-        `
-      );
+      this._diagnosticDownloadLinks = links;
     }
   }
 
@@ -320,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}`
@@ -513,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>
@@ -587,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>
@@ -607,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
@@ -615,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>
@@ -685,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>
@@ -705,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>
@@ -761,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>
@@ -1147,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/dialog-entity-editor.ts

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

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

@@ -42,7 +42,7 @@ import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
 
 const OVERRIDE_DEVICE_CLASSES = {
-  cover: ["window", "door", "garage", "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";
@@ -69,18 +68,8 @@ class DialogSystemLogDetail extends LitElement {
         // Custom components with our official docs should not link to our docs
         !this._manifest.documentation.includes("://www.home-assistant.io"));
 
-    const title = this.hass.localize(
-      "ui.panel.config.logs.details",
-      "level",
-      html`<span class=${item.level.toLowerCase()}
-        >${this.hass.localize(
-          "ui.panel.config.logs.level." + item.level.toLowerCase()
-        )}</span
-      >`
-    );
-
     return html`
-      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
+      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${true}>
         <ha-header-bar slot="heading">
           <ha-icon-button
             slot="navigationIcon"
@@ -88,7 +77,17 @@ class DialogSystemLogDetail extends LitElement {
             .label=${this.hass.localize("ui.common.close")}
             .path=${mdiClose}
           ></ha-icon-button>
-          <span slot="title"> ${title} </span>
+          <span slot="title">
+            ${this.hass.localize(
+              "ui.panel.config.logs.details",
+              "level",
+              html`<span class=${item.level.toLowerCase()}
+                >${this.hass.localize(
+                  "ui.panel.config.logs.level." + item.level.toLowerCase()
+                )}</span
+              >`
+            )}
+          </span>
           <ha-icon-button
             id="copy"
             @click=${this._copyLog}
@@ -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/logs/error-log-card.ts

@@ -9,10 +9,6 @@ import { HomeAssistant } from "../../../types";
 class ErrorLogCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public filter = "";
-
-  @state() private _isLogLoaded = false;
-
   @state() private _errorHTML!: TemplateResult[] | string;
 
   protected render(): TemplateResult {
@@ -47,14 +43,6 @@ class ErrorLogCard extends LitElement {
     }
   }
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
-
-    if (changedProps.has("filter") && this._isLogLoaded) {
-      this._refreshErrorLog();
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       .error-log-intro {
@@ -67,16 +55,12 @@ class ErrorLogCard extends LitElement {
       }
 
       .error-log {
-        font-family: var(--code-font-family, monospace);
-        clear: both;
+        @apply --paper-font-code)
+          clear: both;
         text-align: left;
         padding-top: 12px;
       }
 
-      .error-log > div:hover {
-        background-color: var(--secondary-background-color);
-      }
-
       .error {
         color: var(--error-color);
       }
@@ -90,33 +74,24 @@ class ErrorLogCard extends LitElement {
   private async _refreshErrorLog(): Promise<void> {
     this._errorHTML = this.hass.localize("ui.panel.config.logs.loading_log");
     const log = await fetchErrorLog(this.hass!);
-    this._isLogLoaded = true;
 
     this._errorHTML = log
-      ? log
-          .split("\n")
-          .filter((entry) => {
-            if (this.filter) {
-              return entry.toLowerCase().includes(this.filter.toLowerCase());
-            }
-            return entry;
-          })
-          .map((entry) => {
-            if (entry.includes("INFO"))
-              return html`<div class="info">${entry}</div>`;
+      ? log.split("\n").map((entry) => {
+          if (entry.includes("INFO"))
+            return html`<div class="info">${entry}</div>`;
 
-            if (entry.includes("WARNING"))
-              return html`<div class="warning">${entry}</div>`;
+          if (entry.includes("WARNING"))
+            return html`<div class="warning">${entry}</div>`;
 
-            if (
-              entry.includes("ERROR") ||
-              entry.includes("FATAL") ||
-              entry.includes("CRITICAL")
-            )
-              return html`<div class="error">${entry}</div>`;
+          if (
+            entry.includes("ERROR") ||
+            entry.includes("FATAL") ||
+            entry.includes("CRITICAL")
+          )
+            return html`<div class="error">${entry}</div>`;
 
-            return html`<div>${entry}</div>`;
-          })
+          return html`<div>${entry}</div>`;
+        })
       : this.hass.localize("ui.panel.config.logs.no_errors");
   }
 }

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

@@ -1,11 +1,9 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import "../../../common/search/search-input";
-import { extractSearchParam } from "../../../common/url/search-params";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
@@ -22,8 +20,6 @@ export class HaConfigLogs extends LitElement {
 
   @property() public route!: Route;
 
-  @state() private _filter = extractSearchParam("filter") ?? "";
-
   @query("system-log-card", true) private systemLog?: SystemLogCard;
 
   public connectedCallback() {
@@ -33,39 +29,7 @@ export class HaConfigLogs extends LitElement {
     }
   }
 
-  private async _filterChanged(ev) {
-    this._filter = ev.detail.value;
-  }
-
   protected render(): TemplateResult {
-    const search = this.narrow
-      ? html`
-          <div slot="header">
-            <search-input
-              class="header"
-              no-label-float
-              no-underline
-              @value-changed=${this._filterChanged}
-              .hass=${this.hass}
-              .filter=${this._filter}
-              .label=${this.hass.localize("ui.panel.config.logs.search")}
-            ></search-input>
-          </div>
-        `
-      : html`
-          <div class="search">
-            <search-input
-              autofocus
-              no-label-float
-              no-underline
-              @value-changed=${this._filterChanged}
-              .hass=${this.hass}
-              .filter=${this._filter}
-              .label=${this.hass.localize("ui.panel.config.logs.search")}
-            ></search-input>
-          </div>
-        `;
-
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -74,16 +38,9 @@ export class HaConfigLogs extends LitElement {
         .route=${this.route}
         .tabs=${configSections.general}
       >
-        ${search}
         <div class="content">
-          <system-log-card
-            .hass=${this.hass}
-            .filter=${this._filter}
-          ></system-log-card>
-          <error-log-card
-            .hass=${this.hass}
-            .filter=${this._filter}
-          ></error-log-card>
+          <system-log-card .hass=${this.hass}></system-log-card>
+          <error-log-card .hass=${this.hass}></error-log-card>
         </div>
       </hass-tabs-subpage>
     `;
@@ -99,17 +56,6 @@ export class HaConfigLogs extends LitElement {
           -moz-user-select: initial;
         }
 
-        .search {
-          padding: 0 16px;
-          background: var(--sidebar-background-color);
-          border-bottom: 1px solid var(--divider-color);
-        }
-
-        .search search-input {
-          position: relative;
-          top: 2px;
-        }
-
         .content {
           direction: ltr;
         }

src/panels/config/logs/system-log-card.ts

@@ -2,7 +2,6 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
@@ -23,8 +22,6 @@ import { formatSystemLogTime } from "./util";
 export class SystemLogCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public filter = "";
-
   public loaded = false;
 
   @state() private _items?: LoggedError[];
@@ -34,44 +31,9 @@ export class SystemLogCard extends LitElement {
     this._items = await fetchSystemLog(this.hass!);
   }
 
-  private _timestamp(item: LoggedError): string {
-    return formatSystemLogTime(item.timestamp, this.hass!.locale);
-  }
-
-  private _multipleMessages(item: LoggedError): string {
-    return this.hass.localize(
-      "ui.panel.config.logs.multiple_messages",
-      "time",
-      formatSystemLogTime(item.first_occurred, this.hass!.locale),
-      "counter",
-      item.count
-    );
-  }
-
-  private _getFilteredItems = memoizeOne(
-    (items: LoggedError[], filter: string) =>
-      items.filter((item: LoggedError) => {
-        if (filter) {
-          return (
-            item.message.some((message: string) =>
-              message.toLowerCase().includes(filter)
-            ) ||
-            item.source[0].toLowerCase().includes(filter) ||
-            item.name.toLowerCase().includes(filter) ||
-            this._timestamp(item).toLowerCase().includes(filter) ||
-            this._multipleMessages(item).toLowerCase().includes(filter)
-          );
-        }
-        return item;
-      })
-  );
-
   protected render(): TemplateResult {
-    const filteredItems = this._items
-      ? this._getFilteredItems(this._items, this.filter.toLowerCase())
-      : [];
-    const integrations = filteredItems.length
-      ? filteredItems.map((item) => getLoggedErrorIntegration(item))
+    const integrations = this._items
+      ? this._items.map((item) => getLoggedErrorIntegration(item))
       : [];
     return html`
       <div class="system-log-intro">
@@ -89,21 +51,17 @@ export class SystemLogCard extends LitElement {
                         ${this.hass.localize("ui.panel.config.logs.no_issues")}
                       </div>
                     `
-                  : filteredItems.length === 0 && this.filter
-                  ? html`<div class="card-content">
-                      ${this.hass.localize(
-                        "ui.panel.config.logs.no_issues_search",
-                        "term",
-                        this.filter
-                      )}
-                    </div>`
-                  : filteredItems.map(
+                  : this._items.map(
                       (item, idx) => html`
                         <paper-item @click=${this._openLog} .logItem=${item}>
                           <paper-item-body two-line>
                             <div class="row">${item.message[0]}</div>
                             <div secondary>
-                              ${this._timestamp(item)} –
+                              ${formatSystemLogTime(
+                                item.timestamp,
+                                this.hass!.locale
+                              )}
+                              –
                               ${html`(<span class=${item.level.toLowerCase()}
                                   >${this.hass.localize(
                                     "ui.panel.config.logs.level." +
@@ -123,7 +81,19 @@ export class SystemLogCard extends LitElement {
                                   }`
                                 : item.source[0]}
                               ${item.count > 1
-                                ? html` - ${this._multipleMessages(item)} `
+                                ? html`
+                                    -
+                                    ${this.hass.localize(
+                                      "ui.panel.config.logs.multiple_messages",
+                                      "time",
+                                      formatSystemLogTime(
+                                        item.first_occurred,
+                                        this.hass!.locale
+                                      ),
+                                      "counter",
+                                      item.count
+                                    )}
+                                  `
                                 : html``}
                             </div>
                           </paper-item-body>

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/components/hui-image.ts

@@ -106,9 +106,6 @@ export class HuiImage extends LitElement {
       } else if (!this.hass!.connected) {
         this._stopUpdateCameraInterval();
         this._stopIntersectionObserver();
-        this._loadState = LoadState.Loading;
-        this._cameraImageSrc = undefined;
-        this._loadedImageSrc = undefined;
       }
     }
     if (changedProps.has("_imageVisible")) {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -65,26 +65,28 @@ export class HuiCreateDialogCard
       return html``;
     }
 
-    const title = this._viewConfig.title
-      ? this.hass!.localize(
-          "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
-          "name",
-          `"${this._viewConfig.title}"`
-        )
-      : this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card");
-
     return html`
       <ha-dialog
         open
         scrimClickAction
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
-        .heading=${title}
+        .heading=${true}
         class=${classMap({ table: this._currTabIndex === 1 })}
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> ${title} </span>
+            <span slot="title">
+              ${this._viewConfig.title
+                ? this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
+                    "name",
+                    `"${this._viewConfig.title}"`
+                  )
+                : this.hass!.localize(
+                    "ui.panel.lovelace.editor.edit_card.pick_card"
+                  )}
+            </span>
           </ha-header-bar>
           <mwc-tab-bar
             .activeIndex=${this._currTabIndex}

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -176,7 +176,7 @@ export class HuiDialogEditCard
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
         @opened=${this._opened}
-        .heading=${heading}
+        .heading=${true}
       >
         <div slot="heading">
           <ha-header-bar>

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/editor/view-editor/hui-dialog-edit-view.ts

@@ -173,7 +173,7 @@ export class HuiDialogEditView extends LitElement {
         scrimClickAction
         escapeKeyAction
         @closed=${this.closeDialog}
-        .heading=${this._viewConfigTitle}
+        .heading=${true}
       >
         <div slot="heading">
           <h2>${this._viewConfigTitle}</h2>