Improve line breaks

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -21,8 +21,8 @@
           <mat-card-actions class="pb-3 pt-0 px-3">
             <a
               class="special"
-              href="mailto:hi@ghostfol.io?subject=Ghostfolio Premium Data Provider&body=Hello,%0D%0DI am interested in the Ghostfolio Premium data provider. Could you please give me access so I can try it for some time?%0D%0DKind regards"
               mat-flat-button
+              [href]="premiumDataProviderMailHref"
             >
               <ng-container i18n>Get Access</ng-container>
             </a>

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -2,7 +2,10 @@ import { GfAdminPlatformComponent } from '@ghostfolio/client/components/admin-pl
 import { GfAdminTagComponent } from '@ghostfolio/client/components/admin-tag/admin-tag.component';
 import { GfDataProviderStatusComponent } from '@ghostfolio/client/components/data-provider-status/data-provider-status.component';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { PROPERTY_API_KEY_GHOSTFOLIO } from '@ghostfolio/common/config';
+import {
+  E_MAIL_LINE_BREAK,
+  PROPERTY_API_KEY_GHOSTFOLIO
+} from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import {
@@ -80,6 +83,13 @@ export class GfAdminSettingsComponent implements OnInit {
   public ghostfolioApiStatus: DataProviderGhostfolioStatusResponse;
   public isGhostfolioApiKeyValid: boolean;
   public isLoading = false;
+  public readonly premiumDataProviderMailHref = `mailto:hi@ghostfol.io?subject=Ghostfolio Premium Data Provider&body=${[
+    'Hello,',
+    '',
+    'I am interested in the Ghostfolio Premium data provider. Could you please give me access so I can try it for some time?',
+    '',
+    'Kind regards'
+  ].join(E_MAIL_LINE_BREAK)}`;
   public pricingUrl: string;
   public user: User;
 

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -1,6 +1,7 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_PAGE_SIZE,
+  E_MAIL_LINE_BREAK,
   NUMERICAL_PRECISION_THRESHOLD_3_FIGURES,
   NUMERICAL_PRECISION_THRESHOLD_4_FIGURES
 } from '@ghostfolio/common/config';
@@ -169,7 +170,7 @@ export class GfHoldingDetailDialogComponent implements OnInit {
   protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected quantity: number;
   protected quantityPrecision = 2;
-  protected reportDataGlitchMail: string;
+  protected reportDataGlitchMailHref: string;
   protected readonly round = round;
   protected readonly routerLinkAdminControlMarketData =
     internalRoutes.adminControl.subRoutes.marketData.routerLink;
@@ -456,7 +457,20 @@ export class GfHoldingDetailDialogComponent implements OnInit {
             this.assetProfile?.symbol ? ` (${this.assetProfile.symbol})` : ''
           }`;
 
-          this.reportDataGlitchMail = `mailto:hi@ghostfol.io?subject=${reportDataGlitchSubject}&body=Hello%0D%0DI would like to report a data glitch for%0D%0DSymbol: ${this.assetProfile?.symbol}%0DData Source: ${this.assetProfile?.dataSource}%0D%0DAdditional notes:%0D%0DCan you please take a look?%0D%0DKind regards`;
+          this.reportDataGlitchMailHref = `mailto:hi@ghostfol.io?subject=${reportDataGlitchSubject}&body=${[
+            'Hello',
+            '',
+            'I would like to report a data glitch for',
+            '',
+            `Symbol: ${this.assetProfile?.symbol}`,
+            `Data Source: ${this.assetProfile?.dataSource}`,
+            '',
+            'Additional notes:',
+            '',
+            'Can you please take a look?',
+            '',
+            'Kind regards'
+          ].join(E_MAIL_LINE_BREAK)}`;
 
           if (this.assetProfile?.assetClass) {
             this.assetClass = translate(this.assetProfile?.assetClass);

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -456,7 +456,10 @@
               dataSource?.data.length > 0 &&
               data.hasPermissionToReportDataGlitch === true
             ) {
-              <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
+              <a
+                color="warn"
+                mat-stroked-button
+                [href]="reportDataGlitchMailHref"
                 ><ion-icon class="mr-1" name="flag-outline" /><span i18n
                   >Report Data Glitch</span
                 >...</a

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -1,4 +1,5 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { E_MAIL_LINE_BREAK } from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
@@ -48,8 +49,13 @@ export class GfUserAccountMembershipComponent {
   protected hasPermissionToCreateApiKey: boolean;
   protected hasPermissionToUpdateUserSettings: boolean;
   protected price: number;
-  protected readonly trySubscriptionMail =
-    'mailto:hi@ghostfol.io?subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';
+  protected readonly trySubscriptionMailHref = `mailto:hi@ghostfol.io?subject=Ghostfolio Premium Trial&body=${[
+    'Hello',
+    '',
+    'I am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?',
+    '',
+    'Kind regards'
+  ].join(E_MAIL_LINE_BREAK)}`;
   protected user: User;
 
   private couponId: string | undefined;

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -49,7 +49,10 @@
             }
             <div class="align-items-center d-flex justify-content-center mt-4">
               @if (!user?.subscription?.expiresAt) {
-                <a class="mx-1" mat-stroked-button [href]="trySubscriptionMail"
+                <a
+                  class="mx-1"
+                  mat-stroked-button
+                  [href]="trySubscriptionMailHref"
                   ><span i18n>Try Premium</span>
                   <gf-premium-indicator
                     class="d-inline-block ml-1"

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -5,6 +5,7 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
+import { E_MAIL_LINE_BREAK } from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { downloadAsFile } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
@@ -72,7 +73,7 @@ import { catchError } from 'rxjs/operators';
 export class GfUserAccountSettingsComponent implements OnInit {
   protected readonly appearancePlaceholder = $localize`Auto`;
   protected readonly baseCurrency: string;
-  protected closeUserAccountMail: string;
+  protected closeUserAccountMailHref: string;
   protected readonly currencies: string[] = [];
   protected readonly deleteOwnUserForm = inject(NonNullableFormBuilder).group({
     accessToken: ['', Validators.required]
@@ -126,7 +127,15 @@ export class GfUserAccountSettingsComponent implements OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.closeUserAccountMail = `mailto:hi@ghostfol.io?subject=Delete Account&body=Hello%0D%0DPlease delete my Ghostfolio account.%0D%0DUser ID: ${this.user.id}%0D%0DKind regards`;
+          this.closeUserAccountMailHref = `mailto:hi@ghostfol.io?subject=Delete Account&body=${[
+            'Hello',
+            '',
+            'Please delete my Ghostfolio account.',
+            '',
+            `User ID: ${this.user.id}`,
+            '',
+            'Kind regards'
+          ].join(E_MAIL_LINE_BREAK)}`;
 
           this.hasPermissionToDeleteOwnUser = hasPermission(
             this.user.permissions,

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -349,7 +349,11 @@
                 first before your Ghostfolio account can be closed.
               </div>
             } @else if (hasPermissionToRequestOwnUserDeletion) {
-              <a color="warn" i18n mat-flat-button [href]="closeUserAccountMail"
+              <a
+                color="warn"
+                i18n
+                mat-flat-button
+                [href]="closeUserAccountMailHref"
                 >Close Account</a
               >
             }