From b8a4ad82e569b1d7524e6a31053b76bea359230e Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 18 May 2026 21:55:15 +0200
Subject: [PATCH] Add icon column

---
 .../home-watchlist/home-watchlist.html        |  1 +
 .../lib/benchmark/benchmark.component.html    | 33 ++++++++++++-------
 .../src/lib/benchmark/benchmark.component.ts  |  4 +++
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.html b/apps/client/src/app/components/home-watchlist/home-watchlist.html
index a17259000..c7c9a9c4b 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.html
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html
@@ -14,6 +14,7 @@
         [deviceType]="deviceType()"
         [hasPermissionToDeleteItem]="hasPermissionToDeleteWatchlistItem"
         [locale]="user?.settings?.locale || undefined"
+        [showIcon]="true"
         [user]="user"
         (itemDeleted)="onWatchlistItemDeleted($event)"
       />
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index ab0d4fb6f..144101598 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -7,11 +7,22 @@
     matSortDirection="asc"
     [dataSource]="dataSource"
   >
-    <ng-container matColumnDef="name" sticky>
-      <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
+    <ng-container matColumnDef="icon" sticky>
+      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        <gf-entity-logo
+          [dataSource]="element.dataSource"
+          [symbol]="element.symbol"
+          [tooltip]="element.name"
+        />
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <div class="text-truncate">
           {{ element?.name }}
         </div>
@@ -26,14 +37,14 @@
     <ng-container matColumnDef="trend50d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 text-right"
         mat-header-cell
       >
         <ng-container i18n>50-Day Trend</ng-container>
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-2"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -55,14 +66,14 @@
     <ng-container matColumnDef="trend200d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 text-right"
         mat-header-cell
       >
         <ng-container i18n>200-Day Trend</ng-container>
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-2"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -84,14 +95,14 @@
     <ng-container matColumnDef="date">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 text-right"
         mat-header-cell
       >
         <ng-container i18n>Last All Time High</ng-container>
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-2"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -109,7 +120,7 @@
     <ng-container matColumnDef="change">
       <th
         *matHeaderCellDef
-        class="px-2 justify-content-end"
+        class="px-1 justify-content-end"
         mat-header-cell
         mat-sort-header="performances.allTimeHigh.performancePercent"
       >
@@ -118,7 +129,7 @@
         >
         <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
       </th>
-      <td *matCellDef="let element" class="px-2 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
         @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
             class="d-inline-block justify-content-end"
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index 73edfd482..0b78ffa0d 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/libs/ui/src/lib/benchmark/benchmark.component.ts
@@ -36,6 +36,7 @@ import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+import { GfEntityLogoComponent } from '../entity-logo/entity-logo.component';
 import { translate } from '../i18n';
 import { GfTrendIndicatorComponent } from '../trend-indicator/trend-indicator.component';
 import { GfValueComponent } from '../value/value.component';
@@ -45,6 +46,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    GfEntityLogoComponent,
     GfTrendIndicatorComponent,
     GfValueComponent,
     IonIcon,
@@ -65,6 +67,7 @@ export class GfBenchmarkComponent {
   public readonly deviceType = input.required<string>();
   public readonly hasPermissionToDeleteItem = input<boolean>();
   public readonly locale = input(getLocale());
+  public readonly showIcon = input(false);
   public readonly showSymbol = input(true);
   public readonly user = input<User>();
 
@@ -75,6 +78,7 @@ export class GfBenchmarkComponent {
   protected readonly dataSource = new MatTableDataSource<Benchmark>([]);
   protected readonly displayedColumns = computed(() => {
     return [
+      ...(this.showIcon() ? ['icon'] : []),
       'name',
       ...(this.user()?.settings?.isExperimentalFeatures
         ? ['trend50d', 'trend200d']