From 14006606648c31f68443fbe812c7954b2ebaff0f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 15 Jun 2025 08:40:19 +0200
Subject: [PATCH] Feature/refactor tab configuration (#4930)

* Refactor path to routerLink
---
 .../app/pages/about/about-page.component.ts   | 12 ++++++------
 .../src/app/pages/about/about-page.html       |  2 +-
 .../app/pages/admin/admin-page.component.ts   | 10 +++++-----
 .../src/app/pages/admin/admin-page.html       |  2 +-
 .../src/app/pages/faq/faq-page.component.ts   |  6 +++---
 apps/client/src/app/pages/faq/faq-page.html   |  2 +-
 .../src/app/pages/home/home-page.component.ts | 10 +++++-----
 apps/client/src/app/pages/home/home-page.html |  2 +-
 .../portfolio/portfolio-page.component.ts     | 12 +++++++-----
 .../app/pages/portfolio/portfolio-page.html   |  2 +-
 .../resources/resources-page.component.ts     | 19 ++++++++++---------
 .../app/pages/resources/resources-page.html   |  2 +-
 .../user-account-page.component.ts            |  9 ++++++---
 .../pages/user-account/user-account-page.html |  2 +-
 .../src/app/pages/zen/zen-page.component.ts   |  4 ++--
 apps/client/src/app/pages/zen/zen-page.html   |  2 +-
 .../interfaces/tab-configuration.interface.ts |  2 +-
 17 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/apps/client/src/app/pages/about/about-page.component.ts b/apps/client/src/app/pages/about/about-page.component.ts
index 5d33ab3ca..6e53d76b9 100644
--- a/apps/client/src/app/pages/about/about-page.component.ts
+++ b/apps/client/src/app/pages/about/about-page.component.ts
@@ -44,17 +44,17 @@ export class AboutPageComponent implements OnDestroy, OnInit {
           {
             iconName: 'information-circle-outline',
             label: $localize`About`,
-            path: ['/' + routes.about]
+            routerLink: ['/' + routes.about]
           },
           {
             iconName: 'sparkles-outline',
             label: $localize`Changelog`,
-            path: ['/' + routes.about, routes.changelog]
+            routerLink: ['/' + routes.about, routes.changelog]
           },
           {
             iconName: 'ribbon-outline',
             label: $localize`License`,
-            path: ['/' + routes.about, routes.license],
+            routerLink: ['/' + routes.about, routes.license],
             showCondition: !this.hasPermissionForSubscription
           }
         ];
@@ -63,14 +63,14 @@ export class AboutPageComponent implements OnDestroy, OnInit {
           this.tabs.push({
             iconName: 'shield-checkmark-outline',
             label: $localize`Privacy Policy`,
-            path: ['/' + routes.about, routes.privacyPolicy],
+            routerLink: ['/' + routes.about, routes.privacyPolicy],
             showCondition: this.hasPermissionForSubscription
           });
 
           this.tabs.push({
             iconName: 'document-text-outline',
             label: $localize`Terms of Service`,
-            path: ['/' + routes.about, routes.termsOfService],
+            routerLink: ['/' + routes.about, routes.termsOfService],
             showCondition: this.hasPermissionForSubscription
           });
 
@@ -82,7 +82,7 @@ export class AboutPageComponent implements OnDestroy, OnInit {
         this.tabs.push({
           iconName: 'happy-outline',
           label: publicRoutes.about.subRoutes.ossFriends.title,
-          path: publicRoutes.about.subRoutes.ossFriends.routerLink
+          routerLink: publicRoutes.about.subRoutes.ossFriends.routerLink
         });
       });
   }
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/admin/admin-page.component.ts b/apps/client/src/app/pages/admin/admin-page.component.ts
index 38cbf545b..5c9f0e063 100644
--- a/apps/client/src/app/pages/admin/admin-page.component.ts
+++ b/apps/client/src/app/pages/admin/admin-page.component.ts
@@ -27,27 +27,27 @@ export class AdminPageComponent implements OnDestroy, OnInit {
       {
         iconName: 'reader-outline',
         label: $localize`Overview`,
-        path: ['/' + routes.adminControl]
+        routerLink: ['/' + routes.adminControl]
       },
       {
         iconName: 'settings-outline',
         label: $localize`Settings`,
-        path: ['/' + routes.adminControl, routes.settings]
+        routerLink: ['/' + routes.adminControl, routes.settings]
       },
       {
         iconName: 'server-outline',
         label: $localize`Market Data`,
-        path: ['/' + routes.adminControl, routes.marketData]
+        routerLink: ['/' + routes.adminControl, routes.marketData]
       },
       {
         iconName: 'flash-outline',
         label: $localize`Job Queue`,
-        path: ['/' + routes.adminControl, routes.jobs]
+        routerLink: ['/' + routes.adminControl, routes.jobs]
       },
       {
         iconName: 'people-outline',
         label: $localize`Users`,
-        path: ['/' + routes.adminControl, routes.users]
+        routerLink: ['/' + routes.adminControl, routes.users]
       }
     ];
   }
diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/faq/faq-page.component.ts b/apps/client/src/app/pages/faq/faq-page.component.ts
index 93786e1ea..27f642c2f 100644
--- a/apps/client/src/app/pages/faq/faq-page.component.ts
+++ b/apps/client/src/app/pages/faq/faq-page.component.ts
@@ -36,18 +36,18 @@ export class FaqPageComponent implements OnDestroy, OnInit {
       {
         iconName: 'reader-outline',
         label: $localize`General`,
-        path: ['/' + routes.faq]
+        routerLink: ['/' + routes.faq]
       },
       {
         iconName: 'cloudy-outline',
         label: $localize`Cloud` + ' (SaaS)',
-        path: ['/' + routes.faq, routes.saas],
+        routerLink: ['/' + routes.faq, routes.saas],
         showCondition: this.hasPermissionForSubscription
       },
       {
         iconName: 'server-outline',
         label: $localize`Self-Hosting`,
-        path: ['/' + routes.faq, routes.selfHosting]
+        routerLink: ['/' + routes.faq, routes.selfHosting]
       }
     ];
   }
diff --git a/apps/client/src/app/pages/faq/faq-page.html b/apps/client/src/app/pages/faq/faq-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/faq/faq-page.html
+++ b/apps/client/src/app/pages/faq/faq-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts
index fc5f26776..68d93520a 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/apps/client/src/app/pages/home/home-page.component.ts
@@ -37,27 +37,27 @@ export class HomePageComponent implements OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: internalRoutes.home.title,
-              path: internalRoutes.home.routerLink
+              routerLink: internalRoutes.home.routerLink
             },
             {
               iconName: 'wallet-outline',
               label: internalRoutes.home.subRoutes.holdings.title,
-              path: internalRoutes.home.subRoutes.holdings.routerLink
+              routerLink: internalRoutes.home.subRoutes.holdings.routerLink
             },
             {
               iconName: 'reader-outline',
               label: internalRoutes.home.subRoutes.summary.title,
-              path: internalRoutes.home.subRoutes.summary.routerLink
+              routerLink: internalRoutes.home.subRoutes.summary.routerLink
             },
             {
               iconName: 'bookmark-outline',
               label: internalRoutes.home.subRoutes.watchlist.title,
-              path: internalRoutes.home.subRoutes.watchlist.routerLink
+              routerLink: internalRoutes.home.subRoutes.watchlist.routerLink
             },
             {
               iconName: 'newspaper-outline',
               label: $localize`Markets`,
-              path: ['/' + internalRoutes.home.path, routes.market]
+              routerLink: ['/' + internalRoutes.home.path, routes.market]
             }
           ];
 
diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/apps/client/src/app/pages/home/home-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
index 0503418a3..6c1fb205b 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
@@ -34,27 +34,29 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: internalRoutes.portfolio.subRoutes.analysis.title,
-              path: internalRoutes.portfolio.routerLink
+              routerLink: internalRoutes.portfolio.routerLink
             },
             {
               iconName: 'swap-vertical-outline',
               label: internalRoutes.portfolio.subRoutes.activities.title,
-              path: internalRoutes.portfolio.subRoutes.activities.routerLink
+              routerLink:
+                internalRoutes.portfolio.subRoutes.activities.routerLink
             },
             {
               iconName: 'pie-chart-outline',
               label: internalRoutes.portfolio.subRoutes.allocations.title,
-              path: internalRoutes.portfolio.subRoutes.allocations.routerLink
+              routerLink:
+                internalRoutes.portfolio.subRoutes.allocations.routerLink
             },
             {
               iconName: 'calculator-outline',
               label: internalRoutes.portfolio.subRoutes.fire.title,
-              path: internalRoutes.portfolio.subRoutes.fire.routerLink
+              routerLink: internalRoutes.portfolio.subRoutes.fire.routerLink
             },
             {
               iconName: 'scan-outline',
               label: internalRoutes.portfolio.subRoutes.xRay.title,
-              path: internalRoutes.portfolio.subRoutes.xRay.routerLink
+              routerLink: internalRoutes.portfolio.subRoutes.xRay.routerLink
             }
           ];
           this.user = state.user;
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.html b/apps/client/src/app/pages/portfolio/portfolio-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.html
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/resources/resources-page.component.ts b/apps/client/src/app/pages/resources/resources-page.component.ts
index 770d463bd..ffe683d70 100644
--- a/apps/client/src/app/pages/resources/resources-page.component.ts
+++ b/apps/client/src/app/pages/resources/resources-page.component.ts
@@ -1,3 +1,4 @@
+import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { routes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnInit } from '@angular/core';
@@ -13,26 +14,26 @@ import { Subject } from 'rxjs';
 })
 export class ResourcesPageComponent implements OnInit {
   public deviceType: string;
-  public tabs = [
+  public tabs: TabConfiguration[] = [
     {
-      path: '.',
+      iconName: 'reader-outline',
       label: $localize`Overview`,
-      iconName: 'reader-outline'
+      routerLink: ['/' + routes.resources]
     },
     {
-      path: routes.guides,
       label: $localize`Guides`,
-      iconName: 'book-outline'
+      iconName: 'book-outline',
+      routerLink: ['/' + routes.resources, routes.guides]
     },
     {
-      path: routes.markets,
+      iconName: 'newspaper-outline',
       label: $localize`Markets`,
-      iconName: 'newspaper-outline'
+      routerLink: ['/' + routes.resources, routes.markets]
     },
     {
-      path: routes.glossary,
+      iconName: 'library-outline',
       label: $localize`Glossary`,
-      iconName: 'library-outline'
+      routerLink: ['/' + routes.resources, routes.glossary]
     }
   ];
 
diff --git a/apps/client/src/app/pages/resources/resources-page.html b/apps/client/src/app/pages/resources/resources-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/resources/resources-page.html
+++ b/apps/client/src/app/pages/resources/resources-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/user-account/user-account-page.component.ts b/apps/client/src/app/pages/user-account/user-account-page.component.ts
index 3547365c9..278812dc6 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.component.ts
+++ b/apps/client/src/app/pages/user-account/user-account-page.component.ts
@@ -35,18 +35,21 @@ export class UserAccountPageComponent implements OnDestroy, OnInit {
             {
               iconName: 'settings-outline',
               label: internalRoutes.account.title,
-              path: internalRoutes.account.routerLink
+              routerLink: internalRoutes.account.routerLink
             },
             {
               iconName: 'diamond-outline',
               label: $localize`Membership`,
-              path: ['/' + internalRoutes.account.path, routes.membership],
+              routerLink: [
+                '/' + internalRoutes.account.path,
+                routes.membership
+              ],
               showCondition: !!this.user?.subscription
             },
             {
               iconName: 'key-outline',
               label: $localize`Access`,
-              path: ['/' + internalRoutes.account.path, routes.access]
+              routerLink: ['/' + internalRoutes.account.path, routes.access]
             }
           ];
 
diff --git a/apps/client/src/app/pages/user-account/user-account-page.html b/apps/client/src/app/pages/user-account/user-account-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/user-account/user-account-page.html
+++ b/apps/client/src/app/pages/user-account/user-account-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts
index 004ddab60..9cdf5e692 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/apps/client/src/app/pages/zen/zen-page.component.ts
@@ -34,12 +34,12 @@ export class ZenPageComponent implements OnDestroy, OnInit {
             {
               iconName: 'analytics-outline',
               label: internalRoutes.zen.title,
-              path: internalRoutes.zen.routerLink
+              routerLink: internalRoutes.zen.routerLink
             },
             {
               iconName: 'wallet-outline',
               label: internalRoutes.zen.subRoutes.holdings.title,
-              path: internalRoutes.zen.subRoutes.holdings.routerLink
+              routerLink: internalRoutes.zen.subRoutes.holdings.routerLink
             }
           ];
           this.user = state.user;
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index a9dbee450..af3b24b0a 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -16,7 +16,7 @@
         mat-tab-link
         routerLinkActive
         [active]="rla.isActive"
-        [routerLink]="tab.path"
+        [routerLink]="tab.routerLink"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         <ion-icon
diff --git a/libs/common/src/lib/interfaces/tab-configuration.interface.ts b/libs/common/src/lib/interfaces/tab-configuration.interface.ts
index e475e3efc..7b18b26ec 100644
--- a/libs/common/src/lib/interfaces/tab-configuration.interface.ts
+++ b/libs/common/src/lib/interfaces/tab-configuration.interface.ts
@@ -1,6 +1,6 @@
 export interface TabConfiguration {
   iconName: string;
   label: string;
-  path: string[];
+  routerLink: string[];
   showCondition?: boolean;
 }