Colors

Co-authored-by: Paulus Schoutsen <balloob@gmail.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,7 +20,6 @@ module.exports = [
       "editor-trigger",
       "editor-condition",
       "editor-action",
-      "selectors",
       "trace",
       "trace-timeline",
     ],

gallery/src/pages/automation/selectors.markdown

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

gallery/src/pages/automation/selectors.ts

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

setup.py

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

src/common/entity/compute_state_display.ts

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

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

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { 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,8 +51,6 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
-  @property() public label?: string;
-
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -60,7 +58,6 @@ class HaEntitiesPickerLight extends LitElement {
 
     const currentEntities = this._currentEntities;
     return html`
-      <h3>${this.label}</h3>
       ${currentEntities.map(
         (entityId) => html`
           <div>
@@ -148,14 +145,6 @@ 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,10 +296,6 @@ 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,6 +68,7 @@ export class HaFormString extends LitElement implements HaFormElement {
             toggles
             .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
             @click=${this._toggleUnmaskedPassword}
+            tabindex="-1"
             .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
           ></ha-icon-button>`
         : ""}

src/components/ha-gauge.ts

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

src/components/ha-hls-player.ts

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

src/components/ha-service-control.ts

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

src/components/ha-sidebar.ts

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

src/components/ha-svg-icon.ts

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

src/components/ha-textfield.ts

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

src/components/ha-water_heater-state.js

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

src/components/ha-yaml-editor.ts

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

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

@@ -340,7 +340,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                 </mwc-list>
               `
           : html`
-              <div class="container no-items">
+              <div class="container">
                 ${this.hass.localize("ui.components.media-browser.no_items")}
                 <br />
                 ${currentItem.media_content_id ===
@@ -696,10 +696,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 16px;
         }
 
-        .no-items {
-          padding-left: 32px;
-        }
-
         .content {
           overflow-y: auto;
           padding-bottom: 20px;

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

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

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

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

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

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

src/data/media-player.ts

@@ -333,12 +333,3 @@ export const formatMediaTime = (seconds: number): string => {
       : secondsString.substring(14, 19);
   return secondsString.replace(/^0+/, "").padStart(4, "0");
 };
-
-export const cleanupMediaTitle = (title?: string): string | undefined => {
-  if (!title) {
-    return undefined;
-  }
-
-  const index = title.indexOf("?authSig=");
-  return index > 0 ? title.slice(0, index) : title;
-};

src/data/media_source.ts

@@ -1,15 +0,0 @@
-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/root.ts

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

src/data/supervisor/supervisor.ts

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

src/data/weather.ts

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

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

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

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

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

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

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

src/external_app/external_app_entrypoint.ts

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

src/external_app/external_auth.ts

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

src/external_app/external_config.ts

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

src/external_app/external_events_forwarder.ts

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

src/external_app/external_messaging.ts

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

src/layouts/home-assistant-main.ts

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

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

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

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

@@ -1,22 +1,25 @@
-import { mdiCloudLock, mdiDotsVertical, mdiMagnify } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
-import type { ActionDetail } from "@material/mwc-list";
+import { mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-icon-button";
 import "../../../components/ha-menu-button";
-import "../../../components/ha-button-menu";
 import { CloudStatus } from "../../../data/cloud";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
 import {
-  refreshSupervisorAvailableUpdates,
-  SupervisorAvailableUpdates,
-} from "../../../data/supervisor/root";
-import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
+  ExternalConfig,
+  getExternalConfig,
+} from "../../../external_app/external_config";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -24,8 +27,6 @@ import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
 import "./ha-config-updates";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -38,11 +39,22 @@ 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>
@@ -53,25 +65,6 @@ class HaConfigDashboard extends LitElement {
               .narrow=${this.narrow}
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.config")}</div>
-            <ha-icon-button
-              .path=${mdiMagnify}
-              @click=${this._showQuickBar}
-            ></ha-icon-button>
-            <ha-button-menu
-              corner="BOTTOM_START"
-              @action=${this._handleMenuAction}
-              activatable
-            >
-              <ha-icon-button
-                slot="trigger"
-                .label=${this.hass.localize("ui.common.menu")}
-                .path=${mdiDotsVertical}
-              ></ha-icon-button>
-
-              <mwc-list-item>
-                ${this.hass.localize("ui.panel.config.updates.check_updates")}
-              </mwc-list-item>
-            </ha-button-menu>
           </app-toolbar>
         </app-header>
 
@@ -80,9 +73,9 @@ class HaConfigDashboard extends LitElement {
           .isWide=${this.isWide}
           full-width
         >
-          ${this.supervisorUpdates === undefined
-            ? // Hide everything until updates loaded
-              html``
+          ${isComponentLoaded(this.hass, "hassio") &&
+          this.supervisorUpdates === undefined
+            ? html``
             : html`${this.supervisorUpdates?.length
                   ? html`<ha-card>
                       <ha-config-updates
@@ -120,6 +113,7 @@ class HaConfigDashboard extends LitElement {
                   <ha-config-navigation
                     .hass=${this.hass}
                     .narrow=${this.narrow}
+                    .externalConfig=${this._externalConfig}
                     .showAdvanced=${this.showAdvanced}
                     .pages=${configSections.dashboard}
                   ></ha-config-navigation>
@@ -129,34 +123,6 @@ 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,6 +6,7 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
+import { ExternalConfig } from "../../../external_app/external_config";
 import { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../../types";
 
@@ -19,12 +20,14 @@ class HaConfigNavigation extends LitElement {
 
   @property() public pages!: PageNavigation[];
 
+  @property() public externalConfig?: ExternalConfig;
+
   protected render(): TemplateResult {
     return html`
       ${this.pages.map((page) =>
         (
           page.path === "#external-app-configuration"
-            ? this.hass.auth.external?.config.hasSettingsScreen
+            ? this.externalConfig?.hasSettingsScreen
             : canShowPage(this.hass, page)
         )
           ? html`

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

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

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

@@ -3,6 +3,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -89,10 +90,9 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _related?: RelatedResult;
 
-  // If a number, it's the request ID so we make sure we don't show older info
-  @state() private _diagnosticDownloadLinks?:
-    | number
-    | (TemplateResult | string)[];
+  @state() private _diagnosticDownloadLinks?: Promise<
+    (TemplateResult | string)[]
+  >;
 
   private _device = memoizeOne(
     (
@@ -196,18 +196,20 @@ export class HaConfigDevicePage extends LitElement {
       return;
     }
 
-    this._diagnosticDownloadLinks = Math.random();
-    this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
+    this._diagnosticDownloadLinks = this._renderDiagnosticButtons();
   }
 
-  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+  private async _renderDiagnosticButtons(): Promise<
+    (TemplateResult | string)[]
+  > {
+    const result: TemplateResult[] = [];
     const device = this._device(this.deviceId, this.devices);
 
     if (!device) {
-      return;
+      return result;
     }
 
-    let links = await Promise.all(
+    return Promise.all(
       this._integrations(device, this.entries)
         .filter((entry) => entry.state === "loaded")
         .map(async (entry) => {
@@ -230,13 +232,6 @@ export class HaConfigDevicePage extends LitElement {
           `;
         })
     );
-    if (this._diagnosticDownloadLinks !== requestId) {
-      return;
-    }
-    links = links.filter(Boolean);
-    if (links.length > 0) {
-      this._diagnosticDownloadLinks = links;
-    }
   }
 
   protected firstUpdated(changedProps) {
@@ -313,7 +308,7 @@ export class HaConfigDevicePage extends LitElement {
       );
     }
 
-    const deviceActions: (TemplateResult | string)[] = [];
+    const deviceActions: TemplateResult[] = [];
 
     if (configurationUrl) {
       deviceActions.push(html`
@@ -344,8 +339,8 @@ export class HaConfigDevicePage extends LitElement {
       deviceActions
     );
 
-    if (Array.isArray(this._diagnosticDownloadLinks)) {
-      deviceActions.push(...this._diagnosticDownloadLinks);
+    if (this._diagnosticDownloadLinks) {
+      deviceActions.push(html`${until(this._diagnosticDownloadLinks)}`);
     }
 
     return html`
@@ -744,7 +739,7 @@ export class HaConfigDevicePage extends LitElement {
     device,
     integrations: ConfigEntry[],
     deviceInfo: TemplateResult[],
-    deviceActions: (string | TemplateResult)[]
+    deviceActions: TemplateResult[]
   ): TemplateResult[] {
     const domains = integrations.map((int) => int.domain);
     const templates: TemplateResult[] = [];

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

@@ -197,7 +197,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         ),
         model: device.model || "<unknown>",
         manufacturer: device.manufacturer || "<unknown>",
-        area: device.area_id ? areaLookup[device.area_id].name : "—",
+        area: device.area_id ? areaLookup[device.area_id].name : undefined,
         integration: device.config_entries.length
           ? device.config_entries
               .filter((entId) => entId in entryLookup)
@@ -320,7 +320,7 @@ export class HaConfigDeviceDashboard extends LitElement {
                   .batteryChargingStateObj=${batteryCharging}
                 ></ha-battery-icon>
               `
-            : html`—`;
+            : html` - `;
         },
       };
       if (showDisabled) {

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

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

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

@@ -171,7 +171,6 @@ 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>
@@ -285,7 +284,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                   </paper-tooltip>
                 </div>
               `
-            : "—",
+            : "",
       },
     })
   );
@@ -378,7 +377,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           name: computeEntityRegistryName(this.hass!, entry),
           unavailable,
           restored,
-          area: area ? area.name : "—",
+          area: area ? area.name : undefined,
           status: restored
             ? this.hass.localize(
                 "ui.panel.config.entities.picker.status.restored"

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

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

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

@@ -13,7 +13,6 @@ 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";
@@ -176,9 +175,9 @@ export class HaIntegrationCard extends LitElement {
   }
 
   private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult {
-    const devices = this._getDevices(item, this.deviceRegistryEntries);
-    const services = this._getServices(item, this.deviceRegistryEntries);
-    const entities = this._getEntities(item, this.entityRegistryEntries);
+    const devices = this._getDevices(item);
+    const services = this._getServices(item);
+    const entities = this._getEntities(item);
 
     let stateText: [string, ...unknown[]] | undefined;
     let stateTextExtra: TemplateResult | string | undefined;
@@ -221,61 +220,6 @@ 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`
@@ -285,7 +229,53 @@ export class HaIntegrationCard extends LitElement {
             </div>
           `
         : ""}
-      <div class="content">${devicesLine}</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="actions">
         <div>
           ${item.disabled_by === "user"
@@ -431,51 +421,36 @@ export class HaIntegrationCard extends LitElement {
     this.classList.remove("highlight");
   }
 
-  private _getEntities = memoizeOne(
-    (
-      configEntry: ConfigEntry,
-      entityRegistryEntries: EntityRegistryEntry[]
-    ): EntityRegistryEntry[] => {
-      if (!entityRegistryEntries) {
-        return [];
-      }
-      return entityRegistryEntries.filter(
-        (entity) => entity.config_entry_id === configEntry.entry_id
-      );
+  private _getEntities(configEntry: ConfigEntry): EntityRegistryEntry[] {
+    if (!this.entityRegistryEntries) {
+      return [];
     }
-  );
+    return this.entityRegistryEntries.filter(
+      (entity) => entity.config_entry_id === configEntry.entry_id
+    );
+  }
 
-  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"
-      );
+  private _getDevices(configEntry: ConfigEntry): DeviceRegistryEntry[] {
+    if (!this.deviceRegistryEntries) {
+      return [];
     }
-  );
+    return this.deviceRegistryEntries.filter(
+      (device) =>
+        device.config_entries.includes(configEntry.entry_id) &&
+        device.entry_type !== "service"
+    );
+  }
 
-  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"
-      );
+  private _getServices(configEntry: ConfigEntry): DeviceRegistryEntry[] {
+    if (!this.deviceRegistryEntries) {
+      return [];
     }
-  );
+    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,7 +61,6 @@ 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,12 +42,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
         )}
       >
