From 382de37b16864e7b24ee70c132a786186a0ee115 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 5 May 2026 12:34:26 +0300
Subject: [PATCH] feat(widget-select): add icons to top-level Installed / IoT
 Hub toggle

- Add a `template?: TemplateRef<any>` slot to ToggleHeaderOption +
  ToggleOption so callers can render arbitrary content inside a
  toggle (the existing string label / error icon path stays the
  default).
- Use it in the dashboard widget-select header to render a tb-icon
  next to each label: now_widgets for Installed, hub for IoT Hub.
- Style the top-level toggle with a 42px pill (8px radius, white-15
  border, 40px buttons, 36px line-height, 500 weight) so the icon +
  label sit comfortably and contrast against the primary toolbar.
---
 .../dashboard-widget-select.component.html    | 19 ++++++++--
 .../dashboard-widget-select.component.scss    | 35 +++++++++++++++++++
 .../components/toggle-header.component.html   | 20 ++++++-----
 .../components/toggle-header.component.ts     |  6 +++-
 4 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
index 6719d02eb7..8918a2f8c5 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html
@@ -19,13 +19,26 @@
   <mat-toolbar color="primary" class="tb-widget-select-header flex flex-col">
     <div class="tb-widget-select-title-row flex flex-row items-center">
       @if (showTopLevelWidgetModeToggle()) {
-        <tb-toggle-select appearance="fill-invert"
+        <tb-toggle-select class="tb-top-level-widget-mode-toggle"
+                          appearance="fill-invert"
                           [disablePagination]="true"
                           selectMediaBreakpoint="xs"
                           [(ngModel)]="selectWidgetMode">
-          <tb-toggle-option value="installed">{{ 'widget.installed' | translate }}</tb-toggle-option>
-          <tb-toggle-option value="iotHub">{{ 'iot-hub.iot-hub' | translate }}</tb-toggle-option>
+          <tb-toggle-option value="installed" [template]="installedWidgetsOption"></tb-toggle-option>
+          <tb-toggle-option value="iotHub" [template]="iotHubWidgetsOption"></tb-toggle-option>
         </tb-toggle-select>
+        <ng-template #installedWidgetsOption>
+          <div class="flex items-center gap-2">
+            <tb-icon>now_widgets</tb-icon>
+            <div>{{ 'widget.installed' | translate }}</div>
+          </div>
+        </ng-template>
+        <ng-template #iotHubWidgetsOption>
+          <div class="flex items-center gap-2">
+            <tb-icon>hub</tb-icon>
+            <div>{{ 'iot-hub.iot-hub' | translate }}</div>
+          </div>
+        </ng-template>
       } @else if (showBackButton()) {
         <button mat-icon-button type="button" (click)="onBackClick()">
           <mat-icon>arrow_back</mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
index f3d589c8a8..d77a929fd8 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss
@@ -64,6 +64,41 @@ tb-dashboard-widget-select {
     }
   }
 
+  .tb-top-level-widget-mode-toggle {
+    .tb-toggle-container {
+      .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header {
+        height: 42px;
+        border-radius: 8px;
+        overflow: hidden;
+        padding: 0;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        .mat-button-toggle.mat-button-toggle-appearance-standard {
+          .mat-button-toggle-focus-overlay, .mat-button-toggle-ripple {
+            border-radius: 0;
+          }
+          .mat-button-toggle-button {
+            height: 40px;
+            .mat-button-toggle-label-content {
+              line-height: 36px;
+              font-weight: 500;
+            }
+          }
+          &.mat-button-toggle-checked {
+            .mat-button-toggle-button {
+              border: none;
+              border-radius: 0;
+            }
+          }
+        }
+        &.tb-fill.tb-invert {
+          .mat-button-toggle.mat-button-toggle-appearance-standard {
+            color: #FFF;
+          }
+        }
+      }
+    }
+  }
+
   .tb-widget-select-search-row {
     width: 100%;
     gap: 8px;
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
index bddaa896b6..c71e226dce 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -42,14 +42,18 @@
                            [(ngModel)]="value"
                            (ngModelChange)="valueChange.emit(value)">
     <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="(option.error$ | async) && value !== option.value">
-      {{ option.name }}
-      <mat-icon matTooltipPosition="above"
-                matTooltipClass="tb-error-tooltip"
-                [matTooltip]="(option.error$ | async)"
-                *ngIf="(option.error$ | async) && value !== option.value"
-                class="tb-error tb-error-icon">
-        warning
-      </mat-icon>
+      @if (option.template) {
+        <ng-container *ngTemplateOutlet="option.template"></ng-container>
+      } @else {
+        {{ option.name }}
+        <mat-icon matTooltipPosition="above"
+                  matTooltipClass="tb-error-tooltip"
+                  [matTooltip]="(option.error$ | async)"
+                  *ngIf="(option.error$ | async) && value !== option.value"
+                  class="tb-error tb-error-icon">
+          warning
+        </mat-icon>
+      }
     </mat-button-toggle>
   </mat-button-toggle-group>
 </div>
diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
index c60faf810a..53b000d429 100644
--- a/ui-ngx/src/app/shared/components/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -33,7 +33,7 @@ import {
   OnInit,
   Output,
   QueryList,
-  SimpleChanges,
+  SimpleChanges, TemplateRef,
   ViewChild
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
@@ -50,6 +50,7 @@ import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-
 export interface ToggleHeaderOption {
   name: string;
   value: any;
+  template?: TemplateRef<any>;
   error$?: Observable<string>;
 }
 
@@ -69,6 +70,8 @@ export class ToggleOption implements OnChanges, OnDestroy {
 
   @Input() value: any;
 
+  @Input() template: TemplateRef<any>;
+
   @Input() error: string;
 
   currentError = new ReplaySubject<string>(1);
@@ -127,6 +130,7 @@ export abstract class _ToggleBase extends PageComponent implements AfterContentI
           {
             name: option.viewValue,
             value: option.value,
+            template: option.template,
             error$: option.currentError.asObservable()
           }
         );