From f8e8a4772304bbbf460d87f4a05c1ec87f76303c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 4 Aug 2026 20:36:17 +0200
Subject: [PATCH] Task/improve usability of portfolio summary by collapsing
 breakdowns (#7536)

* Improve usability by collapsing breakdowns

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../portfolio-summary.component.html          | 38 +++++++++++++++++--
 .../portfolio-summary.component.scss          | 13 +++++++
 .../portfolio-summary.component.ts            | 25 +++++++++++-
 4 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 538815f1d..8109d54f7 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index e4ff1ba93..9394d7624 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/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">
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
index 6feaa22d1..534976f11 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss
+++ b/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;
   }
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
index eaf71210f..eac5ef9a6 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts
+++ b/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;
+  }
 }