Bugfix/fix horizontal ellipsis icon in accounts table component (#5198)

* Fix icon and migrate to standalone

* Update changelog

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Localized the durations of the coupon system
 - Refactored the Frequently Asked Questions (FAQ) pages to standalone
 - Refactored the resources pages to standalone
+- Refactored the accounts table component to standalone
 - Improved the language localization for Catalan (`ca`)
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for German (`de`)
@@ -26,6 +27,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the language localization for Portuguese (`pt`)
 - Improved the language localization for Spanish (`es`)
 
+### Fixed
+
+- Fixed the horizontal ellipsis icon in the accounts table component
+
 ## 2.182.0 - 2025-07-16
 
 ### Added

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -1,7 +1,10 @@
 import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { getLocale } from '@ghostfolio/common/helper';
+import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,30 +15,45 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
+import { MatButtonModule } from '@angular/material/button';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatMenuModule } from '@angular/material/menu';
-import { Router } from '@angular/router';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Account as AccountModel } from '@prisma/client';
 import { addIcons } from 'ionicons';
 import {
   arrowRedoOutline,
   createOutline,
   documentTextOutline,
-  ellipsisHorizontalOutline,
+  ellipsisHorizontal,
   eyeOffOutline,
   trashOutline
 } from 'ionicons/icons';
 import { get } from 'lodash';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, Subscription } from 'rxjs';
 
 @Component({
-  selector: 'gf-accounts-table',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './accounts-table.component.html',
+  imports: [
+    CommonModule,
+    GfEntityLogoComponent,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule,
+    NgxSkeletonLoaderModule,
+    RouterModule
+  ],
+  selector: 'gf-accounts-table',
   styleUrls: ['./accounts-table.component.scss'],
-  standalone: false
+  templateUrl: './accounts-table.component.html'
 })
-export class AccountsTableComponent implements OnChanges, OnDestroy {
+export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Input() accounts: AccountModel[];
   @Input() baseCurrency: string;
   @Input() deviceType: string;
@@ -72,7 +90,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy {
       arrowRedoOutline,
       createOutline,
       documentTextOutline,
-      ellipsisHorizontalOutline,
+      ellipsisHorizontal,
       eyeOffOutline,
       trashOutline
     });

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -1,33 +0,0 @@
-import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AccountsTableComponent } from './accounts-table.component';
-
-@NgModule({
-  declarations: [AccountsTableComponent],
-  exports: [AccountsTableComponent],
-  imports: [
-    CommonModule,
-    GfEntityLogoComponent,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    MatSortModule,
-    MatTableModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAccountsTableModule {}

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
-import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
+import { GfAccountsTableComponent } from '@ghostfolio/client/components/accounts-table/accounts-table.component';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -71,7 +71,7 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
   host: { class: 'd-flex flex-column h-100' },
   imports: [
     CommonModule,
-    GfAccountsTableModule,
+    GfAccountsTableComponent,
     GfActivitiesTableComponent,
     GfDataProviderCreditsComponent,
     GfDialogFooterModule,

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -4,7 +4,7 @@ import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto
 import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { GfAccountDetailDialogModule } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.module';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
-import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
+import { GfAccountsTableComponent } from '@ghostfolio/client/components/accounts-table/accounts-table.component';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -30,7 +30,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba
   host: { class: 'has-fab page' },
   imports: [
     GfAccountDetailDialogModule,
-    GfAccountsTableModule,
+    GfAccountsTableComponent,
     MatButtonModule,
     RouterModule
   ],