Handle permissions

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -1,7 +1,9 @@
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Benchmark, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -24,7 +26,13 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfBenchmarkComponent, MatButtonModule, RouterModule],
+  imports: [
+    CommonModule,
+    GfBenchmarkComponent,
+    GfPremiumIndicatorComponent,
+    MatButtonModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-watchlist',
   styleUrls: ['./home-watchlist.scss'],
@@ -32,6 +40,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
 })
 export class HomeWatchlistComponent implements OnDestroy, OnInit {
   public deviceType: string;
+  public hasPermissionToCreateWatchlistItem: boolean;
   public user: User;
   public watchlist: Benchmark[];
 
@@ -62,6 +71,11 @@ export class HomeWatchlistComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateWatchlistItem = hasPermission(
+            this.user.permissions,
+            permissions.createWatchlistItem
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/app/components/home-watchlist/home-watchlist.html

@@ -1,5 +1,12 @@
 <div class="container">
-  <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Watchlist</h1>
+  <h1 class="d-none d-sm-block h3 mb-4">
+    <span class="align-items-center d-flex justify-content-center">
+      <span i18n>Watchlist</span>
+      @if (user?.subscription?.type === 'Basic') {
+        <gf-premium-indicator class="ml-1" />
+      }
+    </span>
+  </h1>
   <div class="mb-3 row">
     <div class="col-xs-12 col-md-8 offset-md-2">
       <gf-benchmark
@@ -11,14 +18,16 @@
     </div>
   </div>
 </div>
-<div class="fab-container">
-  <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>
-</div>
+@if (hasPermissionToCreateWatchlistItem) {
+  <div class="fab-container">
+    <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>
+  </div>
+}