Separate entity, device and area name in more info dialog header (#21951)

* Separate entity, device and area name in more info dialog header

* Use has_entity_name

* Separate entity, device and area name in entity picker

* Fix entity name with has entity name

* Fix compute entity name

* Add full name

* Add floor

* Improve code quality

* Use compute entity name in device entities card

* Use context functions

* Remove floor

* Use state name provided by backend

* Use breadcrumb for more info

* Revert entity picker changes

* Use new logic in device page

* Use breadcrumb

* Use join directive

* Add comments

* Use secondary text color

* Update compute_entity_name.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Remove html join

* Improve computeDeviceNameDisplay

* Fallback to original name

* Simplify more info logic

* Include breadcrumb for child view (voice assistant)

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/entity/compute_entity_name.ts

@@ -0,0 +1,52 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import type {
+  EntityRegistryDisplayEntry,
+  EntityRegistryEntry,
+} from "../../data/entity_registry";
+import type { HomeAssistant } from "../../types";
+import { computeDeviceName } from "./compute_device_name";
+import { computeStateName } from "./compute_state_name";
+import { stripPrefixFromEntityName } from "./strip_prefix_from_entity_name";
+
+export const computeEntityName = (
+  stateObj: HassEntity,
+  hass: HomeAssistant
+): string | undefined => {
+  const entry = hass.entities[stateObj.entity_id] as
+    | EntityRegistryDisplayEntry
+    | undefined;
+
+  if (!entry) {
+    // Fall back to state name if not in the entity registry (friendly name)
+    return computeStateName(stateObj);
+  }
+  return computeEntityEntryName(entry, hass);
+};
+
+export const computeEntityEntryName = (
+  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
+  hass: HomeAssistant
+): string | undefined => {
+  const name =
+    entry.name || ("original_name" in entry ? entry.original_name : undefined);
+
+  const device = entry.device_id ? hass.devices[entry.device_id] : undefined;
+
+  if (!device) {
+    return name;
+  }
+
+  const deviceName = computeDeviceName(device);
+
+  // If the device name is the same as the entity name, consider empty entity name
+  if (deviceName === name) {
+    return undefined;
+  }
+
+  // Remove the device name from the entity name if it starts with it
+  if (deviceName && name) {
+    return stripPrefixFromEntityName(name, deviceName) || name;
+  }
+
+  return name;
+};