From 24acbc103fbaf287569c588abb6dd1f3e1a3636f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 17 Sep 2026 20:44:01 +0200
Subject: [PATCH] Add previous and next navigation

---
 .../product-page.component.ts                     |  6 ++++++
 .../personal-finance-tools/product-page.html      | 15 ++++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
index 848259ee13..222a4028ac 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts
@@ -96,6 +96,8 @@ export class GfProductPageComponent {
   protected readonly routerLinkResourcesPersonalFinanceTools =
     publicRoutes.resources.subRoutes.personalFinanceTools.routerLink;
 
+  protected readonly titlePrefix = $localize`The Open Source Alternative to`;
+
   protected readonly nextProduct = computed(() => {
     return this.sortedPersonalFinanceTools[this.getCurrentProductIndex() + 1];
   });
@@ -166,6 +168,10 @@ export class GfProductPageComponent {
     ];
   }
 
+  protected getProductTitle(product?: Product) {
+    return `Ghostfolio: ${this.titlePrefix} ${product?.name ?? ''}`;
+  }
+
   private getCurrentProductIndex() {
     return this.sortedPersonalFinanceTools.findIndex(({ key }) => {
       return key === this.product2().key;
diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
index f76383ccd7..01fb9a39d0 100644
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.html
@@ -4,9 +4,8 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">
-            <strong>Ghostfolio</strong>:
-            <ng-container i18n>The Open Source Alternative to</ng-container
-            >&nbsp;<strong>{{ product2().name }}</strong>
+            <strong>Ghostfolio</strong>: {{ titlePrefix }}
+            <strong>{{ product2().name }}</strong>
           </h1>
         </div>
         @if (product2().isArchived) {
@@ -392,11 +391,8 @@
           @if (previousProduct()) {
             <a
               class="font-weight-light link-primary text-decoration-none small"
-              i18n-title
-              title="Ghostfolio: The Open Source Alternative to {{
-                previousProduct()?.name
-              }}"
               [routerLink]="getProductRouterLink(previousProduct())"
+              [title]="getProductTitle(previousProduct())"
               >← <span i18n>Previous</span></a
             >
           } @else {
@@ -405,11 +401,8 @@
           @if (nextProduct()) {
             <a
               class="font-weight-light link-primary text-decoration-none small"
-              i18n-title
-              title="Ghostfolio: The Open Source Alternative to {{
-                nextProduct()?.name
-              }}"
               [routerLink]="getProductRouterLink(nextProduct())"
+              [title]="getProductTitle(nextProduct())"
               ><span i18n>Next</span> →</a
             >
           }