20221031.0 (#14248)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20221027.0"
+version      = "20221031.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/entity/state_active.ts

@@ -25,7 +25,7 @@ export function stateActive(stateObj: HassEntity): boolean {
     case "person":
       return state !== "not_home";
     case "media-player":
-      return state !== "idle";
+      return state !== "idle" && state !== "standby";
     case "vacuum":
       return state === "on" || state === "cleaning";
     case "plant":

src/components/ha-camera-stream.ts

@@ -24,7 +24,7 @@ import "./ha-hls-player";
 import "./ha-web-rtc-player";
 
 @customElement("ha-camera-stream")
-class HaCameraStream extends LitElement {
+export class HaCameraStream extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: CameraEntity;
@@ -81,7 +81,7 @@ class HaCameraStream extends LitElement {
       return html``;
     }
     if (__DEMO__ || this._shouldRenderMJPEG) {
-      return html` <img
+      return html`<img
         .src=${__DEMO__
           ? this.stateObj.attributes.entity_picture!
           : this._connected

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

@@ -0,0 +1,87 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import "./ha-form";
+import type {
+  HaFormDataContainer,
+  HaFormElement,
+  HaFormExpandableSchema,
+  HaFormSchema,
+} from "./types";
+
+@customElement("ha-form-expandable")
+export class HaFormExpendable extends LitElement implements HaFormElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data!: HaFormDataContainer;
+
+  @property({ attribute: false }) public schema!: HaFormExpandableSchema;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
+        <div
+          slot="header"
+          role="heading"
+          aria-level=${this.schema.headingLevel?.toString() ?? "3"}
+        >
+          ${this.schema.icon
+            ? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
+            : this.schema.iconPath
+            ? html` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `
+            : null}
+          ${this.schema.title}
+        </div>
+        <div class="content">
+          <ha-form
+            .hass=${this.hass}
+            .data=${this.data}
+            .schema=${this.schema.schema}
+            .disabled=${this.disabled}
+            .computeLabel=${this.computeLabel}
+            .computeHelper=${this.computeHelper}
+          ></ha-form>
+        </div>
+      </ha-expansion-panel>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex !important;
+        flex-direction: column;
+      }
+      :host ha-form {
+        display: block;
+      }
+      .content {
+        padding: 12px;
+      }
+      ha-expansion-panel {
+        display: block;
+        --expansion-panel-content-padding: 0;
+        border-radius: 6px;
+      }
+      ha-svg-icon,
+      ha-icon {
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-form-expandable": HaFormExpendable;
+  }
+}

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

@@ -33,11 +33,6 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this.setAttribute("own-margin", "");
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("schema")) {
@@ -78,7 +73,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
           var(--form-grid-column-count, auto-fit),
           minmax(var(--form-grid-min-width, 200px), 1fr)
         );
-        grid-gap: 8px;
+        grid-column-gap: 8px;
+        grid-row-gap: 24px;
       }
       :host > ha-form {
         display: block;

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

@@ -9,6 +9,7 @@ import "./ha-form-boolean";
 import "./ha-form-constant";
 import "./ha-form-float";
 import "./ha-form-grid";
+import "./ha-form-expandable";
 import "./ha-form-integer";
 import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";

src/components/ha-form/types.ts

@@ -12,7 +12,8 @@ export type HaFormSchema =
   | HaFormMultiSelectSchema
   | HaFormTimeSchema
   | HaFormSelector
-  | HaFormGridSchema;
+  | HaFormGridSchema
+  | HaFormExpandableSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -34,6 +35,17 @@ export interface HaFormGridSchema extends HaFormBaseSchema {
   schema: readonly HaFormSchema[];
 }
 
+export interface HaFormExpandableSchema extends HaFormBaseSchema {
+  type: "expandable";
+  name: "";
+  title: string;
+  icon?: string;
+  iconPath?: string;
+  expanded?: boolean;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  schema: readonly HaFormSchema[];
+}
+
 export interface HaFormSelector extends HaFormBaseSchema {
   type?: never;
   selector: Selector;
@@ -86,7 +98,9 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
 export type SchemaUnion<
   SchemaArray extends readonly HaFormSchema[],
   Schema = SchemaArray[number]
-> = Schema extends HaFormGridSchema ? SchemaUnion<Schema["schema"]> : Schema;
+> = Schema extends HaFormGridSchema | HaFormExpandableSchema
+  ? SchemaUnion<Schema["schema"]>
+  : Schema;
 
 export interface HaFormDataContainer {
   [key: string]: HaFormData;

src/components/ha-hls-player.ts

@@ -8,6 +8,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
@@ -85,6 +86,7 @@ class HaHLSPlayer extends LitElement {
             .muted=${this.muted}
             ?playsinline=${this.playsInline}
             ?controls=${this.controls}
+            @loadeddata=${this._loadedData}
           ></video>`
         : ""}
     `;
@@ -318,6 +320,11 @@ class HaHLSPlayer extends LitElement {
     this._errorIsFatal = false;
   }
 
+  private _loadedData() {
+    // @ts-ignore
+    fireEvent(this, "load");
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host,

src/components/ha-web-rtc-player.ts

@@ -8,6 +8,7 @@ import {
 } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
 import { handleWebRtcOffer, WebRtcAnswer } from "../data/camera";
 import { fetchWebRtcSettings } from "../data/rtsp_to_webrtc";
 import type { HomeAssistant } from "../types";
@@ -59,6 +60,7 @@ class HaWebRtcPlayer extends LitElement {
         ?playsinline=${this.playsInline}
         ?controls=${this.controls}
         .poster=${this.posterUrl}
+        @loadeddata=${this._loadedData}
       ></video>
     `;
   }
@@ -188,6 +190,11 @@ class HaWebRtcPlayer extends LitElement {
     }
   }
 
+  private _loadedData() {
+    // @ts-ignore
+    fireEvent(this, "load");
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host,

src/components/tile/ha-tile-badge.ts

@@ -0,0 +1,51 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../ha-icon";
+
+@customElement("ha-tile-badge")
+export class HaTileBadge extends LitElement {
+  @property() public iconPath?: string;
+
+  @property() public icon?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="badge">
+        ${this.icon
+          ? html`<ha-icon .icon=${this.icon}></ha-icon>`
+          : html`<ha-svg-icon .path=${this.iconPath}></ha-svg-icon>`}
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        --tile-badge-background-color: rgb(var(--rgb-primary-color));
+        --tile-badge-icon-color: rgb(var(--rgb-white-color));
+        --mdc-icon-size: 12px;
+      }
+      .badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 0;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        background-color: var(--tile-badge-background-color);
+        transition: background-color 280ms ease-in-out;
+      }
+      .badge ha-icon,
+      .badge ha-svg-icon {
+        color: var(--tile-badge-icon-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-badge": HaTileBadge;
+  }
+}

src/data/energy.ts

@@ -272,11 +272,15 @@ export interface EnergyData {
 
 export const getReferencedStatisticIds = (
   prefs: EnergyPreferences,
-  info: EnergyInfo
+  info: EnergyInfo,
+  exclude?: string[]
 ): string[] => {
   const statIDs: string[] = [];
 
   for (const source of prefs.energy_sources) {
+    if (exclude?.includes(source.type)) {
+      continue;
+    }
     if (source.type === "solar") {
       statIDs.push(source.stat_energy_from);
       continue;
@@ -362,6 +366,7 @@ const getEnergyData = async (
     }
   }
 
+  const waterStatIds: string[] = [];
   const consumptionStatIDs: string[] = [];
   for (const source of prefs.energy_sources) {
     // grid source
@@ -370,8 +375,13 @@ const getEnergyData = async (
         consumptionStatIDs.push(flowFrom.stat_energy_from);
       }
     }
+    if (source.type === "water") {
+      waterStatIds.push(source.stat_energy_from);
+    }
   }
-  const statIDs = getReferencedStatisticIds(prefs, info);
+  const energyStatIds = getReferencedStatisticIds(prefs, info, ["water"]);
+
+  const allStatIDs = [...energyStatIds, ...waterStatIds];
 
   const dayDifference = differenceInDays(end || new Date(), start);
   const period =
@@ -381,19 +391,32 @@ const getEnergyData = async (
   const startMinHour = addHours(start, -1);
 
   const lengthUnit = hass.config.unit_system.length || "";
-  const units: StatisticsUnitConfiguration = {
+  const energyUnits: StatisticsUnitConfiguration = {
     energy: "kWh",
     volume: lengthUnit === "km" ? "m³" : "ft³",
   };
+  const waterUnits: StatisticsUnitConfiguration = {
+    volume: lengthUnit === "km" ? "L" : "gal",
+  };
 
-  const stats = await fetchStatistics(
+  const stats = {
-    hass!,
+    ...(await fetchStatistics(
-    startMinHour,
+      hass!,
-    end,
+      startMinHour,
-    statIDs,
+      end,
-    period,
+      energyStatIds,
-    units
+      period,
-  );
+      energyUnits
+    )),
+    ...(await fetchStatistics(
+      hass!,
+      startMinHour,
+      end,
+      waterStatIds,
+      period,
+      waterUnits
+    )),
+  };
 
   let statsCompare;
   let startCompare;
@@ -409,14 +432,24 @@ const getEnergyData = async (
     const compareStartMinHour = addHours(startCompare, -1);
     endCompare = addMilliseconds(start, -1);
 
-    statsCompare = await fetchStatistics(
+    statsCompare = {
-      hass!,
+      ...(await fetchStatistics(
-      compareStartMinHour,
+        hass!,
-      endCompare,
+        compareStartMinHour,
-      statIDs,
+        endCompare,
-      period,
+        energyStatIds,
-      units
+        period,
-    );
+        energyUnits
+      )),
+      ...(await fetchStatistics(
+        hass!,
+        startMinHour,
+        end,
+        waterStatIds,
+        period,
+        waterUnits
+      )),
+    };
   }
 
   let fossilEnergyConsumption: FossilEnergyConsumption | undefined;
@@ -456,7 +489,7 @@ const getEnergyData = async (
     }
   });
 
-  const statsMetadataArray = await getStatisticMetadata(hass, statIDs);
+  const statsMetadataArray = await getStatisticMetadata(hass, allStatIDs);
   const statsMetadata: Record<string, StatisticsMetaData> = {};
   statsMetadataArray.forEach((x) => {
     statsMetadata[x.statistic_id] = x;
@@ -671,4 +704,4 @@ export const getEnergyGasUnit = (
 };
 
 export const getEnergyWaterUnit = (hass: HomeAssistant): string | undefined =>
-  hass.config.unit_system.length === "km" ? "m³" : "ft³";
+  hass.config.unit_system.length === "km" ? "L" : "gal";

src/data/recorder.ts

@@ -88,7 +88,7 @@ export interface StatisticsUnitConfiguration {
     | "psi"
     | "mmHg";
   temperature?: "°C" | "°F" | "K";
-  volume?: "ft³" | "m³";
+  volume?: "L" | "gal" | "ft³" | "m³";
 }
 
 export interface StatisticsValidationResults {

src/data/zha.ts

@@ -36,6 +36,8 @@ export interface Neighbor {
   ieee: string;
   nwk: string;
   lqi: string;
+  depth: string;
+  relationship: string;
 }
 
 export interface ZHADeviceEndpoint {

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

@@ -297,10 +297,6 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
-        :host([tab="info"]) ha-dialog[data-domain="camera"] {
-          --mdc-dialog-max-width: auto;
-        }
-
         :host([tab="settings"]) ha-dialog {
           --dialog-content-padding: 0px;
         }
@@ -319,8 +315,7 @@ export class MoreInfoDialog extends LitElement {
             cursor: default;
           }
 
-          :host([large]) ha-dialog:not([data-domain="camera"]),
+          :host([tab="info"][large]) {
-          :host([tab="info"][large]) ha-dialog[data-domain="camera"] {
             --mdc-dialog-min-width: 90vw;
             --mdc-dialog-max-width: 90vw;
           }
@@ -328,6 +323,8 @@ export class MoreInfoDialog extends LitElement {
 
         :host([tab="info"]) ha-dialog[data-domain="camera"] {
           --dialog-content-padding: 0;
+          /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
+          --video-max-height: calc(100vh - 113px - 72px);
         }
       `,
     ];

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

@@ -934,6 +934,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     this._showDisabled = true;
     this._showReadOnly = true;
     this._showUnavailable = true;
+    this._showHidden = true;
   }
 
   static get styles(): CSSResultGroup {

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

@@ -27,7 +27,7 @@ import "./zha-cluster-commands";
 import "./zha-manage-clusters";
 import "./zha-device-binding";
 import "./zha-group-binding";
-import "./zha-device-children";
+import "./zha-device-neighbors";
 import "./zha-device-signature";
 import {
   Tab,
@@ -179,10 +179,11 @@ class DialogZHAManageZigbeeDevice extends LitElement {
                   ></zha-device-zigbee-info>
                 `
               : html`
-                  <zha-device-children
+                  <zha-device-neighbors
                     .hass=${this.hass}
                     .device=${this._device}
-                  ></zha-device-children>
+                    .narrow=${!this.large}
+                  ></zha-device-neighbors>
                 `
           )}
         </div>
@@ -221,7 +222,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
       device &&
       (device.device_type === "Router" || device.device_type === "Coordinator")
     ) {
-      tabs.push("children");
+      tabs.push("neighbors");
     }
 
     return tabs;

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

@@ -1,7 +1,7 @@
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ZHADevice } from "../../../../../data/zha";
 
-export type Tab = "clusters" | "bindings" | "signature" | "children";
+export type Tab = "clusters" | "bindings" | "signature" | "neighbors";
 
 export interface ZHAManageZigbeeDeviceDialogParams {
   device: ZHADevice;

src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts

@@ -16,12 +16,16 @@ export interface DeviceRowData extends DataTableRowData {
   id: string;
   name: string;
   lqi: number;
+  depth: number;
+  relationship: string;
 }
 
-@customElement("zha-device-children")
+@customElement("zha-device-neighbors")
-class ZHADeviceChildren extends LitElement {
+class ZHADeviceNeighbors extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property() public device: ZHADevice | undefined;
 
   @state() private _devices: Map<string, ZHADevice> | undefined;
@@ -33,20 +37,22 @@ class ZHADeviceChildren extends LitElement {
     }
   }
 
-  private _deviceChildren = memoizeOne(
+  private _deviceNeighbors = memoizeOne(
     (
       device: ZHADevice | undefined,
       devices: Map<string, ZHADevice> | undefined
     ) => {
       const outputDevices: DeviceRowData[] = [];
       if (device && devices) {
-        device.neighbors.forEach((child) => {
+        device.neighbors.forEach((neighbor) => {
-          const zhaDevice: ZHADevice | undefined = devices.get(child.ieee);
+          const zhaDevice: ZHADevice | undefined = devices.get(neighbor.ieee);
           if (zhaDevice) {
             outputDevices.push({
               name: zhaDevice.user_given_name || zhaDevice.name,
               id: zhaDevice.device_reg_id,
-              lqi: parseInt(child.lqi),
+              lqi: parseInt(neighbor.lqi),
+              depth: parseInt(neighbor.depth),
+              relationship: neighbor.relationship,
             });
           }
         });
@@ -55,22 +61,57 @@ class ZHADeviceChildren extends LitElement {
     }
   );
 
-  private _columns: DataTableColumnContainer = {
+  private _columns = memoizeOne(
-    name: {
+    (narrow: boolean): DataTableColumnContainer =>
-      title: "Name",
+      narrow
-      sortable: true,
+        ? {
-      filterable: true,
+            name: {
-      direction: "asc",
+              title: this.hass.localize("ui.panel.config.zha.neighbors.name"),
-      grows: true,
+              sortable: true,
-    },
+              filterable: true,
-    lqi: {
+              direction: "asc",
-      title: "LQI",
+              grows: true,
-      sortable: true,
+            },
-      filterable: true,
+            lqi: {
-      type: "numeric",
+              title: this.hass.localize("ui.panel.config.zha.neighbors.lqi"),
-      width: "75px",
+              sortable: true,
-    },
+              filterable: true,
-  };
+              type: "numeric",
+              width: "75px",
+            },
+          }
+        : {
+            name: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.name"),
+              sortable: true,
+              filterable: true,
+              direction: "asc",
+              grows: true,
+            },
+            lqi: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.lqi"),
+              sortable: true,
+              filterable: true,
+              type: "numeric",
+              width: "75px",
+            },
+            relationship: {
+              title: this.hass.localize(
+                "ui.panel.config.zha.neighbors.relationship"
+              ),
+              sortable: true,
+              filterable: true,
+              width: "150px",
+            },
+            depth: {
+              title: this.hass.localize("ui.panel.config.zha.neighbors.depth"),
+              sortable: true,
+              filterable: true,
+              type: "numeric",
+              width: "75px",
+            },
+          }
+  );
 
   protected render(): TemplateResult {
     if (!this.device) {
@@ -85,8 +126,8 @@ class ZHADeviceChildren extends LitElement {
           ></ha-circular-progress>`
         : html`<ha-data-table
             .hass=${this.hass}
-            .columns=${this._columns}
+            .columns=${this._columns(this.narrow)}
-            .data=${this._deviceChildren(this.device, this._devices)}
+            .data=${this._deviceNeighbors(this.device, this._devices)}
             auto-height
             .dir=${computeRTLDirection(this.hass)}
             .searchLabel=${this.hass.localize(
@@ -111,6 +152,6 @@ class ZHADeviceChildren extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "zha-device-children": ZHADeviceChildren;
+    "zha-device-neighbors": ZHADeviceNeighbors;
   }
 }

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

@@ -11,6 +11,7 @@ import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { stateIconPath } from "../../../common/entity/state_icon_path";
 import "../../../components/ha-card";
+import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-icon";
 import "../../../components/tile/ha-tile-image";
 import "../../../components/tile/ha-tile-info";
@@ -21,6 +22,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
+import { computeTileBadge } from "./tile/badges/tile-badge";
 import { ThermostatCardConfig, TileCardConfig } from "./types";
 
 @customElement("hui-tile-card")
@@ -116,7 +118,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       return html`
         <ha-card class="disabled">
           <div class="tile">
-            <ha-tile-icon .iconPath=${mdiHelp}></ha-tile-icon>
+            <div class="icon-container">
+              <ha-tile-icon .iconPath=${mdiHelp}></ha-tile-icon>
+            </div>
             <ha-tile-info
               .primary=${entityId}
               secondary=${this.hass.localize("ui.card.tile.not_found")}
@@ -147,32 +151,45 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     const imageUrl = this._config.show_entity_picture
       ? this._getImageUrl(entity)
       : undefined;
+    const badge = computeTileBadge(entity, this.hass);
 
     return html`
       <ha-card style=${styleMap(style)}>
         <div class="tile">
-          ${imageUrl
+          <div
-            ? html`
+            class="icon-container"
-                <ha-tile-image
+            role="button"
-                  class="icon"
+            tabindex="0"
-                  .imageUrl=${imageUrl}
+            @action=${this._handleIconAction}
-                  role="button"
+            .actionHandler=${actionHandler()}
-                  tabindex="0"
+          >
-                  @action=${this._handleIconAction}
+            ${imageUrl
-                  .actionHandler=${actionHandler()}
+              ? html`
-                ></ha-tile-image>
+                  <ha-tile-image
-              `
+                    class="icon"
-            : html`
+                    .imageUrl=${imageUrl}
-                <ha-tile-icon
+                  ></ha-tile-image>
-                  class="icon"
+                `
-                  .icon=${icon}
+              : html`
-                  .iconPath=${iconPath}
+                  <ha-tile-icon
-                  role="button"
+                    class="icon"
-                  tabindex="0"
+                    .icon=${icon}
-                  @action=${this._handleIconAction}
+                    .iconPath=${iconPath}
-                  .actionHandler=${actionHandler()}
+                  ></ha-tile-icon>
-                ></ha-tile-icon>
+                `}
-              `}
+            ${badge
+              ? html`
+                  <ha-tile-badge
+                    class="badge"
+                    .icon=${badge.icon}
+                    .iconPath=${badge.iconPath}
+                    style=${styleMap({
+                      "--tile-badge-background-color": `rgb(${badge.color})`,
+                    })}
+                  ></ha-tile-badge>
+                `
+              : null}
+          </div>
           <ha-tile-info
             .primary=${name}
             .secondary=${stateDisplay}
@@ -198,32 +215,39 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       ha-card.disabled {
         background: rgba(var(--rgb-disabled-color), 0.1);
       }
+      [role="button"] {
+        cursor: pointer;
+      }
+      [role="button"]:focus {
+        outline: none;
+      }
       .tile {
         padding: calc(12px - var(--tile-tap-padding));
         display: flex;
         flex-direction: row;
         align-items: center;
       }
-      .icon {
+      .icon-container {
+        position: relative;
         padding: var(--tile-tap-padding);
         flex: none;
         margin-right: calc(12px - 2 * var(--tile-tap-padding));
         margin-inline-end: calc(12px - 2 * var(--tile-tap-padding));
         margin-inline-start: initial;
         direction: var(--direction);
-        --color: var(--tile-color);
         transition: transform 180ms ease-in-out;
       }
-      [role="button"] {
+      .icon-container .icon {
-        cursor: pointer;
+        --icon-color: rgb(var(--tile-color));
+        --shape-color: rgba(var(--tile-color), 0.2);
       }
-      .icon[role="button"]:focus {
+      .icon-container .badge {
-        outline: none;
+        position: absolute;
+        top: calc(-3px + var(--tile-tap-padding));
+        right: calc(-3px + var(--tile-tap-padding));
       }
-      .icon[role="button"]:focus-visible {
+      .icon-container[role="button"]:focus-visible,
-        transform: scale(1.2);
+      .icon-container[role="button"]:active {
-      }
-      .icon[role="button"]:active {
         transform: scale(1.2);
       }
       ha-tile-info {
@@ -234,9 +258,6 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
         transition: background-color 180ms ease-in-out;
       }
-      ha-tile-info:focus {
-        outline: none;
-      }
       ha-tile-info:focus-visible {
         background-color: rgba(var(--tile-color), 0.1);
       }

src/panels/lovelace/cards/tile/badges/tile-badge-climate.ts

@@ -0,0 +1,38 @@
+import {
+  mdiClockOutline,
+  mdiFire,
+  mdiPower,
+  mdiSnowflake,
+  mdiWaterPercent,
+} from "@mdi/js";
+import { ClimateEntity, HvacAction } from "../../../../../data/climate";
+import { ComputeBadgeFunction } from "./tile-badge";
+
+export const CLIMATE_HVAC_ACTION_COLORS: Record<HvacAction, string> = {
+  cooling: "var(--rgb-state-climate-cool-color)",
+  drying: "var(--rgb-state-climate-dry-color)",
+  heating: "var(--rgb-state-climate-heat-color)",
+  idle: "var(--rgb-state-climate-idle-color)",
+  off: "var(--rgb-state-climate-off-color)",
+};
+
+export const CLIMATE_HVAC_ACTION_ICONS: Record<HvacAction, string> = {
+  cooling: mdiSnowflake,
+  drying: mdiWaterPercent,
+  heating: mdiFire,
+  idle: mdiClockOutline,
+  off: mdiPower,
+};
+
+export const computeClimateBadge: ComputeBadgeFunction = (stateObj) => {
+  const hvacAction = (stateObj as ClimateEntity).attributes.hvac_action;
+
+  if (!hvacAction || hvacAction === "off") {
+    return undefined;
+  }
+
+  return {
+    iconPath: CLIMATE_HVAC_ACTION_ICONS[hvacAction],
+    color: CLIMATE_HVAC_ACTION_COLORS[hvacAction],
+  };
+};

src/panels/lovelace/cards/tile/badges/tile-badge-person.ts

@@ -0,0 +1,44 @@
+import { mdiHelp, mdiHome, mdiHomeExportOutline } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { UNAVAILABLE_STATES } from "../../../../../data/entity";
+import { HomeAssistant } from "../../../../../types";
+import { ComputeBadgeFunction } from "./tile-badge";
+
+function getZone(entity: HassEntity, hass: HomeAssistant) {
+  const state = entity.state;
+  if (state === "home" || state === "not_home") return undefined;
+
+  const zones = Object.values(hass.states).filter((stateObj) =>
+    stateObj.entity_id.startsWith("zone.")
+  );
+
+  return zones.find((z) => state === z.attributes.friendly_name);
+}
+
+function personBadgeIcon(entity: HassEntity) {
+  const state = entity.state;
+  if (UNAVAILABLE_STATES.includes(state)) {
+    return mdiHelp;
+  }
+  return state === "not_home" ? mdiHomeExportOutline : mdiHome;
+}
+
+function personBadgeColor(entity: HassEntity, inZone?: boolean) {
+  if (inZone) {
+    return "var(--rgb-state-person-zone-color)";
+  }
+  const state = entity.state;
+  return state === "not_home"
+    ? "var(--rgb-state-person-not-home-color)"
+    : "var(--rgb-state-person-home-color)";
+}
+
+export const computePersonBadge: ComputeBadgeFunction = (stateObj, hass) => {
+  const zone = getZone(stateObj, hass);
+
+  return {
+    iconPath: personBadgeIcon(stateObj),
+    icon: zone?.attributes.icon,
+    color: personBadgeColor(stateObj, Boolean(zone)),
+  };
+};

src/panels/lovelace/cards/tile/badges/tile-badge.ts

@@ -0,0 +1,29 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { computeDomain } from "../../../../../common/entity/compute_domain";
+import { HomeAssistant } from "../../../../../types";
+import { computeClimateBadge } from "./tile-badge-climate";
+import { computePersonBadge } from "./tile-badge-person";
+
+export type TileBadge = {
+  color: string;
+  icon?: string;
+  iconPath?: string;
+};
+
+export type ComputeBadgeFunction = (
+  stateObj: HassEntity,
+  hass: HomeAssistant
+) => TileBadge | undefined;
+
+export const computeTileBadge: ComputeBadgeFunction = (stateObj, hass) => {
+  const domain = computeDomain(stateObj.entity_id);
+  switch (domain) {
+    case "person":
+    case "device_tracker":
+      return computePersonBadge(stateObj, hass);
+    case "climate":
+      return computeClimateBadge(stateObj, hass);
+    default:
+      return undefined;
+  }
+};

src/panels/lovelace/components/hui-image.ts

@@ -16,6 +16,7 @@ import { CameraEntity, fetchThumbnailUrlWithCache } from "../../../data/camera";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import "../../../components/ha-circular-progress";
+import type { HaCameraStream } from "../../../components/ha-camera-stream";
 
 const UPDATE_INTERVAL = 10000;
 const DEFAULT_FILTER = "grayscale(100%)";
@@ -65,9 +66,9 @@ export class HuiImage extends LitElement {
 
   @state() private _loadedImageSrc?: string;
 
-  private _intersectionObserver?: IntersectionObserver;
+  @state() private _lastImageHeight?: number;
 
-  private _lastImageHeight?: number;
+  private _intersectionObserver?: IntersectionObserver;
 
   private _cameraUpdater?: number;
 
@@ -192,6 +193,8 @@ export class HuiImage extends LitElement {
         style=${styleMap({
           paddingBottom: useRatio
             ? `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`
+            : !this._lastImageHeight
+            ? "56.25%"
             : undefined,
           backgroundImage:
             useRatio && this._loadedImageSrc
@@ -203,7 +206,7 @@ export class HuiImage extends LitElement {
               : undefined,
         })}
         class="container ${classMap({
-          ratio: useRatio,
+          ratio: useRatio || !this._lastImageHeight,
         })}"
       >
         ${this.cameraImage && this.cameraView === "live"
@@ -212,6 +215,7 @@ export class HuiImage extends LitElement {
                 muted
                 .hass=${this.hass}
                 .stateObj=${cameraObj}
+                @load=${this._onVideoLoad}
               ></ha-camera-stream>
             `
           : imageSrc === undefined
@@ -235,7 +239,7 @@ export class HuiImage extends LitElement {
               id="brokenImage"
               style=${styleMap({
                 height: !useRatio
-                  ? `${this._lastImageHeight || "100"}px`
+                  ? `${this._lastImageHeight}px` || "100%"
                   : undefined,
               })}
             ></div>`
@@ -245,7 +249,7 @@ export class HuiImage extends LitElement {
               class="progress-container"
               style=${styleMap({
                 height: !useRatio
-                  ? `${this._lastImageHeight || "100"}px`
+                  ? `${this._lastImageHeight}px` || "100%"
                   : undefined,
               })}
             >
@@ -322,6 +326,13 @@ export class HuiImage extends LitElement {
     this._lastImageHeight = imgEl.offsetHeight;
   }
 
+  private async _onVideoLoad(ev: Event): Promise<void> {
+    this._loadState = LoadState.Loaded;
+    const videoEl = ev.currentTarget as HaCameraStream;
+    await this.updateComplete;
+    this._lastImageHeight = videoEl.offsetHeight;
+  }
+
   private async _updateCameraImageSrcAtInterval(): Promise<void> {
     // If we hit the interval and it was still loading
     // it means we timed out so we should show the error.

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

@@ -9,7 +9,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
-import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
@@ -45,56 +44,82 @@ export class HuiTileCardEditor
     this._config = config;
   }
 
-  private _mainSchema = [{ name: "entity", selector: { entity: {} } }] as const;
+  private _schema = memoizeOne(
-
+    (entity: string, icon?: string, entityState?: HassEntity) =>
-  private _appearanceSchema = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      entity: string,
-      icon?: string,
-      entityState?: HassEntity
-    ) =>
       [
+        { name: "entity", selector: { entity: {} } },
         {
           name: "",
-          type: "grid",
+          type: "expandable",
+          iconPath: mdiPalette,
+          title: this.hass!.localize(
+            `ui.panel.lovelace.editor.card.tile.appearance`
+          ),
           schema: [
-            { name: "name", selector: { text: {} } },
             {
-              name: "icon",
+              name: "",
-              selector: {
+              type: "grid",
-                icon: {
+              schema: [
-                  placeholder: icon || entityState?.attributes.icon,
+                { name: "name", selector: { text: {} } },
-                  fallbackPath:
+                {
-                    !icon && !entityState?.attributes.icon && entityState
+                  name: "icon",
-                      ? domainIcon(computeDomain(entity), entityState)
+                  selector: {
-                      : undefined,
+                    icon: {
-                },
+                      placeholder: icon || entityState?.attributes.icon,
-              },
+                      fallbackPath:
-            },
+                        !icon && !entityState?.attributes.icon && entityState
-            {
+                          ? domainIcon(computeDomain(entity), entityState)
-              name: "color",
+                          : undefined,
-              selector: {
-                select: {
-                  options: [
-                    {
-                      label: localize(
-                        `ui.panel.lovelace.editor.card.tile.default_color`
-                      ),
-                      value: "default",
                     },
-                    ...Array.from(THEME_COLORS).map((color) => ({
+                  },
-                      label: capitalizeFirstLetter(color),
-                      value: color,
-                    })),
-                  ],
                 },
+                {
+                  name: "color",
+                  selector: {
+                    select: {
+                      options: [
+                        {
+                          label: this.hass!.localize(
+                            `ui.panel.lovelace.editor.card.tile.default_color`
+                          ),
+                          value: "default",
+                        },
+                        ...Array.from(THEME_COLORS).map((color) => ({
+                          label: capitalizeFirstLetter(color),
+                          value: color,
+                        })),
+                      ],
+                    },
+                  },
+                },
+                {
+                  name: "show_entity_picture",
+                  selector: {
+                    boolean: {},
+                  },
+                },
+              ] as const,
+            },
+          ] as const,
+        },
+        {
+          name: "",
+          type: "expandable",
+          title: this.hass!.localize(
+            `ui.panel.lovelace.editor.card.tile.actions`
+          ),
+          iconPath: mdiGestureTap,
+          schema: [
+            {
+              name: "tap_action",
+              selector: {
+                "ui-action": {},
               },
             },
             {
-              name: "show_entity_picture",
+              name: "icon_tap_action",
               selector: {
-                boolean: {},
+                "ui-action": {},
               },
             },
           ] as const,
@@ -102,21 +127,6 @@ export class HuiTileCardEditor
       ] as const
   );
 
-  private _actionsSchema = [
-    {
-      name: "tap_action",
-      selector: {
-        "ui-action": {},
-      },
-    },
-    {
-      name: "icon_tap_action",
-      selector: {
-        "ui-action": {},
-      },
-    },
-  ] as const;
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -126,14 +136,7 @@ export class HuiTileCardEditor
       | HassEntity
       | undefined;
 
-    const mainSchema = this._mainSchema;
+    const schema = this._schema(this._config.entity, this._config.icon, entity);
-    const appareanceSchema = this._appearanceSchema(
-      this.hass.localize,
-      this._config.entity,
-      this._config.icon,
-      entity
-    );
-    const actionsSchema = this._actionsSchema;
 
     const data = {
       color: "default",
@@ -141,55 +144,13 @@ export class HuiTileCardEditor
     };
 
     return html`
-      <div class="container">
+      <ha-form
-        <div class="group">
+        .hass=${this.hass}
-          <ha-form
+        .data=${data}
-            .hass=${this.hass}
+        .schema=${schema}
-            .data=${data}
+        .computeLabel=${this._computeLabelCallback}
-            .schema=${mainSchema}
+        @value-changed=${this._valueChanged}
-            .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
-            @value-changed=${this._valueChanged}
-          ></ha-form>
-        </div>
-        <div class="group">
-          <ha-expansion-panel>
-            <div slot="header">
-              <ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.card.tile.appearance`
-              )}
-            </div>
-            <div class="content">
-              <ha-form
-                .hass=${this.hass}
-                .data=${data}
-                .schema=${appareanceSchema}
-                .computeLabel=${this._computeLabelCallback}
-                @value-changed=${this._valueChanged}
-              ></ha-form>
-            </div>
-          </ha-expansion-panel>
-        </div>
-        <div class="group">
-          <ha-expansion-panel>
-            <div slot="header">
-              <ha-svg-icon .path=${mdiGestureTap}></ha-svg-icon>
-              ${this.hass!.localize(
-                `ui.panel.lovelace.editor.card.tile.actions`
-              )}
-            </div>
-            <div class="content">
-              <ha-form
-                .hass=${this.hass}
-                .data=${data}
-                .schema=${actionsSchema}
-                .computeLabel=${this._computeLabelCallback}
-                @value-changed=${this._valueChanged}
-              ></ha-form>
-            </div>
-          </ha-expansion-panel>
-        </div>
-      </div>
     `;
   }
 
@@ -204,10 +165,7 @@ export class HuiTileCardEditor
   }
 
   private _computeLabelCallback = (
-    schema:
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
-      | SchemaUnion<typeof this._mainSchema>
-      | SchemaUnion<ReturnType<typeof this._appearanceSchema>>
-      | SchemaUnion<typeof this._actionsSchema>
   ) => {
     switch (schema.name) {
       case "color":
@@ -230,20 +188,6 @@ export class HuiTileCardEditor
         display: flex;
         flex-direction: column;
       }
-      .group:not(:last-child) {
-        margin-bottom: 12px;
-      }
-      .content {
-        padding: 12px;
-      }
-      ha-expansion-panel {
-        --expansion-panel-content-padding: 0;
-        border: 1px solid var(--divider-color);
-        border-radius: 6px;
-      }
-      ha-svg-icon {
-        color: var(--secondary-text-color);
-      }
     `;
   }
 }

src/resources/ha-style.ts

@@ -152,6 +152,9 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-lock-unlocked-color: var(--rgb-red-color);
       --rgb-state-media-player-color: var(--rgb-indigo-color);
       --rgb-state-person-color: var(--rgb-blue-grey-color);
+      --rgb-state-person-home-color: var(--rgb-green-color);
+      --rgb-state-person-not-home-color: var(--rgb-red-color);
+      --rgb-state-person-zone-color: var(--rgb-blue-color);
       --rgb-state-sensor-battery-high-color: var(--rgb-green-color);
       --rgb-state-sensor-battery-low-color: var(--rgb-red-color);
       --rgb-state-sensor-battery-medium-color: var(--rgb-orange-color);
@@ -173,6 +176,7 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-state-climate-fan-only-color: var(--rgb-teal-color);
       --rgb-state-climate-heat-color: var(--rgb-deep-orange-color);
       --rgb-state-climate-heat-cool-color: var(--rgb-green-color);
+      --rgb-state-climate-idle-color: var(--rgb-disabled-color);
 
       /* input components */
       --input-idle-line-color: rgba(0, 0, 0, 0.42);

src/translations/en.json

@@ -1024,7 +1024,7 @@
           "clusters": "Clusters",
           "bindings": "Bindings",
           "signature": "Signature",
-          "children": "Children"
+          "neighbors": "Neighbors"
         }
       },
       "zha_device_info": {
@@ -3247,6 +3247,12 @@
             "unbind_button_label": "Unbind Group",
             "bind_button_help": "Bind the selected group to the selected device clusters.",
             "unbind_button_help": "Unbind the selected group from the selected device clusters."
+          },
+          "neighbors": {
+            "name": "Name",
+            "lqi": "LQI",
+            "relationship": "Relationship",
+            "depth": "Depth"
           }
         },
         "zwave_js": {