Add badges for sidebar view (#21715)

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

@@ -12,6 +12,8 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import type { LovelaceViewElement } from "../../../data/lovelace";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
+import { HuiBadge } from "../badges/hui-badge";
+import "../badges/hui-view-badges";
 import { HuiCard } from "../cards/hui-card";
 import { HuiCardOptions } from "../components/hui-card-options";
 import { replaceCard } from "../editor/config-util";
@@ -28,6 +30,8 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
 
   @property({ attribute: false }) public cards: HuiCard[] = [];
 
+  @property({ attribute: false }) public badges: HuiBadge[] = [];
+
   @state() private _config?: LovelaceViewConfig;
 
   private _mqlListenerRef?: () => void;
@@ -85,6 +89,12 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
 
   protected render(): TemplateResult {
     return html`
+      <hui-view-badges
+        .hass=${this.hass}
+        .badges=${this.badges}
+        .lovelace=${this.lovelace}
+        .viewIndex=${this.index}
+      ></hui-view-badges>
       <div
         class="container ${this.lovelace?.editMode ? "edit-mode" : ""}"
       ></div>
@@ -191,6 +201,12 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
         padding-top: 4px;
       }
 
+      hui-view-badges {
+        display: block;
+        margin: 12px 8px 20px 8px;
+        font-size: 85%;
+      }
+
       .container {
         display: flex;
         justify-content: center;