-        <ha-code-editor
-          mode="yaml"
-          readonly
-          .value=${this._signature}
-          dir="ltr"
-        >
+        <ha-code-editor mode="yaml" readonly .value=${this._signature}>
         </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,12 +194,6 @@ 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,
@@ -261,11 +255,6 @@ 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,6 +28,7 @@ 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";
@@ -52,12 +53,14 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
 
   @state() private _tags: Tag[] = [];
 
-  private get _canWriteTags() {
-    return this.hass.auth.external?.config.canWriteTag;
-  }
+  @state() private _canWriteTags = false;
 
   private _columns = memoizeOne(
-    (narrow: boolean, _language): DataTableColumnContainer => {
+    (
+      narrow: boolean,
+      canWriteTags: boolean,
+      _language
+    ): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = {
         icon: {
           title: "",
@@ -100,7 +103,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           `,
         };
       }
-      if (this._canWriteTags) {
+      if (canWriteTags) {
         columns.write = {
           title: "",
           type: "icon-button",
@@ -149,6 +152,11 @@ 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() {
@@ -173,7 +181,11 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.tags}
-        .columns=${this._columns(this.narrow, this.hass.language)}
+        .columns=${this._columns(
+          this.narrow,
+          this._canWriteTags,
+          this.hass.language
+        )}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         hasFab

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

@@ -67,7 +67,7 @@ export class HaConfigUsers extends LitElement {
           width: "20%",
           direction: "asc",
           hidden: narrow,
-          template: (username) => html`${username || "—"}`,
+          template: (username) => html` ${username || "-"} `,
         },
         group_ids: {
           title: localize("ui.panel.config.users.picker.headers.group"),

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

@@ -94,7 +94,6 @@ 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, false)
+  @LocalStorage("panel-dev-service-state-service-data", true)
   private _serviceData?: ServiceAction = { service: "", target: {}, data: {} };
 
-  @LocalStorage("panel-dev-service-state-yaml-mode", true, false)
+  @LocalStorage("panel-dev-service-state-yaml-mode", true)
   private _yamlMode = false;
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;

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

@@ -85,7 +85,6 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
         :host([rtl]) .entities th {
           text-align: right;
-          direction: rtl;
         }
 
         .entities tr {
@@ -146,7 +145,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         [[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
       </h1>
       <ha-expansion-panel
-        header="[[localize('ui.panel.developer-tools.tabs.states.set_state')]]"
+        header="Set state"
         outlined
         expanded="[[_expanded]]"
         on-expanded-changed="expandedChanged"
@@ -182,7 +181,6 @@ 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,7 +132,6 @@ 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,7 +15,6 @@ 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";
@@ -151,10 +150,7 @@ class HaLogbook extends LitElement {
                 html`
                   <state-badge
                     .hass=${this.hass}
-                    .overrideIcon=${item.icon ||
-                    (item.domain && !stateObj
-                      ? domainIcon(item.domain!)
-                      : undefined)}
+                    .overrideIcon=${item.icon}
                     .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,15 +8,10 @@ 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, LovelaceCardEditor } from "../types";
+import { LovelaceCard } 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[],
@@ -62,7 +57,7 @@ class EntityFilterCard extends ReactiveElement implements LovelaceCard {
   }
 
   public setConfig(config: EntityFilterCardConfig): void {
-    if (!config.entities || !Array.isArray(config.entities)) {
+    if (!config.entities.length || !Array.isArray(config.entities)) {
       throw new Error("Entities must be specified");
     }
 

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -24,7 +24,6 @@ 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,
@@ -183,7 +182,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         entityState === "on");
 
     const mediaDescription = computeMediaDescription(stateObj);
-    const mediaTitleClean = cleanupMediaTitle(stateObj.attributes.media_title);
 
     return html`
       <ha-card>
@@ -246,21 +244,24 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             </div>
           </div>
           ${!isUnavailable &&
-          (mediaDescription || mediaTitleClean || showControls)
+          (mediaDescription || stateObj.attributes.media_title || showControls)
             ? html`
                 <div>
                   <div class="title-controls">
-                    ${!mediaDescription && !mediaTitleClean
+                    ${!mediaDescription && !stateObj.attributes.media_title
                       ? ""
                       : html`
                           <div class="media-info">
                             <hui-marquee
-                              .text=${mediaTitleClean || mediaDescription}
+                              .text=${stateObj.attributes.media_title ||
+                              mediaDescription}
                               .active=${this._marqueeActive}
                               @mouseover=${this._marqueeMouseOver}
                               @mouseleave=${this._marqueeMouseLeave}
                             ></hui-marquee>
-                            ${!mediaTitleClean ? "" : mediaDescription}
+                            ${!stateObj.attributes.media_title
+                              ? ""
+                              : mediaDescription}
                           </div>
                         `}
                     ${!showControls

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

@@ -24,7 +24,6 @@ import {
   getWeatherStateIcon,
   getWeatherUnit,
   getWind,
-  isForecastHourly,
   weatherAttrIcons,
   WeatherEntity,
   weatherSVGStyles,
@@ -178,15 +177,23 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
-    const hourly = isForecastHourly(forecast);
+    let hourly: boolean | undefined;
     let dayNight: boolean | undefined;
 
-    if (hourly) {
-      const dateFirst = new Date(forecast![0].datetime);
-      const datelast = new Date(forecast![forecast!.length - 1].datetime);
-      const dayDiff = datelast.getTime() - dateFirst.getTime();
+    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();
 
-      dayNight = dayDiff > DAY_IN_MILLISECONDS;
+      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;
+      }
     }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
@@ -281,76 +288,69 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         ${forecast
           ? html`
               <div class="forecast">
-                ${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>
-                      `
-                    : ""
+                ${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>
+                  `
                 )}
               </div>
             `
@@ -402,10 +402,6 @@ 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,10 +186,6 @@ 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._dirty
+          ${this._cardConfig !== undefined
             ? html`
                 <mwc-button
                   ?disabled=${!this._canSave || this._saving}
@@ -259,7 +259,9 @@ export class HuiDialogEditCard
                           size="small"
                         ></ha-circular-progress>
                       `
-                    : this.hass!.localize("ui.common.save")}
+                    : this._dirty
+                    ? this.hass!.localize("ui.common.save")
+                    : this.hass!.localize("ui.common.close")}
                 </mwc-button>
               `
             : ``}

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

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

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

@@ -1,393 +0,0 @@
-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,12 +102,14 @@ export class HuiLogbookCardEditor
             @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
-        <ha-entities-picker
-          .label=${`${this.hass!.localize(
+        <h3>
+          ${`${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,6 +11,7 @@ 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";
@@ -199,9 +200,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,10 +253,6 @@ 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,7 +36,6 @@ 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 {
@@ -54,8 +53,6 @@ export class HuiDialogEditView extends LitElement {
 
   @state() private _curTab?: string;
 
-  @state() private _dirty = false;
-
   private _curTabIndex = 0;
 
   get _type(): string {
@@ -74,7 +71,6 @@ 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];
@@ -89,7 +85,6 @@ export class HuiDialogEditView extends LitElement {
     this._params = undefined;
     this._config = {};
     this._badges = [];
-    this._dirty = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -219,7 +214,7 @@ export class HuiDialogEditView extends LitElement {
         >
         <mwc-button
           slot="primaryAction"
-          ?disabled=${!this._config || this._saving || !this._dirty}
+          ?disabled=${!this._config || this._saving}
           @click=${this._save}
         >
           ${this._saving
@@ -321,13 +316,8 @@ export class HuiDialogEditView extends LitElement {
   }
 
   private _viewConfigChanged(ev: ViewEditEvent): void {
-    if (
-      ev.detail &&
-      ev.detail.config &&
-      !deepEqual(this._config, ev.detail.config)
-    ) {
+    if (ev.detail && ev.detail.config) {
       this._config = ev.detail.config;
-      this._dirty = true;
     }
   }
 
@@ -337,7 +327,6 @@ 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 {
@@ -345,7 +334,6 @@ export class HuiDialogEditView extends LitElement {
       return;
     }
     this._badges = processEditorEntities(ev.detail.entities);
-    this._dirty = true;
   }
 
   private _isConfigChanged(): boolean {

src/panels/lovelace/hui-editor.ts

@@ -15,6 +15,7 @@ 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";
@@ -91,10 +92,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,7 +2,9 @@ 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,
@@ -117,6 +119,13 @@ 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")}
@@ -129,13 +138,6 @@ 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"
@@ -375,36 +377,30 @@ class HUIRoot extends LitElement {
                             )}
                             <ha-svg-icon
                               slot="graphic"
-                              .path=${mdiPencil}
+                              .path=${mdiCog}
                             ></ha-svg-icon>
                           </mwc-list-item>
                         `
                       : ""}
-                    ${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>
-                        `
-                      : ""}
+                    <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>
               `}
@@ -937,10 +933,6 @@ 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

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

@@ -30,13 +30,11 @@ 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,
@@ -44,7 +42,6 @@ import {
 } 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 {
@@ -61,8 +58,6 @@ class BarMediaPlayer extends LitElement {
 
   @state() private _marqueeActive = false;
 
-  @state() private _browserPlayer?: BrowserMediaPlayer;
-
   private _progressInterval?: number;
 
   public connectedCallback(): void {
@@ -91,28 +86,73 @@ class BarMediaPlayer extends LitElement {
       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 choosePlayerElement = html`
+      <div
+        class="choose-player ${this.entityId === BROWSER_PLAYER
+          ? "browser"
+          : ""}"
+      >
+        <ha-button-menu corner="BOTTOM_START">
+          ${this.narrow
+            ? html`
+                <ha-icon-button
+                  slot="trigger"
+                  .path=${this._stateObj
+                    ? domainIcon(computeDomain(this.entityId), this._stateObj)
+                    : mdiMonitor}
+                ></ha-icon-button>
+              `
+            : html`
+                <mwc-button
+                  slot="trigger"
+                  .label=${this.narrow
+                    ? ""
+                    : `${
+                        this._stateObj
+                          ? computeStateName(this._stateObj)
+                          : BROWSER_PLAYER
+                      }
+                `}
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${this._stateObj
+                      ? domainIcon(computeDomain(this.entityId), this._stateObj)
+                      : mdiMonitor}
+                  ></ha-svg-icon>
+                  <ha-svg-icon
+                    slot="trailingIcon"
+                    .path=${mdiChevronDown}
+                  ></ha-svg-icon>
+                </mwc-button>
+              `}
+          <mwc-list-item .player=${BROWSER_PLAYER} @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>
+    `;
+
+    if (!this._stateObj) {
+      return choosePlayerElement;
+    }
+
     const stateObj = this._stateObj;
     const controls = !this.narrow
       ? computeMediaControls(stateObj)
@@ -145,18 +185,17 @@ class BarMediaPlayer extends LitElement {
       : [{}];
     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)} />` : ""}
+        ${this._image
+          ? html`<img src=${this.hass.hassUrl(this._image)} />`
+          : stateObj.state === "off" || stateObj.state !== "playing"
+          ? html`<div class="blank-image"></div>`
+          : ""}
         <div class="media-info">
           <hui-marquee
-            .text=${mediaTitleClean ||
+            .text=${stateObj.attributes.media_title ||
             mediaDescription ||
             this.hass.localize(`ui.card.media_player.nothing_playing`)}
             .active=${this._marqueeActive}
@@ -164,27 +203,25 @@ class BarMediaPlayer extends LitElement {
             @mouseleave=${this._marqueeMouseLeave}
           ></hui-marquee>
           <span class="secondary">
-            ${mediaTitleClean ? mediaDescription : ""}
+            ${stateObj.attributes.media_title ? 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>
-                `
-              )}
+          ${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>`
@@ -196,85 +233,13 @@ class BarMediaPlayer extends LitElement {
               </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>
+      ${choosePlayerElement}
     `;
   }
 
-  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;
-      }
+    if (!this.hass || !this._stateObj || !changedProps.has("hass")) {
+      return;
     }
 
     const stateObj = this._stateObj;
@@ -299,14 +264,8 @@ class BarMediaPlayer extends LitElement {
     }
   }
 
-  private get _stateObj(): MediaPlayerEntity {
-    if (this._browserPlayer) {
-      return this._browserPlayer.toStateObj();
-    }
-    return (
-      (this.hass!.states[this.entityId] as MediaPlayerEntity | undefined) ||
-      BrowserMediaPlayer.idleStateObj()
-    );
+  private get _stateObj(): MediaPlayerEntity | undefined {
+    return this.hass!.states[this.entityId] as MediaPlayerEntity;
   }
 
   private get _showProgressBar() {
@@ -316,6 +275,10 @@ class BarMediaPlayer extends LitElement {
 
     const stateObj = this._stateObj;
 
+    if (!stateObj) {
+      return false;
+    }
+
     return (
       (stateObj.state === "playing" || stateObj.state === "paused") &&
       "media_duration" in stateObj.attributes &&
@@ -323,48 +286,53 @@ class BarMediaPlayer extends LitElement {
     );
   }
 
-  private get _mediaPlayerEntities() {
-    return Object.values(this.hass!.states).filter(
-      (entity) =>
-        computeStateDomain(entity) === "media_player" &&
-        supportsFeature(entity, SUPPORT_BROWSE_MEDIA)
+  private get _image() {
+    if (!this.hass) {
+      return undefined;
+    }
+
+    const stateObj = this._stateObj;
+
+    if (!stateObj) {
+      return undefined;
+    }
+
+    return (
+      stateObj.attributes.entity_picture_local ||
+      stateObj.attributes.entity_picture
     );
   }
 
+  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;
+    });
+  }
+
   private _updateProgressBar(): void {
-    if (!this._progressBar || !this._currentProgress) {
-      return;
-    }
+    if (this._progressBar && this._stateObj?.attributes.media_duration) {
+      const currentProgress = getCurrentProgress(this._stateObj);
+      this._progressBar.progress =
+        currentProgress / this._stateObj!.attributes.media_duration;
 
-    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);
+      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();
-    }
+    this.hass!.callService("media_player", action, {
+      entity_id: this.entityId,
+    });
   }
 
   private _marqueeMouseOver(): void {
@@ -431,10 +399,6 @@ class BarMediaPlayer extends LitElement {
         padding: 16px;
       }
 
-      .controls {
-        height: 48px;
-      }
-
       .controls-progress {
         flex: 2;
         display: flex;
@@ -470,6 +434,12 @@ class BarMediaPlayer extends LitElement {
         max-height: 100px;
       }
 
+      .blank-image {
+        height: 100px;
+        width: 100px;
+        background-color: var(--divider-color);
+      }
+
       ha-button-menu mwc-button {
         line-height: 1;
       }
@@ -515,10 +485,6 @@ class BarMediaPlayer extends LitElement {
         top: -4px;
         left: 0;
       }
-
-      mwc-list-item[selected] {
-        font-weight: bold;
-      }
     `;
   }
 }

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

@@ -16,7 +16,6 @@ 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 } 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";
@@ -39,7 +38,7 @@ class PanelMediaBrowser extends LitElement {
     },
   ];
 
-  @LocalStorage("mediaBrowseEntityId", true, false)
+  @LocalStorage("mediaBrowseEntityId")
   private _entityId = BROWSER_PLAYER;
 
   protected render(): TemplateResult {
@@ -132,28 +131,25 @@ class PanelMediaBrowser extends LitElement {
     ev: HASSDomEvent<MediaPickedEvent>
   ): Promise<void> {
     const item = ev.detail.item;
-    if (this._entityId !== BROWSER_PLAYER) {
-      this.hass!.callService("media_player", "play_media", {
-        entity_id: this._entityId,
+    if (this._entityId === BROWSER_PLAYER) {
+      const resolvedUrl: any = await this.hass.callWS({
+        type: "media_source/resolve_media",
         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,
+    });
   }
 
   static get styles(): CSSResultGroup {

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

@@ -29,6 +29,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
         .main-text {
           @apply --paper-font-common-nowrap;
           color: var(--primary-text-color);
+          text-transform: capitalize;
         }
 
         .main-text[take-height] {

src/state/external-mixin.ts

@@ -0,0 +1,15 @@
+import { Constructor } from "../types";
+import { HassBaseEl } from "./hass-base-mixin";
+
+export const ExternalMixin = <T extends Constructor<HassBaseEl>>(
+  superClass: T
+) =>
+  class extends superClass {
+    protected hassConnected() {
+      super.hassConnected();
+
+      if (this.hass!.auth.external) {
+        this.hass!.auth.external.connection = this.hass!.connection;
+      }
+    }
+  };

src/state/hass-element.ts

@@ -6,6 +6,7 @@ import DisconnectToastMixin from "./disconnect-toast-mixin";
 import { hapticMixin } from "./haptic-mixin";
 import { HassBaseEl } from "./hass-base-mixin";
 import { loggingMixin } from "./logging-mixin";
+import { ExternalMixin } from "./external-mixin";
 import MoreInfoMixin from "./more-info-mixin";
 import NotificationMixin from "./notification-mixin";
 import { panelTitleMixin } from "./panel-title-mixin";
@@ -31,4 +32,5 @@ export class HassElement extends ext(HassBaseEl, [
   hapticMixin,
   panelTitleMixin,
   loggingMixin,
+  ExternalMixin,
 ]) {}

src/state/panel-title-mixin.ts

@@ -3,7 +3,7 @@ import { Constructor, HomeAssistant } from "../types";
 import { HassBaseEl } from "./hass-base-mixin";
 
 const setTitle = (title: string | undefined) => {
-  document.title = title ? `${title} – Home Assistant` : "Home Assistant";
+  document.title = title ? `${title} - Home Assistant` : "Home Assistant";
 };
 
 export const panelTitleMixin = <T extends Constructor<HassBaseEl>>(

src/translations/en.json

@@ -10,7 +10,7 @@
     "mailbox": "Mailbox",
     "shopping_list": "Shopping List",
     "developer_tools": "Developer Tools",
-    "media_browser": "Media",
+    "media_browser": "Media Browser",
     "profile": "Profile"
   },
   "state": {
@@ -506,7 +506,7 @@
         "pick-media": "Pick Media",
         "no_items": "No items",
         "choose_player": "Choose Player",
-        "media-player-browser": "Media",
+        "media-player-browser": "Media Player Browser",
         "web-browser": "Web Browser",
         "media_player": "Media Player",
         "audio_not_supported": "Your browser does not support the audio element.",
@@ -616,7 +616,7 @@
             "person": "[%key:ui::panel::config::person::caption%]",
             "devices": "[%key:ui::panel::config::devices::caption%]",
             "entities": "[%key:ui::panel::config::entities::caption%]",
-            "energy": "Energy Configuration",
+            "energy": "[%key:ui::panel::config::energy::caption%]",
             "lovelace": "[%key:ui::panel::config::lovelace::caption%]",
             "core": "[%key:ui::panel::config::core::caption%]",
             "zone": "[%key:ui::panel::config::zone::caption%]",
@@ -626,10 +626,7 @@
             "server_control": "[%key:ui::panel::config::server_control::caption%]"
           }
         },
-        "filter_placeholder": "Entity Filter",
-        "title": "Quick Search",
-        "key_c_hint": "Press 'c' on any page to open this search bar",
-        "nothing_found": "Nothing found!"
+        "filter_placeholder": "Entity Filter"
       },
       "voice_command": {
         "did_not_hear": "Home Assistant did not hear anything",
@@ -990,6 +987,10 @@
           "settings": {
             "title": "Settings",
             "description": "Basic settings, server controls, logs and info"
+          },
+          "developer_tools": {
+            "title": "Developer Tools",
+            "description": "Tools to help create automations and scripts"
           }
         },
         "common": {
@@ -999,11 +1000,6 @@
           "learn_more": "Learn more"
         },
         "updates": {
-          "check_unavailable": {
-            "title": "Unable to check for updates",
-            "description": "You need to run the Home Assistant operating system to be able to check and install updates from the Home Assistant user interface."
-          },
-          "check_updates": "Check for updates",
           "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to load updates",
           "version_available": "Version {version_available} is available",
@@ -3190,7 +3186,7 @@
           "help": "Help",
           "start_conversation": "Start conversation",
           "reload_resources": "Reload resources",
-          "exit_edit_mode": "Done",
+          "exit_edit_mode": "Exit UI edit mode",
           "close": "Close"
         },
         "reload_resources": {
@@ -3402,13 +3398,7 @@
             },
             "entity-filter": {
               "name": "Entity Filter",
-              "description": "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state.",
-              "filters": "Filters",
-              "card": "Card",
-              "display_states": "States to show",
-              "show_empty": "Show when empty",
-              "state": "state",
-              "delete_state": "Delete state"
+              "description": "The Entity Filter card allows you to define a list of entities that you want to track only when in a certain state."
             },
             "gauge": {
               "name": "Gauge",

src/util/hass-attributes-util.ts

@@ -176,7 +176,7 @@ export function formatAttributeValue(
   value: any
 ): string | TemplateResult {
   if (value === null) {
-    return "—";
+    return "-";
   }
 
   // YAML handling

src/util/hass-media-player-model.js

@@ -1,5 +1,4 @@
 import { supportsFeature } from "../common/entity/supports-feature";
-import { cleanupMediaTitle } from "../data/media-player";
 
 export default class MediaPlayerEntity {
   constructor(hass, stateObj) {
@@ -116,7 +115,7 @@ export default class MediaPlayerEntity {
   }
 
   get primaryTitle() {
-    return cleanupMediaTitle(this._attr.media_title);
+    return this._attr.media_title;
   }
 
   get secondaryTitle() {

test/common/datetime/format_time.ts

@@ -3,7 +3,6 @@ import { assert } from "chai";
 import {
   formatTime,
   formatTimeWithSeconds,
-  formatTimeWeekday,
 } from "../../../src/common/datetime/format_time";
 import { NumberFormat, TimeFormat } from "../../../src/data/translation";
 
@@ -52,26 +51,3 @@ describe("formatTimeWithSeconds", () => {
     );
   });
 });
-
-describe("formatTimeWeekday", () => {
-  const dateObj = new Date(2017, 10, 18, 23, 12, 13, 1400);
-
-  it("Formats English times", () => {
-    assert.strictEqual(
-      formatTimeWeekday(dateObj, {
-        language: "en",
-        number_format: NumberFormat.language,
-        time_format: TimeFormat.am_pm,
-      }),
-      "Wednesday 11:12 PM"
-    );
-    assert.strictEqual(
-      formatTimeWeekday(dateObj, {
-        language: "en",
-        number_format: NumberFormat.language,
-        time_format: TimeFormat.twenty_four,
-      }),
-      "Wednesday 23:12"
-    );
-  });
-});