Entities card: add “area” for “secondary_info” (#29268)

* add "area/floor" labels for secondary-info for Entities card

* use STRINGS_SEPARATOR_DOT

* add "area/floor" for secondary-info

* add "area/floor" for secondary-info

* add "area/floor" for secondary-info

* use STRINGS_SEPARATOR_DOT

* use STRINGS_SEPARATOR_DOT

* use STRINGS_SEPARATOR_DOT

* add STRINGS_SEPARATOR_DOT

* changed an order & renamed an option

* fixed name for "area with floor"

* chaged an order & renamed an entry

* renamed "area with floor" entry

* add STRINGS_SEPARATOR_DOT

* Delete src/common/strings-separator.ts

* change import

* change import

* change import

* change import

* change import

* fix import

* fix import

* fix import

* remove "area-with-floor"

* remove "area-with-floor"

* remove "area-with-floor"

* remove unneeded comma

* remove "area-with-floor"

* clean up

* typo

* Apply suggestion from @MindFreeze

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

* move area definition into a separate method

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

src/common/const.ts

@@ -116,3 +116,6 @@ export const UNIT_F = "°F";
 
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
+
+/** String to visually separate labels on UI */
+export const STRINGS_SEPARATOR_DOT = " · ";

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

@@ -20,6 +20,7 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
+import { STRINGS_SEPARATOR_DOT } from "../../common/const";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -636,7 +637,7 @@ export class HaDataTable extends LitElement {
                           .map(
                             ([key2, column2], i) =>
                               html`${i !== 0
-                                ? " · "
+                                ? STRINGS_SEPARATOR_DOT
                                 : nothing}${column2.template
                                 ? column2.template(row)
                                 : row[key2]}`

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

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../../../common/string/capitalize-first-letter";
+import { STRINGS_SEPARATOR_DOT } from "../../../common/const";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import { domainToName } from "../../../data/integration";
@@ -99,7 +100,7 @@ class HaConfigRepairs extends LitElement {
                 ${(issue.severity === "critical" ||
                   issue.severity === "error") &&
                 issue.created
-                  ? " · "
+                  ? STRINGS_SEPARATOR_DOT
                   : ""}
                 ${createdBy
                   ? html`<span .title=${createdBy}>${createdBy}</span>`

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

@@ -13,7 +13,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
-import { BINARY_STATE_ON } from "../../../common/const";
+import { BINARY_STATE_ON, STRINGS_SEPARATOR_DOT } from "../../../common/const";
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { generateEntityFilter } from "../../../common/entity/entity_filter";
 import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
@@ -522,7 +522,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard {
         return `${formattedValue}${formattedUnit}`;
       })
       .filter(Boolean)
-      .join(" · ");
+      .join(STRINGS_SEPARATOR_DOT);
 
     return sensorStates;
   }

src/panels/lovelace/cards/types.ts

@@ -94,6 +94,7 @@ export interface EntitiesCardEntityConfig extends EntityConfig {
     | "last-changed"
     | "last-triggered"
     | "last-updated"
+    | "area"
     | "position"
     | "state"
     | "tilt-position"

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -8,6 +8,8 @@ import { uid } from "../../../common/util/uid";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeAreaName } from "../../../common/entity/compute_area_name";
+import { getEntityContext } from "../../../common/entity/context/get_entity_context";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-relative-time";
@@ -199,7 +201,9 @@ export class HuiGenericEntityRow extends LitElement {
                                       ? html`${this.hass.formatEntityState(
                                           stateObj
                                         )}`
-                                      : nothing)}
+                                      : this.config.secondary_info === "area"
+                                        ? (this._getArea(stateObj) ?? nothing)
+                                        : nothing)}
                     </div>
                   `
                 : nothing}
@@ -235,6 +239,17 @@ export class HuiGenericEntityRow extends LitElement {
     handleAction(this, this.hass!, this.config!, ev.detail.action!);
   }
 
+  private _getArea(stateObj) {
+    const context = getEntityContext(
+      stateObj,
+      this.hass!.entities,
+      this.hass!.devices,
+      this.hass!.areas,
+      this.hass!.floors
+    );
+    return context.area ? computeAreaName(context.area) : undefined;
+  }
+
   static styles = css`
     :host {
       display: flex;

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -18,6 +18,7 @@ const SECONDARY_INFO_VALUES = {
   "last-changed": {},
   "last-updated": {},
   "last-triggered": { domains: ["automation", "script"] },
+  area: {},
   position: { domains: ["cover"] },
   state: {},
   "tilt-position": { domains: ["cover"] },

src/state-display/state-display.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { join } from "lit/directives/join";
 import { ensureArray } from "../common/array/ensure-array";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { STRINGS_SEPARATOR_DOT } from "../common/const";
 import "../components/ha-relative-time";
 import { isUnavailableState } from "../data/entity/entity";
 import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../data/sensor";
@@ -194,7 +195,7 @@ class StateDisplay extends LitElement {
       return html`${this.hass!.formatEntityState(stateObj)}`;
     }
 
-    return join(values, " · ");
+    return join(values, STRINGS_SEPARATOR_DOT);
   }
 }
 

src/translations/en.json

@@ -8634,7 +8634,8 @@
                 "tilt-position": "Tilt position",
                 "brightness": "Brightness",
                 "last-updated": "Last updated",
-                "state": "State"
+                "state": "State",
+                "area": "Area"
               },
               "entity_row": {
                 "divider": "Divider",