From 4f7d5053ecf9cf3d1963fb2a10fabe4f3a8a77ad Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 17 Mar 2025 15:06:53 +0100
Subject: [PATCH] Add computeStateName fallback to tile card and badges
 (#24666)

---
 src/panels/lovelace/badges/hui-entity-badge.ts                 | 3 ++-
 src/panels/lovelace/cards/hui-tile-card.ts                     | 3 ++-
 .../editor/config-elements/hui-heading-badges-editor.ts        | 3 ++-
 src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts | 3 ++-
 src/state-display/state-display.ts                             | 3 ++-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/badges/hui-entity-badge.ts b/src/panels/lovelace/badges/hui-entity-badge.ts
index b7d04e1a30..bfd530fd89 100644
--- a/src/panels/lovelace/badges/hui-entity-badge.ts
+++ b/src/panels/lovelace/badges/hui-entity-badge.ts
@@ -9,6 +9,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-badge";
@@ -188,7 +189,7 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
       </state-display>
     `;
 
-    const name = this._config.name || stateObj.attributes.friendly_name;
+    const name = this._config.name || computeStateName(stateObj);
 
     const showState = this._config.show_state;
     const showName = this._config.show_name;
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index a7fe97c773..ee294c8227 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -10,6 +10,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-card";
@@ -265,7 +266,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const name = this._config.name || stateObj.attributes.friendly_name;
+    const name = this._config.name || computeStateName(stateObj);
     const active = stateActive(stateObj);
     const color = this._computeStateColor(stateObj, this._config.color);
     const domain = computeDomain(stateObj.entity_id);
diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
index 0b597a3d41..1624036f5e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts
@@ -6,6 +6,7 @@ import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefault } from "../../../../common/dom/prevent_default";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
@@ -55,7 +56,7 @@ export class HuiHeadingBadgesEditor extends LitElement {
       const entityId = "entity" in badge ? (badge.entity as string) : undefined;
       const stateObj = entityId ? this.hass.states[entityId] : undefined;
       return (
-        (stateObj && stateObj.attributes.friendly_name) ||
+        (stateObj && computeStateName(stateObj)) ||
         entityId ||
         type ||
         "Unknown badge"
diff --git a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts
index 38b5aacdd4..f10ca89f70 100644
--- a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts
+++ b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts
@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { hsv2rgb, rgb2hex, rgb2hsv } from "../../../common/color/convert-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import "../../../components/ha-heading-badge";
@@ -128,7 +129,7 @@ export class HuiEntityHeadingBadge
       "--icon-color": color,
     };
 
-    const name = config.name || stateObj.attributes.friendly_name;
+    const name = config.name || computeStateName(stateObj);
 
     return html`
       <ha-heading-badge
diff --git a/src/state-display/state-display.ts b/src/state-display/state-display.ts
index b91411020d..cb4ded97f9 100644
--- a/src/state-display/state-display.ts
+++ b/src/state-display/state-display.ts
@@ -4,6 +4,7 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/ha-relative-time";
 import { isUnavailableState } from "../data/entity";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../data/sensor";
@@ -99,7 +100,7 @@ class StateDisplay extends LitElement {
       return this.hass!.formatEntityState(stateObj);
     }
     if (content === "name") {
-      return html`${this.name || stateObj.attributes.friendly_name}`;
+      return html`${this.name || computeStateName(stateObj)}`;
     }
 
     let relativeDateTime: string | undefined;