Improve card features editor (#22023)

* Move expansion panel outside of feature component

* Cache main form and feature form

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -34,4 +34,21 @@ export const configElementStyle = css`
     margin-top: 8px;
     display: block;
   }
+  ha-expansion-panel {
+    display: block;
+    --expansion-panel-content-padding: 0;
+    border-radius: 6px;
+    --ha-card-border-radius: 6px;
+  }
+  ha-expansion-panel .content {
+    padding: 12px;
+  }
+  ha-expansion-panel > * {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  ha-expansion-panel ha-svg-icon {
+    color: var(--secondary-text-color);
+  }
 `;

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -1,11 +1,10 @@
-import { mdiDelete, mdiDrag, mdiListBox, mdiPencil, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
@@ -236,12 +235,6 @@ export class HuiCardFeaturesEditor extends LitElement {
     );
 
     return html`
-      <ha-expansion-panel outlined>
-        <h3 slot="header">
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
-          ${this.hass!.localize("ui.panel.lovelace.editor.features.name")}
-        </h3>
-        <div class="content">
       ${supportedFeaturesType.length === 0 && this.features.length === 0
         ? html`
             <ha-alert type="info">
@@ -251,10 +244,7 @@ export class HuiCardFeaturesEditor extends LitElement {
             </ha-alert>
           `
         : nothing}
-          <ha-sortable
-            handle-selector=".handle"
-            @item-moved=${this._featureMoved}
-          >
+      <ha-sortable handle-selector=".handle" @item-moved=${this._featureMoved}>
         <div class="features">
           ${repeat(
             this.features,
@@ -347,8 +337,6 @@ export class HuiCardFeaturesEditor extends LitElement {
             </ha-button-menu>
           `
         : nothing}
-        </div>
-      </ha-expansion-panel>
     `;
   }
 
@@ -409,23 +397,6 @@ export class HuiCardFeaturesEditor extends LitElement {
         display: flex !important;
         flex-direction: column;
       }
-      .content {
-        padding: 12px;
-      }
-      ha-expansion-panel {
-        display: block;
-        --expansion-panel-content-padding: 0;
-        border-radius: 6px;
-      }
-      h3 {
-        margin: 0;
-        font-size: inherit;
-        font-weight: inherit;
-      }
-      ha-svg-icon,
-      ha-icon {
-        color: var(--secondary-text-color);
-      }
       ha-button-menu {
         margin-top: 8px;
       }

src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts

@@ -1,5 +1,7 @@
+import { mdiListBox } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -12,11 +14,13 @@ import {
   string,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
+import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
 import type { FeatureType } from "./hui-card-features-editor";
 
@@ -93,16 +98,20 @@ export class HuiHumidifierCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
-      ? this.hass.states[this._config.entity]
-      : undefined;
+    return cache(
+      this._subElementEditorConfig
+        ? this._renderFeatureForm()
+        : this._renderForm()
+    );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
+    const entityId = this._config!.entity;
     return html`
       <hui-sub-element-editor
         .hass=${this.hass}
         .config=${this._subElementEditorConfig}
-          .context=${this._context(this._config.entity)}
+        .context=${this._context(entityId)}
         @go-back=${this._goBack}
         @config-changed=${this.subElementChanged}
       >
@@ -110,6 +119,10 @@ export class HuiHumidifierCardEditor
     `;
   }
 
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -118,6 +131,14 @@ export class HuiHumidifierCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
+      <ha-expansion-panel outlined>
+        <h3 slot="header">
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.features"
+          )}
+        </h3>
+        <div class="content">
           <hui-card-features-editor
             .hass=${this.hass}
             .stateObj=${stateObj}
@@ -126,6 +147,8 @@ export class HuiHumidifierCardEditor
             @features-changed=${this._featuresChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
@@ -202,12 +225,15 @@ export class HuiHumidifierCardEditor
   };
 
   static get styles() {
-    return css`
+    return [
+      configElementStyle,
+      css`
         ha-form {
           display: block;
           margin-bottom: 24px;
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts

@@ -1,5 +1,7 @@
+import { mdiListBox } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -12,11 +14,13 @@ import {
   string,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
+import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
 import type { FeatureType } from "./hui-card-features-editor";
 
@@ -91,16 +96,19 @@ export class HuiThermostatCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
-      ? this.hass.states[this._config.entity]
-      : undefined;
+    return cache(
+      this._subElementEditorConfig
+        ? this._renderFeatureForm()
+        : this._renderForm()
+    );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
     return html`
       <hui-sub-element-editor
         .hass=${this.hass}
         .config=${this._subElementEditorConfig}
-          .context=${this._context(this._config.entity)}
+        .context=${this._context(this._config!.entity)}
         @go-back=${this._goBack}
         @config-changed=${this.subElementChanged}
       >
@@ -108,6 +116,10 @@ export class HuiThermostatCardEditor
     `;
   }
 
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -116,6 +128,14 @@ export class HuiThermostatCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
+      <ha-expansion-panel outlined>
+        <h3 slot="header">
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.features"
+          )}
+        </h3>
+        <div class="content">
           <hui-card-features-editor
             .hass=${this.hass}
             .stateObj=${stateObj}
@@ -124,6 +144,8 @@ export class HuiThermostatCardEditor
             @features-changed=${this._featuresChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
@@ -200,12 +222,15 @@ export class HuiThermostatCardEditor
   };
 
   static get styles() {
-    return css`
+    return [
+      configElementStyle,
+      css`
         ha-form {
           display: block;
           margin-bottom: 24px;
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -1,6 +1,7 @@
-import { mdiGestureTap, mdiPalette } from "@mdi/js";
+import { mdiGestureTap, mdiListBox, mdiPalette } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import memoizeOne from "memoize-one";
 import {
   any,
@@ -14,11 +15,13 @@ import {
   union,
 } from "superstruct";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
+import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import {
   LovelaceCardFeatureConfig,
@@ -168,21 +171,19 @@ export class HuiTileCardEditor
       return nothing;
     }
 
-    const stateObj = this._config.entity
-      ? this.hass.states[this._config.entity]
-      : undefined;
-
-    const schema = this._schema(
-      this._config.entity,
-      this._config.hide_state ?? false
+    return cache(
+      this._subElementEditorConfig
+        ? this._renderFeatureForm()
+        : this._renderForm()
     );
+  }
 
-    if (this._subElementEditorConfig) {
+  private _renderFeatureForm() {
     return html`
       <hui-sub-element-editor
         .hass=${this.hass}
         .config=${this._subElementEditorConfig}
-          .context=${this._context(this._config.entity)}
+        .context=${this._context(this._config!.entity)}
         @go-back=${this._goBack}
         @config-changed=${this.subElementChanged}
       >
@@ -190,6 +191,12 @@ export class HuiTileCardEditor
     `;
   }
 
+  private _renderForm() {
+    const entityId = this._config!.entity;
+    const stateObj = entityId ? this.hass!.states[entityId] : undefined;
+
+    const schema = this._schema(entityId, this._config!.hide_state ?? false);
+
     const data = this._config;
 
     return html`
@@ -200,6 +207,14 @@ export class HuiTileCardEditor
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
+      <ha-expansion-panel outlined>
+        <h3 slot="header">
+          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.features"
+          )}
+        </h3>
+        <div class="content">
           <hui-card-features-editor
             .hass=${this.hass}
             .stateObj=${stateObj}
@@ -207,6 +222,8 @@ export class HuiTileCardEditor
             @features-changed=${this._featuresChanged}
             @edit-detail-element=${this._editDetailElement}
           ></hui-card-features-editor>
+        </div>
+      </ha-expansion-panel>
     `;
   }
 

src/translations/en.json

@@ -5989,7 +5989,8 @@
               "state_color": "Color icons based on state?",
               "suggested_cards": "Suggested cards",
               "other_cards": "Other cards",
-              "custom_cards": "Custom cards"
+              "custom_cards": "Custom cards",
+              "features": "Features"
             },
             "map": {
               "name": "Map",