From daed8abf909a821c4c40af4fa402a123579d25ae Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 17 Apr 2026 16:42:30 +0300
Subject: [PATCH] feat(iot-hub): add verified creator badge, sticky meta bar in
 detail dialog

Add verified field to CreatorView and creatorVerified to MpItemVersionView.
Show verified badge (32px teal icon + tooltip) on creator profile page.
Show 16px teal verified icon on item cards when creator is verified.
Make dlg-meta-bar always rendered and sticky in item detail dialog.
---
 .../iot-hub/iot-hub-item-card.component.html  | 12 ++++-
 .../iot-hub/iot-hub-item-card.component.scss  |  4 ++
 .../iot-hub-item-detail-dialog.component.html | 53 +++++++------------
 .../iot-hub-item-detail-dialog.component.scss |  7 +++
 .../iot-hub-creator-profile.component.html    |  9 +++-
 .../iot-hub-creator-profile.component.scss    | 15 ++++++
 .../models/iot-hub/iot-hub-creator.models.ts  |  1 +
 .../models/iot-hub/iot-hub-version.models.ts  |  1 +
 .../assets/locale/locale.constant-en_US.json  |  1 +
 9 files changed, 66 insertions(+), 37 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
index 35c5b3927c..ef20917b8f 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
@@ -28,7 +28,11 @@
       <h3 class="tb-iot-hub-compact-name">{{ item.name }}</h3>
       <div class="tb-iot-hub-compact-meta">
         @if (showCreator) {
-          <tb-icon class="tb-iot-hub-compact-author-icon">person</tb-icon>
+          @if (item.creatorVerified) {
+            <mat-icon class="tb-iot-hub-compact-author-icon tb-iot-hub-verified-icon">verified</mat-icon>
+          } @else {
+            <tb-icon class="tb-iot-hub-compact-author-icon">person</tb-icon>
+          }
           <span class="tb-iot-hub-compact-creator" [class.clickable]="mode !== 'add'" (click)="mode !== 'add' && onCreatorClick($event)">{{ item.creatorDisplayName }}</span>
           <span class="tb-iot-hub-compact-dot">&middot;</span>
         }
@@ -89,7 +93,11 @@
       <h3 class="tb-iot-hub-card-name">{{ item.name }}</h3>
       <div class="tb-iot-hub-card-footer">
         @if (showCreator) {
-          <tb-icon class="tb-iot-hub-card-author-icon">person</tb-icon>
+          @if (item.creatorVerified) {
+            <mat-icon class="tb-iot-hub-card-author-icon tb-iot-hub-verified-icon">verified</mat-icon>
+          } @else {
+            <tb-icon class="tb-iot-hub-card-author-icon">person</tb-icon>
+          }
           <span class="tb-iot-hub-card-creator" [class.clickable]="mode !== 'add'" (click)="mode !== 'add' && onCreatorClick($event)">{{ item.creatorDisplayName }}</span>
           <span class="tb-iot-hub-card-dot">&middot;</span>
         }
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
index 6d6415bc59..c8c02749e1 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss
@@ -177,6 +177,10 @@
   flex-shrink: 0;
 }
 
