Fix accidentally removed tag

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Radu Cotescu <radu-likes-to-code@cotescu.com>

gallery/script/netlify_build_gallery

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

gallery/sidebar.js

@@ -20,6 +20,7 @@ module.exports = [
       "editor-trigger",
       "editor-condition",
       "editor-action",
+      "selectors",
       "trace",
       "trace-timeline",
     ],
@@ -36,6 +37,10 @@ module.exports = [
     category: "misc",
     header: "Miscelaneous",
   },
+  {
+    category: "user-test",
+    header: "User Tests",
+  },
   {
     category: "design.home-assistant.io",
     header: "Design Documentation",

gallery/src/pages/automation/selectors.markdown

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

gallery/src/pages/automation/selectors.ts

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

gallery/src/pages/components/ha-alert.markdown

@@ -5,15 +5,23 @@ title: Alerts
 # Alert `<ha-alert>`
 The alert offers four severity levels that set a distinctive icon and color.
 
-<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
+<ha-alert alert-type="error">
+  This is an error alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="warning">This is an warning alert — check it out!</ha-alert>
+<ha-alert alert-type="warning">
+  This is an warning alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
+<ha-alert alert-type="info">
+  This is an info alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="success">This is an success alert — check it out!</ha-alert>
+<ha-alert alert-type="success">
+  This is an success alert — check it out!
+</ha-alert>
 
-**Note:** This component is by [MUI](https://mui.com/components/alert/) and is not documented in the [Material Design guidelines](https://material.io).
+**Note:** This component is by <a href="https://mui.com/components/alert/" rel="noopener noreferrer" target="_blank">MUI</a> and is not documented in the <a href="https://material.io" rel="noopener noreferrer" target="_blank">Material Design guidelines</a>.
 
 1. [Guidelines](#guidelines)
 2. [Implementation](#implementation)
@@ -21,8 +29,8 @@ The alert offers four severity levels that set a distinctive icon and color.
 ### Resources
 | Type           | Link                             | Status    |
 |----------------|----------------------------------|-----------|
-| Design         | [Home Assistant DesignKit](https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit) (Figma) | Available |
-| Implementation | [Web Component](https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts) (GitHub)            | Available |
+| Design         | <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Home Assistant DesignKit</a> (Figma) | Available |
+| Implementation | <a href="https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts" rel="noopener noreferrer" target="_blank">Web Component</a> (GitHub)            | Available |
 
 ## Guidelines
 ### Usage
@@ -64,78 +72,93 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
 ### Example Usage
 **Alert type**
 
-<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
+<ha-alert alert-type="error">
+  This is an error alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="warning">This is an warning alert — check it out!</ha-alert>
+<ha-alert alert-type="warning">
+  This is an warning alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
+<ha-alert alert-type="info">
+  This is an info alert — check it out!
+</ha-alert>
 
-<ha-alert alert-type="success">This is an success alert — check it out!</ha-alert>
+<ha-alert alert-type="success">
+  This is an success alert — check it out!
+</ha-alert>
 
 
 ```html
-<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
-<ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
-<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
-<ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
+<ha-alert alert-type="error">
+  This is an error alert — check it out!
+</ha-alert>
+<ha-alert alert-type="warning">
+  This is a warning alert — check it out!
+</ha-alert>
+<ha-alert alert-type="info">
+  This is an info alert — check it out!
+</ha-alert>
+<ha-alert alert-type="success">
+  This is a success alert — check it out!
+</ha-alert>
 ```
 
 **Title**
 
 The `title ` option should not be used without a description.
 
-<ha-alert alert-type="error" title="Error">
-	This is an error alert — <strong>check it out!</strong>
-</ha-alert>
-
-<ha-alert alert-type="warning">
-	<title>Warning</title>
-	This is an warning alert — <strong>check it out!</strong>
-</ha-alert>
-
-<ha-alert alert-type="info">
-	<title>Info</title>
-	This is an info alert — <strong>check it out!</strong>
-</ha-alert>
-
-<ha-alert alert-type="success">
-	<title>Success </title>
-	This is an success alert — <strong>check it out!</strong>
+<ha-alert alert-type="success" title="Success">
+  This is an success alert — check it out!
 </ha-alert>
 
 ```html
-<ha-alert alert-type="error" title="Error">
-	This is an error alert — <strong>check it out!</strong>
-</ha-alert>
-<ha-alert alert-type="warning">
-	<title>Warning</title>
-	This is an warning alert — <strong>check it out!</strong>
-</ha-alert>
-<ha-alert alert-type="info">
-	<title>Info</title>
-	This is an info alert — <strong>check it out!</strong>
-</ha-alert>
-<ha-alert alert-type="success">
-	<title>Success </title>
-	This is an success alert — <strong>check it out!</strong>
+<ha-alert alert-type="success" title="Success">
+  This is an success alert — check it out!
 </ha-alert>
 ```
 
 **Dismissable**
 
-*Documentation coming soon*
+<ha-alert alert-type="success" dismissable>
+  This is an success alert — check it out!
+</ha-alert>
+
+```html
+<ha-alert alert-type="success" dismissable>
+  This is an success alert — check it out!
+</ha-alert>
+```
+
+**Slotted action**
+
+<ha-alert alert-type="success">
+  This is an success alert — check it out!
+  <mwc-button slot="action" label="Undo"></mwc-button>
+</ha-alert>
+
+```html
+<ha-alert alert-type="success">
+  This is an success alert — check it out!
+  <mwc-button slot="action" label="Undo"></mwc-button>
+</ha-alert>
+```
 
 **Slotted icon**
 
 *Documentation coming soon*
 
-**Slotted action**
-
-*Documentation coming soon*
-
 **Right to left**
 
-*Documentation coming soon*
+<ha-alert alert-type="success" rtl>
+  This is an info alert — check it out!
+</ha-alert>
+
+```html
+<ha-alert alert-type="success" rtl>
+  This is an info alert — check it out!
+</ha-alert>
+```
 
 ### API
 **Properties/Attributes**

gallery/src/pages/user-test/configuration-menu.markdown

@@ -0,0 +1,202 @@
+---
+title: "User Test: Configuration menu"
+---
+
+# User Test: Configuration menu (10-17 January, 2022)
+
+At the end of last year, we created one Configuration menu by merging Supervisor. In the next iteration, we want to organize our menu by creating logical grouping and combining duplicated features. We are conducting this test to see if we are on the right track.
+
+* Anyone could join
+* Respondents recruited on Twitter, Reddit and Home Assistant Forum
+* This test is open for 10 days 
+* UsabilityHub for user test
+* Figma for prototype
+* 6 questions
+* 3 tasks
+* Due to some limitations by UsabilityHub, it only worked on desktop
+
+# Results
+915 respondents took part in this test and they gave 407 comments. In general there isn’t a significant difference between:
+
+* How long a respondent has been using Home Assistant
+* Installation method
+* How many visits to its Home Assistant in the past 3 months
+* Home Assistant expertise
+
+## Overall menu change
+This prototype organized our menu by creating logical grouping and combining duplicated features. What do people think of this change?
+
+### Stats
+* 2% (21) Like extremely
+* 30% (276) Like very much
+* 53% (481) Neutral
+* 12% (108) Dislike very much
+* 3% (26) Dislike extremely
+
+*3 respondents passed*
+
+### Comments summary
+**Like**
+
+* Clean and decluttered
+* Style looks better
+* Faster to use
+* Merging Supervisor into different pages
+* Moving Developer tools to Settings
+
+**Dislike**
+
+* Moving Developer tools to Settings
+* More clicks for scripts and helpers
+* Too many changes at once causes a high learning curve
+* Removing the word `Integrations` makes it harder to find them
+* Difference between `Addons` and `Services` is a bit subtle
+* No clear distinction between `Developer` and `System`
+* Material Design got the Google image
+
+**Suggestions**
+
+* More top level menu items for example logs.
+* What are settings and what not? Maybe better to name it `Configuration`
+* Devices are a first-class citizen in the domain of Home Assistant, and so shouldn't be tucked away in "Settings"
+* Rename Developer tools (or make it only for Home Assistant developers)
+* Separate administration (for instance creating users / adding lights etc) from development activities (creating automations and scripts)
+* Search Bar in Settings
+* Feature to put menu items in sidebar
+* Unification of add-ons and integrations
+* Adding ‘New’ hints to show what changed
+* Give `About` a less prominent size
+* Accordion view option which puts every tab below
+* Dev mode and a Prod Mode
+* Always show config menu (on bigger screens)
+
+### Conclusion
+We should keep our focus on organizing our menu by creating logical grouping and combining duplicated features. With these changes we make more people happy:
+
+* Reconsider putting `Logs` as a top-level menu item
+* Add a search bar
+* Use the word `Integrations` with `Devices & Services`
+* Moving `Developer tools` to `Settings` is a good idea
+* Rename `Developer tools` to for example `Tools`
+* Add `New` explanation popups to what has changed
+* We could rename `Configuration` to `Settings`
+* Give `About` a less prominent size
+
+## Helpers
+In Home Assistant you can create toggles, text fields, number sliders, timers and counters. Also known as `Helpers`. Where should they be placed?
+
+### Stats
+* 78% (709) respondents are using helpers. They use it for:
+* 92% (645) automations and scenes
+* 62% (422) dashboards
+* 43% (296) virtual devices
+
+### Comments summary
+Some respondents commented that they think `Helpers` shouldn’t be listed under `Automations & Services`. Although almost all respondents use it for that specific purpose.
+
+### Conclusion
+Helpers is, in addition to `Automations & Services`, also partly seen as virtual devices and dashboard entities. 
+
+* We might consider promoting them in their own top-level menu item
+* Rename `Helpers` to something with `controls`
+
+## Add person
+The first task in this user test was to add a person. Since this has not changed in the current menu structure, this should be an easy assignment. How do people experience the navigation to this feature?
+
+### Stats
+95% reached the goal screen and 98% marked the task as completed. There were 18 common paths.
+
+After the task we asked how easy it was to add a person.
+
+* 41% (378) Extremely easy
+* 48% (440) Fairly easy
+* 7% (67) Neutral
+* 2% (19) Somewhat difficult
+* 1% (11) Very difficult
+
+### Comments summary
+*No mentionable comments *
+
+### Conclusion
+This test showed that the current navigation design works.
+
+## YAML
+In Home Assistant you can make configuration changes in YAML files. To make these changes take effect you have to reload your YAML in the UI or do a restart. How are people doing this and can they find it in this new design?
+
+### Stats
+83% reached the goal screen and 87% marked the task as completed. There were 59 common paths.
+
+After the task we asked how easy it was to reload the YAML changes.
+
+* 4% (40) Extremely easy
+* 22% (204) Fairly easy
+* 20% (179) Neutral
+* 37% (336) Somewhat difficult
+* 17% (156) Very difficult
+
+And we asked if they have seen that we've moved some functionality from current `Server Controls` to `Developer Tools`.
+
+* 57% (517) Yes
+* 43% (398) No
+
+### Comments summary
+**Like**
+
+* YAML in Developer tools
+
+**Dislike**
+
+* Hidden restart and reload
+* YAML in Developer Tools
+* Combining `Developer tools` with `Server management`
+* Reload Home Assistant button isn't clear what it does
+* Reload/restart Home Assistant in Developer Tools
+
+**Suggestions**
+
+* Reload all YAML button
+* Dev mode and a Prod Mode
+* Show restart/reload as buttons in System instead of overflow menu
+* Explain that you can reload YAML when you want to restart your system
+* YAML reloading under System 
+
+### Conclusion
+This test showed two different kinds of user groups: UI and YAML users. 
+
+* Moving `Developer tools` to `Settings` is a good idea
+* YAML users want reload YAML and Home Assistant restart in `System`
+* Move the restart and reload button to the `System` page from the overflow menu
+* Add suggestion to reload YAML when a user wants to restart
+* Add reload all YAML button
+
+## Logs
+### Stats
+70% reached the goal screen and 77% marked the task as completed. There were 48 common paths.
+
+After the task we asked to find out why your Elgato light isn't working.
+
+* 6% (57) Extremely easy
+* 28% (254) Fairly easy
+* 21% (188) Neutral
+* 21% (196) Somewhat difficult
+* 24% (220) Very difficult
+
+### Comments summary
+
+**Suggestions**
+
+* Log errors on the integration page
+* Problem solving center
+
+### Conclusion
+Although this test shows that a large number of respondents manage to complete the task, they find it difficult to find out the light isn’t working.
+
+* Add logs errors/warnings to the integration page
+* Reconsider putting `Logs` as a top-level menu item
+
+## Learnings for next user test
+* Explain that topic is closed for comments so that you can do this test without any influence
+* Mobile test should work on mobile
+* Testing on an iPad got some bugs
+* People like doing these kind of test and we should do them more often
+

hassio/src/addon-store/hassio-addon-store.ts

@@ -95,7 +95,7 @@ class HassioAddonStore extends LitElement {
             ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
           <mwc-list-item>
-            ${this.supervisor.localize("common.reload")}
+            ${this.supervisor.localize("store.check_updates")}
           </mwc-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)

hassio/src/backups/hassio-backups.ts

@@ -119,7 +119,7 @@ export class HassioBackups extends LitElement {
   private _columns = memoizeOne(
     (narrow: boolean): DataTableColumnContainer => ({
       name: {
-        title: this.supervisor?.localize("backup.name") || "",
+        title: this.supervisor.localize("backup.name"),
         sortable: true,
         filterable: true,
         grows: true,
@@ -127,8 +127,16 @@ export class HassioBackups extends LitElement {
           html`${entry || backup.slug}
             <div class="secondary">${backup.secondary}</div>`,
       },
+      size: {
+        title: this.supervisor.localize("backup.size"),
+        width: "15%",
+        hidden: narrow,
+        filterable: true,
+        sortable: true,
+        template: (entry: number) => Math.ceil(entry * 10) / 10 + " MB",
+      },
       date: {
-        title: this.supervisor?.localize("backup.created") || "",
+        title: this.supervisor.localize("backup.created"),
         width: "15%",
         direction: "desc",
         hidden: narrow,
@@ -188,11 +196,11 @@ export class HassioBackups extends LitElement {
             slot="trigger"
           ></ha-icon-button>
           <mwc-list-item>
-            ${this.supervisor?.localize("common.reload")}
+            ${this.supervisor.localize("common.reload")}
           </mwc-list-item>
           ${atLeastVersion(this.hass.config.version, 0, 116)
             ? html`<mwc-list-item>
-                ${this.supervisor?.localize("backup.upload_backup")}
+                ${this.supervisor.localize("backup.upload_backup")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>

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

@@ -29,10 +29,6 @@ import {
   HassioAddonDetails,
   updateHassioAddon,
 } from "../../../src/data/hassio/addon";
-import {
-  createHassioPartialBackup,
-  HassioPartialBackupCreateParams,
-} from "../../../src/data/hassio/backup";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -103,7 +99,7 @@ class UpdateAvailableCard extends LitElement {
 
   @state() private _addonInfo?: HassioAddonDetails;
 
-  @state() private _action: "backup" | "update" | null = null;
+  @state() private _updating = false;
 
   @state() private _error?: string;
 
@@ -138,7 +134,7 @@ class UpdateAvailableCard extends LitElement {
                   name: this._name,
                 })}
               </p>`
-            : this._action === null
+            : !this._updating
             ? html`
                 ${this._changelogContent
                   ? html`
@@ -172,18 +168,13 @@ class UpdateAvailableCard extends LitElement {
             : html`<ha-circular-progress alt="Updating" size="large" active>
                 </ha-circular-progress>
                 <p class="progress-text">
-                  ${this._action === "update"
-                    ? this.supervisor.localize("update_available.updating", {
-                        name: this._name,
-                        version: this._version_latest,
-                      })
-                    : this.supervisor.localize(
-                        "update_available.creating_backup",
-                        { name: this._name }
-                      )}
+                  ${this.supervisor.localize("update_available.updating", {
+                    name: this._name,
+                    version: this._version_latest,
+                  })}
                 </p>`}
         </div>
-        ${this._version !== this._version_latest && this._action === null
+        ${this._version !== this._version_latest && !this._updating
           ? html`
               <div class="card-actions">
                 ${changelog
@@ -319,37 +310,16 @@ class UpdateAvailableCard extends LitElement {
 
   private async _update() {
     this._error = undefined;
-    if (this._shouldCreateBackup) {
-      let backupArgs: HassioPartialBackupCreateParams;
-      if (this._updateType === "addon") {
-        backupArgs = {
-          name: `addon_${this.addonSlug}_${this._version}`,
-          addons: [this.addonSlug!],
-          homeassistant: false,
-        };
-      } else {
-        backupArgs = {
-          name: `${this._updateType}_${this._version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        };
-      }
-      this._action = "backup";
-      try {
-        await createHassioPartialBackup(this.hass, backupArgs);
-      } catch (err: any) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
+    this._updating = true;
     try {
       if (this._updateType === "addon") {
-        await updateHassioAddon(this.hass, this.addonSlug!);
+        await updateHassioAddon(
+          this.hass,
+          this.addonSlug!,
+          this._shouldCreateBackup
+        );
       } else if (this._updateType === "core") {
-        await updateCore(this.hass);
+        await updateCore(this.hass, this._shouldCreateBackup);
       } else if (this._updateType === "os") {
         await updateOS(this.hass);
       } else if (this._updateType === "supervisor") {
@@ -358,11 +328,12 @@ class UpdateAvailableCard extends LitElement {
     } catch (err: any) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
-        this._action = null;
+        this._updating = false;
         return;
       }
     }
     fireEvent(this, "update-complete");
+    this._updating = false;
   }
 
   static get styles(): CSSResultGroup {

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20220118.0",
+    version="20220124.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/common/datetime/format_time.ts

@@ -43,9 +43,9 @@ export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
 const formatTimeWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
-      second: "2-digit",
       hour12: useAmPm(locale),
     })
 );

src/common/decorators/local-storage.ts

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

src/common/entity/compute_state_display.ts

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

src/components/data-table/ha-data-table-icon.ts

@@ -0,0 +1,64 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../ha-svg-icon";
+
+@customElement("ha-data-table-icon")
+class HaDataTableIcon extends LitElement {
+  @property() public tooltip!: string;
+
+  @property() public path!: string;
+
+  @state() private _hovered = false;
+
+  protected render(): TemplateResult {
+    return html`
+      ${this._hovered ? html`<div>${this.tooltip}</div>` : ""}
+      <ha-svg-icon .path=${this.path}></ha-svg-icon>
+    `;
+  }
+
+  protected override firstUpdated(changedProps: PropertyValues): void {
+    super.firstUpdated(changedProps);
+    const show = () => {
+      this._hovered = true;
+    };
+    const hide = () => {
+      this._hovered = false;
+    };
+    this.addEventListener("mouseenter", show);
+    this.addEventListener("focus", show);
+    this.addEventListener("mouseleave", hide);
+    this.addEventListener("blur", hide);
+    this.addEventListener("tap", hide);
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      ha-svg-icon {
+        color: var(--secondary-text-color);
+      }
+      div {
+        position: absolute;
+        right: 28px;
+        z-index: 1002;
+        outline: none;
+        font-size: 10px;
+        line-height: 1;
+        background-color: var(--paper-tooltip-background, #616161);
+        color: var(--paper-tooltip-text-color, white);
+        padding: 8px;
+        border-radius: 2px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-data-table-icon": HaDataTableIcon;
+  }
+}

src/components/data-table/ha-data-table.ts

@@ -56,8 +56,8 @@ export interface SortingChangedEvent {
 
 export type SortingDirection = "desc" | "asc" | null;
 
-export interface DataTableColumnContainer {
-  [key: string]: DataTableColumnData;
+export interface DataTableColumnContainer<T = any> {
+  [key: string]: DataTableColumnData<T>;
 }
 
 export interface DataTableSortColumnData {
@@ -68,10 +68,10 @@ export interface DataTableSortColumnData {
   direction?: SortingDirection;
 }
 
-export interface DataTableColumnData extends DataTableSortColumnData {
+export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   title: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
-  template?: <T>(data: any, row: T) => TemplateResult | string;
+  template?: (data: any, row: T) => TemplateResult | string;
   width?: string;
   maxWidth?: string;
   grows?: boolean;

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-state-label-badge.ts

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

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

@@ -120,7 +120,7 @@ class HaAttributes extends LitElement {
 
   private formatAttribute(attribute: string): string | TemplateResult {
     if (!this.stateObj) {
-      return "-";
+      return "—";
     }
     const value = this.stateObj.attributes[attribute];
     return formatAttributeValue(this.hass, value);

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

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

src/components/ha-gauge.ts

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

src/components/ha-hls-player.ts

@@ -9,7 +9,6 @@ import {
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { nextRender } from "../common/util/render-status";
-import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
 
@@ -48,8 +47,11 @@ class HaHLSPlayer extends LitElement {
 
   private _exoPlayer = false;
 
+  private static streamCount = 0;
+
   public connectedCallback() {
     super.connectedCallback();
+    HaHLSPlayer.streamCount += 1;
     if (this.hasUpdated) {
       this._startHls();
     }
@@ -57,6 +59,7 @@ class HaHLSPlayer extends LitElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    HaHLSPlayer.streamCount -= 1;
     this._cleanUp();
   }
 
@@ -87,18 +90,9 @@ class HaHLSPlayer extends LitElement {
     this._startHls();
   }
 
-  private async _getUseExoPlayer(): Promise<boolean> {
-    if (!this.hass!.auth.external || !this.allowExoPlayer) {
-      return false;
-    }
-    const externalConfig = await getExternalConfig(this.hass!.auth.external);
-    return externalConfig && externalConfig.hasExoPlayer;
-  }
-
   private async _startHls(): Promise<void> {
     this._error = undefined;
 
-    const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
     const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min"))
@@ -122,7 +116,8 @@ class HaHLSPlayer extends LitElement {
       return;
     }
 
-    const useExoPlayer = await useExoPlayerPromise;
+    const useExoPlayer =
+      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
     if (!this.isConnected) {
@@ -186,6 +181,28 @@ class HaHLSPlayer extends LitElement {
     });
   };
 
+  private _isLLHLSSupported(): boolean {
+    // LL-HLS keeps multiple requests in flight, which can run into browser limitations without
+    // an http/2 proxy to pipeline requests. However, a small number of streams active at
+    // once should be OK.
+    // The stream count may be incremented multiple times before this function is called to check
+    // the count e.g. when loading a page with many streams on it. The race can work in our favor
+    // so we now have a better idea on if we'll use too many browser connections later.
+    if (HaHLSPlayer.streamCount <= 2) {
+      return true;
+    }
+    if (
+      !("performance" in window) ||
+      performance.getEntriesByType("resource").length === 0
+    ) {
+      return false;
+    }
+    const perfEntry = performance.getEntriesByType(
+      "resource"
+    )[0] as PerformanceResourceTiming;
+    return "nextHopProtocol" in perfEntry && perfEntry.nextHopProtocol === "h2";
+  }
+
   private async _renderHLSPolyfill(
     videoEl: HTMLVideoElement,
     Hls: typeof HlsType,
@@ -197,6 +214,7 @@ class HaHLSPlayer extends LitElement {
       manifestLoadingTimeOut: 30000,
       levelLoadingTimeOut: 30000,
       maxLiveSyncPlaybackRate: 2,
+      lowLatencyMode: this._isLLHLSSupported(),
     });
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);

src/components/ha-service-control.ts

@@ -130,6 +130,33 @@ export class HaServiceControl extends LitElement {
       this._value = this.value;
     }
 
+    if (oldValue?.service !== this.value?.service) {
+      let updatedDefaultValue = false;
+      if (this._value && serviceData) {
+        // Set mandatory bools without a default value to false
+        this._value.data ??= {};
+        serviceData.fields.forEach((field) => {
+          if (
+            field.selector &&
+            field.required &&
+            field.default === undefined &&
+            "boolean" in field.selector &&
+            this._value!.data![field.key] === undefined
+          ) {
+            updatedDefaultValue = true;
+            this._value!.data![field.key] = false;
+          }
+        });
+      }
+      if (updatedDefaultValue) {
+        fireEvent(this, "value-changed", {
+          value: {
+            ...this._value,
+          },
+        });
+      }
+    }
+
     if (this._value?.data) {
       const yamlEditor = this._yamlEditor;
       if (yamlEditor && yamlEditor.value !== this._value.data) {

src/components/ha-sidebar.ts

@@ -44,10 +44,6 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
-import {
-  ExternalConfig,
-  getExternalConfig,
-} from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
@@ -192,8 +188,6 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  @state() private _externalConfig?: ExternalConfig;
-
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -270,13 +264,6 @@ class HaSidebar extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-
-    if (this.hass && this.hass.auth.external) {
-      getExternalConfig(this.hass.auth.external).then((conf) => {
-        this._externalConfig = conf;
-      });
-    }
-
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
@@ -559,8 +546,7 @@ class HaSidebar extends LitElement {
 
   private _renderExternalConfiguration() {
     return html`${!this.hass.user?.is_admin &&
-    this._externalConfig &&
-    this._externalConfig.hasSettingsScreen
+    this.hass.auth.external?.config.hasSettingsScreen
       ? html`
           <a
             role="option"

src/components/ha-svg-icon.ts

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

src/components/ha-textfield.ts

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

src/components/ha-water_heater-state.js

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

src/components/ha-yaml-editor.ts

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

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

@@ -340,7 +340,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                 </mwc-list>
               `
           : html`
-              <div class="container">
+              <div class="container no-items">
                 ${this.hass.localize("ui.components.media-browser.no_items")}
                 <br />
                 ${currentItem.media_content_id ===
@@ -413,32 +413,34 @@ export class HaMediaPlayerBrowse extends LitElement {
     let parentProm: Promise<MediaPlayerItem> | undefined;
 
     // See if we can take loading shortcuts if navigating to parent or child
-    if (
-      // Check if we navigated to a child
-      oldNavigateIds &&
-      this.navigateIds.length > oldNavigateIds.length &&
-      oldNavigateIds.every((oldVal, idx) => {
-        const curVal = this.navigateIds[idx];
-        return (
-          curVal.media_content_id === oldVal.media_content_id &&
-          curVal.media_content_type === oldVal.media_content_type
-        );
-      })
-    ) {
-      parentProm = Promise.resolve(oldCurrentItem!);
-    } else if (
-      // Check if we navigated to a parent
-      oldNavigateIds &&
-      this.navigateIds.length < oldNavigateIds.length &&
-      this.navigateIds.every((curVal, idx) => {
-        const oldVal = oldNavigateIds[idx];
-        return (
-          curVal.media_content_id === oldVal.media_content_id &&
-          curVal.media_content_type === oldVal.media_content_type
-        );
-      })
-    ) {
-      currentProm = Promise.resolve(oldParentItem!);
+    if (!changedProps.has("entityId")) {
+      if (
+        // Check if we navigated to a child
+        oldNavigateIds &&
+        this.navigateIds.length > oldNavigateIds.length &&
+        oldNavigateIds.every((oldVal, idx) => {
+          const curVal = this.navigateIds[idx];
+          return (
+            curVal.media_content_id === oldVal.media_content_id &&
+            curVal.media_content_type === oldVal.media_content_type
+          );
+        })
+      ) {
+        parentProm = Promise.resolve(oldCurrentItem!);
+      } else if (
+        // Check if we navigated to a parent
+        oldNavigateIds &&
+        this.navigateIds.length < oldNavigateIds.length &&
+        this.navigateIds.every((curVal, idx) => {
+          const oldVal = oldNavigateIds[idx];
+          return (
+            curVal.media_content_id === oldVal.media_content_id &&
+            curVal.media_content_type === oldVal.media_content_type
+          );
+        })
+      ) {
+        currentProm = Promise.resolve(oldParentItem!);
+      }
     }
     // Fetch current
     if (!currentProm) {
@@ -694,6 +696,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 16px;
         }
 
+        .no-items {
+          padding-left: 32px;
+        }
+
         .content {
           overflow-y: auto;
           padding-bottom: 20px;
@@ -710,7 +716,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           right: 0;
           left: 0;
           z-index: 5;
-          padding: 20px 24px 10px;
+          padding: 20px 24px 10px 32px;
         }
 
         .header_button {
@@ -809,8 +815,7 @@ export class HaMediaPlayerBrowse extends LitElement {
             minmax(var(--media-browse-item-size, 175px), 0.1fr)
           );
           grid-gap: 16px;
-          padding: 0px 24px;
-          margin: 8px 0px;
+          padding: 8px;
         }
 
         :host([dialog]) .children {

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

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

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

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

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

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

src/data/config_flow.ts

@@ -114,5 +114,8 @@ export const localizeConfigFlowTitle = (
     args.push(key);
     args.push(placeholders[key]);
   });
-  return localize(`component.${flow.handler}.config.flow_title`, ...args);
+  return localize(`component.${flow.handler}.config.flow_title`, ...args) ||
+    "name" in placeholders
+    ? placeholders.name
+    : domainToName(localize, flow.handler);
 };

src/data/diagnostics.ts

@@ -1,9 +1,10 @@
 import { HomeAssistant } from "../types";
 
-interface DiagnosticInfo {
+export interface DiagnosticInfo {
   domain: string;
   handlers: {
     config_entry: boolean;
+    device: boolean;
   };
 }
 
@@ -14,5 +15,19 @@ export const fetchDiagnosticHandlers = (
     type: "diagnostics/list",
   });
 
+export const fetchDiagnosticHandler = (
+  hass: HomeAssistant,
+  domain: string
+): Promise<DiagnosticInfo> =>
+  hass.callWS<DiagnosticInfo>({
+    type: "diagnostics/get",
+    domain,
+  });
+
 export const getConfigEntryDiagnosticsDownloadUrl = (entry_id: string) =>
   `/api/diagnostics/config_entry/${entry_id}`;
+
+export const getDeviceDiagnosticsDownloadUrl = (
+  entry_id: string,
+  device_id: string
+) => `/api/diagnostics/config_entry/${entry_id}/device/${device_id}`;

src/data/hassio/addon.ts

@@ -302,7 +302,8 @@ export const installHassioAddon = async (
 
 export const updateHassioAddon = async (
   hass: HomeAssistant,
-  slug: string
+  slug: string,
+  backup: boolean
 ): Promise<void> => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     await hass.callWS({
@@ -310,11 +311,13 @@ export const updateHassioAddon = async (
       endpoint: `/store/addons/${slug}/update`,
       method: "post",
       timeout: null,
+      data: { backup },
     });
   } else {
     await hass.callApi<HassioResponse<void>>(
       "POST",
-      `hassio/addons/${slug}/update`
+      `hassio/addons/${slug}/update`,
+      { backup }
     );
   }
 };

src/data/hassio/backup.ts

@@ -20,6 +20,7 @@ export interface HassioBackup {
   slug: string;
   date: string;
   name: string;
+  size: number;
   type: "full" | "partial";
   protected: boolean;
   content: BackupContent;

src/data/media-player.ts

@@ -320,3 +320,25 @@ export const computeMediaControls = (
 
   return buttons.length > 0 ? buttons : undefined;
 };
+
+export const formatMediaTime = (seconds: number): string => {
+  if (!seconds) {
+    return "";
+  }
+
+  let secondsString = new Date(seconds * 1000).toISOString();
+  secondsString =
+    seconds > 3600
+      ? secondsString.substring(11, 16)
+      : secondsString.substring(14, 19);
+  return secondsString.replace(/^0+/, "").padStart(4, "0");
+};
+
+export const cleanupMediaTitle = (title?: string): string | undefined => {
+  if (!title) {
+    return undefined;
+  }
+
+  const index = title.indexOf("?authSig=");
+  return index > 0 ? title.slice(0, index) : title;
+};

src/data/media_source.ts

@@ -0,0 +1,15 @@
+import { HomeAssistant } from "../types";
+
+export interface ResolvedMediaSource {
+  url: string;
+  mime_type: string;
+}
+
+export const resolveMediaSource = (
+  hass: HomeAssistant,
+  media_content_id: string
+) =>
+  hass.callWS<ResolvedMediaSource>({
+    type: "media_source/resolve_media",
+    media_content_id,
+  });

src/data/supervisor/core.ts

@@ -6,15 +6,18 @@ export const restartCore = async (hass: HomeAssistant) => {
   await hass.callService("homeassistant", "restart");
 };
 
-export const updateCore = async (hass: HomeAssistant) => {
+export const updateCore = async (hass: HomeAssistant, backup: boolean) => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     await hass.callWS({
       type: "supervisor/api",
       endpoint: "/core/update",
       method: "post",
       timeout: null,
+      data: { backup },
     });
   } else {
-    await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`);
+    await hass.callApi<HassioResponse<void>>("POST", `hassio/core/update`, {
+      backup,
+    });
   }
 };

src/data/supervisor/root.ts

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

src/data/supervisor/supervisor.ts

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

src/data/user.ts

@@ -1,3 +1,9 @@
+import {
+  mdiCrownCircleOutline,
+  mdiAlphaSCircleOutline,
+  mdiHomeCircleOutline,
+  mdiCancel,
+} from "@mdi/js";
 import { HomeAssistant } from "../types";
 import { Credential } from "./auth";
 
@@ -73,7 +79,36 @@ export const computeUserInitials = (name: string) => {
       .split(" ")
       .slice(0, 3)
       // Of each word, take first letter
-      .map((s) => s.substr(0, 1))
+      .map((s) => s.substring(0, 1))
       .join("")
   );
 };
+
+const OWNER_ICON = mdiCrownCircleOutline;
+const SYSTEM_ICON = mdiAlphaSCircleOutline;
+const LOCAL_ICON = mdiHomeCircleOutline;
+const DISABLED_ICON = mdiCancel;
+
+export const computeUserBadges = (
+  hass: HomeAssistant,
+  user: User,
+  includeSystem: boolean
+) => {
+  const labels: [string, string][] = [];
+  const translate = (key) => hass.localize(`ui.panel.config.users.${key}`);
+
+  if (user.is_owner) {
+    labels.push([OWNER_ICON, translate("is_owner")]);
+  }
+  if (includeSystem && user.system_generated) {
+    labels.push([SYSTEM_ICON, translate("is_system")]);
+  }
+  if (user.local_only) {
+    labels.push([LOCAL_ICON, translate("is_local")]);
+  }
+  if (!user.is_active) {
+    labels.push([DISABLED_ICON, translate("is_not_active")]);
+  }
+
+  return labels;
+};

src/data/weather.ts

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

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

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

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

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

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

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

src/external_app/external_app_entrypoint.ts

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

src/external_app/external_auth.ts

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

src/external_app/external_config.ts

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

src/external_app/external_events_forwarder.ts

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

src/external_app/external_messaging.ts

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

src/layouts/home-assistant-main.ts

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

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

@@ -1,10 +1,9 @@
 import "@material/mwc-button";
-import { mdiPlayCircleOutline } from "@mdi/js";
+import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js";
 import "@polymer/paper-input/paper-textarea";
 import type { PaperTextareaElement } from "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { LocalStorage } from "../../../../common/decorators/local-storage";
@@ -14,6 +13,7 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-paper-dropdown-menu";
+import { showAutomationEditor } from "../../../../data/automation";
 import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -29,13 +29,11 @@ export class DialogTryTts extends LitElement {
 
   @state() private _params?: TryTtsDialogParams;
 
-  @query("#target") private _targetInput?: PaperListboxElement;
-
   @query("#message") private _messageInput?: PaperTextareaElement;
 
-  @LocalStorage("cloudTtsTryMessage") private _message?: string;
+  @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
 
-  @LocalStorage("cloudTtsTryTarget") private _target?: string;
+  @LocalStorage("cloudTtsTryTarget", false, false) private _target!: string;
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;
@@ -50,6 +48,7 @@ export class DialogTryTts extends LitElement {
     if (!this._params) {
       return html``;
     }
+    const target = this._target || "browser";
     return html`
       <ha-dialog
         open
@@ -83,7 +82,8 @@ export class DialogTryTts extends LitElement {
               id="target"
               slot="dropdown-content"
               attr-for-selected="item-value"
-              .selected=${this._target || "browser"}
+              .selected=${target}
+              @selected-changed=${this._handleTargetChanged}
             >
               <paper-item item-value="browser">
                 ${this.hass.localize(
@@ -108,42 +108,70 @@ export class DialogTryTts extends LitElement {
         </div>
         <mwc-button
           slot="primaryAction"
+          .label=${this.hass.localize(
+            "ui.panel.config.cloud.account.tts.dialog.play"
+          )}
           @click=${this._playExample}
           .disabled=${this._loadingExample}
         >
-          <ha-svg-icon .path=${mdiPlayCircleOutline}></ha-svg-icon>
-          &nbsp;${this.hass.localize(
-            "ui.panel.config.cloud.account.tts.dialog.play"
+          <ha-svg-icon slot="icon" .path=${mdiPlayCircleOutline}></ha-svg-icon>
+        </mwc-button>
+        <mwc-button
+          slot="secondaryAction"
+          .disabled=${target === "browser"}
+          .label=${this.hass.localize(
+            "ui.panel.config.cloud.account.tts.dialog.create_automation"
           )}
+          @click=${this._createAutomation}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiRobot}></ha-svg-icon>
         </mwc-button>
       </ha-dialog>
     `;
   }
 
-  private async _playExample() {
-    const target = String(this._targetInput?.selected);
-    const message = this._messageInput?.value;
+  private _handleTargetChanged(ev) {
+    this._target = ev.detail.value;
+    this.requestUpdate("_target");
+  }
 
-    if (!message || !target) {
+  private async _playExample() {
+    const message = this._messageInput?.value;
+    if (!message) {
       return;
     }
-
     this._message = message;
-    this._target = target;
 
-    if (target === "browser") {
+    if (this._target === "browser") {
       // We create the audio element here + do a play, because iOS requires it to be done by user action
       const audio = new Audio();
       audio.play();
       this._playBrowser(message, audio);
     } else {
       this.hass.callService("tts", "cloud_say", {
-        entity_id: target,
+        entity_id: this._target,
         message,
       });
     }
   }
 
+  private _createAutomation() {
+    const message = this._messageInput!.value!;
+    this._message = message;
+    showAutomationEditor({
+      action: [
+        {
+          service: "tts.cloud_say",
+          data: {
+            entity_id: this._target,
+            message: message,
+          },
+        },
+      ],
+    });
+    this.closeDialog();
+  }
+
   private async _playBrowser(message: string, audio: HTMLAudioElement) {
     this._loadingExample = true;
 

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

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

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

@@ -6,7 +6,6 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
-import { ExternalConfig } from "../../../external_app/external_config";
 import { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../../types";
 
@@ -20,14 +19,12 @@ class HaConfigNavigation extends LitElement {
 
   @property() public pages!: PageNavigation[];
 
-  @property() public externalConfig?: ExternalConfig;
-
   protected render(): TemplateResult {
     return html`
       ${this.pages.map((page) =>
         (
           page.path === "#external-app-configuration"
-            ? this.externalConfig?.hasSettingsScreen
+            ? this.hass.auth.external?.config.hasSettingsScreen
             : canShowPage(this.hass, page)
         )
           ? html`

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

@@ -7,9 +7,10 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-logo-svg";
 import "../../../components/ha-svg-icon";
-import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/root";
 import { buttonLinkStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import "../../../components/ha-icon-next";
 
 export const SUPERVISOR_UPDATE_NAMES = {
   core: "Home Assistant Core",
@@ -46,34 +47,33 @@ class HaConfigUpdates extends LitElement {
       </div>
       ${updates.map(
         (update) => html`
-          <paper-icon-item>
-            <span slot="item-icon" class="icon">
-              ${update.update_type === "addon"
-                ? update.icon
-                  ? html`<img src="/api/hassio${update.icon}" />`
-                  : html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
-                : html`<ha-logo-svg></ha-logo-svg>`}
-            </span>
-            <paper-item-body two-line>
-              ${update.update_type === "addon"
-                ? update.name
-                : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
-              <div secondary>
-                ${this.hass.localize(
-                  "ui.panel.config.updates.version_available",
-                  {
-                    version_available: update.version_latest,
-                  }
-                )}
-              </div>
-            </paper-item-body>
-            <a href="/hassio${update.panel_path}">
-              <mwc-button
-                .label=${this.hass.localize("ui.panel.config.updates.show")}
-              >
-              </mwc-button>
-            </a>
-          </paper-icon-item>
+          <a href="/hassio${update.panel_path}">
+            <paper-icon-item>
+              <span slot="item-icon" class="icon">
+                ${update.update_type === "addon"
+                  ? update.icon
+                    ? html`<img src="/api/hassio${update.icon}" />`
+                    : html`<ha-svg-icon
+                        .path=${mdiPackageVariant}
+                      ></ha-svg-icon>`
+                  : html`<ha-logo-svg></ha-logo-svg>`}
+              </span>
+              <paper-item-body two-line>
+                ${update.update_type === "addon"
+                  ? update.name
+                  : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
+                <div secondary>
+                  ${this.hass.localize(
+                    "ui.panel.config.updates.version_available",
+                    {
+                      version_available: update.version_latest,
+                    }
+                  )}
+                </div>
+              </paper-item-body>
+              ${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
+            </paper-icon-item>
+          </a>
         `
       )}
       ${!this._showAll && this.supervisorUpdates.length >= 4
@@ -120,10 +120,10 @@ class HaConfigUpdates extends LitElement {
         ha-logo-svg {
           color: var(--secondary-text-color);
         }
-        button.show-all {
-          color: var(--primary-color);
-          text-decoration: none;
-          margin: 16px;
+        ha-icon-next {
+          color: var(--secondary-text-color);
+          height: 24px;
+          width: 24px;
         }
       `,
     ];

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

@@ -17,6 +17,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
 import { AreaRegistryEntry } from "../../../data/area_registry";
+import { getSignedPath } from "../../../data/auth";
 import {
   ConfigEntry,
   disableConfigEntry,
@@ -27,6 +28,11 @@ import {
   DeviceRegistryEntry,
   updateDeviceRegistryEntry,
 } from "../../../data/device_registry";
+import {
+  fetchDiagnosticHandler,
+  getDeviceDiagnosticsDownloadUrl,
+  getConfigEntryDiagnosticsDownloadUrl,
+} from "../../../data/diagnostics";
 import {
   EntityRegistryEntry,
   findBatteryChargingEntity,
@@ -44,6 +50,7 @@ import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
+import { fileDownload } from "../../../util/file_download";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./device-detail/ha-device-entities-card";
@@ -82,6 +89,11 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _related?: RelatedResult;
 
+  // If a number, it's the request ID so we make sure we don't show older info
+  @state() private _diagnosticDownloadLinks?:
+    | number
+    | (TemplateResult | string)[];
+
   private _device = memoizeOne(
     (
       deviceId: string,
@@ -91,10 +103,8 @@ export class HaConfigDevicePage extends LitElement {
   );
 
   private _integrations = memoizeOne(
-    (device: DeviceRegistryEntry, entries: ConfigEntry[]): string[] =>
-      entries
-        .filter((entry) => device.config_entries.includes(entry.entry_id))
-        .map((entry) => entry.domain)
+    (device: DeviceRegistryEntry, entries: ConfigEntry[]): ConfigEntry[] =>
+      entries.filter((entry) => device.config_entries.includes(entry.entry_id))
   );
 
   private _entities = memoizeOne(
@@ -165,6 +175,70 @@ export class HaConfigDevicePage extends LitElement {
       findBatteryChargingEntity(this.hass, entities)
   );
 
+  public willUpdate(changedProps) {
+    super.willUpdate(changedProps);
+
+    if (
+      changedProps.has("deviceId") ||
+      changedProps.has("devices") ||
+      changedProps.has("deviceId") ||
+      changedProps.has("entries")
+    ) {
+      this._diagnosticDownloadLinks = undefined;
+    }
+
+    if (
+      this._diagnosticDownloadLinks ||
+      !this.devices ||
+      !this.deviceId ||
+      !this.entries
+    ) {
+      return;
+    }
+
+    this._diagnosticDownloadLinks = Math.random();
+    this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
+  }
+
+  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+    let links = await Promise.all(
+      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 "";
+          }
+          const link = info.handlers.device
+            ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
+            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id);
+          return html`
+            <a href=${link} @click=${this._signUrl}>
+              <mwc-button>
+                ${this.hass.localize(
+                  `ui.panel.config.devices.download_diagnostics`
+                )}
+              </mwc-button>
+            </a>
+          `;
+        })
+    );
+    if (this._diagnosticDownloadLinks !== requestId) {
+      return;
+    }
+    links = links.filter(Boolean);
+    if (links.length > 0) {
+      this._diagnosticDownloadLinks = links;
+    }
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     loadDeviceRegistryDetailDialog();
@@ -214,6 +288,66 @@ export class HaConfigDevicePage extends LitElement {
       ? device.configuration_url!.replace("homeassistant://", "/")
       : device.configuration_url;
 
+    const deviceInfo: TemplateResult[] = [];
+
+    if (device.disabled_by) {
+      deviceInfo.push(
+        html`
+          <ha-alert alert-type="warning">
+            ${this.hass.localize(
+              "ui.panel.config.devices.enabled_cause",
+              "cause",
+              this.hass.localize(
+                `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+              )
+            )}
+          </ha-alert>
+          ${device.disabled_by === "user"
+            ? html` <div class="card-actions" slot="actions">
+                <mwc-button unelevated @click=${this._enableDevice}>
+                  ${this.hass.localize("ui.common.enable")}
+                </mwc-button>
+              </div>`
+            : ""}
+        `
+      );
+    }
+
+    const deviceActions: (TemplateResult | string)[] = [];
+
+    if (configurationUrl) {
+      deviceActions.push(html`
+        <a
+          href=${configurationUrl}
+          rel="noopener noreferrer"
+          .target=${configurationUrlIsHomeAssistant ? "_self" : "_blank"}
+        >
+          <mwc-button>
+            ${this.hass.localize(
+              `ui.panel.config.devices.open_configuration_url_${
+                device.entry_type || "device"
+              }`
+            )}
+            <ha-svg-icon
+              .path=${mdiOpenInNew}
+              slot="trailingIcon"
+            ></ha-svg-icon>
+          </mwc-button>
+        </a>
+      `);
+    }
+
+    this._renderIntegrationInfo(
+      device,
+      integrations,
+      deviceInfo,
+      deviceActions
+    );
+
+    if (Array.isArray(this._diagnosticDownloadLinks)) {
+      deviceActions.push(...this._diagnosticDownloadLinks);
+    }
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -291,7 +425,7 @@ export class HaConfigDevicePage extends LitElement {
                       ? html`
                           <img
                             src=${brandsUrl({
-                              domain: integrations[0],
+                              domain: integrations[0].domain,
                               type: "logo",
                               darkOptimized: this.hass.themes?.darkMode,
                             })}
@@ -312,56 +446,16 @@ export class HaConfigDevicePage extends LitElement {
                 .devices=${this.devices}
                 .device=${device}
               >
-              ${
-                device.disabled_by
-                  ? html`
-                      <ha-alert alert-type="warning">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.enabled_cause",
-                          "cause",
-                          this.hass.localize(
-                            `ui.panel.config.devices.disabled_by.${device.disabled_by}`
-                          )
-                        )}
-                      </ha-alert>
-                      ${device.disabled_by === "user"
-                        ? html` <div class="card-actions" slot="actions">
-                            <mwc-button unelevated @click=${this._enableDevice}>
-                              ${this.hass.localize("ui.common.enable")}
-                            </mwc-button>
-                          </div>`
-                        : ""}
-                    `
-                  : html``
-              }
-              ${
-                configurationUrl
-                  ? html`
-                      <div class="card-actions" slot="actions">
-                        <a
-                          href=${configurationUrl}
-                          rel="noopener noreferrer"
-                          .target=${configurationUrlIsHomeAssistant
-                            ? "_self"
-                            : "_blank"}
-                        >
-                          <mwc-button>
-                            ${this.hass.localize(
-                              `ui.panel.config.devices.open_configuration_url_${
-                                device.entry_type || "device"
-                              }`
-                            )}
-                            <ha-svg-icon
-                              .path=${mdiOpenInNew}
-                              slot="trailingIcon"
-                            ></ha-svg-icon>
-                          </mwc-button>
-                        </a>
-                      </div>
-                    `
-                  : ""
-              }
-              ${this._renderIntegrationInfo(device, integrations)}
+                ${deviceInfo}
+                ${
+                  deviceActions.length
+                    ? html`
+                        <div class="card-actions" slot="actions">
+                          ${deviceActions}
+                        </div>
+                      `
+                    : ""
+                }
               </ha-device-info-card>
           </div>
           <div class="column">
@@ -648,85 +742,84 @@ export class HaConfigDevicePage extends LitElement {
 
   private _renderIntegrationInfo(
     device,
-    integrations: string[]
+    integrations: ConfigEntry[],
+    deviceInfo: TemplateResult[],
+    deviceActions: (string | TemplateResult)[]
   ): TemplateResult[] {
+    const domains = integrations.map((int) => int.domain);
     const templates: TemplateResult[] = [];
-    if (integrations.includes("mqtt")) {
+    if (domains.includes("mqtt")) {
       import(
         "./device-detail/integration-elements/mqtt/ha-device-actions-mqtt"
       );
-      templates.push(html`
-        <div class="card-actions" slot="actions">
-          <ha-device-actions-mqtt
-            .hass=${this.hass}
-            .device=${device}
-          ></ha-device-actions-mqtt>
-        </div>
+      deviceActions.push(html`
+        <ha-device-actions-mqtt
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-actions-mqtt>
       `);
     }
-    if (integrations.includes("ozw")) {
+    if (domains.includes("ozw")) {
       import("./device-detail/integration-elements/ozw/ha-device-actions-ozw");
       import("./device-detail/integration-elements/ozw/ha-device-info-ozw");
-      templates.push(html`
+      deviceInfo.push(html`
         <ha-device-info-ozw
           .hass=${this.hass}
           .device=${device}
         ></ha-device-info-ozw>
-        <div class="card-actions" slot="actions">
-          <ha-device-actions-ozw
-            .hass=${this.hass}
-            .device=${device}
-          ></ha-device-actions-ozw>
-        </div>
+      `);
+      deviceActions.push(html`
+        <ha-device-actions-ozw
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-actions-ozw>
       `);
     }
-    if (integrations.includes("tasmota")) {
+    if (domains.includes("tasmota")) {
       import(
         "./device-detail/integration-elements/tasmota/ha-device-actions-tasmota"
       );
-      templates.push(html`
-        <div class="card-actions" slot="actions">
-          <ha-device-actions-tasmota
-            .hass=${this.hass}
-            .device=${device}
-          ></ha-device-actions-tasmota>
-        </div>
+      deviceActions.push(html`
+        <ha-device-actions-tasmota
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-actions-tasmota>
       `);
     }
-    if (integrations.includes("zha")) {
+    if (domains.includes("zha")) {
       import("./device-detail/integration-elements/zha/ha-device-actions-zha");
       import("./device-detail/integration-elements/zha/ha-device-info-zha");
-      templates.push(html`
+      deviceInfo.push(html`
         <ha-device-info-zha
           .hass=${this.hass}
           .device=${device}
         ></ha-device-info-zha>
-        <div class="card-actions" slot="actions">
-          <ha-device-actions-zha
-            .hass=${this.hass}
-            .device=${device}
-          ></ha-device-actions-zha>
-        </div>
+      `);
+      deviceActions.push(html`
+        <ha-device-actions-zha
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-actions-zha>
       `);
     }
-    if (integrations.includes("zwave_js")) {
+    if (domains.includes("zwave_js")) {
       import(
         "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
       );
       import(
         "./device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js"
       );
-      templates.push(html`
+      deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}
           .device=${device}
         ></ha-device-info-zwave_js>
-        <div class="card-actions" slot="actions">
-          <ha-device-actions-zwave_js
-            .hass=${this.hass}
-            .device=${device}
-          ></ha-device-actions-zwave_js>
-        </div>
+      `);
+      deviceActions.push(html`
+        <ha-device-actions-zwave_js
+          .hass=${this.hass}
+          .device=${device}
+        ></ha-device-actions-zwave_js>
       `);
     }
     return templates;
@@ -866,6 +959,16 @@ export class HaConfigDevicePage extends LitElement {
     });
   }
 
+  private async _signUrl(ev) {
+    const anchor = ev.target.closest("a");
+    ev.preventDefault();
+    const signedUrl = await getSignedPath(
+      this.hass,
+      anchor.getAttribute("href")
+    );
+    fileDownload(signedUrl.path);
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -197,7 +197,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         ),
         model: device.model || "<unknown>",
         manufacturer: device.manufacturer || "<unknown>",
-        area: device.area_id ? areaLookup[device.area_id].name : undefined,
+        area: device.area_id ? areaLookup[device.area_id].name : "—",
         integration: device.config_entries.length
           ? device.config_entries
               .filter((entId) => entId in entryLookup)
@@ -207,7 +207,9 @@ export class HaConfigDeviceDashboard extends LitElement {
                   entryLookup[entId].domain
               )
               .join(", ")
-          : "No integration",
+          : this.hass.localize(
+              "ui.panel.config.devices.data_table.no_integration"
+            ),
         battery_entity: [
           this._batteryEntity(device.id, deviceEntityLookup),
           this._batteryChargingEntity(device.id, deviceEntityLookup),
@@ -318,7 +320,7 @@ export class HaConfigDeviceDashboard extends LitElement {
                   .batteryChargingStateObj=${batteryCharging}
                 ></ha-battery-icon>
               `
-            : html` - `;
+            : html`—`;
         },
       };
       if (showDisabled) {

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

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

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

@@ -171,6 +171,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         type: "icon",
         template: (_, entry: any) => html`
           <ha-state-icon
+            .title=${entry.entity.state}
             slot="item-icon"
             .state=${entry.entity}
           ></ha-state-icon>
@@ -284,7 +285,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                   </paper-tooltip>
                 </div>
               `
-            : "",
+            : "—",
       },
     })
   );
@@ -377,7 +378,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           name: computeEntityRegistryName(this.hass!, entry),
           unavailable,
           restored,
-          area: area ? area.name : undefined,
+          area: area ? area.name : "—",
           status: restored
             ? this.hass.localize(
                 "ui.panel.config.entities.picker.status.restored"

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

@@ -32,7 +32,7 @@ import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
 import {
   fetchSupervisorAvailableUpdates,
   SupervisorAvailableUpdates,
-} from "../../data/supervisor/supervisor";
+} from "../../data/supervisor/root";
 import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -42,6 +42,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "ha-refresh-cloud-status": undefined;
+    "ha-refresh-supervisor": undefined;
   }
 }
 
@@ -82,13 +83,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#B1345C",
       component: "lovelace",
     },
-    {
-      path: "/config/energy",
-      translationKey: "energy",
-      iconPath: mdiLightningBolt,
-      iconColor: "#F1C447",
-      component: "energy",
-    },
     {
       path: "/config/tags",
       translationKey: "tags",
@@ -200,6 +194,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#616161",
     },
   ],
+  // Not used as a tab, but this way it will stay in the quick bar
   energy: [
     {
       component: "energy",
@@ -452,6 +447,9 @@ class HaPanelConfig extends HassRouterPage {
     }
     if (isComponentLoaded(this.hass, "hassio")) {
       this._loadSupervisorUpdates();
+      this.addEventListener("ha-refresh-supervisor", () => {
+        this._loadSupervisorUpdates();
+      });
       this.addEventListener("connection-status", (ev) => {
         if (ev.detail === "connected") {
           this._loadSupervisorUpdates();

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -2,13 +2,13 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
 import { InputDateTime } from "../../../../data/input_datetime";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-radio";
-import type { HaRadio } from "../../../../components/ha-radio";
 
 @customElement("ha-input_datetime-form")
 class HaInputDateTimeForm extends LitElement {
@@ -35,6 +35,8 @@ class HaInputDateTimeForm extends LitElement {
           : item.has_time
           ? "time"
           : "date";
+      this._item.has_date =
+        !item.has_date && !item.has_time ? true : item.has_date;
     } else {
       this._name = "";
       this._icon = "";

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

@@ -13,6 +13,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-button-menu";
@@ -175,9 +176,9 @@ export class HaIntegrationCard extends LitElement {
   }
 
   private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult {
-    const devices = this._getDevices(item);
-    const services = this._getServices(item);
-    const entities = this._getEntities(item);
+    const devices = this._getDevices(item, this.deviceRegistryEntries);
+    const services = this._getServices(item, this.deviceRegistryEntries);
+    const entities = this._getEntities(item, this.entityRegistryEntries);
 
     let stateText: [string, ...unknown[]] | undefined;
     let stateTextExtra: TemplateResult | string | undefined;
@@ -220,6 +221,61 @@ export class HaIntegrationCard extends LitElement {
       }
     }
 
+    let devicesLine: (TemplateResult | string)[] = [];
+
+    for (const [items, localizeKey] of [
+      [devices, "devices"],
+      [services, "services"],
+    ] as [DeviceRegistryEntry[], string][]) {
+      if (items.length === 0) {
+        continue;
+      }
+      const url =
+        items.length === 1
+          ? `/config/devices/device/${items[0].id}`
+          : `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`;
+      devicesLine.push(
+        // no white space before/after template on purpose
+        html`<a href=${url}
+          >${this.hass.localize(
+            `ui.panel.config.integrations.config_entry.${localizeKey}`,
+            "count",
+            items.length
+          )}</a
+        >`
+      );
+    }
+
+    if (entities.length) {
+      devicesLine.push(
+        // no white space before/after template on purpose
+        html`<a
+          href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
+          >${this.hass.localize(
+            "ui.panel.config.integrations.config_entry.entities",
+            "count",
+            entities.length
+          )}</a
+        >`
+      );
+    }
+
+    if (devicesLine.length === 2) {
+      devicesLine = [
+        devicesLine[0],
+        ` ${this.hass.localize("ui.common.and")} `,
+        devicesLine[1],
+      ];
+    } else if (devicesLine.length === 3) {
+      devicesLine = [
+        devicesLine[0],
+        ", ",
+        devicesLine[1],
+        ` ${this.hass.localize("ui.common.and")} `,
+        devicesLine[2],
+      ];
+    }
+
     return html`
       ${stateText
         ? html`
@@ -229,53 +285,7 @@ export class HaIntegrationCard extends LitElement {
             </div>
           `
         : ""}
-      <div class="content">
-        ${devices.length || services.length || entities.length
-          ? html`
-              <div>
-                ${devices.length
-                  ? html`
-                      <a
-                        href=${`/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
-                        >${this.hass.localize(
-                          "ui.panel.config.integrations.config_entry.devices",
-                          "count",
-                          devices.length
-                        )}</a
-                      >${services.length ? "," : ""}
-                    `
-                  : ""}
-                ${services.length
-                  ? html`
-                      <a
-                        href=${`/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`}
-                        >${this.hass.localize(
-                          "ui.panel.config.integrations.config_entry.services",
-                          "count",
-                          services.length
-                        )}</a
-                      >
-                    `
-                  : ""}
-                ${(devices.length || services.length) && entities.length
-                  ? this.hass.localize("ui.common.and")
-                  : ""}
-                ${entities.length
-                  ? html`
-                      <a
-                        href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
-                        >${this.hass.localize(
-                          "ui.panel.config.integrations.config_entry.entities",
-                          "count",
-                          entities.length
-                        )}</a
-                      >
-                    `
-                  : ""}
-              </div>
-            `
-          : ""}
-      </div>
+      <div class="content">${devicesLine}</div>
       <div class="actions">
         <div>
           ${item.disabled_by === "user"
@@ -362,7 +372,7 @@ export class HaIntegrationCard extends LitElement {
                 )}
               </mwc-list-item>`
             : ""}
-          ${this.supportsDiagnostics
+          ${this.supportsDiagnostics && item.state === "loaded"
             ? html`<a
                 href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
                 target="_blank"
@@ -421,36 +431,51 @@ export class HaIntegrationCard extends LitElement {
     this.classList.remove("highlight");
   }
 
-  private _getEntities(configEntry: ConfigEntry): EntityRegistryEntry[] {
-    if (!this.entityRegistryEntries) {
-      return [];
+  private _getEntities = memoizeOne(
+    (
+      configEntry: ConfigEntry,
+      entityRegistryEntries: EntityRegistryEntry[]
+    ): EntityRegistryEntry[] => {
+      if (!entityRegistryEntries) {
+        return [];
+      }
+      return entityRegistryEntries.filter(
+        (entity) => entity.config_entry_id === configEntry.entry_id
+      );
     }
-    return this.entityRegistryEntries.filter(
-      (entity) => entity.config_entry_id === configEntry.entry_id
-    );
-  }
+  );
 
-  private _getDevices(configEntry: ConfigEntry): DeviceRegistryEntry[] {
-    if (!this.deviceRegistryEntries) {
-      return [];
+  private _getDevices = memoizeOne(
+    (
+      configEntry: ConfigEntry,
+      deviceRegistryEntries: DeviceRegistryEntry[]
+    ): DeviceRegistryEntry[] => {
+      if (!deviceRegistryEntries) {
+        return [];
+      }
+      return deviceRegistryEntries.filter(
+        (device) =>
+          device.config_entries.includes(configEntry.entry_id) &&
+          device.entry_type !== "service"
+      );
     }
-    return this.deviceRegistryEntries.filter(
-      (device) =>
-        device.config_entries.includes(configEntry.entry_id) &&
-        device.entry_type !== "service"
-    );
-  }
+  );
 
-  private _getServices(configEntry: ConfigEntry): DeviceRegistryEntry[] {
-    if (!this.deviceRegistryEntries) {
-      return [];
+  private _getServices = memoizeOne(
+    (
+      configEntry: ConfigEntry,
+      deviceRegistryEntries: DeviceRegistryEntry[]
+    ): DeviceRegistryEntry[] => {
+      if (!deviceRegistryEntries) {
+        return [];
+      }
+      return deviceRegistryEntries.filter(
+        (device) =>
+          device.config_entries.includes(configEntry.entry_id) &&
+          device.entry_type === "service"
+      );
     }
-    return this.deviceRegistryEntries.filter(
-      (device) =>
-        device.config_entries.includes(configEntry.entry_id) &&
-        device.entry_type === "service"
-    );
-  }
+  );
 
   private _showOptions(ev) {
     showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry);

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -61,6 +61,7 @@ class HaPanelDevMqtt extends LitElement {
                 mode="jinja2"
                 .value=${this.payload}
                 @value-changed=${this._handlePayload}
+                dir="ltr"
               ></ha-code-editor>
             </div>
             <div class="card-actions">

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

@@ -42,7 +42,12 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
         )}
       >
-        <ha-code-editor mode="yaml" readonly .value=${this._signature}>
+        <ha-code-editor
+          mode="yaml"
+          readonly
+          .value=${this._signature}
+          dir="ltr"
+        >
         </ha-code-editor>
       </ha-dialog>
     `;

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

@@ -89,7 +89,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
                     ${this.hass.localize(
                       `ui.panel.config.lovelace.dashboards.conf_mode.${dashboard.mode}`
                     )}${dashboard.filename
-                      ? html` - ${dashboard.filename} `
+                      ? html` – ${dashboard.filename} `
                       : ""}
                   </div>
                 `
@@ -132,8 +132,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
           width: "100px",
           template: (requireAdmin: boolean) =>
             requireAdmin
-              ? html` <ha-svg-icon .path=${mdiCheck}></ha-svg-icon> `
-              : html` - `,
+              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
+              : html`—`,
         };
         columns.show_in_sidebar = {
           title: this.hass.localize(
@@ -143,8 +143,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
           width: "121px",
           template: (sidebar) =>
             sidebar
-              ? html` <ha-svg-icon .path=${mdiCheck}></ha-svg-icon> `
-              : html` - `,
+              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
+              : html`—`,
         };
       }
 
@@ -194,6 +194,12 @@ export class HaConfigLovelaceDashboards extends LitElement {
         mode: defaultMode,
         filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
       },
+      {
+        icon: "hass:lightning-bolt",
+        title: this.hass.localize(`ui.panel.config.dashboard.energy.title`),
+        url_path: "energy",
+        filename: "",
+      },
       ...dashboards.map((dashboard) => ({
         filename: "",
         ...dashboard,
@@ -255,6 +261,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   private _editDashboard(ev: CustomEvent) {
     const urlPath = (ev.detail as RowClickedEvent).id;
+
+    if (urlPath === "energy") {
+      navigate("/config/energy");
+      return;
+    }
     const dashboard = this._dashboards.find((res) => res.url_path === urlPath);
     this._openDialog(dashboard, urlPath);
   }

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

@@ -28,7 +28,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { getExternalConfig } from "../../../external_app/external_config";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
@@ -53,14 +52,12 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
 
   @state() private _tags: Tag[] = [];
 
-  @state() private _canWriteTags = false;
+  private get _canWriteTags() {
+    return this.hass.auth.external?.config.canWriteTag;
+  }
 
   private _columns = memoizeOne(
-    (
-      narrow: boolean,
-      canWriteTags: boolean,
-      _language
-    ): DataTableColumnContainer => {
+    (narrow: boolean, _language): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = {
         icon: {
           title: "",
@@ -103,7 +100,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           `,
         };
       }
-      if (canWriteTags) {
+      if (this._canWriteTags) {
         columns.write = {
           title: "",
           type: "icon-button",
@@ -152,11 +149,6 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     this._fetchTags();
-    if (this.hass && this.hass.auth.external) {
-      getExternalConfig(this.hass.auth.external).then((conf) => {
-        this._canWriteTags = conf.canWriteTag;
-      });
-    }
   }
 
   protected hassSubscribe() {
@@ -181,11 +173,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.tags}
-        .columns=${this._columns(
-          this.narrow,
-          this._canWriteTags,
-          this.hass.language
-        )}
+        .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         hasFab

src/panels/config/users/dialog-user-detail.ts

@@ -3,13 +3,18 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-help-tooltip";
+import "../../../components/ha-chip-set";
+import "../../../components/ha-chip";
+import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import { adminChangePassword } from "../../../data/auth";
 import {
+  computeUserBadges,
   SYSTEM_GROUP_ID_ADMIN,
   SYSTEM_GROUP_ID_USER,
 } from "../../../data/user";
@@ -55,6 +60,7 @@ class DialogUserDetail extends LitElement {
       return html``;
     }
     const user = this._params.entry;
+    const badges = computeUserBadges(this.hass, user, true);
     return html`
       <ha-dialog
         open
@@ -71,26 +77,20 @@ class DialogUserDetail extends LitElement {
             ${this.hass.localize("ui.panel.config.users.editor.username")}:
             ${user.username}
           </div>
-          <div>
-            ${user.is_owner
-              ? html`
-                  <span class="state"
-                    >${this.hass.localize(
-                      "ui.panel.config.users.editor.owner"
-                    )}</span
-                  >
-                `
-              : ""}
-            ${user.system_generated
-              ? html`
-                  <span class="state">
-                    ${this.hass.localize(
-                      "ui.panel.config.users.editor.system_generated"
-                    )}
-                  </span>
-                `
-              : ""}
-          </div>
+          ${badges.length === 0
+            ? ""
+            : html`
+                <ha-chip-set>
+                  ${badges.map(
+                    ([icon, label]) => html`
+                      <ha-chip hasIcon>
+                        <ha-svg-icon slot="icon" .path=${icon}></ha-svg-icon>
+                        ${label}
+                      </ha-chip>
+                    `
+                  )}
+                </ha-chip-set>
+              `}
           <div class="form">
             <paper-input
               .value=${this._name}
@@ -321,6 +321,9 @@ class DialogUserDetail extends LitElement {
         .secondary {
           color: var(--secondary-text-color);
         }
+        ha-chip-set {
+          display: block;
+        }
         .state {
           background-color: rgba(var(--rgb-primary-text-color), 0.15);
           border-radius: 16px;

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

@@ -3,13 +3,22 @@ import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
+import "../../../components/data-table/ha-data-table-icon";
 import "../../../components/ha-fab";
+import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";
-import { deleteUser, fetchUsers, updateUser, User } from "../../../data/user";
+import {
+  computeUserBadges,
+  deleteUser,
+  fetchUsers,
+  updateUser,
+  User,
+} from "../../../data/user";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
@@ -30,23 +39,21 @@ export class HaConfigUsers extends LitElement {
   @property() public route!: Route;
 
   private _columns = memoizeOne(
-    (narrow: boolean, _language): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer = {
+    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<User> = {
         name: {
-          title: this.hass.localize(
-            "ui.panel.config.users.picker.headers.name"
-          ),
+          title: localize("ui.panel.config.users.picker.headers.name"),
           sortable: true,
           filterable: true,
           width: "25%",
           direction: "asc",
           grows: true,
-          template: (name, user: any) =>
+          template: (name, user) =>
             narrow
               ? html` ${name}<br />
                   <div class="secondary">
-                    ${user.username} |
-                    ${this.hass.localize(`groups.${user.group_ids[0]}`)}
+                    ${user.username ? `${user.username} |` : ""}
+                    ${localize(`groups.${user.group_ids[0]}`)}
                   </div>`
               : html` ${name ||
                 this.hass!.localize(
@@ -54,31 +61,22 @@ export class HaConfigUsers extends LitElement {
                 )}`,
         },
         username: {
-          title: this.hass.localize(
-            "ui.panel.config.users.picker.headers.username"
-          ),
+          title: localize("ui.panel.config.users.picker.headers.username"),
           sortable: true,
           filterable: true,
           width: "20%",
           direction: "asc",
           hidden: narrow,
-          template: (username) => html`
-            ${username ||
-            this.hass!.localize("ui.panel.config.users.editor.unnamed_user")}
-          `,
+          template: (username) => html`${username || "—"}`,
         },
         group_ids: {
-          title: this.hass.localize(
-            "ui.panel.config.users.picker.headers.group"
-          ),
+          title: localize("ui.panel.config.users.picker.headers.group"),
           sortable: true,
           filterable: true,
           width: "20%",
           direction: "asc",
           hidden: narrow,
-          template: (groupIds) => html`
-            ${this.hass.localize(`groups.${groupIds[0]}`)}
-          `,
+          template: (groupIds) => html` ${localize(`groups.${groupIds[0]}`)} `,
         },
         is_active: {
           title: this.hass.localize(
@@ -88,6 +86,7 @@ export class HaConfigUsers extends LitElement {
           sortable: true,
           filterable: true,
           width: "80px",
+          hidden: narrow,
           template: (is_active) =>
             is_active
               ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -100,7 +99,8 @@ export class HaConfigUsers extends LitElement {
           type: "icon",
           sortable: true,
           filterable: true,
-          width: "160px",
+          width: "80px",
+          hidden: narrow,
           template: (generated) =>
             generated
               ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -113,10 +113,29 @@ export class HaConfigUsers extends LitElement {
           type: "icon",
           sortable: true,
           filterable: true,
-          width: "160px",
+          width: "80px",
+          hidden: narrow,
           template: (local) =>
             local ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>` : "",
         },
+        icons: {
+          title: "",
+          type: "icon",
+          sortable: false,
+          filterable: false,
+          width: "104px",
+          hidden: !narrow,
+          template: (_, user) => {
+            const badges = computeUserBadges(this.hass, user, false);
+            return html`${badges.map(
+              ([icon, tooltip]) =>
+                html`<ha-data-table-icon
+                  .path=${icon}
+                  .tooltip=${tooltip}
+                ></ha-data-table-icon>`
+            )}`;
+          },
+        },
       };
 
       return columns;
@@ -136,7 +155,7 @@ export class HaConfigUsers extends LitElement {
         .route=${this.route}
         backPath="/config"
         .tabs=${configSections.persons}
-        .columns=${this._columns(this.narrow, this.hass.language)}
+        .columns=${this._columns(this.narrow, this.hass.localize)}
         .data=${this._users}
         @row-click=${this._editUser}
         hasFab

src/panels/developer-tools/event/developer-tools-event.js

@@ -94,6 +94,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
               value="[[eventData]]"
               error="[[!validJSON]]"
               on-value-changed="_yamlChanged"
+              dir="ltr"
             ></ha-code-editor>
           </div>
           <mwc-button on-click="fireEvent" raised disabled="[[!validJSON]]"

src/panels/developer-tools/service/developer-tools-service.ts

@@ -38,10 +38,10 @@ class HaPanelDevService extends LitElement {
 
   @state() private _uiAvailable = true;
 
-  @LocalStorage("panel-dev-service-state-service-data", true)
+  @LocalStorage("panel-dev-service-state-service-data", true, false)
   private _serviceData?: ServiceAction = { service: "", target: {}, data: {} };
 
-  @LocalStorage("panel-dev-service-state-yaml-mode", true)
+  @LocalStorage("panel-dev-service-state-yaml-mode", true, false)
   private _yamlMode = false;
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;

src/panels/developer-tools/state/developer-tools-state.js

@@ -85,6 +85,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
         :host([rtl]) .entities th {
           text-align: right;
+          direction: rtl;
         }
 
         .entities tr {
@@ -145,7 +146,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         [[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
       </h1>
       <ha-expansion-panel
-        header="Set state"
+        header="[[localize('ui.panel.developer-tools.tabs.states.set_state')]]"
         outlined
         expanded="[[_expanded]]"
         on-expanded-changed="expandedChanged"
@@ -181,6 +182,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               value="[[_stateAttributes]]"
               error="[[!validJSON]]"
               on-value-changed="_yamlChanged"
+              dir="ltr"
             ></ha-code-editor>
             <div class="button-row">
               <mwc-button

src/panels/developer-tools/template/developer-tools-template.ts

@@ -132,6 +132,7 @@ class HaPanelDevTemplate extends LitElement {
             .error=${this._error}
             autofocus
             @value-changed=${this._templateChanged}
+            dir="ltr"
           ></ha-code-editor>
           <mwc-button @click=${this._restoreDemo}>
             ${this.hass.localize(

src/panels/logbook/ha-logbook.ts

@@ -15,6 +15,7 @@ import { formatTimeWithSeconds } from "../../common/datetime/format_time";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { domainIcon } from "../../common/entity/domain_icon";
 import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/entity/state-badge";
 import "../../components/ha-circular-progress";
@@ -150,7 +151,10 @@ class HaLogbook extends LitElement {
                 html`
                   <state-badge
                     .hass=${this.hass}
-                    .overrideIcon=${item.icon}
+                    .overrideIcon=${item.icon ||
+                    (item.domain && !stateObj
+                      ? domainIcon(item.domain!)
+                      : undefined)}
                     .overrideImage=${DOMAINS_WITH_DYNAMIC_PICTURE.has(domain)
                       ? ""
                       : stateObj?.attributes.entity_picture_local ||

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -274,7 +274,7 @@ class HuiEnergyDistrubutionCard
                           ? formatNumber(lowCarbonEnergy, this.hass.locale, {
                               maximumFractionDigits: 1,
                             })
-                          : "-"}
+                          : "—"}
                         kWh
                       </a>
                       <svg width="80" height="30">

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

@@ -191,7 +191,7 @@ export class HuiEnergyGasGraphCard
                   return datasets[0].label;
                 }
                 const date = new Date(datasets[0].parsed.x);
-                return `${formatTime(date, locale)} - ${formatTime(
+                return `${formatTime(date, locale)} – ${formatTime(
                   addHours(date, 1),
                   locale
                 )}`;

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

@@ -184,7 +184,7 @@ export class HuiEnergySolarGraphCard
                   return datasets[0].label;
                 }
                 const date = new Date(datasets[0].parsed.x);
-                return `${formatTime(date, locale)} - ${formatTime(
+                return `${formatTime(date, locale)} – ${formatTime(
                   addHours(date, 1),
                   locale
                 )}`;

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

@@ -177,7 +177,7 @@ export class HuiEnergyUsageGraphCard
                   return datasets[0].label;
                 }
                 const date = new Date(datasets[0].parsed.x);
-                return `${formatTime(date, locale)} - ${formatTime(
+                return `${formatTime(date, locale)} – ${formatTime(
                   addHours(date, 1),
                   locale
                 )}`;

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/cards/hui-media-control-card.ts

@@ -24,6 +24,7 @@ import "../../../components/ha-state-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
+  cleanupMediaTitle,
   computeMediaControls,
   computeMediaDescription,
   getCurrentProgress,
@@ -182,6 +183,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         entityState === "on");
 
     const mediaDescription = computeMediaDescription(stateObj);
+    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
 
     return html`
       <ha-card>
@@ -244,24 +246,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             </div>
           </div>
           ${!isUnavailable &&
-          (mediaDescription || stateObj.attributes.media_title || showControls)
+          (mediaDescription || mediaTitleClean || showControls)
             ? html`
                 <div>
                   <div class="title-controls">
-                    ${!mediaDescription && !stateObj.attributes.media_title
+                    ${!mediaDescription && !mediaTitleClean
                       ? ""
                       : html`
                           <div class="media-info">
                             <hui-marquee
-                              .text=${stateObj.attributes.media_title ||
-                              mediaDescription}
+                              .text=${mediaTitleClean || mediaDescription}
                               .active=${this._marqueeActive}
                               @mouseover=${this._marqueeMouseOver}
                               @mouseleave=${this._marqueeMouseLeave}
                             ></hui-marquee>
-                            ${!stateObj.attributes.media_title
-                              ? ""
-                              : mediaDescription}
+                            ${!mediaTitleClean ? "" : mediaDescription}
                           </div>
                         `}
                     ${!showControls

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -24,6 +24,7 @@ import {
   getWeatherStateIcon,
   getWeatherUnit,
   getWind,
+  isForecastHourly,
   weatherAttrIcons,
   WeatherEntity,
   weatherSVGStyles,
@@ -177,23 +178,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
-    let hourly: boolean | undefined;
+    const hourly = isForecastHourly(forecast);
     let dayNight: boolean | undefined;
 
-    if (forecast?.length && forecast?.length > 2) {
-      const date1 = new Date(forecast[1].datetime);
-      const date2 = new Date(forecast[2].datetime);
-      const timeDiff = date2.getTime() - date1.getTime();
+    if (hourly) {
+      const dateFirst = new Date(forecast![0].datetime);
+      const datelast = new Date(forecast![forecast!.length - 1].datetime);
+      const dayDiff = datelast.getTime() - dateFirst.getTime();
 
-      hourly = timeDiff < DAY_IN_MILLISECONDS;
-
-      if (hourly) {
-        const dateFirst = new Date(forecast[0].datetime);
-        const datelast = new Date(forecast[forecast.length - 1].datetime);
-        const dayDiff = datelast.getTime() - dateFirst.getTime();
-
-        dayNight = dayDiff > DAY_IN_MILLISECONDS;
-      }
+      dayNight = dayDiff > DAY_IN_MILLISECONDS;
     }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
@@ -288,69 +281,76 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         ${forecast
           ? html`
               <div class="forecast">
-                ${forecast.map(
-                  (item) => html`
-                    <div>
-                      <div>
-                        ${dayNight
-                          ? html`
-                              ${new Date(item.datetime).toLocaleDateString(
-                                this.hass!.language,
-                                { weekday: "short" }
-                              )}
-                              <div class="daynight">
-                                ${item.daytime === undefined || item.daytime
-                                  ? this.hass!.localize("ui.card.weather.day")
-                                  : this.hass!.localize(
-                                      "ui.card.weather.night"
-                                    )}<br />
-                              </div>
-                            `
-                          : hourly
-                          ? html`
-                              ${formatTime(
-                                new Date(item.datetime),
-                                this.hass!.locale
-                              )}
-                            `
-                          : html`
-                              ${new Date(item.datetime).toLocaleDateString(
-                                this.hass!.language,
-                                { weekday: "short" }
-                              )}
-                            `}
-                      </div>
-                      ${item.condition !== undefined && item.condition !== null
-                        ? html`
-                            <div class="forecast-image-icon">
-                              ${getWeatherStateIcon(
-                                item.condition,
-                                this,
-                                !(item.daytime || item.daytime === undefined)
-                              )}
-                            </div>
-                          `
-                        : ""}
-                      ${item.temperature !== undefined &&
-                      item.temperature !== null
-                        ? html`
-                            <div class="temp">
-                              ${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°
-                            </div>
-                          `
-                        : ""}
-                      ${item.templow !== undefined && item.templow !== null
-                        ? html`
-                            <div class="templow">
-                              ${formatNumber(item.templow, this.hass!.locale)}°
-                            </div>
-                          `
-                        : ""}
-                    </div>
-                  `
+                ${forecast.map((item) =>
+                  this._showValue(item.templow) ||
+                  this._showValue(item.temperature)
+                    ? html`
+                        <div>
+                          <div>
+                            ${dayNight
+                              ? html`
+                                  ${new Date(item.datetime).toLocaleDateString(
+                                    this.hass!.language,
+                                    { weekday: "short" }
+                                  )}
+                                  <div class="daynight">
+                                    ${item.daytime === undefined || item.daytime
+                                      ? this.hass!.localize(
+                                          "ui.card.weather.day"
+                                        )
+                                      : this.hass!.localize(
+                                          "ui.card.weather.night"
+                                        )}<br />
+                                  </div>
+                                `
+                              : hourly
+                              ? html`
+                                  ${formatTime(
+                                    new Date(item.datetime),
+                                    this.hass!.locale
+                                  )}
+                                `
+                              : html`
+                                  ${new Date(item.datetime).toLocaleDateString(
+                                    this.hass!.language,
+                                    { weekday: "short" }
+                                  )}
+                                `}
+                          </div>
+                          ${this._showValue(item.condition)
+                            ? html`
+                                <div class="forecast-image-icon">
+                                  ${getWeatherStateIcon(
+                                    item.condition!,
+                                    this,
+                                    !(
+                                      item.daytime || item.daytime === undefined
+                                    )
+                                  )}
+                                </div>
+                              `
+                            : ""}
+                          <div class="temp">
+                            ${this._showValue(item.temperature)
+                              ? html`${formatNumber(
+                                  item.temperature,
+                                  this.hass!.locale
+                                )}°`
+                              : "—"}
+                          </div>
+                          <div class="templow">
+                            ${this._showValue(item.templow)
+                              ? html`${formatNumber(
+                                  item.templow!,
+                                  this.hass!.locale
+                                )}°`
+                              : hourly
+                              ? ""
+                              : "—"}
+                          </div>
+                        </div>
+                      `
+                    : ""
                 )}
               </div>
             `
@@ -402,6 +402,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._veryVeryNarrow = card.offsetWidth < 245;
   }
 
+  private _showValue(item?: any): boolean {
+    return typeof item !== "undefined" && item !== null;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       weatherSVGStyles,

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -103,7 +103,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             : `${formatDateShort(
                 this._startDate,
                 this.hass.locale
-              )} - ${formatDateShort(
+              )} – ${formatDateShort(
                 this._endDate || new Date(),
                 this.hass.locale
               )}`}

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

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

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

@@ -245,7 +245,7 @@ export class HuiDialogEditCard
           <mwc-button @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
           </mwc-button>
-          ${this._cardConfig !== undefined
+          ${this._cardConfig !== undefined && this._dirty
             ? html`
                 <mwc-button
                   ?disabled=${!this._canSave || this._saving}
@@ -259,9 +259,7 @@ export class HuiDialogEditCard
                           size="small"
                         ></ha-circular-progress>
                       `
-                    : this._dirty
-                    ? this.hass!.localize("ui.common.save")
-                    : this.hass!.localize("ui.common.close")}
+                    : this.hass!.localize("ui.common.save")}
                 </mwc-button>
               `
             : ``}

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-element-editor.ts

@@ -11,7 +11,6 @@ import {
 import { property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { handleStructError } from "../../../common/structs/handle-errors";
-import { computeRTL } from "../../../common/util/compute_rtl";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
@@ -200,9 +199,9 @@ export abstract class HuiElementEditor<T> extends LitElement {
                   autofocus
                   .value=${this.yaml}
                   .error=${Boolean(this._errors)}
-                  .rtl=${computeRTL(this.hass)}
                   @value-changed=${this._handleYAMLChanged}
                   @keydown=${this._ignoreKeydown}
+                  dir="ltr"
                 ></ha-code-editor>
               </div>
             `}

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

@@ -36,6 +36,7 @@ import {
   PANEL_VIEW_LAYOUT,
   VIEWS_NO_BADGE_SUPPORT,
 } from "../../views/const";
+import { deepEqual } from "../../../../common/util/deep-equal";
 
 @customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
@@ -53,6 +54,8 @@ export class HuiDialogEditView extends LitElement {
 
   @state() private _curTab?: string;
 
+  @state() private _dirty = false;
+
   private _curTabIndex = 0;
 
   get _type(): string {
@@ -71,6 +74,7 @@ export class HuiDialogEditView extends LitElement {
       this._config = {};
       this._badges = [];
       this._cards = [];
+      this._dirty = false;
     } else {
       const { cards, badges, ...viewConfig } =
         this._params.lovelace!.config.views[this._params.viewIndex];
@@ -85,6 +89,7 @@ export class HuiDialogEditView extends LitElement {
     this._params = undefined;
     this._config = {};
     this._badges = [];
+    this._dirty = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -214,7 +219,7 @@ export class HuiDialogEditView extends LitElement {
         >
         <mwc-button
           slot="primaryAction"
-          ?disabled=${!this._config || this._saving}
+          ?disabled=${!this._config || this._saving || !this._dirty}
           @click=${this._save}
         >
           ${this._saving
@@ -316,8 +321,13 @@ export class HuiDialogEditView extends LitElement {
   }
 
   private _viewConfigChanged(ev: ViewEditEvent): void {
-    if (ev.detail && ev.detail.config) {
+    if (
+      ev.detail &&
+      ev.detail.config &&
+      !deepEqual(this._config, ev.detail.config)
+    ) {
       this._config = ev.detail.config;
+      this._dirty = true;
     }
   }
 
@@ -327,6 +337,7 @@ export class HuiDialogEditView extends LitElement {
     if (ev.detail.visible && this._config) {
       this._config.visible = ev.detail.visible;
     }
+    this._dirty = true;
   }
 
   private _badgesChanged(ev: EntitiesEditorEvent): void {
@@ -334,6 +345,7 @@ export class HuiDialogEditView extends LitElement {
       return;
     }
     this._badges = processEditorEntities(ev.detail.entities);
+    this._dirty = true;
   }
 
   private _isConfigChanged(): boolean {

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -120,8 +120,11 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                   type="number"
                   @change=${this._selectedValueChanged}
                   id="input"
-                ></paper-input>
-                ${stateObj.attributes.unit_of_measurement}
+                >
+                  <span slot="suffix">
+                    ${stateObj.attributes.unit_of_measurement}
+                  </span>
+                </paper-input>
               </div>
             `}
       </hui-generic-entity-row>

src/panels/lovelace/hui-editor.ts

@@ -15,7 +15,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { array, assert, object, optional, string, type } from "superstruct";
-import { computeRTL } from "../../common/util/compute_rtl";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-circular-progress";
 import "../../components/ha-code-editor";
@@ -92,10 +91,10 @@ class LovelaceFullConfigEditor extends LitElement {
           <ha-code-editor
             mode="yaml"
             autofocus
-            .rtl=${computeRTL(this.hass)}
             .hass=${this.hass}
             @value-changed=${this._yamlChanged}
             @editor-save=${this._handleSave}
+            dir="ltr"
           >
           </ha-code-editor>
         </div>

src/panels/lovelace/hui-root.ts

@@ -2,9 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import {
-  mdiClose,
   mdiCodeBraces,
-  mdiCog,
   mdiDotsVertical,
   mdiFileMultiple,
   mdiFormatListBulletedTriangle,
@@ -119,13 +117,6 @@ class HUIRoot extends LitElement {
           ${this._editMode
             ? html`
                 <app-toolbar class="edit-mode">
-                  <ha-icon-button
-                    .label=${this.hass!.localize(
-                      "ui.panel.lovelace.menu.exit_edit_mode"
-                    )}
-                    .path=${mdiClose}
-                    @click=${this._editModeDisable}
-                  ></ha-icon-button>
                   <div main-title>
                     ${this.config.title ||
                     this.hass!.localize("ui.panel.lovelace.editor.header")}
@@ -138,6 +129,13 @@ class HUIRoot extends LitElement {
                       @click=${this._editLovelace}
                     ></ha-icon-button>
                   </div>
+                  <mwc-button
+                    class="exit-edit-mode"
+                    .label=${this.hass!.localize(
+                      "ui.panel.lovelace.menu.exit_edit_mode"
+                    )}
+                    @click=${this._editModeDisable}
+                  ></mwc-button>
                   <a
                     href=${documentationUrl(this.hass, "/lovelace/")}
                     rel="noreferrer"
@@ -377,30 +375,36 @@ class HUIRoot extends LitElement {
                             )}
                             <ha-svg-icon
                               slot="graphic"
-                              .path=${mdiCog}
+                              .path=${mdiPencil}
                             ></ha-svg-icon>
                           </mwc-list-item>
                         `
                       : ""}
-                    <a
-                      href=${documentationUrl(this.hass, "/lovelace/")}
-                      rel="noreferrer"
-                      class="menu-link"
-                      target="_blank"
-                    >
-                      <mwc-list-item
-                        graphic="icon"
-                        aria-label=${this.hass!.localize(
-                          "ui.panel.lovelace.menu.help"
-                        )}
-                      >
-                        ${this.hass!.localize("ui.panel.lovelace.menu.help")}
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${mdiHelp}
-                        ></ha-svg-icon>
-                      </mwc-list-item>
-                    </a>
+                    ${this._editMode
+                      ? html`
+                          <a
+                            href=${documentationUrl(this.hass, "/lovelace/")}
+                            rel="noreferrer"
+                            class="menu-link"
+                            target="_blank"
+                          >
+                            <mwc-list-item
+                              graphic="icon"
+                              aria-label=${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                            >
+                              ${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                              <ha-svg-icon
+                                slot="graphic"
+                                .path=${mdiHelp}
+                              ></ha-svg-icon>
+                            </mwc-list-item>
+                          </a>
+                        `
+                      : ""}
                   </ha-button-menu>
                 </app-toolbar>
               `}
@@ -933,6 +937,10 @@ class HUIRoot extends LitElement {
             var(--primary-background-color)
           );
         }
+        .exit-edit-mode {
+          --mdc-theme-primary: var(--primary-text-color);
+          --mdc-typography-button-font-size: 14px;
+        }
       `,
     ];
   }

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

@@ -75,7 +75,7 @@ class HuiAttributeRow extends LitElement implements LovelaceRow {
           ? formatNumber(attribute, this.hass.locale)
           : attribute !== undefined
           ? formatAttributeValue(this.hass, attribute)
-          : "-"}
+          : "—"}
         ${this._config.suffix}
       </hui-generic-entity-row>
     `;

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

@@ -0,0 +1,106 @@
+import {
+  BROWSER_PLAYER,
+  MediaPlayerEntity,
+  MediaPlayerItem,
+  SUPPORT_PAUSE,
+  SUPPORT_PLAY,
+} from "../../data/media-player";
+import { resolveMediaSource } from "../../data/media_source";
+import { HomeAssistant } from "../../types";
+
+export class BrowserMediaPlayer {
+  private player?: HTMLAudioElement;
+
+  private stopped = false;
+
+  constructor(
+    public hass: HomeAssistant,
+    private item: MediaPlayerItem,
+    private onChange: () => void
+  ) {}
+
+  public async initialize() {
+    const resolvedUrl: any = await resolveMediaSource(
+      this.hass,
+      this.item.media_content_id
+    );
+
+    const player = new Audio(resolvedUrl.url);
+    player.addEventListener("play", this._handleChange);
+    player.addEventListener("playing", this._handleChange);
+    player.addEventListener("pause", this._handleChange);
+    player.addEventListener("ended", this._handleChange);
+    player.addEventListener("canplaythrough", () => {
+      if (this.stopped) {
+        return;
+      }
+      this.player = player;
+      player.play();
+      this.onChange();
+    });
+  }
+
+  private _handleChange = () => {
+    if (!this.stopped) {
+      this.onChange();
+    }
+  };
+
+  public pause() {
+    if (this.player) {
+      this.player.pause();
+    }
+  }
+
+  public play() {
+    if (this.player) {
+      this.player.play();
+    }
+  }
+
+  public stop() {
+    this.stopped = true;
+    // @ts-ignore
+    this.onChange = undefined;
+    if (this.player) {
+      this.player.pause();
+    }
+  }
+
+  public get isPlaying(): boolean {
+    return (
+      this.player !== undefined && !this.player.paused && !this.player.ended
+    );
+  }
+
+  static idleStateObj(): MediaPlayerEntity {
+    const now = new Date().toISOString();
+    return {
+      state: "idle",
+      entity_id: BROWSER_PLAYER,
+      last_changed: now,
+      last_updated: now,
+      attributes: {},
+      context: { id: "", user_id: null },
+    };
+  }
+
+  toStateObj(): MediaPlayerEntity {
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
+    const base = BrowserMediaPlayer.idleStateObj();
+    if (!this.player) {
+      return base;
+    }
+    base.state = this.isPlaying ? "playing" : "paused";
+    base.attributes = {
+      media_title: this.item.title,
+      media_duration: this.player.duration,
+      media_position: this.player.currentTime,
+      media_position_updated_at: base.last_updated,
+      entity_picture: this.item.thumbnail,
+      // eslint-disable-next-line no-bitwise
+      supported_features: SUPPORT_PLAY | SUPPORT_PAUSE,
+    };
+    return base;
+  }
+}

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

@@ -0,0 +1,530 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
+import "@material/mwc-list/mwc-list-item";
+import {
+  mdiChevronDown,
+  mdiMonitor,
+  mdiPause,
+  mdiPlay,
+  mdiPlayPause,
+  mdiStop,
+} from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { domainIcon } from "../../common/entity/domain_icon";
+import { supportsFeature } from "../../common/entity/supports-feature";
+import { navigate } from "../../common/navigate";
+import "../../components/ha-button-menu";
+import "../../components/ha-icon-button";
+import { UNAVAILABLE_STATES } from "../../data/entity";
+import {
+  BROWSER_PLAYER,
+  cleanupMediaTitle,
+  computeMediaControls,
+  computeMediaDescription,
+  formatMediaTime,
+  getCurrentProgress,
+  MediaPlayerEntity,
+  MediaPlayerItem,
+  SUPPORT_BROWSE_MEDIA,
+  SUPPORT_PAUSE,
+  SUPPORT_PLAY,
+  SUPPORT_STOP,
+} from "../../data/media-player";
+import type { HomeAssistant } from "../../types";
+import "../lovelace/components/hui-marquee";
+import { BrowserMediaPlayer } from "./browser-media-player";
+
+@customElement("ha-bar-media-player")
+class BarMediaPlayer extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId!: string;
+
+  @property({ type: Boolean, reflect: true })
+  public narrow!: boolean;
+
+  @query("mwc-linear-progress") private _progressBar?: LinearProgress;
+
+  @query("#CurrentProgress") private _currentProgress?: HTMLElement;
+
+  @state() private _marqueeActive = false;
+
+  @state() private _browserPlayer?: BrowserMediaPlayer;
+
+  private _progressInterval?: number;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    const stateObj = this._stateObj;
+
+    if (!stateObj) {
+      return;
+    }
+
+    if (
+      !this._progressInterval &&
+      this._showProgressBar &&
+      stateObj.state === "playing"
+    ) {
+      this._progressInterval = window.setInterval(
+        () => this._updateProgressBar(),
+        1000
+      );
+    }
+  }
+
+  public disconnectedCallback(): void {
+    if (this._progressInterval) {
+      clearInterval(this._progressInterval);
+      this._progressInterval = undefined;
+    }
+
+    if (this._browserPlayer) {
+      this._browserPlayer.stop();
+      this._browserPlayer = undefined;
+    }
+  }
+
+  public async playItem(item: MediaPlayerItem) {
+    if (this.entityId !== BROWSER_PLAYER) {
+      throw Error("Only browser supported");
+    }
+    if (this._browserPlayer) {
+      this._browserPlayer.stop();
+    }
+    this._browserPlayer = new BrowserMediaPlayer(this.hass, item, () =>
+      this.requestUpdate("_browserPlayer")
+    );
+    await this._browserPlayer.initialize();
+  }
+
+  protected render(): TemplateResult {
+    const isBrowser = this.entityId === BROWSER_PLAYER;
+    const stateObj = this._stateObj;
+    const controls = !this.narrow
+      ? computeMediaControls(stateObj)
+      : (stateObj.state === "playing" &&
+          (supportsFeature(stateObj, SUPPORT_PAUSE) ||
+            supportsFeature(stateObj, SUPPORT_STOP))) ||
+        ((stateObj.state === "paused" || stateObj.state === "idle") &&
+          supportsFeature(stateObj, SUPPORT_PLAY)) ||
+        (stateObj.state === "on" &&
+          (supportsFeature(stateObj, SUPPORT_PLAY) ||
+            supportsFeature(stateObj, SUPPORT_PAUSE)))
+      ? [
+          {
+            icon:
+              stateObj.state === "on"
+                ? mdiPlayPause
+                : stateObj.state !== "playing"
+                ? mdiPlay
+                : supportsFeature(stateObj, SUPPORT_PAUSE)
+                ? mdiPause
+                : mdiStop,
+            action:
+              stateObj.state !== "playing"
+                ? "media_play"
+                : supportsFeature(stateObj, SUPPORT_PAUSE)
+                ? "media_pause"
+                : "media_stop",
+          },
+        ]
+      : [{}];
+    const mediaDescription = computeMediaDescription(stateObj);
+    const mediaDuration = formatMediaTime(stateObj!.attributes.media_duration!);
+    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
+
+    const mediaArt =
+      stateObj.attributes.entity_picture_local ||
+      stateObj.attributes.entity_picture;
+
+    return html`
+      <div class="info">
+        ${mediaArt ? html`<img src=${this.hass.hassUrl(mediaArt)} />` : ""}
+        <div class="media-info">
+          <hui-marquee
+            .text=${mediaTitleClean ||
+            mediaDescription ||
+            this.hass.localize(`ui.card.media_player.nothing_playing`)}
+            .active=${this._marqueeActive}
+            @mouseover=${this._marqueeMouseOver}
+            @mouseleave=${this._marqueeMouseLeave}
+          ></hui-marquee>
+          <span class="secondary">
+            ${mediaTitleClean ? mediaDescription : ""}
+          </span>
+        </div>
+      </div>
+      <div class="controls-progress">
+        <div class="controls">
+          ${controls === undefined
+            ? ""
+            : controls.map(
+                (control) => html`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      `ui.card.media_player.${control.action}`
+                    )}
+                    .path=${control.icon}
+                    action=${control.action}
+                    @click=${this._handleClick}
+                  >
+                  </ha-icon-button>
+                `
+              )}
+        </div>
+        ${this.narrow
+          ? html`<mwc-linear-progress></mwc-linear-progress>`
+          : html`
+              <div class="progress">
+                <div id="CurrentProgress"></div>
+                <mwc-linear-progress wide></mwc-linear-progress>
+                <div>${mediaDuration}</div>
+              </div>
+            `}
+      </div>
+      <div class="choose-player ${isBrowser ? "browser" : ""}">
+        <ha-button-menu corner="BOTTOM_START">
+          ${this.narrow
+            ? html`
+                <ha-icon-button
+                  slot="trigger"
+                  .path=${isBrowser
+                    ? mdiMonitor
+                    : domainIcon(computeDomain(this.entityId), stateObj)}
+                ></ha-icon-button>
+              `
+            : html`
+                <mwc-button
+                  slot="trigger"
+                  .label=${this.narrow
+                    ? ""
+                    : `${computeStateName(stateObj)}
+                `}
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${isBrowser
+                      ? mdiMonitor
+                      : domainIcon(computeDomain(this.entityId), stateObj)}
+                  ></ha-svg-icon>
+                  <ha-svg-icon
+                    slot="trailingIcon"
+                    .path=${mdiChevronDown}
+                  ></ha-svg-icon>
+                </mwc-button>
+              `}
+          <mwc-list-item
+            .player=${BROWSER_PLAYER}
+            ?selected=${isBrowser}
+            @click=${this._selectPlayer}
+          >
+            ${this.hass.localize("ui.components.media-browser.web-browser")}
+          </mwc-list-item>
+          ${this._mediaPlayerEntities.map(
+            (source) => html`
+              <mwc-list-item
+                ?selected=${source.entity_id === this.entityId}
+                .disabled=${UNAVAILABLE_STATES.includes(source.state)}
+                .player=${source.entity_id}
+                @click=${this._selectPlayer}
+              >
+                ${computeStateName(source)}
+              </mwc-list-item>
+            `
+          )}
+        </ha-button-menu>
+      </div>
+    `;
+  }
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (
+      changedProps.has("entityId") &&
+      this.entityId !== BROWSER_PLAYER &&
+      this._browserPlayer
+    ) {
+      this._browserPlayer?.stop();
+      this._browserPlayer = undefined;
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (this.entityId === BROWSER_PLAYER) {
+      if (!changedProps.has("_browserPlayer")) {
+        return;
+      }
+    } else {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (oldHass && oldHass.states[this.entityId] === this._stateObj) {
+        return;
+      }
+    }
+
+    const stateObj = this._stateObj;
+
+    this._updateProgressBar();
+
+    if (
+      !this._progressInterval &&
+      this._showProgressBar &&
+      stateObj.state === "playing"
+    ) {
+      this._progressInterval = window.setInterval(
+        () => this._updateProgressBar(),
+        1000
+      );
+    } else if (
+      this._progressInterval &&
+      (!this._showProgressBar || stateObj.state !== "playing")
+    ) {
+      clearInterval(this._progressInterval);
+      this._progressInterval = undefined;
+    }
+  }
+
+  private get _stateObj(): MediaPlayerEntity {
+    if (this._browserPlayer) {
+      return this._browserPlayer.toStateObj();
+    }
+    return (
+      (this.hass!.states[this.entityId] as MediaPlayerEntity | undefined) ||
+      BrowserMediaPlayer.idleStateObj()
+    );
+  }
+
+  private get _showProgressBar() {
+    if (!this.hass) {
+      return false;
+    }
+
+    const stateObj = this._stateObj;
+
+    return (
+      (stateObj.state === "playing" || stateObj.state === "paused") &&
+      "media_duration" in stateObj.attributes &&
+      "media_position" in stateObj.attributes
+    );
+  }
+
+  private get _mediaPlayerEntities() {
+    return Object.values(this.hass!.states).filter(
+      (entity) =>
+        computeStateDomain(entity) === "media_player" &&
+        supportsFeature(entity, SUPPORT_BROWSE_MEDIA)
+    );
+  }
+
+  private _updateProgressBar(): void {
+    if (!this._progressBar || !this._currentProgress) {
+      return;
+    }
+
+    if (!this._stateObj.attributes.media_duration) {
+      this._progressBar.progress = 0;
+      this._currentProgress.innerHTML = "";
+      return;
+    }
+
+    const currentProgress = getCurrentProgress(this._stateObj);
+    this._progressBar.progress =
+      currentProgress / this._stateObj.attributes.media_duration;
+
+    if (this._currentProgress) {
+      this._currentProgress.innerHTML = formatMediaTime(currentProgress);
+    }
+  }
+
+  private _handleClick(e: MouseEvent): void {
+    const action = (e.currentTarget! as HTMLElement).getAttribute("action")!;
+
+    if (!this._browserPlayer) {
+      this.hass!.callService("media_player", action, {
+        entity_id: this.entityId,
+      });
+      return;
+    }
+    if (action === "media_pause") {
+      this._browserPlayer.pause();
+    } else if (action === "media_play") {
+      this._browserPlayer.play();
+    }
+  }
+
+  private _marqueeMouseOver(): void {
+    if (!this._marqueeActive) {
+      this._marqueeActive = true;
+    }
+  }
+
+  private _marqueeMouseLeave(): void {
+    if (this._marqueeActive) {
+      this._marqueeActive = false;
+    }
+  }
+
+  private _selectPlayer(ev: CustomEvent): void {
+    const entityId = (ev.currentTarget as any).player;
+    navigate(`/media-browser/${entityId}`, { replace: true });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        min-height: 100px;
+        background: var(
+          --ha-card-background,
+          var(--card-background-color, white)
+        );
+        border-top: 1px solid var(--divider-color);
+      }
+
+      mwc-linear-progress {
+        width: 100%;
+        padding: 0 4px;
+        --mdc-theme-primary: var(--secondary-text-color);
+      }
+
+      mwc-button[slot="trigger"] {
+        --mdc-theme-primary: var(--primary-text-color);
+        --mdc-icon-size: 36px;
+      }
+
+      .info {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin-right: 16px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .secondary,
+      .progress {
+        color: var(--secondary-text-color);
+      }
+
+      .choose-player {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 16px;
+      }
+
+      .controls {
+        height: 48px;
+      }
+
+      .controls-progress {
+        flex: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      .progress {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+
+      mwc-linear-progress[wide] {
+        margin: 0 4px;
+      }
+
+      .media-info {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        padding-left: 16px;
+        width: 100%;
+      }
+
+      hui-marquee {
+        font-size: 1.2em;
+        margin: 0px 0 4px;
+      }
+
+      img {
+        max-height: 100px;
+      }
+
+      ha-button-menu mwc-button {
+        line-height: 1;
+      }
+
+      :host([narrow]) {
+        min-height: 80px;
+        max-height: 80px;
+      }
+
+      :host([narrow]) .controls-progress {
+        flex: unset;
+        min-width: 48px;
+      }
+
+      :host([narrow]) .controls {
+        display: flex;
+      }
+
+      :host([narrow]) .choose-player {
+        padding-left: 0;
+        min-width: 48px;
+        flex: unset;
+        justify-content: center;
+      }
+
+      :host([narrow]) .choose-player.browser {
+        justify-content: flex-end;
+        width: 100%;
+      }
+
+      :host([narrow]) img {
+        max-height: 80px;
+      }
+
+      :host([narrow]) .blank-image {
+        height: 80px;
+        width: 80px;
+      }
+
+      :host([narrow]) mwc-linear-progress {
+        padding: 0;
+        position: absolute;
+        top: -4px;
+        left: 0;
+      }
+
+      mwc-list-item[selected] {
+        font-weight: bold;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-bar-media-player": BarMediaPlayer;
+  }
+}

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

@@ -11,22 +11,17 @@ import {
 import { customElement, property } from "lit/decorators";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
-import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import { supportsFeature } from "../../common/entity/supports-feature";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-menu-button";
 import "../../components/media-player/ha-media-player-browse";
 import type { MediaPlayerItemId } from "../../components/media-player/ha-media-player-browse";
-import {
-  BROWSER_PLAYER,
-  MediaPickedEvent,
-  SUPPORT_BROWSE_MEDIA,
-} from "../../data/media-player";
+import { BROWSER_PLAYER, MediaPickedEvent } from "../../data/media-player";
+import { resolveMediaSource } from "../../data/media_source";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
+import "./ha-bar-media-player";
 import { showWebBrowserPlayMediaDialog } from "./show-media-player-dialog";
-import { showSelectMediaPlayerDialog } from "./show-select-media-source-dialog";
 
 @customElement("ha-panel-media-browser")
 class PanelMediaBrowser extends LitElement {
@@ -44,21 +39,10 @@ class PanelMediaBrowser extends LitElement {
     },
   ];
 
-  @LocalStorage("mediaBrowseEntityId")
+  @LocalStorage("mediaBrowseEntityId", true, false)
   private _entityId = BROWSER_PLAYER;
 
   protected render(): TemplateResult {
-    const stateObj = this._entityId
-      ? this.hass.states[this._entityId]
-      : undefined;
-
-    const title =
-      this._entityId === BROWSER_PLAYER
-        ? `${this.hass.localize("ui.components.media-browser.web-browser")}`
-        : stateObj?.attributes.friendly_name
-        ? `${stateObj?.attributes.friendly_name}`
-        : undefined;
-
     return html`
       <ha-app-layout>
         <app-header fixed slot="header">
@@ -73,23 +57,22 @@ class PanelMediaBrowser extends LitElement {
                   "ui.components.media-browser.media-player-browser"
                 )}
               </div>
-              <div class="secondary-text">${title || ""}</div>
             </div>
-            <mwc-button @click=${this._showSelectMediaPlayerDialog}>
-              ${this.hass.localize("ui.components.media-browser.choose_player")}
-            </mwc-button>
           </app-toolbar>
         </app-header>
-        <div class="content">
-          <ha-media-player-browse
-            .hass=${this.hass}
-            .entityId=${this._entityId}
-            .navigateIds=${this._navigateIds}
-            @media-picked=${this._mediaPicked}
-            @media-browsed=${this._mediaBrowsed}
-          ></ha-media-player-browse>
-        </div>
+        <ha-media-player-browse
+          .hass=${this.hass}
+          .entityId=${this._entityId}
+          .navigateIds=${this._navigateIds}
+          @media-picked=${this._mediaPicked}
+          @media-browsed=${this._mediaBrowsed}
+        ></ha-media-player-browse>
       </ha-app-layout>
+      <ha-bar-media-player
+        .hass=${this.hass}
+        .entityId=${this._entityId}
+        .narrow=${this.narrow}
+      ></ha-bar-media-player>
     `;
   }
 
@@ -129,15 +112,6 @@ class PanelMediaBrowser extends LitElement {
     ];
   }
 
-  private _showSelectMediaPlayerDialog(): void {
-    showSelectMediaPlayerDialog(this, {
-      mediaSources: this._mediaPlayerEntities,
-      sourceSelectedCallback: (entityId) => {
-        navigate(`/media-browser/${entityId}`, { replace: true });
-      },
-    });
-  }
-
   private _mediaBrowsed(ev) {
     if (ev.detail.back) {
       history.back();
@@ -158,38 +132,28 @@ class PanelMediaBrowser extends LitElement {
     ev: HASSDomEvent<MediaPickedEvent>
   ): Promise<void> {
     const item = ev.detail.item;
-    if (this._entityId === BROWSER_PLAYER) {
-      const resolvedUrl: any = await this.hass.callWS({
-        type: "media_source/resolve_media",
+    if (this._entityId !== BROWSER_PLAYER) {
+      this.hass!.callService("media_player", "play_media", {
+        entity_id: this._entityId,
         media_content_id: item.media_content_id,
+        media_content_type: item.media_content_type,
       });
+    } else if (item.media_content_type.startsWith("audio/")) {
+      await this.shadowRoot!.querySelector("ha-bar-media-player")!.playItem(
+        item
+      );
+    } else {
+      const resolvedUrl: any = await resolveMediaSource(
+        this.hass,
+        item.media_content_id
+      );
 
       showWebBrowserPlayMediaDialog(this, {
         sourceUrl: resolvedUrl.url,
         sourceType: resolvedUrl.mime_type,
         title: item.title,
       });
-      return;
     }
-
-    this.hass!.callService("media_player", "play_media", {
-      entity_id: this._entityId,
-      media_content_id: item.media_content_id,
-      media_content_type: item.media_content_type,
-    });
-  }
-
-  private get _mediaPlayerEntities() {
-    return Object.values(this.hass!.states).filter((entity) => {
-      if (
-        computeStateDomain(entity) === "media_player" &&
-        supportsFeature(entity, SUPPORT_BROWSE_MEDIA)
-      ) {
-        return true;
-      }
-
-      return false;
-    });
   }
 
   static get styles(): CSSResultGroup {
@@ -199,21 +163,20 @@ class PanelMediaBrowser extends LitElement {
         :host {
           --mdc-theme-primary: var(--app-header-text-color);
         }
+
         ha-media-player-browse {
-          height: calc(100vh - var(--header-height));
+          height: calc(100vh - (100px + var(--header-height)));
         }
-        :host([narrow]) app-toolbar mwc-button {
-          width: 65px;
+
+        :host([narrow]) ha-media-player-browse {
+          height: calc(100vh - (80px + var(--header-height)));
         }
-        .heading {
-          overflow: hidden;
-          white-space: nowrap;
-          margin-top: 4px;
-        }
-        .heading .secondary-text {
-          font-size: 14px;
-          overflow: hidden;
-          text-overflow: ellipsis;
+
+        ha-bar-media-player {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
         }
       `,
     ];

src/panels/media-browser/hui-dialog-select-media-player.ts

@@ -1,98 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateName } from "../../common/entity/compute_state_name";
-import { stringCompare } from "../../common/string/compare";
-import { createCloseHeading } from "../../components/ha-dialog";
-import { UNAVAILABLE_STATES } from "../../data/entity";
-import { BROWSER_PLAYER } from "../../data/media-player";
-import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import type { SelectMediaPlayerDialogParams } from "./show-select-media-source-dialog";
-
-@customElement("hui-dialog-select-media-player")
-export class HuiDialogSelectMediaPlayer extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false })
-  private _params?: SelectMediaPlayerDialogParams;
-
-  public showDialog(params: SelectMediaPlayerDialogParams): void {
-    this._params = params;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        hideActions
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(`ui.components.media-browser.choose_player`)
-        )}
-        @closed=${this.closeDialog}
-      >
-        <mwc-list>
-          <mwc-list-item .player=${BROWSER_PLAYER} @click=${this._selectPlayer}
-            >${this.hass.localize(
-              "ui.components.media-browser.web-browser"
-            )}</mwc-list-item
-          >
-          ${this._params.mediaSources
-            .sort((a, b) =>
-              stringCompare(computeStateName(a), computeStateName(b))
-            )
-            .map(
-              (source) => html`
-                <mwc-list-item
-                  .disabled=${UNAVAILABLE_STATES.includes(source.state)}
-                  .player=${source.entity_id}
-                  @click=${this._selectPlayer}
-                  >${computeStateName(source)}</mwc-list-item
-                >
-              `
-            )}
-        </mwc-list>
-      </ha-dialog>
-    `;
-  }
-
-  private _selectPlayer(ev: CustomEvent): void {
-    const entityId = (ev.currentTarget as any).player;
-    this._params!.sourceSelectedCallback(entityId);
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --dialog-content-padding: 0 24px 20px;
-        }
-        mwc-list-item[disabled] {
-          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-dialog-select-media-player": HuiDialogSelectMediaPlayer;
-  }
-}

src/panels/media-browser/show-select-media-source-dialog.ts

@@ -1,18 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface SelectMediaPlayerDialogParams {
-  mediaSources: HassEntity[];
-  sourceSelectedCallback: (entityId: string) => void;
-}
-
-export const showSelectMediaPlayerDialog = (
-  element: HTMLElement,
-  selectMediaPlayereDialogParams: SelectMediaPlayerDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "hui-dialog-select-media-player",
-    dialogImport: () => import("./hui-dialog-select-media-player"),
-    dialogParams: selectMediaPlayereDialogParams,
-  });
-};

src/state-summary/state-card-input_number.js

@@ -67,10 +67,10 @@ class StateCardInputNumber extends mixinBehaviors(
           on-click="stopPropagation"
           hidden="[[hiddenbox]]"
         >
+          <span slot="suffix">
+            [[stateObj.attributes.unit_of_measurement]]
+          </span>
         </paper-input>
-        <div class="state" hidden="[[hiddenbox]]">
-          [[stateObj.attributes.unit_of_measurement]]
-        </div>
         <div
           id="sliderstate"
           class="state sliderstate"