Task/improve usability of portfolio summary by collapsing breakdowns (#7536)

* Improve usability by collapsing breakdowns

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the portfolio summary by collapsing the _Holdings_ and _Cash_ breakdowns by default
 - Extended the support of the _Exclude from Analysis_ tag from accounts to activities
 - Optimized the performance of the search in the assistant by reusing the cached portfolio snapshot
 - Improved the validation of the import functionality when referencing an asset profile with the data source `MANUAL`

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -164,7 +164,22 @@
     </div>
   </div>
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="align-items-center d-flex flex-grow-1 indent-1">
+    <div
+      class="align-items-center d-flex flex-grow-1 indent-1"
+      [class.cursor-pointer]="hasHoldingsBreakdown"
+      (click)="onToggleHoldings()"
+    >
+      @if (hasHoldingsBreakdown) {
+        <span
+          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+        >
+          <ion-icon
+            class="caret text-muted"
+            name="caret-forward-outline"
+            [class.caret-expanded]="isHoldingsExpanded"
+          />
+        </span>
+      }
       <ng-container i18n>Holdings</ng-container>
       @if (
         !hasImpersonationId &&
@@ -192,7 +207,7 @@
       />
     </div>
   </div>
-  @if (isLoading || summary?.emergencyFund?.assets > 0) {
+  @if (hasHoldingsBreakdown && isHoldingsExpanded) {
     <div class="flex-nowrap px-3 py-1 row">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Investments</div>
       <div class="flex-column flex-wrap justify-content-end">
@@ -223,7 +238,22 @@
     </div>
   }
   <div class="flex-nowrap px-3 py-1 row">
-    <div class="align-items-center d-flex flex-grow-1 indent-1">
+    <div
+      class="align-items-center d-flex flex-grow-1 indent-1"
+      [class.cursor-pointer]="hasCashBreakdown"
+      (click)="onToggleCash()"
+    >
+      @if (hasCashBreakdown) {
+        <span
+          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+        >
+          <ion-icon
+            class="caret text-muted"
+            name="caret-forward-outline"
+            [class.caret-expanded]="isCashExpanded"
+          />
+        </span>
+      }
       <ng-container i18n>Cash</ng-container>
       @if (
         !hasImpersonationId &&
@@ -251,7 +281,7 @@
       />
     </div>
   </div>
-  @if (isLoading || summary?.emergencyFund?.cash > 0) {
+  @if (hasCashBreakdown && isCashExpanded) {
     <div class="flex-nowrap px-3 py-1 row">
       <div class="flex-grow-1 indent-2 text-truncate" i18n>Buying Power</div>
       <div class="flex-column flex-wrap justify-content-end">

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss

@@ -1,6 +1,19 @@
 :host {
   display: block;
 
+  .caret-container {
+    width: 1rem;
+
+    .caret {
+      font-size: 0.7rem;
+      transition: transform 150ms ease-in-out;
+
+      &.caret-expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
   .indent-1 {
     margin-left: 1rem;
   }

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -18,6 +18,7 @@ import { IonIcon } from '@ionic/angular/standalone';
 import { formatDistanceToNow } from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
+  caretForwardOutline,
   ellipsisHorizontalCircleOutline,
   informationCircleOutline
 } from 'ionicons/icons';
@@ -47,13 +48,19 @@ export class GfPortfolioSummaryComponent implements OnChanges {
     'BUY_AND_SELL_ACTIVITIES_TOOLTIP'
   );
 
+  protected isCashExpanded = false;
+  protected isHoldingsExpanded = false;
   protected precision = 2;
   protected timeInMarket: string | undefined;
 
   private readonly notificationService = inject(NotificationService);
 
   public constructor() {
-    addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
+    addIcons({
+      caretForwardOutline,
+      ellipsisHorizontalCircleOutline,
+      informationCircleOutline
+    });
   }
 
   protected get cashPercentage() {
@@ -77,6 +84,14 @@ export class GfPortfolioSummaryComponent implements OnChanges {
       : 0;
   }
 
+  protected get hasCashBreakdown() {
+    return !this.isLoading && this.summary?.emergencyFund?.cash > 0;
+  }
+
+  protected get hasHoldingsBreakdown() {
+    return !this.isLoading && this.summary?.emergencyFund?.assets > 0;
+  }
+
   protected get holdingsInBaseCurrency() {
     if (
       !isNumber(this.summary?.totalAssetsInBaseCurrency) ||
@@ -145,4 +160,12 @@ export class GfPortfolioSummaryComponent implements OnChanges {
       title: $localize`Please set the amount of your emergency fund.`
     });
   }
+
+  protected onToggleCash() {
+    this.isCashExpanded = !this.isCashExpanded;
+  }
+
+  protected onToggleHoldings() {
+    this.isHoldingsExpanded = !this.isHoldingsExpanded;
+  }
 }