DIY Room card - How to Improve?

Howdy! :wave:

I’ve been trying to find a Room Card that I like for a while and always fall back to the minimilist-ui room card however it never seems to work when installing and the integration seems overkill for the use of one card, so I thought I’d try my hand at it with various cards and adjust the layouts with card-mod.

And behold my card…

image

Yaml:

style:
  hui-horizontal-stack-card$: |
    #root { 
     border-radius: 15px;

     background-color: var(--card-background-color);
    }
card:
  type: horizontal-stack
  cards:
    - type: vertical-stack
      cards:
        - type: custom:mushroom-title-card
          title: Office
          title_tap_action:
            action: none
          subtitle_tap_action:
            action: none
        - type: custom:mushroom-template-card
          primary: |2-
                      {% if is_state('binary_sensor.epl_presence_sensor_zone_1_occupancy', 'on') %}
                        Occupied
                      {% else %}
                        Unoccupied
                      {% endif %}
          secondary: ''
          icon: ''
          entity: binary_sensor.epl_presence_sensor_zone_1_occupancy
          card_mod:
            style: |
              ha-card {
                background-color: transparent !important;
                border: none;
              }
        - type: custom:mushroom-entity-card
          entity: switch.light_toms_room
          icon: mdi:desk
          icon_color: light-blue
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 180px;
                  overflow: hidden;
                  }
                ha-card {
                border: none;
                transform: translate(-50px, 50px);
                }
    - square: false
      type: grid
      cards:
        - type: custom:mushroom-entity-card
          entity: light.craft_space_light_light
          icon: mdi:wall-sconce-flat
          icon_color: cyan
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
        - type: custom:mushroom-entity-card
          entity: switch.socket_office_backwall_switch_2
          icon: ''
          icon_color: accent
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
        - type: custom:mushroom-entity-card
          entity: switch.office_x1c
          icon: ''
          icon_color: lime
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
        - type: custom:mushroom-entity-card
          entity: switch.office_resin_printer
          icon: ''
          icon_color: red
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
        - type: custom:mushroom-entity-card
          entity: switch.office_wash_station
          icon: ''
          icon_color: yellow
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
        - type: custom:mushroom-entity-card
          entity: switch.socket_office_wall_switch_2
          icon: ''
          icon_color: teal
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          card_mod:
            style:
              mushroom-card: |
                :host {
                  --mush-icon-size: 60px;
                  }
                ha-card {
                background-color: transparent !important;
                border: none;
                transform: translate(5px, 30px);
                }
      columns: 2
      style:
        hui-grid-card$: |
          #root { 
          direction: rtl !important;
          }

But there are a few issues

  1. The Custom:mod-card stops me from using visual editor

  2. the overrides needed to get the grid of mushroom entities to work require seperate config for the number of columns.

  3. the mushroom shape for the large icon overlaps the border-radius in the bottom left :frowning:

My main ask is, can I store this config somewhere and set it in the card. If columns = 2 then config2 else 1 :person_shrugging:
And what other changes could I make to make this more reusable and dynamic