From 42b343f0331325844fc7d6d67c4675c3ef343308 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 1 Apr 2026 16:12:24 +0300
Subject: [PATCH] Redesign IoT Hub browse page to match design

- Two-column layout: left sidebar filters (280px, own scroll) + right card grid
- Filters use mat-expansion-panel accordions with checkbox lists
- Type, Category, Use Case filter sections with expand/collapse
- Top bar: results count + search field, sort button with mat-menu
- Active filter chips row with clear all button
- 4-column card grid (responsive: 3 at 1200px, 2 at 900px)
- Card subtype label: @Input showSubtype, 12px Medium uppercase above name
- Tabs use plural item type translations
- Remove old header, filter dropdowns, and footer sections
---
 .../iot-hub/iot-hub-browse.component.html     | 332 +++++++-------
 .../iot-hub/iot-hub-browse.component.scss     | 412 ++++++------------
 .../pages/iot-hub/iot-hub-browse.component.ts |  12 +
 .../iot-hub/iot-hub-item-card.component.html  |   3 +
 .../iot-hub/iot-hub-item-card.component.scss  |  10 +
 .../iot-hub/iot-hub-item-card.component.ts    |   1 +
 6 files changed, 320 insertions(+), 450 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
index 05bf3d72ad..94b1ce7940 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
@@ -15,214 +15,210 @@
     limitations under the License.
 
 -->
-<div class="tb-iot-hub-browse-container" [class.embedded]="embedded">
-  <!-- Page header -->
-  @if (!embedded) {
-    <div class="tb-iot-hub-browse-header">
-      <div>
-        <h1>{{ getTitle() | translate }}</h1>
-        <p>{{ getSubtitle() | translate }}</p>
-      </div>
-      <button mat-stroked-button color="primary" (click)="navigateToInstalledItems()">
-        <mat-icon>inventory_2</mat-icon>
-        {{ 'iot-hub.installed-items' | translate }}
-      </button>
-    </div>
-  }
-
+<div class="tb-iot-hub-browse" [class.embedded]="embedded">
   <!-- Type tabs -->
-  <nav mat-tab-nav-bar class="tb-iot-hub-type-tabs" [tabPanel]="tabPanel">
+  <nav mat-tab-nav-bar class="tb-iot-hub-tabs" [tabPanel]="tabPanel">
     <a mat-tab-link
        [active]="activeType === ItemType.WIDGET"
        (click)="onTypeTabChange(ItemType.WIDGET)">
-      {{ 'item.type-widget' | translate }}s
+      {{ 'item.type-widget-plural' | translate }}
     </a>
     <a mat-tab-link
        [active]="activeType === ItemType.DASHBOARD"
        (click)="onTypeTabChange(ItemType.DASHBOARD)">
-      {{ 'item.type-dashboard' | translate }}s
+      {{ 'item.type-dashboard-plural' | translate }}
     </a>
     <a mat-tab-link
        [active]="activeType === ItemType.SOLUTION_TEMPLATE"
        (click)="onTypeTabChange(ItemType.SOLUTION_TEMPLATE)">
-      {{ 'item.type-solution-template' | translate }}s
+      {{ 'item.type-solution-template-plural' | translate }}
     </a>
     <a mat-tab-link
        [active]="activeType === ItemType.CALCULATED_FIELD"
        (click)="onTypeTabChange(ItemType.CALCULATED_FIELD)">
-      {{ 'item.type-calculated-field' | translate }}s
+      {{ 'item.type-calculated-field-plural' | translate }}
     </a>
     <a mat-tab-link
        [active]="activeType === ItemType.RULE_CHAIN"
        (click)="onTypeTabChange(ItemType.RULE_CHAIN)">
-      {{ 'item.type-rule-chain' | translate }}s
+      {{ 'item.type-rule-chain-plural' | translate }}
     </a>
     <a mat-tab-link
        [active]="activeType === ItemType.DEVICE"
        (click)="onTypeTabChange(ItemType.DEVICE)">
