From 620ae023d9ac8c1f3450c8f4285a373b6b57a130 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 4 May 2025 11:17:15 +0200
Subject: [PATCH] Feature/move watchlist to general availability (#4653)

* Add watchlist to features page

* Move watchlist to general availability

* Update changelog
---
 CHANGELOG.md                                  |  5 +++
 .../src/app/pages/features/features-page.html | 45 +++++++++++++------
 .../src/app/pages/home/home-page.component.ts | 12 ++---
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea0e682f8..a124432f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the watchlist to the features page
+
 ### Changed
 
+- Moved the watchlist from experimental to general availability
 - Deprecated the endpoint to get a portfolio position in favor of get a holding
 - Deprecated the endpoint to update portfolio position tags in favor of update holding tags
 - Upgraded `prisma` from version `6.6.0` to `6.7.0`
diff --git a/apps/client/src/app/pages/features/features-page.html b/apps/client/src/app/pages/features/features-page.html
index aa2ae3725..30b1af29c 100644
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@@ -175,10 +175,15 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex" i18n>Dark Mode</h4>
+                <h4 class="align-items-center d-flex">
+                  <span i18n>Static Analysis</span>
+                  @if (hasPermissionForSubscription) {
+                    <gf-premium-indicator class="ml-1" />
+                  }
+                </h4>
                 <p class="m-0">
-                  Ghostfolio automatically switches to a dark color theme based
-                  on your operating system's preferences.
+                  Identify potential risks in your portfolio with Ghostfolio
+                  X-ray, the static portfolio analysis.
                 </p>
               </div>
             </mat-card-content>
@@ -188,10 +193,14 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex" i18n>Zen Mode</h4>
+                <h4 class="align-items-center d-flex">
+                  <span i18n>Watchlist</span>
+                  @if (hasPermissionForSubscription) {
+                    <gf-premium-indicator class="ml-1" />
+                  }
+                </h4>
                 <p class="m-0">
-                  Keep calm and activate Zen Mode if the markets are going
-                  crazy.
+                  Follow assets you are interested in closely on your watchlist.
                 </p>
               </div>
             </mat-card-content>
@@ -221,15 +230,23 @@
           <mat-card appearance="outlined" class="d-flex flex-column h-100">
             <mat-card-content>
               <div class="flex-grow-1">
-                <h4 class="align-items-center d-flex">
-                  <span i18n>Static Analysis</span>
-                  @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="ml-1" />
-                  }
-                </h4>
+                <h4 class="align-items-center d-flex" i18n>Dark Mode</h4>
                 <p class="m-0">
-                  Identify potential risks in your portfolio with Ghostfolio
-                  X-ray, the static portfolio analysis.
+                  Ghostfolio automatically switches to a dark color theme based
+                  on your operating system's preferences.
+                </p>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex" i18n>Zen Mode</h4>
+                <p class="m-0">
+                  Keep calm and activate Zen Mode if the markets are going
+                  crazy.
                 </p>
               </div>
             </mat-card-content>
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 928ad2931..ec49143a8 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/apps/client/src/app/pages/home/home-page.component.ts
@@ -48,18 +48,18 @@ export class HomePageComponent implements OnDestroy, OnInit {
               label: $localize`Summary`,
               path: ['/home', 'summary']
             },
+            {
+              iconName: 'bookmark-outline',
+              label: $localize`Watchlist`,
+              path: ['/home', 'watchlist']
+            },
             {
               iconName: 'newspaper-outline',
               label: $localize`Markets`,
               path: ['/home', 'market']
-            },
-            {
-              iconName: 'bookmark-outline',
-              label: $localize`Watchlist`,
-              path: ['/home', 'watchlist'],
-              showCondition: this.user?.settings?.isExperimentalFeatures
             }
           ];
+
           this.user = state.user;
 
           this.changeDetectorRef.markForCheck();