Expose area_name, area_id to the frontend (hass.states)

Feature Requests
1

Release 2021.9.0 included a commit by @raman325 which added area_name() and area_id() functions/filters to the Jinja2 templating engine. These work great and are extremely useful.

However, as of yet this information is not exposed to the frontend. If you examine hass.states[your_entity_id], you will find this for eg.:

{
  "entity_id": "[your_entity_id]",
  "state": "[current_state]",
  "attributes":
    {
      "device_class": "[device_class_or_null]",
      "friendly_name": "[friendly_name_here]"
    },
  "last_changed": "[timestamp]",
  "last_updated": "[timestamp]",
  "context":
    {
      "id": "[your_entity_id]",
      "parent_id": "parent_id_or_null]",
      "user_id": "[user_id_or_null]"
    }
}

This means it’s impossible to manipulate/use this information in frontend JS.
As an eg., the very popular button-card can’t use this data in its frontend templates (see bug report), but I can think of other use-cases why this info would be useful in the frontend.

2

I really miss the possibility to use “area_name” as the secondary_info data to be displayed in the GUI.

I hope the founding fathers can see the usefulness of this and implement this.