Collapse/Expand details in entities card

[mbuzina]

I have a proposition to improve on the entities card. This would allow expanding / collapsing groups and optionally other items into the entities list. This would allow a very short overview with access to the main functions and still expanding to allow fine grained control of your home.

Overall yaml

type: entities
entities:
  - entity: light.wohnzimmer_kranz
  - entity: light.flur_kranz
  - entity: group.gartenlicht
show_header_toggle: false
state_color: true

Simple case: group

Add a simple setting allowing the expansion / collapse of a group. Change the following:

type: entities
entities:
  - entity: group.gartenlicht
    expand_into: group

The view would be as follows:

and tapping on the row "Gartenlicht" would change the view to

a second tap would close it back up. Expanding another entity would close this one as well (reduce screen useage).

A bit more: Add sub entities

This way you can manually define entities which will be shown upon expansion.

type: entities
entities:
  - entity: light.wohnzimmer_kranz
    expand_into: entities
    - entities:
      - entity: light.wohnzimmer_spots
      - entity: cover.eg_wz_rollade
      - type: buttons
        entities:
          - entity: script.wz_tv_das_erste
            icon: mdi:television
            name: ARD
          - entity: script.wz_tv_zdf
            icon: mdi:television
            name: ZDF
          - entity: script.wz_tv_arte
            icon: mdi:television
            name: Arte
          - entity: script.wz_wdr2
            name: WDR2

Expansion would look as follows:

Most complex: Expand into a card

Expanding in a card would give you full control over whatever you want to display in the expanded section.

type: entities
entities:
  - entity: light.wohnzimmer_kranz
    expand_into: card
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - entity: light.wohnzimmer_spots
            - entity: cover.eg_wz_rollade
            - type: buttons
              entities:
                - entity: script.wz_tv_das_erste
                  icon: mdi:television
                  name: ARD
                - entity: script.wz_tv_zdf
                  icon: mdi:television
                  name: ZDF
                - entity: script.wz_tv_arte
                  icon: mdi:television
                  name: Arte
                - entity: script.wz_wdr2
                  name: WDR2
            - type: divider
        - type: custom:tv-card
          entity: media_player.wohnzimmertv
          tv: true
          up:
            service: remote.send_command
            service_data:
              entity_id: remote.wohnzimmertv
              command: KEY_UP
          down:
            service: remote.send_command
            service_data:
              entity_id: remote.wohnzimmertv
              command: KEY_DOWN
...

This would allow you to do something like this

If possible I could help getting this built, but it would take a long time - I have not checked the home assistant code base at all.