+.tb-iot-hub-verified-icon {
+  color: #00695c;
+}
+
 .tb-iot-hub-compact-creator {
   white-space: nowrap;
   overflow: hidden;
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
index 969431c462..9a84bed940 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -251,10 +251,10 @@
     </div>
 
     <!-- Categories & Use Cases / Device metadata -->
-    @if (item.type === ItemType.DEVICE) {
-      @if (item.dataDescriptor?.hardwareType || item.dataDescriptor?.connectivity?.length || item.useCases?.length) {
-        <div class="dlg-divider"></div>
-        <div class="dlg-meta">
+    <div class="dlg-meta-bar">
+      <div class="dlg-divider"></div>
+      <div class="dlg-meta">
+        @if (item.type === ItemType.DEVICE) {
           @if (item.dataDescriptor?.hardwareType) {
             <div class="dlg-meta-group">
               <span class="dlg-meta-label">{{ 'iot-hub.hardware-type' | translate }}</span>
@@ -273,22 +273,7 @@
               </div>
             </div>
           }
-          @if (item.useCases?.length) {
-            <div class="dlg-meta-group">
-              <span class="dlg-meta-label">{{ 'iot-hub.use-cases' | translate }}</span>
-              <div class="dlg-meta-chips">
-                @for (uc of item.useCases; track uc) {
-                  <span class="dlg-chip dlg-chip-usecase">{{ uc }}</span>
-                }
-              </div>
-            </div>
-          }
-        </div>
-      }
-    } @else {
-      @if (item.categories?.length || item.useCases?.length) {
-        <div class="dlg-divider"></div>
-        <div class="dlg-meta">
+        } @else {
           @if (item.categories?.length) {
             <div class="dlg-meta-group">
               <span class="dlg-meta-label">{{ 'iot-hub.category' | translate }}</span>
@@ -299,33 +284,33 @@
               </div>
             </div>
           }
-          @if (item.useCases?.length) {
-            <div class="dlg-meta-group">
-              <span class="dlg-meta-label">{{ 'iot-hub.use-cases' | translate }}</span>
-              <div class="dlg-meta-chips">
-                @for (uc of item.useCases; track uc) {
-                  <span class="dlg-chip dlg-chip-usecase">{{ uc }}</span>
-                }
-              </div>
+        }
+        @if (item.useCases?.length) {
+          <div class="dlg-meta-group">
+            <span class="dlg-meta-label">{{ 'iot-hub.use-cases' | translate }}</span>
+            <div class="dlg-meta-chips">
+              @for (uc of item.useCases; track uc) {
+                <span class="dlg-chip dlg-chip-usecase">{{ uc }}</span>
+              }
             </div>
-          }
-        </div>
-      }
-    }
+          </div>
+        }
+      </div>
+      <div class="dlg-divider"></div>
+    </div>
 
     <!-- Rule Chain Nodes -->
     @if (item.type === ItemType.RULE_CHAIN && getNodes().length) {
-      <div class="dlg-divider"></div>
       <div class="dlg-nodes">
         @for (node of getNodes(); track node.name) {
           <span class="dlg-node-chip" [ngClass]="'dlg-node-' + node.type.toLowerCase()">{{ node.name }}</span>
         }
       </div>
+      <div class="dlg-divider"></div>
     }
 
     <!-- Readme / Changelog -->
     @if (readmeContent || item.changelog) {
-      <div class="dlg-divider"></div>
       <div class="dlg-readme">
         @if (readmeContent) {
           <tb-markdown [data]="readmeContent"></tb-markdown>
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
index 44267a02fa..d326f6e7a6 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.scss
@@ -263,6 +263,13 @@
   background: rgba(0, 0, 0, 0.12);
 }
 
+.dlg-meta-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: white;
+}
+
 // Meta section (categories + use cases) — Design: px-24, py-16, gap-24, flex row
 .dlg-meta {
   display: flex;
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
index 88a3e1c22c..cd0c4a8a7d 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
@@ -32,7 +32,14 @@
               <mat-icon>person</mat-icon>
             }
           </div>
-          <h2 class="tb-creator-name">{{ creator.displayName }}</h2>
+          <div class="tb-creator-name-row">
+            <h2 class="tb-creator-name">{{ creator.displayName }}</h2>
+            @if (creator.verified) {
+              <mat-icon class="tb-creator-verified-badge"
+                        [matTooltip]="'iot-hub.verified-creator' | translate"
+                        matTooltipPosition="above">verified</mat-icon>
+            }
+          </div>
           @if (creator.description) {
             <p class="tb-creator-desc">{{ creator.description }}</p>
           }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
index 8c4edca2c8..6ca99b6e24 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
@@ -79,6 +79,12 @@
 }
 
 // Name
+.tb-creator-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .tb-creator-name {
   font-size: 28px;
   font-weight: 500;
@@ -88,6 +94,15 @@
   margin: 0;
 }
 
+.tb-creator-verified-badge {
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  color: #00695c;
+  flex-shrink: 0;
+  cursor: default;
+}
+
 // Description
 .tb-creator-desc {
   font-size: 16px;
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts
index 16c6a2c409..0f9c791f3d 100644
--- a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-creator.models.ts
@@ -26,4 +26,5 @@ export interface CreatorView {
   linkedinUrl: string;
   twitterUrl: string;
   publishedCount: number;
+  verified: boolean;
 }
diff --git a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts
index d87cb41599..3edb1b5e46 100644
--- a/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts
+++ b/ui-ngx/src/app/shared/models/iot-hub/iot-hub-version.models.ts
@@ -106,6 +106,7 @@ export interface MpItemVersionView {
   creatorContactEmail: string;
   creatorDescription: string;
   creatorAvatarUrl: string;
+  creatorVerified: boolean;
   installCount: number;
   totalInstallCount: number;
   resources: MpItemVersionResource[];
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index f683d7cac8..0d91179da1 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3774,6 +3774,7 @@
         "no-items-found-text": "Try adjusting your search or filters.",
         "become-a-creator": "Become a creator",
         "back-to-iot-hub": "Back to IoT Hub",
+        "verified-creator": "Verified Creator",
         "published-items": "Published items",
         "by-creator": "by {{name}}",
         "installs": "installs",