From 19fe44765553940516a4c65f9ea918707989bc06 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 29 Jul 2026 15:31:38 +0200
Subject: [PATCH] Feature/add tags to account detail dialog (#7460)

* Add tags (read-only)

* Update changelog
---
 CHANGELOG.md                                      |  1 +
 .../account-detail-dialog.component.ts            | 15 +++++++++++++++
 .../account-detail-dialog.html                    |  4 ++++
 .../lib/tags-selector/tags-selector.component.ts  |  2 +-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59123bd50..dfa80447b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added an overview tab to the account detail dialog
+- Added the tags (read-only) to the account detail dialog (experimental)
 
 ### Changed
 
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
index 53365c543..fdb0ba97a 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
@@ -20,7 +20,9 @@ import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
 import { GfDialogFooterComponent } from '@ghostfolio/ui/dialog-footer';
 import { GfDialogHeaderComponent } from '@ghostfolio/ui/dialog-header';
 import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { translate } from '@ghostfolio/ui/i18n';
 import { DataService } from '@ghostfolio/ui/services';
+import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
@@ -42,6 +44,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { NavigationStart, Router } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
+import { Tag } from '@prisma/client';
 import { Big } from 'big.js';
 import { format, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
@@ -70,6 +73,7 @@ import {
     GfDialogHeaderComponent,
     GfHoldingsTableComponent,
     GfInvestmentChartComponent,
+    GfTagsSelectorComponent,
     GfValueComponent,
     IonIcon,
     MatButtonModule,
@@ -105,6 +109,7 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected platformName: string;
   protected sortColumn = 'date';
   protected sortDirection: SortDirection = 'desc';
+  protected tags: Tag[];
   protected totalItems: number;
   protected user: User;
   protected valueInBaseCurrency: number;
@@ -236,6 +241,7 @@ export class GfAccountDetailDialogComponent implements OnInit {
           interestInBaseCurrency,
           name,
           platform,
+          tags,
           value,
           valueInBaseCurrency
         }) => {
@@ -285,6 +291,15 @@ export class GfAccountDetailDialogComponent implements OnInit {
 
           this.name = name;
           this.platformName = platform?.name ?? '-';
+
+          this.tags =
+            tags?.map((tag) => {
+              return {
+                ...tag,
+                name: translate(tag.name)
+              };
+            }) ?? [];
+
           this.valueInBaseCurrency = valueInBaseCurrency;
 
           this.changeDetectorRef.markForCheck();
diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
index 6fca90718..b7deae6e8 100644
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
@@ -179,6 +179,10 @@
         />
       </mat-tab>
     </mat-tab-group>
+
+    @if (user?.settings?.isExperimentalFeatures) {
+      <gf-tags-selector [readonly]="true" [tags]="tags" />
+    }
   </div>
 </div>
 
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
index c0d5fe6a6..0e97e12fd 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
@@ -167,7 +167,7 @@ export class GfTagsSelectorComponent
       return id;
     });
 
-    return this.tagsAvailable
+    return (this.tagsAvailable ?? [])
       .filter(({ id, name }) => {
         return (
           !tagIds.includes(id) &&