-      {{ 'item.type-device' | translate }}s
+      {{ 'item.type-device-plural' | translate }}
     </a>
   </nav>
   <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 
-  <!-- Search + sort row -->
-  <div class="tb-iot-hub-search-row">
-    <mat-form-field appearance="outline" class="tb-iot-hub-search-field">
-      <mat-icon matPrefix>search</mat-icon>
-      <input matInput
-             [placeholder]="getSearchPlaceholder() | translate"
-             [value]="textSearch"
-             (input)="onSearchChange($any($event.target).value)">
-      @if (textSearch) {
-        <button matSuffix mat-icon-button (click)="onSearchChange('')">
-          <mat-icon>close</mat-icon>
-        </button>
-      }
-    </mat-form-field>
-    <mat-form-field appearance="outline" class="tb-iot-hub-sort-field">
-      <mat-select [value]="selectedSortIndex" (selectionChange)="onSortChange($event.value)">
-        @for (option of sortOptions; track option.value; let i = $index) {
-          <mat-option [value]="i">{{ option.label | translate }}</mat-option>
+  <!-- Content: filters sidebar + card grid -->
+  <div class="tb-iot-hub-content">
+    <!-- Left sidebar filters -->
+    <div class="tb-iot-hub-filters">
+      <div class="tb-iot-hub-filters-inner">
+        @if (getSubtypeMap(); as subtypeMap) {
+          <mat-expansion-panel [expanded]="true" class="tb-iot-hub-filter-panel">
+            <mat-expansion-panel-header>
+              <mat-panel-title>{{ 'iot-hub.type-filter-label' | translate }}</mat-panel-title>
+            </mat-expansion-panel-header>
+            @for (entry of subtypeMap | keyvalue; track entry.key) {
+              <mat-checkbox [checked]="isSubtypeActive(entry.key)"
+                            (change)="onSubtypeToggle(entry.key)">
+                {{ entry.value | translate }}
+              </mat-checkbox>
+            }
+          </mat-expansion-panel>
         }
-      </mat-select>
-    </mat-form-field>
-  </div>
 
-  <!-- Filter dropdowns row -->
-  <div class="tb-iot-hub-filter-row">
-    @if (getSubtypeMap(); as subtypeMap) {
-      <mat-form-field appearance="outline" class="tb-iot-hub-filter-select">
-        <mat-select [value]="getActiveSubtypesArray()" multiple
-                    [placeholder]="'iot-hub.type-filter-label' | translate"
-                    (selectionChange)="onSubtypesChange($event.value)">
-          @for (entry of subtypeMap | keyvalue; track entry.key) {
-            <mat-option [value]="entry.key">{{ entry.value | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-    @if (categories.size > 0) {
-      <mat-form-field appearance="outline" class="tb-iot-hub-filter-select">
-        <mat-select [value]="getActiveCategoriesArray()" multiple
-                    [placeholder]="'iot-hub.category' | translate"
-                    (selectionChange)="onCategoriesChange($event.value)">
-          @for (entry of categories | keyvalue; track entry.key) {
-            <mat-option [value]="entry.key">{{ entry.value | translate }}</mat-option>
-          }
-        </mat-select>
-      </mat-form-field>
-    }
-    <mat-form-field appearance="outline" class="tb-iot-hub-filter-select">
-      <mat-select [value]="getActiveUseCasesArray()" multiple
-                  [placeholder]="'iot-hub.use-case' | translate"
-                  (selectionChange)="onUseCasesChange($event.value)">
-        @for (entry of useCases | keyvalue; track entry.key) {
-          <mat-option [value]="entry.key">{{ entry.value | translate }}</mat-option>
+        @if (categories.size > 0) {
+          <mat-expansion-panel [expanded]="true" class="tb-iot-hub-filter-panel">
+            <mat-expansion-panel-header>
+              <mat-panel-title>{{ 'iot-hub.category' | translate }}</mat-panel-title>
+            </mat-expansion-panel-header>
+            @for (entry of categories | keyvalue; track entry.key) {
+              <mat-checkbox [checked]="isCategoryActive(entry.key)"
+                            (change)="onCategoryToggle(entry.key)">
+                {{ entry.value | translate }}
+              </mat-checkbox>
+            }
+          </mat-expansion-panel>
         }
-      </mat-select>
-    </mat-form-field>
-  </div>
-
-  <!-- Active filter chips -->
-  @if (hasActiveDropdownFilters()) {
-    <div class="tb-iot-hub-active-filters">
-      @for (key of getActiveSubtypesArray(); track key) {
-        <span class="tb-iot-hub-active-chip" (click)="onSubtypeToggle(key)">
-          {{ getSubtypeLabel(key) }}
-          <mat-icon>close</mat-icon>
-        </span>
-      }
-      @for (key of getActiveCategoriesArray(); track key) {
-        <span class="tb-iot-hub-active-chip" (click)="onCategoryToggle(key)">
-          {{ getCategoryLabel(key) }}
-          <mat-icon>close</mat-icon>
-        </span>
-      }
-      @for (key of getActiveUseCasesArray(); track key) {
-        <span class="tb-iot-hub-active-chip" (click)="onUseCaseToggle(key)">
-          {{ getUseCaseLabel(key) }}
-          <mat-icon>close</mat-icon>
-        </span>
-      }
-      <button class="tb-iot-hub-clear-filters" (click)="clearAllFilters()">
-        {{ 'iot-hub.clear-all-filters' | translate }}
-      </button>
-    </div>
-  }
-
-  <!-- Results count -->
-  @if (!isLoading && !hasError) {
-    <div class="tb-iot-hub-results-count">
-      {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
-    </div>
-  }
 
-  <!-- Loading -->
-  @if (isLoading) {
-    <div class="tb-iot-hub-loading">
-      <mat-spinner diameter="40"></mat-spinner>
+        <mat-expansion-panel [expanded]="false" class="tb-iot-hub-filter-panel">
+          <mat-expansion-panel-header>
+            <mat-panel-title>{{ 'iot-hub.use-case' | translate }}</mat-panel-title>
+          </mat-expansion-panel-header>
+          @for (entry of useCases | keyvalue; track entry.key) {
+            <mat-checkbox [checked]="isUseCaseActive(entry.key)"
+                          (change)="onUseCaseToggle(entry.key)">
+              {{ entry.value | translate }}
+            </mat-checkbox>
+          }
+        </mat-expansion-panel>
+      </div>
     </div>
-  }
 
-  <!-- Error -->
-  @if (hasError && !isLoading) {
-    <div class="tb-iot-hub-empty-state">
-      <mat-icon class="tb-iot-hub-empty-icon">error_outline</mat-icon>
-      <h3>{{ 'iot-hub.unable-to-load' | translate }}</h3>
-      <p>{{ 'iot-hub.unable-to-load-text' | translate }}</p>
-      <button mat-raised-button color="primary" (click)="loadItems()">
-        {{ 'iot-hub.retry' | translate }}
-      </button>
-    </div>
-  }
+    <!-- Right content area -->
+    <div class="tb-iot-hub-results">
+      <!-- Top bar: results count + search + sort -->
+      <div class="tb-iot-hub-results-top">
+        <span class="tb-iot-hub-results-count">
+          {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
+        </span>
+        <mat-form-field appearance="outline" class="tb-iot-hub-search-field">
+          <mat-icon matPrefix>search</mat-icon>
+          <input matInput
+                 [placeholder]="'iot-hub.search-placeholder' | translate"
+                 [value]="textSearch"
+                 (input)="onSearchChange($any($event.target).value)">
+          @if (textSearch) {
+            <button matSuffix mat-icon-button (click)="onSearchChange('')">
+              <mat-icon>close</mat-icon>
+            </button>
+          }
+        </mat-form-field>
+      </div>
 
-  <!-- Empty state -->
-  @if (!isLoading && !hasError && items.length === 0) {
-    <div class="tb-iot-hub-empty-state">
-      <mat-icon class="tb-iot-hub-empty-icon">search_off</mat-icon>
-      <h3>{{ 'iot-hub.no-items-found' | translate }}</h3>
-      <p>{{ 'iot-hub.no-items-found-text' | translate }}</p>
-      @if (hasActiveFilters()) {
-        <button mat-raised-button color="primary" (click)="clearAllFilters()">
-          {{ 'iot-hub.clear-all-filters' | translate }}
+      <!-- Sort button -->
+      <div class="tb-iot-hub-sort-row">
+        <!-- Active filter chips -->
+        @if (hasActiveDropdownFilters()) {
+          <div class="tb-iot-hub-active-filters">
+            @for (key of getActiveSubtypesArray(); track key) {
+              <span class="tb-iot-hub-active-chip" (click)="onSubtypeToggle(key)">
+                {{ getSubtypeLabel(key) }}
+                <mat-icon>close</mat-icon>
+              </span>
+            }
+            @for (key of getActiveCategoriesArray(); track key) {
+              <span class="tb-iot-hub-active-chip" (click)="onCategoryToggle(key)">
+                {{ getCategoryLabel(key) }}
+                <mat-icon>close</mat-icon>
+              </span>
+            }
+            @for (key of getActiveUseCasesArray(); track key) {
+              <span class="tb-iot-hub-active-chip" (click)="onUseCaseToggle(key)">
+                {{ getUseCaseLabel(key) }}
+                <mat-icon>close</mat-icon>
+              </span>
+            }
+            <button class="tb-iot-hub-clear-btn" (click)="clearAllFilters()">
+              {{ 'iot-hub.clear-all-filters' | translate }}
+            </button>
+          </div>
+        }
+        <span class="tb-iot-hub-sort-spacer"></span>
+        <button mat-button class="tb-iot-hub-sort-btn" [matMenuTriggerFor]="sortMenu">
+          <mat-icon>filter_list</mat-icon>
+          {{ sortOptions[selectedSortIndex].label | translate }}
         </button>
+        <mat-menu #sortMenu="matMenu">
+          @for (option of sortOptions; track option.value; let i = $index) {
+            <button mat-menu-item (click)="onSortChange(i)">{{ option.label | translate }}</button>
+          }
+        </mat-menu>
+      </div>
+
+      <!-- Loading -->
+      @if (isLoading) {
+        <div class="tb-iot-hub-loading">
+          <mat-spinner diameter="40"></mat-spinner>
+        </div>
       }
-    </div>
-  }
 
-  <!-- Card grid -->
-  @if (!isLoading && !hasError && items.length > 0) {
-    <div class="tb-iot-hub-card-grid">
-      @for (item of items; track item.id) {
-        <tb-iot-hub-item-card
-          [item]="item"
-          [installedItem]="getInstalledItem(item)"
-          [showTypeChip]="false"
-          [showCreator]="!creatorId"
-          (cardClick)="openItemDetail($event)"
-          (creatorClick)="navigateToCreator($event)"
-          (installClick)="installItem($event)"
-          (updateClick)="updateItem($event)">
-        </tb-iot-hub-item-card>
+      <!-- Error -->
+      @if (hasError && !isLoading) {
+        <div class="tb-iot-hub-empty-state">
+          <mat-icon class="tb-iot-hub-empty-icon">error_outline</mat-icon>
+          <h3>{{ 'iot-hub.unable-to-load' | translate }}</h3>
+          <p>{{ 'iot-hub.unable-to-load-text' | translate }}</p>
+          <button mat-flat-button color="primary" (click)="loadItems()">
+            {{ 'iot-hub.retry' | translate }}
+          </button>
+        </div>
       }
-    </div>
 
-    <!-- Pagination -->
-    <mat-paginator
-      [length]="totalElements"
-      [pageSize]="pageSize"
-      [pageIndex]="pageIndex"
-      [pageSizeOptions]="[12, 24, 48]"
-      (page)="onPageChange($event)">
-    </mat-paginator>
-  }
+      <!-- Empty state -->
+      @if (!isLoading && !hasError && items.length === 0) {
+        <div class="tb-iot-hub-empty-state">
+          <mat-icon class="tb-iot-hub-empty-icon">search_off</mat-icon>
+          <h3>{{ 'iot-hub.no-items-found' | translate }}</h3>
+          <p>{{ 'iot-hub.no-items-found-text' | translate }}</p>
+          @if (hasActiveFilters()) {
+            <button mat-flat-button color="primary" (click)="clearAllFilters()">
+              {{ 'iot-hub.clear-all-filters' | translate }}
+            </button>
+          }
+        </div>
+      }
 
-  <!-- Footer -->
-  @if (!creatorId) {
-    <div class="tb-iot-hub-browse-footer">
-      <a class="tb-iot-hub-become-creator" href="https://iothub.thingsboard.io/signup" target="_blank">
-        {{ 'iot-hub.become-a-creator' | translate }}
-      </a>
+      <!-- Card grid -->
+      @if (!isLoading && !hasError && items.length > 0) {
+        <div class="tb-iot-hub-card-grid">
+          @for (item of items; track item.id) {
+            <tb-iot-hub-item-card
+              [item]="item"
+              [installedItem]="getInstalledItem(item)"
+              [showTypeChip]="false"
+              [showSubtype]="true"
+              [showCreator]="!creatorId"
+              (cardClick)="openItemDetail($event)"
+              (creatorClick)="navigateToCreator($event)"
+              (installClick)="installItem($event)"
+              (updateClick)="updateItem($event)">
+            </tb-iot-hub-item-card>
+          }
+        </div>
+
+        <!-- Pagination -->
+        <mat-paginator
+          [length]="totalElements"
+          [pageSize]="pageSize"
+          [pageIndex]="pageIndex"
+          [pageSizeOptions]="[12, 24, 48]"
+          (page)="onPageChange($event)">
+        </mat-paginator>
+      }
     </div>
-  }
+  </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
index deef2d98bc..d228a5f2e6 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
@@ -18,249 +18,147 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 16px 24px;
-  overflow: auto;
+}
 
-  &.embedded {
-    padding: 0;
-    overflow: visible;
-    height: auto;
-  }
+.tb-iot-hub-browse {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.tb-iot-hub-browse-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-  background: white;
-  padding: 24px;
-  border-radius: 4px;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.12);
-
-  &.embedded {
-    max-width: none;
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    background: transparent;
-  }
+// Tabs — Design: px-40, border-bottom
+.tb-iot-hub-tabs {
+  padding: 0 40px;
+  flex-shrink: 0;
 }
 
-.tb-iot-hub-browse-header {
+// Two-column layout below tabs
+.tb-iot-hub-content {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24px;
-
-  h1 {
-    font-size: 28px;
-    font-weight: 700;
-    margin: 0 0 4px;
-    color: rgba(0, 0, 0, 0.87);
-  }
-
-  p {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.54);
-    margin: 0;
-  }
+  flex: 1;
+  min-height: 0;
 }
 
-.tb-iot-hub-type-tabs {
-  margin-bottom: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-
-  ::ng-deep {
-    .mat-mdc-tab-link-container {
-      flex-grow: 0;
-    }
-
-    .mat-mdc-tab-link {
-      text-transform: none;
-      font-weight: 400;
-      min-width: auto;
-      padding: 0 16px;
-      letter-spacing: normal;
-      height: 40px;
-      flex: 0 0 auto;
-    }
-
-    --mat-tab-active-indicator-color: #1976d2;
-
-    .mdc-tab__text-label {
-      color: rgba(0, 0, 0, 0.6);
-    }
-
-    .mdc-tab--active .mdc-tab__text-label {
-      font-weight: 500;
-    }
+// Left sidebar filters — Design: 280px wide, right border, own scroll
+.tb-iot-hub-filters {
+  width: 280px;
+  flex-shrink: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  overflow-y: auto;
+}
 
-    --mat-tab-active-label-text-color: #1976d2;
-    --mat-tab-active-focus-label-text-color: #1976d2;
-    --mat-tab-active-hover-label-text-color: #1976d2;
-    --mat-tab-active-ripple-color: #1976d2;
-    --mat-tab-inactive-ripple-color: #1976d2;
-    --mat-tab-active-focus-indicator-color: #1976d2;
-  }
+.tb-iot-hub-filters-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px 0;
 }
 
-// Shared field styles for search/filter/sort dropdowns
-%tb-iot-hub-field-base {
+// Filter expansion panels — Design: no border, no shadow, pl-40 for content
+.tb-iot-hub-filter-panel {
   ::ng-deep {
-    .mat-mdc-text-field-wrapper {
-      height: 42px;
-      padding: 0 12px;
+    &.mat-expansion-panel {
+      box-shadow: none !important;
+      border-radius: 0 !important;
+      background: transparent;
     }
 
-    .mat-mdc-form-field-flex {
-      height: 42px;
-      align-items: center;
+    .mat-expansion-panel-header {
+      padding: 8px 16px 8px 40px;
     }
 
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-color: #d5dbe3;
-    }
-
-    .mdc-notched-outline__leading {
-      border-radius: 8px 0 0 8px;
-    }
-
-    .mdc-notched-outline__trailing {
-      border-radius: 0 8px 8px 0;
-    }
-
-    .mat-mdc-form-field-infix {
-      padding-top: 0;
-      padding-bottom: 0;
-      min-height: unset;
-    }
-
-    .mdc-notched-outline__notch {
-      display: none;
-    }
-
-    .mat-mdc-floating-label {
-      display: none;
-    }
-
-    .mat-mdc-form-field-subscript-wrapper {
-      display: none;
-    }
-
-    input.mat-mdc-input-element {
+    .mat-expansion-panel-header-title {
       font-size: 14px;
-      color: #3e4a59;
-
-      &::placeholder {
-        color: #8b95a2;
-        opacity: 1;
-      }
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.87);
     }
 
-    .mat-mdc-select-value-text {
-      font-size: 14px;
-      color: #3e4a59;
+    .mat-expansion-panel-body {
+      padding: 0;
     }
+  }
 
-    .mat-mdc-select-arrow-wrapper {
-      padding-left: 4px;
-    }
+  mat-checkbox {
+    display: block;
+    padding: 8px 16px 8px 40px;
 
-    .mat-icon {
-      color: #8b95a2;
-      font-size: 20px;
-      width: 20px;
-      height: 20px;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
     }
   }
+}
 
-  &.mat-focused ::ng-deep {
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-color: #8b95a2;
-      border-width: 1px;
-    }
-  }
+// Right content area — Design: flex-1, pr-40, scrollable
+.tb-iot-hub-results {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 0 40px 0 20px;
 }
 
-.tb-iot-hub-search-row {
+// Top bar: results count + search
+.tb-iot-hub-results-top {
   display: flex;
-  gap: 12px;
-  margin-bottom: 12px;
   align-items: center;
+  justify-content: space-between;
+  padding: 16px 0 0;
+  flex-shrink: 0;
+}
 
-  .tb-iot-hub-search-field,
-  .tb-iot-hub-sort-field {
-    @extend %tb-iot-hub-field-base;
-  }
-
-  .tb-iot-hub-search-field {
-    flex: 1;
-
-    ::ng-deep {
-      .mat-mdc-form-field-icon-prefix {
-        padding: 0 8px 0 0;
-
-        > .mat-icon {
-          padding: 0;
-        }
-      }
-
-      .mat-mdc-form-field-icon-suffix {
-        padding: 0;
+.tb-iot-hub-results-count {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.54);
+}
 
-        .mat-mdc-icon-button {
-          width: 32px;
-          height: 32px;
-          padding: 4px;
-        }
-      }
-    }
-  }
+.tb-iot-hub-search-field {
+  width: 240px;
 
-  .tb-iot-hub-sort-field {
-    width: 140px;
-    flex-shrink: 0;
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
   }
 }
 
-.tb-iot-hub-filter-row {
+// Sort row + active filters
+.tb-iot-hub-sort-row {
   display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding-right: 152px;
-
-  .tb-iot-hub-filter-select {
-    @extend %tb-iot-hub-field-base;
-    flex: 1;
-    min-width: 0;
-  }
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.tb-iot-hub-sort-spacer {
+  flex: 1;
 }
 
+.tb-iot-hub-sort-btn {
+  color: rgba(0, 0, 0, 0.54);
+  flex-shrink: 0;
+}
+
+// Active filter chips
 .tb-iot-hub-active-filters {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   flex-wrap: wrap;
-  margin-bottom: 12px;
 }
 
 .tb-iot-hub-active-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px 4px 12px;
-  border-radius: 16px;
+  padding: 4px 8px;
+  border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  background: #eef4ff;
-  color: #305ECA;
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.76);
   cursor: pointer;
   white-space: nowrap;
-  transition: background-color 0.15s;
 
   mat-icon {
     font-size: 14px;
@@ -269,135 +167,85 @@
   }
 
   &:hover {
-    background: #dde8fc;
+    background: rgba(0, 0, 0, 0.1);
   }
 }
 
-.tb-iot-hub-clear-filters {
-  border: none;
-  background: none;
+.tb-iot-hub-clear-btn {
   font-size: 12px;
-  color: #8b95a2;
+  color: rgba(0, 0, 0, 0.54);
   cursor: pointer;
+  background: none;
+  border: none;
   padding: 4px 8px;
-  white-space: nowrap;
+  font-family: inherit;
 
   &:hover {
-    color: #3e4a59;
-    text-decoration: underline;
+    color: rgba(0, 0, 0, 0.87);
   }
 }
 
-.tb-iot-hub-results-count {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.54);
-  margin-bottom: 16px;
+// Card grid — Design: 4 columns, gap 20px
+.tb-iot-hub-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  padding: 8px 0 24px;
 }
 
+// Loading / Empty states
 .tb-iot-hub-loading {
   display: flex;
   justify-content: center;
-  align-items: center;
-  min-height: 200px;
+  padding: 80px 0;
 }
 
 .tb-iot-hub-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  min-height: 300px;
+  padding: 80px 0;
   text-align: center;
-  color: rgba(0, 0, 0, 0.54);
-
-  .tb-iot-hub-empty-icon {
-    font-size: 64px;
-    width: 64px;
-    height: 64px;
-    margin-bottom: 16px;
-    opacity: 0.4;
-  }
 
   h3 {
-    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 500;
     color: rgba(0, 0, 0, 0.87);
+    margin: 16px 0 8px;
   }
 
   p {
-    margin: 0 0 16px 0;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.54);
+    margin: 0 0 24px;
   }
 }
 
-.tb-iot-hub-card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  margin-bottom: 16px;
+.tb-iot-hub-empty-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  color: rgba(0, 0, 0, 0.2);
 }
 
-::ng-deep mat-paginator {
-  .mat-mdc-form-field {
-    .mat-mdc-text-field-wrapper {
-      height: 42px;
-      padding: 0 12px;
-      border: 1px solid #d5dbe3;
-      border-radius: 8px;
-      background: white;
-    }
-
-    .mat-mdc-form-field-flex {
-      height: 42px;
-      align-items: center;
-    }
-
-    .mdc-notched-outline {
-      display: none;
-    }
-
-    .mat-mdc-form-field-infix {
-      padding-top: 0;
-      padding-bottom: 0;
-      min-height: unset;
-      border-top: none;
-    }
-
-    .mat-mdc-floating-label {
-      display: none;
-    }
-
-    .mat-mdc-form-field-subscript-wrapper {
-      display: none;
-    }
-
-    .mat-mdc-select-value-text {
-      font-size: 14px;
-      color: #3e4a59;
-    }
-
-    .mat-mdc-select-arrow-wrapper {
-      padding-left: 4px;
-    }
+// Pagination
+mat-paginator {
+  flex-shrink: 0;
+}
 
-    &.mat-focused .mat-mdc-text-field-wrapper {
-      border-color: #8b95a2;
-    }
+// Responsive
+@media (max-width: 1200px) {
+  .tb-iot-hub-card-grid {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-.tb-iot-hub-browse-footer {
-  text-align: center;
-  padding: 24px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  margin-top: 16px;
-
-  .tb-iot-hub-become-creator {
-    color: rgba(0, 0, 0, 0.38);
-    font-size: 13px;
-    text-decoration: none;
+@media (max-width: 900px) {
+  .tb-iot-hub-filters {
+    width: 220px;
+  }
 
-    &:hover {
-      color: rgba(0, 0, 0, 0.54);
-      text-decoration: underline;
-    }
+  .tb-iot-hub-card-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
index 083b858c70..f753f0da27 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
@@ -159,6 +159,18 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     this.loadItems();
   }
 
+  isSubtypeActive(key: string): boolean {
+    return this.getActiveSubtypes().has(key);
+  }
+
+  isCategoryActive(key: string): boolean {
+    return this.activeCategories.has(key);
+  }
+
+  isUseCaseActive(key: string): boolean {
+    return this.activeUseCases.has(key);
+  }
+
   onCategoryToggle(category: string): void {
     if (this.activeCategories.has(category)) {
       this.activeCategories.delete(category);
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
index cbebb07387..532e9a2770 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
@@ -54,6 +54,9 @@
       }
     </div>
     <div class="tb-iot-hub-card-content">
+      @if (showSubtype && getSubtypeLabel(); as subtypeLabel) {
+        <span class="tb-iot-hub-card-subtype">{{ subtypeLabel }}</span>
+      }
       <h3 class="tb-iot-hub-card-name">{{ item.name }}</h3>
       <div class="tb-iot-hub-card-footer">
         <tb-icon class="tb-iot-hub-card-author-icon">person</tb-icon>
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
index 79ed432451..ca294f2846 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.scss
@@ -205,6 +205,16 @@
   text-transform: uppercase;
 }
 
+// Subtype label — Design: 12px Medium uppercase, rgba(0,0,0,0.54), tracking 0.25
+.tb-iot-hub-card-subtype {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.25px;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.54);
+}
+
 // Name — Design: 16px Medium, line-height 24, tracking 0.25, ellipsis
 .tb-iot-hub-card-name {
   font-size: 16px;
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.ts
index 1e7f685808..bc4ff60186 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.ts
@@ -37,6 +37,7 @@ export class TbIotHubItemCardComponent {
   @Input() installedItem: IotHubInstalledItem;
   @Input() showCreator = true;
   @Input() showTypeChip = true;
+  @Input() showSubtype = false;
   @Output() cardClick = new EventEmitter<MpItemVersionView>();
   @Output() creatorClick = new EventEmitter<string>();
   @Output() installClick = new EventEmitter<MpItemVersionView>();