Change to empty card

src/panels/lovelace/cards/hui-empty-card.ts

@@ -9,13 +9,13 @@ import type {
   LovelaceLayoutOptions,
 } from "../types";
 
-@customElement("hui-spacing-card")
+@customElement("hui-empty-card")
-export class HuiSpacingCard extends LitElement implements LovelaceCard {
+export class HuiEmptyCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean }) public preview = false;
 
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
-    await import("../editor/config-elements/hui-spacing-card-editor");
+    await import("../editor/config-elements/hui-empty-card-editor");
-    return document.createElement("hui-spacing-card-editor");
+    return document.createElement("hui-empty-card-editor");
   }
 
   public getCardSize(): number {
@@ -52,6 +52,7 @@ export class HuiSpacingCard extends LitElement implements LovelaceCard {
     ha-card {
       background: none;
       height: 100%;
+      min-height: 56px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -63,6 +64,6 @@ export class HuiSpacingCard extends LitElement implements LovelaceCard {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-spacing-card": HuiSpacingCard;
+    "hui-empty-card": HuiEmptyCard;
   }
 }

src/panels/lovelace/create-element/create-card-element.ts

@@ -6,7 +6,7 @@ import "../cards/hui-entity-button-card";
 import "../cards/hui-glance-card";
 import "../cards/hui-grid-card";
 import "../cards/hui-light-card";
-import "../cards/hui-spacing-card";
+import "../cards/hui-empty-card";
 import "../cards/hui-sensor-card";
 import "../cards/hui-thermostat-card";
 import "../cards/hui-weather-forecast-card";
@@ -90,7 +90,7 @@ const LAZY_LOAD_TYPES = {
   "statistics-graph": () => import("../cards/hui-statistics-graph-card"),
   statistic: () => import("../cards/hui-statistic-card"),
   "vertical-stack": () => import("../cards/hui-vertical-stack-card"),
-  spacing: () => import("../cards/hui-spacing-card"),
+  empty: () => import("../cards/hui-empty-card"),
 };
 
 // This will not return an error card but will throw the error

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -265,20 +265,16 @@ export class HuiCardPicker extends LitElement {
   }
 
   private _loadCards() {
-    let cards: Card[] = coreCards
+    let cards: Card[] = coreCards.map((card: Card) => ({
-      .filter((card: Card) =>
+      name: this.hass!.localize(
-        this.isSectionsView ? true : !card.sectionsViewOnly
+        `ui.panel.lovelace.editor.card.${card.type}.name`
-      )
+      ),
-      .map((card: Card) => ({
+      description: this.hass!.localize(
-        name: this.hass!.localize(
+        `ui.panel.lovelace.editor.card.${card.type}.description`
-          `ui.panel.lovelace.editor.card.${card.type}.name`
+      ),
-        ),
+      isSuggested: this.suggestedCards?.includes(card.type) || false,
-        description: this.hass!.localize(
+      ...card,
-          `ui.panel.lovelace.editor.card.${card.type}.description`
+    }));
-        ),
-        isSuggested: this.suggestedCards?.includes(card.type) || false,
-        ...card,
-      }));
 
     cards = cards.sort((a, b) => {
       if (a.isSuggested && !b.isSuggested) {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -146,10 +146,6 @@ export class HuiCreateDialogCard
                   .lovelace=${this._params.lovelaceConfig}
                   .hass=${this.hass}
                   @config-changed=${this._handleCardPicked}
-                  .isSectionsView=${this._isSectionsView(
-                    this._params.lovelaceConfig,
-                    this._params.path
-                  )}
                 ></hui-card-picker>
               `
             : html`
@@ -236,15 +232,6 @@ export class HuiCreateDialogCard
     ];
   }
 
-  private _isSectionsView = memoize((lovelaceConfig, containerPath) => {
-    const { viewIndex } = parseLovelaceContainerPath(containerPath);
-    // sections is default when undefined
-    return (
-      !lovelaceConfig.views[viewIndex].type ||
-      lovelaceConfig.views[viewIndex].type === "sections"
-    );
-  });
-
   private _handleCardPicked(ev) {
     const config = ev.detail.config;
     if (this._params!.entities && this._params!.entities.length) {

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

@@ -14,8 +14,8 @@ const SCHEMA = [
   },
 ] as const;
 
-@customElement("hui-spacing-card-editor")
+@customElement("hui-empty-card-editor")
-export class HuiSpacingCardEditor
+export class HuiEmptyCardEditor
   extends LitElement
   implements LovelaceCardEditor
 {
@@ -43,7 +43,7 @@ export class HuiSpacingCardEditor
   private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
     if (schema.name === "description") {
       return this.hass!.localize(
-        "ui.panel.lovelace.editor.card.spacing.no_config_options"
+        "ui.panel.lovelace.editor.card.empty.no_config_options"
       );
     }
     return this.hass!.localize(
@@ -56,6 +56,6 @@ export class HuiSpacingCardEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-spacing-card-editor": HuiSpacingCardEditor;
+    "hui-empty-card-editor": HuiEmptyCardEditor;
   }
 }

src/panels/lovelace/editor/lovelace-cards.ts

@@ -130,7 +130,6 @@ export const coreCards: Card[] = [
     showElement: true,
   },
   {
-    type: "spacing",
+    type: "empty",
-    sectionsViewOnly: true,
   },
 ];

src/translations/en.json

@@ -7214,9 +7214,9 @@
               "hourly": "Hourly",
               "twice_daily": "Twice daily"
             },
-            "spacing": {
+            "empty": {
-              "name": "Spacing",
+              "name": "Empty",
-              "description": "Add custom spacing between cards.",
+              "description": "The empty card allows you to add a placeholder between your cards.",
               "no_config_options": "This card has no config options, use the Layout tab to set the size."
             }
           },