Add no transactions info to zen page

apps/client/src/app/components/header/header.module.ts

@@ -6,7 +6,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 
-import { GfLogoModule } from '../logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 import { HeaderComponent } from './header.component';
 
 @NgModule({

apps/client/src/app/components/logo/logo.component.html

@@ -1,4 +1,4 @@
 <span class="align-items-center d-flex"
   ><span class="d-inline-block logo mr-1"></span>
-  <span class="name">Ghostfolio</span></span
+  <span *ngIf="!hideName" class="name">Ghostfolio</span></span
 >

apps/client/src/app/components/logo/logo.component.ts

@@ -14,10 +14,12 @@ import {
 })
 export class LogoComponent implements OnInit {
   @HostBinding('class') @Input() size: 'large' | 'medium';
+  @Input() hideName: boolean;
 
   public constructor() {}
 
   public ngOnInit() {
-    this.size = this.size || 'medium';
+    this.hideName = this.hideName ?? false;
+    this.size = this.size ?? 'medium';
   }
 }

apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html

@@ -1,9 +1,11 @@
+<div class="d-flex justify-content-center mb-1">
+  <gf-logo size="large" [hideName]="true"></gf-logo>
+</div>
 <a
   class="align-items-center justify-content-center"
   color="primary"
   [routerLink]="['/transactions']"
   mat-button
 >
-  <ion-icon class="mr-1" name="time-outline" size="large"></ion-icon>
   <span i18n>Time to add your first transaction.</span>
 </a>

apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  gf-logo {
+    opacity: 0.25;
+  }
 }

apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts

@@ -2,13 +2,14 @@ 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 { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 
 import { NoTransactionsInfoComponent } from './no-transactions-info.component';
 
 @NgModule({
   declarations: [NoTransactionsInfoComponent],
   exports: [NoTransactionsInfoComponent],
-  imports: [CommonModule, MatButtonModule, RouterModule],
+  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -20,6 +20,7 @@ export class ZenPageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToReadForeignPortfolio: boolean;
+  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
@@ -88,6 +89,8 @@ export class ZenPageComponent implements OnDestroy, OnInit {
           };
         });
 
+        this.hasPositions = this.historicalDataItems?.length > 0;
+
         this.changeDetectorRef.markForCheck();
       });
 

apps/client/src/app/pages/zen/zen-page.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div *ngIf="hasPositions || !historicalDataItems" class="container">
   <div class="row">
     <div class="chart-container col mr-3">
       <gf-line-chart
@@ -23,3 +23,10 @@
     </div>
   </div>
 </div>
+
+<div
+  *ngIf="!hasPositions && historicalDataItems"
+  class="d-flex justify-content-center my-5"
+>
+  <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+</div>

apps/client/src/app/pages/zen/zen-page.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPortfolioPerformanceSummaryModule } from '@ghostfolio/client/components/portfolio-performance-summary/portfolio-performance-summary.module';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';
@@ -13,6 +14,7 @@ import { ZenPageComponent } from './zen-page.component';
   imports: [
     CommonModule,
     GfLineChartModule,
+    GfNoTransactionsInfoModule,
     GfPortfolioPerformanceSummaryModule,
     MatCardModule,
     ZenPageRoutingModule