From 8a30f76eb101b8e9900e90198b28bd4517412868 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 24 Apr 2026 15:15:37 +0300
Subject: [PATCH] feat(menu): show NEW badge on IoT Hub menu entry

Add optional isNew flag on MenuSection; when set, menu-link and
menu-toggle components render a NEW badge next to the label. Marks
the IoT Hub entry as new.
---
 ui-ngx/src/app/core/services/menu.models.ts   |  4 +++-
 .../home/menu/menu-link.component.html        |  3 ++-
 .../home/menu/menu-link.component.scss        | 19 +++++++++++++++++-
 .../home/menu/menu-toggle.component.html      |  3 ++-
 .../home/menu/menu-toggle.component.scss      | 20 +++++++++++++++++++
 5 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/core/services/menu.models.ts b/ui-ngx/src/app/core/services/menu.models.ts
index c7151b5979..dc388d7459 100644
--- a/ui-ngx/src/app/core/services/menu.models.ts
+++ b/ui-ngx/src/app/core/services/menu.models.ts
@@ -30,6 +30,7 @@ export interface MenuSection {
   pages?: Array<MenuSection>;
   opened?: boolean;
   rootOnly?: boolean;
+  isNew?: boolean;
   customTranslate?: boolean;
 }
 
@@ -716,7 +717,8 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
       name: 'iot-hub.iot-hub',
       type: 'link',
       path: '/iot-hub',
-      icon: 'store'
+      icon: 'store',
+      isNew: true
     }
   ]
 ]);
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.html b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
index 3d3823d12a..1be09e0ddd 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}">
+<a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}" routerLink="{{section.path}}"
+   [class.is-new]="section.isNew">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
 </a>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
index 16bc26c7e2..7720091e79 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-link.component.scss
@@ -13,6 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
 
+@import '../../../../scss/constants';
+
+:host ::ng-deep {
+  a.is-new::after {
+    content: "NEW";
+    font-size: 12px;
+    letter-spacing: .03125em;
+    transform: translate(6px, -6px);
+    display: inline-block;
+    border-radius: 10px;
+    line-height: 22px;
+    height: 20px;
+    background: #fff;
+    color: $tb-primary-color;
+    padding-left: 6px;
+    padding-right: 6px;
+    margin-left: -6px;
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 31753751af..ca379c6e73 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<a mat-button class="tb-button-toggle" (click)="toggleSection($event)">
+<a mat-button class="tb-button-toggle" (click)="toggleSection($event)"
+   [class.is-new]="section.isNew">
   <tb-icon matButtonIcon *ngIf="section.icon !== null">{{section.icon}}</tb-icon>
   <span>{{section.customTranslate ? (section.name | customTranslate) : (section.name | translate)}}</span>
   <span class="pull-right fa fa-chevron-down tb-toggle-icon"
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
index 6da9b1f221..faa0d01ff2 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+@import '../../../../scss/constants';
+
 :host ::ng-deep {
   .tb-button-toggle {
     .tb-toggle-icon {
@@ -26,6 +29,23 @@
         transform: rotateZ(180deg);
       }
     }
+    &.is-new::after {
+      position: absolute;
+      right: 44px;
+      top: 4px;
+      content: "NEW";
+      font-size: 12px;
+      letter-spacing: .03125em;
+      display: inline-block;
+      border-radius: 10px;
+      line-height: 22px;
+      height: 20px;
+      background: #fff;
+      color: $tb-primary-color;
+      padding-left: 6px;
+      padding-right: 6px;
+      margin-left: -6px;
+    }
   }
 
   .tb-menu-toggle-list {