From 1e2c7e940f057f2628f98dfca8680c91ae6376e9 Mon Sep 17 00:00:00 2001
From: David Requeno <davidrequeno52@gmail.com>
Date: Thu, 21 May 2026 23:02:13 -0600
Subject: [PATCH 1/4] Task/extract FAB into a reusable component
 (GfPageFabComponent)

---
 .../admin-market-data.component.ts                 |  3 ++-
 .../admin-market-data/admin-market-data.html       |  4 ++--
 .../home-watchlist/home-watchlist.component.ts     |  2 ++
 .../components/home-watchlist/home-watchlist.html  |  4 ++--
 .../user-account-access.component.ts               |  3 ++-
 .../user-account-access/user-account-access.html   |  4 ++--
 .../app/pages/accounts/accounts-page.component.ts  | 10 ++++++++--
 .../src/app/pages/accounts/accounts-page.html      |  4 ++--
 .../activities/activities-page.component.ts        |  3 ++-
 .../portfolio/activities/activities-page.html      |  4 ++--
 apps/client/src/styles.scss                        | 11 -----------
 libs/ui/src/lib/page-fab/index.ts                  |  1 +
 libs/ui/src/lib/page-fab/page-fab.component.html   |  1 +
 libs/ui/src/lib/page-fab/page-fab.component.scss   | 14 ++++++++++++++
 libs/ui/src/lib/page-fab/page-fab.component.ts     |  9 +++++++++
 libs/ui/src/lib/page-tabs/page-tabs.component.scss |  6 ------
 16 files changed, 51 insertions(+), 32 deletions(-)
 create mode 100644 libs/ui/src/lib/page-fab/index.ts
 create mode 100644 libs/ui/src/lib/page-fab/page-fab.component.html
 create mode 100644 libs/ui/src/lib/page-fab/page-fab.component.scss
 create mode 100644 libs/ui/src/lib/page-fab/page-fab.component.ts

diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
index 28b7297d2..7fca190bc 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
@@ -19,6 +19,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfSymbolPipe } from '@ghostfolio/common/pipes';
 import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { AdminService, DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -80,10 +81,10 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'has-fab' },
   imports: [
     CommonModule,
     GfActivitiesFilterComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     GfSymbolPipe,
     GfValueComponent,
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index 14d12627d..b69ebbda5 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -332,7 +332,7 @@
     </div>
   </div>
 
-  <div class="fab-container">
+  <gf-page-fab>
     <a
       class="align-items-center d-flex justify-content-center"
       color="primary"
@@ -342,5 +342,5 @@
     >
       <ion-icon name="add-outline" size="large" />
     </a>
-  </div>
+  </gf-page-fab>
 </div>
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
index 7deace7de..2913ce637 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
@@ -8,6 +8,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -37,6 +38,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfBenchmarkComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,
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 c7c9a9c4b..e1242736e 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.html
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html
@@ -22,7 +22,7 @@
   </div>
 </div>
 @if (!hasImpersonationId && hasPermissionToCreateWatchlistItem) {
-  <div class="fab-container">
+  <gf-page-fab>
     <a
       class="align-items-center d-flex justify-content-center"
       color="primary"
@@ -32,5 +32,5 @@
     >
       <ion-icon name="add-outline" size="large" />
     </a>
-  </div>
+  </gf-page-fab>
 }
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
index 985dba2cb..aebdecc0e 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts
+++ b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
@@ -5,6 +5,7 @@ import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { NotificationService } from '@ghostfolio/ui/notifications';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -42,9 +43,9 @@ import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dial
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'has-fab' },
   imports: [
     GfAccessTableComponent,
+    GfPageFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html
index 412a2f8d2..c53807b35 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/apps/client/src/app/components/user-account-access/user-account-access.html
@@ -69,7 +69,7 @@
     (accessToUpdate)="onUpdateAccess($event)"
   />
   @if (hasPermissionToCreateAccess) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -79,6 +79,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 08513ef3e..59821901a 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -11,6 +11,7 @@ import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfAccountsTableComponent } from '@ghostfolio/ui/accounts-table';
 import { NotificationService } from '@ghostfolio/ui/notifications';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -36,8 +37,13 @@ import { TransferBalanceDialogParams } from './transfer-balance/interfaces/inter
 import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-balance-dialog.component';
 
 @Component({
-  host: { class: 'has-fab page' },
-  imports: [GfAccountsTableComponent, MatButtonModule, RouterModule],
+  host: { class: 'page' },
+  imports: [
+    GfAccountsTableComponent,
+    GfPageFabComponent,
+    MatButtonModule,
+    RouterModule
+  ],
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 3d9d7ee5c..65b93fa20 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -26,7 +26,7 @@
     hasPermissionToCreateAccount &&
     !user.settings.isRestrictedView
   ) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -36,6 +36,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
index e43af52c9..7face7763 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
@@ -12,6 +12,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
+import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -41,9 +42,9 @@ import { GfImportActivitiesDialogComponent } from './import-activities-dialog/im
 import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
 
 @Component({
-  host: { class: 'has-fab' },
   imports: [
     GfActivitiesTableComponent,
+    GfPageFabComponent,
     IonIcon,
     MatButtonModule,
     MatSnackBarModule,
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.html b/apps/client/src/app/pages/portfolio/activities/activities-page.html
index 2a72dcfd2..7c499e681 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.html
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html
@@ -43,7 +43,7 @@
     hasPermissionToCreateActivity &&
     !user.settings.isRestrictedView
   ) {
-    <div class="fab-container">
+    <gf-page-fab>
       <a
         class="align-items-center d-flex justify-content-center"
         color="primary"
@@ -53,6 +53,6 @@
       >
         <ion-icon name="add-outline" size="large" />
       </a>
-    </div>
+    </gf-page-fab>
   }
 </div>
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 1eb5bd2dd..4321622a1 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -360,10 +360,6 @@ ngx-skeleton-loader {
   text-wrap: balance;
 }
 
-.has-fab {
-  padding-bottom: 3rem !important;
-}
-
 .has-info-message {
   // Restrict viewport height of tabbed views when the Live Demo or system announcements banner are displayed
   .page:has(gf-page-tabs) {
@@ -484,13 +480,6 @@ ngx-skeleton-loader {
   padding-bottom: env(safe-area-inset-bottom);
   padding-bottom: constant(safe-area-inset-bottom);
 
-  .fab-container {
-    bottom: 2rem;
-    position: fixed;
-    right: 2rem;
-    z-index: 999;
-  }
-
   // Restrict viewport height and layout boundaries only when the page hosts tab navigation
   &:has(gf-page-tabs) {
     height: calc(100svh - var(--mat-toolbar-standard-height));
diff --git a/libs/ui/src/lib/page-fab/index.ts b/libs/ui/src/lib/page-fab/index.ts
new file mode 100644
index 000000000..0981acbf8
--- /dev/null
+++ b/libs/ui/src/lib/page-fab/index.ts
@@ -0,0 +1 @@
+export * from './page-fab.component';
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.html b/libs/ui/src/lib/page-fab/page-fab.component.html
new file mode 100644
index 000000000..40b372640
--- /dev/null
+++ b/libs/ui/src/lib/page-fab/page-fab.component.html
@@ -0,0 +1 @@
+<ng-content />
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.scss b/libs/ui/src/lib/page-fab/page-fab.component.scss
new file mode 100644
index 000000000..ab6353981
--- /dev/null
+++ b/libs/ui/src/lib/page-fab/page-fab.component.scss
@@ -0,0 +1,14 @@
+:host {
+  bottom: calc(constant(safe-area-inset-bottom) + 2rem);
+  bottom: calc(env(safe-area-inset-bottom) + 2rem);
+  position: fixed;
+  right: 2rem;
+  z-index: 999;
+}
+
+:host-context(gf-page-tabs) {
+  @media (max-width: 575.98px) {
+    bottom: calc(constant(safe-area-inset-bottom) + 5rem);
+    bottom: calc(env(safe-area-inset-bottom) + 5rem);
+  }
+}
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.ts b/libs/ui/src/lib/page-fab/page-fab.component.ts
new file mode 100644
index 000000000..f716388c1
--- /dev/null
+++ b/libs/ui/src/lib/page-fab/page-fab.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-page-fab',
+  styleUrls: ['./page-fab.component.scss'],
+  templateUrl: './page-fab.component.html'
+})
+export class GfPageFabComponent {}
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.scss b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
index 920b00ae9..0b377e57a 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.scss
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.scss
@@ -15,12 +15,6 @@
   );
 
   ::ng-deep {
-    .fab-container {
-      @media (max-width: 575.98px) {
-        bottom: 5rem;
-      }
-    }
-
     .mat-mdc-tab-nav-panel {
       padding: 2rem 0;
 

From c9d88b4dd7a6f0802c996ab2f825995b386f76ca Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 22 May 2026 21:56:55 +0200
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a327edf2..cd1ecc0c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extracted the floating action buttons (FAB) to a reusable component
+- Configured the queues to keep the last `5000` completed jobs with a maximum age of one week
 - Removed the deprecated attributes (`assetClass`, `countries`, `currency`, `dataSource`, `name`, `sectors`, `symbol` and `url`) from the holdings of the public portfolio endpoint response
 - Removed the deprecated `api/v1/order` endpoints
 - Upgraded `@keyv/redis` from version `4.4.0` to `5.1.6`

From 689981201559be65543c49b163ff7e612a072e30 Mon Sep 17 00:00:00 2001
From: David Requeno <davidrequeno52@gmail.com>
Date: Sat, 23 May 2026 17:13:19 -0600
Subject: [PATCH 3/4] refactor(ui): extract reusable gf-fab component and
 simplify FAB usage

---
 .../admin-market-data.component.ts               |  4 ++--
 .../admin-market-data/admin-market-data.html     | 12 +-----------
 .../home-watchlist/home-watchlist.component.ts   |  4 ++--
 .../home-watchlist/home-watchlist.html           | 12 +-----------
 .../user-account-access.component.ts             |  4 ++--
 .../user-account-access/user-account-access.html | 12 +-----------
 .../pages/accounts/accounts-page.component.ts    |  4 ++--
 .../src/app/pages/accounts/accounts-page.html    | 12 +-----------
 .../activities/activities-page.component.ts      |  4 ++--
 .../portfolio/activities/activities-page.html    | 12 +-----------
 libs/ui/src/lib/fab/fab.component.html           |  9 +++++++++
 .../fab.component.scss}                          |  0
 libs/ui/src/lib/fab/fab.component.ts             | 16 ++++++++++++++++
 libs/ui/src/lib/fab/index.ts                     |  1 +
 libs/ui/src/lib/page-fab/index.ts                |  1 -
 libs/ui/src/lib/page-fab/page-fab.component.html |  1 -
 libs/ui/src/lib/page-fab/page-fab.component.ts   |  9 ---------
 17 files changed, 41 insertions(+), 76 deletions(-)
 create mode 100644 libs/ui/src/lib/fab/fab.component.html
 rename libs/ui/src/lib/{page-fab/page-fab.component.scss => fab/fab.component.scss} (100%)
 create mode 100644 libs/ui/src/lib/fab/fab.component.ts
 create mode 100644 libs/ui/src/lib/fab/index.ts
 delete mode 100644 libs/ui/src/lib/page-fab/index.ts
 delete mode 100644 libs/ui/src/lib/page-fab/page-fab.component.html
 delete mode 100644 libs/ui/src/lib/page-fab/page-fab.component.ts

diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
index 7fca190bc..805adf89d 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
@@ -18,8 +18,8 @@ import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfSymbolPipe } from '@ghostfolio/common/pipes';
 import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter';
+import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { translate } from '@ghostfolio/ui/i18n';
-import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { AdminService, DataService } from '@ghostfolio/ui/services';
 import { GfValueComponent } from '@ghostfolio/ui/value';
@@ -84,7 +84,7 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
   imports: [
     CommonModule,
     GfActivitiesFilterComponent,
-    GfPageFabComponent,
+    GfFabComponent,
     GfPremiumIndicatorComponent,
     GfSymbolPipe,
     GfValueComponent,
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index b69ebbda5..63d425513 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -332,15 +332,5 @@
     </div>
   </div>
 
-  <gf-page-fab>
-    <a
-      class="align-items-center d-flex justify-content-center"
-      color="primary"
-      mat-fab
-      [queryParams]="{ createAssetProfileDialog: true }"
-      [routerLink]="[]"
-    >
-      <ion-icon name="add-outline" size="large" />
-    </a>
-  </gf-page-fab>
+  <gf-fab [queryParams]="{ createAssetProfileDialog: true }" />
 </div>
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
index 2913ce637..7fb951ff5 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
-import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
+import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -38,7 +38,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfBenchmarkComponent,
-    GfPageFabComponent,
+    GfFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,
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 e1242736e..e2865b9cf 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.html
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html
@@ -22,15 +22,5 @@
   </div>
 </div>
 @if (!hasImpersonationId && hasPermissionToCreateWatchlistItem) {
-  <gf-page-fab>
-    <a
-      class="align-items-center d-flex justify-content-center"
-      color="primary"
-      mat-fab
-      [queryParams]="{ createWatchlistItemDialog: true }"
-      [routerLink]="[]"
-    >
-      <ion-icon name="add-outline" size="large" />
-    </a>
-  </gf-page-fab>
+  <gf-fab [queryParams]="{ createWatchlistItemDialog: true }" />
 }
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
index aebdecc0e..eef50cee3 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts
+++ b/apps/client/src/app/components/user-account-access/user-account-access.component.ts
@@ -4,8 +4,8 @@ import { CreateAccessDto } from '@ghostfolio/common/dtos';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { NotificationService } from '@ghostfolio/ui/notifications';
-import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 import { DataService } from '@ghostfolio/ui/services';
 
@@ -45,7 +45,7 @@ import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dial
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfAccessTableComponent,
-    GfPageFabComponent,
+    GfFabComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
     MatButtonModule,
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html
index c53807b35..62b1648bb 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/apps/client/src/app/components/user-account-access/user-account-access.html
@@ -69,16 +69,6 @@
     (accessToUpdate)="onUpdateAccess($event)"
   />
   @if (hasPermissionToCreateAccess) {
-    <gf-page-fab>
-      <a
-        class="align-items-center d-flex justify-content-center"
-        color="primary"
-        mat-fab
-        [queryParams]="{ createDialog: true }"
-        [routerLink]="[]"
-      >
-        <ion-icon name="add-outline" size="large" />
-      </a>
-    </gf-page-fab>
+    <gf-fab [queryParams]="{ createDialog: true }" />
   }
 </div>
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 59821901a..a02a88592 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -10,8 +10,8 @@ import {
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfAccountsTableComponent } from '@ghostfolio/ui/accounts-table';
+import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { NotificationService } from '@ghostfolio/ui/notifications';
-import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -40,7 +40,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba
   host: { class: 'page' },
   imports: [
     GfAccountsTableComponent,
-    GfPageFabComponent,
+    GfFabComponent,
     MatButtonModule,
     RouterModule
   ],
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 65b93fa20..1bdedbbb9 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -26,16 +26,6 @@
     hasPermissionToCreateAccount &&
     !user.settings.isRestrictedView
   ) {
-    <gf-page-fab>
-      <a
-        class="align-items-center d-flex justify-content-center"
-        color="primary"
-        mat-fab
-        [queryParams]="{ createDialog: true }"
-        [routerLink]="[]"
-      >
-        <ion-icon name="add-outline" size="large" />
-      </a>
-    </gf-page-fab>
+    <gf-fab [queryParams]="{ createDialog: true }" />
   }
 </div>
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
index 7face7763..f2a298500 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
@@ -12,7 +12,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
-import { GfPageFabComponent } from '@ghostfolio/ui/page-fab';
+import { GfFabComponent } from '@ghostfolio/ui/fab';
 import { DataService } from '@ghostfolio/ui/services';
 
 import {
@@ -44,7 +44,7 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa
 @Component({
   imports: [
     GfActivitiesTableComponent,
-    GfPageFabComponent,
+    GfFabComponent,
     IonIcon,
     MatButtonModule,
     MatSnackBarModule,
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.html b/apps/client/src/app/pages/portfolio/activities/activities-page.html
index 7c499e681..f06947988 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.html
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html
@@ -43,16 +43,6 @@
     hasPermissionToCreateActivity &&
     !user.settings.isRestrictedView
   ) {
-    <gf-page-fab>
-      <a
-        class="align-items-center d-flex justify-content-center"
-        color="primary"
-        mat-fab
-        [queryParams]="{ createDialog: true }"
-        [routerLink]="[]"
-      >
-        <ion-icon name="add-outline" size="large" />
-      </a>
-    </gf-page-fab>
+    <gf-fab [queryParams]="{ createDialog: true }" />
   }
 </div>
diff --git a/libs/ui/src/lib/fab/fab.component.html b/libs/ui/src/lib/fab/fab.component.html
new file mode 100644
index 000000000..8fb49de1c
--- /dev/null
+++ b/libs/ui/src/lib/fab/fab.component.html
@@ -0,0 +1,9 @@
+<a
+  class="align-items-center d-flex justify-content-center"
+  color="primary"
+  mat-fab
+  [queryParams]="queryParams()"
+  [routerLink]="[]"
+>
+  <ion-icon size="large" [name]="icon()" />
+</a>
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.scss b/libs/ui/src/lib/fab/fab.component.scss
similarity index 100%
rename from libs/ui/src/lib/page-fab/page-fab.component.scss
rename to libs/ui/src/lib/fab/fab.component.scss
diff --git a/libs/ui/src/lib/fab/fab.component.ts b/libs/ui/src/lib/fab/fab.component.ts
new file mode 100644
index 000000000..7a4a4c169
--- /dev/null
+++ b/libs/ui/src/lib/fab/fab.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { Params, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [IonIcon, MatButtonModule, RouterModule],
+  selector: 'gf-fab',
+  styleUrls: ['./fab.component.scss'],
+  templateUrl: './fab.component.html'
+})
+export class GfFabComponent {
+  public readonly icon = input('add-outline');
+  public readonly queryParams = input.required<Params>();
+}
diff --git a/libs/ui/src/lib/fab/index.ts b/libs/ui/src/lib/fab/index.ts
new file mode 100644
index 000000000..d03295245
--- /dev/null
+++ b/libs/ui/src/lib/fab/index.ts
@@ -0,0 +1 @@
+export * from './fab.component';
diff --git a/libs/ui/src/lib/page-fab/index.ts b/libs/ui/src/lib/page-fab/index.ts
deleted file mode 100644
index 0981acbf8..000000000
--- a/libs/ui/src/lib/page-fab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './page-fab.component';
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.html b/libs/ui/src/lib/page-fab/page-fab.component.html
deleted file mode 100644
index 40b372640..000000000
--- a/libs/ui/src/lib/page-fab/page-fab.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content />
diff --git a/libs/ui/src/lib/page-fab/page-fab.component.ts b/libs/ui/src/lib/page-fab/page-fab.component.ts
deleted file mode 100644
index f716388c1..000000000
--- a/libs/ui/src/lib/page-fab/page-fab.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'gf-page-fab',
-  styleUrls: ['./page-fab.component.scss'],
-  templateUrl: './page-fab.component.html'
-})
-export class GfPageFabComponent {}

From 31cbb6e4690859bb9aa0c6cb050742e968de43ac Mon Sep 17 00:00:00 2001
From: David Requeno <davidrequeno52@gmail.com>
Date: Sun, 24 May 2026 21:04:24 -0600
Subject: [PATCH 4/4] refactor(client): remove unused FAB-related imports after
 gf-fab extraction

---
 .../home-watchlist/home-watchlist.component.ts       |  8 --------
 .../app/pages/accounts/accounts-page.component.ts    | 12 +-----------
 .../activities/activities-page.component.ts          |  8 --------
 3 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
index 7fb951ff5..22d829daa 100644
--- a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
@@ -23,12 +23,8 @@ import {
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 import { GfCreateWatchlistItemDialogComponent } from './create-watchlist-item-dialog/create-watchlist-item-dialog.component';
@@ -40,8 +36,6 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
     GfBenchmarkComponent,
     GfFabComponent,
     GfPremiumIndicatorComponent,
-    IonIcon,
-    MatButtonModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -110,8 +104,6 @@ export class GfHomeWatchlistComponent implements OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
-
-    addIcons({ addOutline });
   }
 
   public ngOnInit() {
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index a02a88592..cca1eda03 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -21,12 +21,9 @@ import {
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
-import { addIcons } from 'ionicons';
-import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { EMPTY, Subscription } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -38,12 +35,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba
 
 @Component({
   host: { class: 'page' },
-  imports: [
-    GfAccountsTableComponent,
-    GfFabComponent,
-    MatButtonModule,
-    RouterModule
-  ],
+  imports: [GfAccountsTableComponent, GfFabComponent, RouterModule],
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'
@@ -96,8 +88,6 @@ export class GfAccountsPageComponent implements OnInit {
           this.openTransferBalanceDialog();
         }
       });
-
-    addIcons({ addOutline });
   }
 
   public ngOnInit() {
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
index f2a298500..41ff570c2 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
@@ -22,17 +22,13 @@ import {
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { PageEvent } from '@angular/material/paginator';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Sort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
 import { format, parseISO } from 'date-fns';
-import { addIcons } from 'ionicons';
-import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subscription } from 'rxjs';
 
@@ -45,8 +41,6 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa
   imports: [
     GfActivitiesTableComponent,
     GfFabComponent,
-    IonIcon,
-    MatButtonModule,
     MatSnackBarModule,
     RouterModule
   ],
@@ -108,8 +102,6 @@ export class GfActivitiesPageComponent implements OnInit {
           }
         }
       });
-
-    addIcons({ addOutline });
   }
 
   public ngOnInit() {