From cc0dbff7e74befb541aed7074975ff75a084499b Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 22 Apr 2025 23:25:35 +0700
Subject: [PATCH] feat(client): add watchlist components

---
 .../home-watchlist.component.ts               | 57 +++++++++++++++++++
 .../home-watchlist/home-watchlist.html        | 24 ++++++++
 .../home-watchlist/home-watchlist.module.ts   | 16 ++++++
 .../home-watchlist/home-watchlist.scss        |  3 +
 4 files changed, 100 insertions(+)
 create mode 100644 apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
 create mode 100644 apps/client/src/app/components/home-watchlist/home-watchlist.html
 create mode 100644 apps/client/src/app/components/home-watchlist/home-watchlist.module.ts
 create mode 100644 apps/client/src/app/components/home-watchlist/home-watchlist.scss

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
new file mode 100644
index 000000000..8405120eb
--- /dev/null
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts
@@ -0,0 +1,57 @@
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { AssetProfileIdentifier, User } from '@ghostfolio/common/interfaces';
+
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'gf-home-watchlist',
+  styleUrls: ['./home-watchlist.scss'],
+  templateUrl: './home-watchlist.html',
+  standalone: false
+})
+export class HomeWatchlistComponent implements OnDestroy, OnInit {
+  public watchlist: AssetProfileIdentifier[];
+  public deviceType: string;
+  public user: User;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private userService: UserService
+  ) {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnInit() {
+    this.dataService
+      .fetchWatchlist()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((watchlist) => {
+        this.watchlist = watchlist;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.html b/apps/client/src/app/components/home-watchlist/home-watchlist.html
new file mode 100644
index 000000000..f722fbec8
--- /dev/null
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html
@@ -0,0 +1,24 @@
+<div class="container">
+  <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Watchlist</h1>
+  <div class="mb-3 row">
+    <div class="col-xs-12 col-md-8 offset-md-2">
+      <gf-benchmark
+        [benchmarks]="watchlist"
+        [deviceType]="deviceType"
+        [locale]="user?.settings?.locale || undefined"
+        [user]="user"
+      />
+    </div>
+  </div>
+</div>
+<div class="fab-container">
+  <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>
+</div>
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.module.ts b/apps/client/src/app/components/home-watchlist/home-watchlist.module.ts
new file mode 100644
index 000000000..c2f3331cd
--- /dev/null
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.module.ts
@@ -0,0 +1,16 @@
+import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { HomeWatchlistComponent } from './home-watchlist.component';
+
+@NgModule({
+  declarations: [HomeWatchlistComponent],
+  exports: [HomeWatchlistComponent],
+  imports: [CommonModule, GfBenchmarkComponent, MatButtonModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfHomeWatchlistModule {}
diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.scss b/apps/client/src/app/components/home-watchlist/home-watchlist.scss
new file mode 100644
index 000000000..5d4e87f30
--- /dev/null
+++ b/apps/client/src/app/components/home-watchlist/home-watchlist.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}