Don't show badge container if all badges are hidden (#21449)

src/panels/lovelace/badges/hui-badge.ts

@@ -15,6 +15,7 @@ import type { LovelaceBadge } from "../types";
 
 declare global {
   interface HASSDomEvents {
+    "badge-visibility-changed": { value: boolean };
     "badge-updated": undefined;
   }
 }
@@ -183,6 +184,7 @@ export class HuiBadge extends ReactiveElement {
     if (this.hidden !== !visible) {
       this.style.setProperty("display", visible ? "" : "none");
       this.toggleAttribute("hidden", !visible);
+      fireEvent(this, "badge-visibility-changed", { value: visible });
     }
 
     if (!visible && this._element.parentElement) {

src/panels/lovelace/badges/hui-view-badges.ts

@@ -1,5 +1,12 @@
 import { mdiPlus } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -33,6 +40,38 @@ export class HuiViewBadges extends LitElement {
 
   private _badgeConfigKeys = new WeakMap<HuiBadge, string>();
 
+  private _checkAllHidden() {
+    const allHidden =
+      !this.lovelace.editMode && this.badges.every((section) => section.hidden);
+    this.toggleAttribute("hidden", allHidden);
+  }
+
+  private _badgeVisibilityChanged = () => {
+    this._checkAllHidden();
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener(
+      "badge-visibility-changed",
+      this._badgeVisibilityChanged
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "badge-visibility-changed",
+      this._badgeVisibilityChanged
+    );
+  }
+
+  willUpdate(changedProperties: PropertyValues<typeof this>): void {
+    if (changedProperties.has("badges") || changedProperties.has("lovelace")) {
+      this._checkAllHidden();
+    }
+  }
+
   private _getBadgeKey(badge: HuiBadge) {
     if (!this._badgeConfigKeys.has(badge)) {
       this._badgeConfigKeys.set(badge, Math.random().toString());
@@ -130,6 +169,10 @@ export class HuiViewBadges extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host([hidden]) {
+        display: none !important;
+      }
+
       .badges {
         display: flex;
         align-items: flex-start;

src/panels/lovelace/views/hui-sections-view.ts

@@ -65,11 +65,24 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     ).length;
   }
 
+  private _sectionVisibilityChanged = () => {
+    this._computeSectionsCount();
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
-    this.addEventListener("section-visibility-changed", () => {
-      this._computeSectionsCount();
-    });
+    this.addEventListener(
+      "section-visibility-changed",
+      this._sectionVisibilityChanged
+    );
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "section-visibility-changed",
+      this._sectionVisibilityChanged
+    );
   }
 
   willUpdate(changedProperties: PropertyValues<typeof this>): void {