Only allow spacing card in sections

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

@@ -43,6 +43,8 @@ export class HuiCardPicker extends LitElement {
 
   @property({ attribute: false }) public suggestedCards?: string[];
 
+  @property({ type: Boolean, attribute: false }) public isSectionsView = false;
+
   @storage({
     key: "dashboardCardClipboard",
     state: true,
@@ -263,16 +265,20 @@ export class HuiCardPicker extends LitElement {
   }
 
   private _loadCards() {
-    let cards: Card[] = coreCards.map((card: Card) => ({
-      name: this.hass!.localize(
-        `ui.panel.lovelace.editor.card.${card.type}.name`
-      ),
-      description: this.hass!.localize(
-        `ui.panel.lovelace.editor.card.${card.type}.description`
-      ),
-      isSuggested: this.suggestedCards?.includes(card.type) || false,
-      ...card,
-    }));
+    let cards: Card[] = coreCards
+      .filter((card: Card) =>
+        this.isSectionsView ? true : !card.sectionsViewOnly
+      )
+      .map((card: Card) => ({
+        name: this.hass!.localize(
+          `ui.panel.lovelace.editor.card.${card.type}.name`
+        ),
+        description: this.hass!.localize(
+          `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,6 +146,10 @@ 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`
@@ -232,6 +236,15 @@ 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/lovelace-cards.ts

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

src/panels/lovelace/editor/types.ts

@@ -66,6 +66,7 @@ export interface Card {
   showElement?: boolean;
   isCustom?: boolean;
   isSuggested?: boolean;
+  sectionsViewOnly?: boolean;
 }
 
 export interface Badge {