Merge branch 'main' into task/upgrade-ionic-angular-to-version-8.8.5

CHANGELOG.md

@@ -7,15 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Upgraded `@ionic/angular` from version `8.8.1` to `8.8.5`
+
+## 3.2.0 - 2026-05-03
+
 ### Added
 
 - Added `angular-developer` skills
 
 ### Changed
 
-- Upgraded `@ionic/angular` from version `8.8.1` to `8.8.5`
+- Harmonized the unit styling in the value component
 - Upgraded `stripe` from version `20.4.1` to `21.0.1`
 
+### Fixed
+
+- Resolved a validation error with an empty URL in the asset profile details dialog of the admin control panel
+- Resolved an issue where charts and components defaulted to _Roboto_ instead of the preconfigured _Inter_ font family
+
 ## 3.1.0 - 2026-04-29
 
 ### Added

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

@@ -28,6 +28,7 @@ import {
   RouterOutlet
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
+import { Chart } from 'chart.js';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -255,6 +256,9 @@ export class GfAppComponent implements OnInit {
 
     this.toggleTheme(isDarkTheme);
 
+    // Default chart styles
+    Chart.defaults.font.family = getCssVariable('--font-family-sans-serif');
+
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
         this.toggleTheme(event.matches);

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -575,13 +575,13 @@ export class GfAssetProfileDialogComponent implements OnInit {
       assetClass: this.assetProfileForm.controls.assetClass.value ?? undefined,
       assetSubClass:
         this.assetProfileForm.controls.assetSubClass.value ?? undefined,
-      comment: this.assetProfileForm.controls.comment.value ?? undefined,
+      comment: this.assetProfileForm.controls.comment.value || undefined,
       currency: this.assetProfileForm.controls.currency.value ?? undefined,
       isActive: isBoolean(this.assetProfileForm.controls.isActive.value)
         ? this.assetProfileForm.controls.isActive.value
         : undefined,
-      name: this.assetProfileForm.controls.name.value ?? undefined,
+      name: this.assetProfileForm.controls.name.value || undefined,
-      url: this.assetProfileForm.controls.url.value ?? undefined
+      url: this.assetProfileForm.controls.url.value || undefined
     };
 
     try {

apps/client/src/app/pages/portfolio/fire/fire-page.component.ts

@@ -174,7 +174,7 @@ export class GfFirePageComponent implements OnInit {
     this.dataService
       .putUserSetting({
         projectedTotalAmount,
-        retirementDate: undefined
+        retirementDate: null
       })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
@@ -192,7 +192,7 @@ export class GfFirePageComponent implements OnInit {
   protected onRetirementDateChange(retirementDate: Date) {
     this.dataService
       .putUserSetting({
-        projectedTotalAmount: undefined,
+        projectedTotalAmount: null,
         retirementDate: retirementDate.toISOString()
       })
       .pipe(takeUntilDestroyed(this.destroyRef))

apps/client/src/styles/theme.scss

@@ -139,20 +139,28 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 @include mat.elevation-classes();
 @include mat.table-density(-1);
 
-// $gf-typography: mat.m2-define-typography-config();
+$gf-typography: (
+  // Font families
+  brand-family: var(--font-family-sans-serif),
+  plain-family: var(--font-family-sans-serif),
+  // Font weights
+  bold-weight: 700,
+  medium-weight: 500,
+  regular-weight: 400
+);
 
 .theme-light {
   $gf-theme-default: mat.define-theme(
     (
       color: (
         primary: $_primary,
-        theme-type: light,
+        tertiary: $_tertiary,
-        tertiary: $_tertiary
+        theme-type: light
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );
 
@@ -229,13 +237,13 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     (
       color: (
         primary: $_primary,
-        theme-type: dark,
+        tertiary: $_tertiary,
-        tertiary: $_tertiary
+        theme-type: dark
       ),
       density: (
         scale: -3
       ),
-      // typography: $gf-typography
+      typography: $gf-typography
     )
   );
 

libs/common/src/lib/dtos/update-user-setting.dto.ts

@@ -96,13 +96,21 @@ export class UpdateUserSettingDto {
   @IsOptional()
   locale?: string;
 
+  /**
+   * The target financial amount the user aims to reach before retiring.
+   * Can be explicitly set to null to clear the value and calculate it dynamically.
+   */
   @IsNumber()
   @IsOptional()
-  projectedTotalAmount?: number;
+  projectedTotalAmount?: number | null;
 
+  /**
+   * The target date when the user plans to retire.
+   * Can be explicitly set to null to clear the value and calculate it dynamically.
+   */
   @IsISO8601()
   @IsOptional()
-  retirementDate?: string;
+  retirementDate?: string | null;
 
   @IsNumber()
   @IsOptional()

libs/ui/src/lib/value/value.component.html

@@ -38,45 +38,23 @@
             <div class="mr-1 text-danger">-</div>
           }
         }
-        @if (isPercent) {
+        <div
-          <div
+          class="mb-0 value"
-            class="mb-0 value"
+          [ngClass]="{
-            [ngClass]="{
+            'font-weight-bold h2': size === 'large',
-              'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
-              h4: size === 'medium'
+          }"
-            }"
+        >
-          >
+          @if (value === null) {
-            @if (value === null) {
+            <span class="text-monospace text-muted">*****</span>
-              <span class="text-monospace text-muted">*****</span>%
-            } @else {
-              {{ formattedValue }}%
-            }
-          </div>
-        } @else {
-          <div
-            class="mb-0 value"
-            [ngClass]="{
-              'font-weight-bold h2': size === 'large',
-              h4: size === 'medium'
-            }"
-          >
-            @if (value === null) {
-              <span class="text-monospace text-muted">*****</span>
-            } @else {
-              {{ formattedValue }}
-            }
-          </div>
-        }
-        @if (unit) {
-          @if (size === 'medium') {
-            <small class="ml-1">
-              {{ unit }}
-            </small>
           } @else {
-            <div class="ml-1">
+            {{ formattedValue }}
-              {{ unit }}
-            </div>
           }
+        </div>
+        @if (isPercent || unit) {
+          <div class="ml-1">
+            {{ isPercent ? '%' : unit }}
+          </div>
         }
       }
       @if (isString) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ghostfolio",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ghostfolio",
-      "version": "3.1.0",
+      "version": "3.2.0",
       "hasInstallScript": true,
       "license": "AGPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "repository": "https://github.com/ghostfolio/ghostfolio",