From c4b2896faceb4ee3008e336e1c82d81e057e1e7a Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 21 Jan 2025 18:45:06 +0100
Subject: [PATCH] Add label for add badge button in masonry and sidebar view
 (#23827)

Add label for add badge button in mansonry and sidebar view
---
 src/panels/lovelace/badges/hui-view-badges.ts | 9 +++++++++
 src/panels/lovelace/views/hui-masonry-view.ts | 1 +
 src/panels/lovelace/views/hui-sidebar-view.ts | 1 +
 3 files changed, 11 insertions(+)

diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts
index ee16386cc3..8308c55776 100644
--- a/src/panels/lovelace/badges/hui-view-badges.ts
+++ b/src/panels/lovelace/badges/hui-view-badges.ts
@@ -32,6 +32,9 @@ export class HuiViewBadges extends LitElement {
 
   @property({ attribute: false }) public viewIndex!: number;
 
+  @property({ type: Boolean, attribute: "show-add-label" })
+  public showAddLabel!: boolean;
+
   @state() _dragging = false;
 
   private _badgeConfigKeys = new WeakMap<HuiBadge, string>();
@@ -153,6 +156,11 @@ export class HuiViewBadges extends LitElement {
                       >
                         <ha-ripple></ha-ripple>
                         <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+                        ${this.showAddLabel
+                          ? this.hass.localize(
+                              "ui.panel.lovelace.editor.section.add_badge"
+                            )
+                          : nothing}
                       </button>
                     `
                   : nothing}
@@ -201,6 +209,7 @@ export class HuiViewBadges extends LitElement {
       border-color: var(--primary-color);
       --mdc-icon-size: 18px;
       cursor: pointer;
+      font-size: 14px;
       color: var(--primary-text-color);
       --ha-ripple-color: var(--primary-color);
       --ha-ripple-hover-opacity: 0.04;
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index cb2f29609e..dc90245e1d 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -80,6 +80,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         .badges=${this.badges}
         .lovelace=${this.lovelace}
         .viewIndex=${this.index}
+        show-add-label
       ></hui-view-badges>
       <div
         id="columns"
diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts
index 52569fa7fc..a445737a35 100644
--- a/src/panels/lovelace/views/hui-sidebar-view.ts
+++ b/src/panels/lovelace/views/hui-sidebar-view.ts
@@ -88,6 +88,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
         .badges=${this.badges}
         .lovelace=${this.lovelace}
         .viewIndex=${this.index}
+        show-add-label
       ></hui-view-badges>
       <div
         class="container ${this.lovelace?.editMode ? "edit-mode" : ""}"