Extend import of activities with Ghostfolio AI

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -125,7 +125,7 @@ export class GfImportActivitiesDialogComponent {
   protected details: any[] = [];
   protected dialogTitle = $localize`Import Activities`;
   protected errorMessages: string[] = [];
-  protected readonly ghostfolioAiTooltip = $localize`Only upload anonymized or redacted data, as it will be sent to third parties.`;
+  protected readonly ghostfolioAiTooltip = $localize`The content of your file will be processed by a third-party AI provider. Please remove any personal data before uploading.`;
   protected readonly hasPermissionToImportActivitiesWithAi = hasPermission(
     this.data.user?.permissions,
     permissions.importActivitiesWithAi

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -4,10 +4,11 @@
   (closeButtonClicked)="onCancel()"
 />
 
-<div class="flex-grow-1" mat-dialog-content>
+<div class="flex-grow-1 p-0" mat-dialog-content>
   <mat-stepper
     #stepper
     animationDuration="0ms"
+    [disableRipple]="true"
     [linear]="true"
     [orientation]="stepperOrientation"
     [selectedIndex]="importStep"
@@ -94,38 +95,6 @@
                 </div>
               </button>
             }
-            @if (hasPermissionToImportActivitiesWithAi) {
-              <div class="mt-3 text-center">
-                <div class="align-items-center d-flex justify-content-center">
-                  <mat-checkbox
-                    color="primary"
-                    [checked]="isGhostfolioAiEnabled"
-                    [disabled]="isLoading"
-                    (change)="onGhostfolioAiChange($event)"
-                  >
-                    <ng-container i18n
-                      >Smart import with Ghostfolio AI</ng-container
-                    >
-                  </mat-checkbox>
-                  <span
-                    class="align-items-center d-flex"
-                    matTooltipPosition="above"
-                    [matTooltip]="ghostfolioAiTooltip"
-                  >
-                    <ion-icon name="information-circle-outline" />
-                  </span>
-                </div>
-                @if (isGhostfolioAiEnabled) {
-                  <p class="mb-0 mt-1">
-                    <small i18n
-                      >Ghostfolio AI also reads CSV files of other brokers and
-                      JPG, PDF and PNG files with up to
-                      {{ maxActivitiesOfGhostfolioAi }} activities.</small
-                    >
-                  </p>
-                }
-              </div>
-            }
             <p class="mb-0 mt-3 text-center">
               <small>
                 <span class="mr-1" i18n
@@ -136,14 +105,47 @@
                   target="_blank"
                   >CSV</a
                 >
-                <span class="mx-1" i18n>or</span>
+                @if (isGhostfolioAiEnabled) {
+                  <span class="mr-1">, JPG,</span>
+                } @else {
+                  <span class="mx-1" i18n>or</span>
+                }
                 <a
                   href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok/sample.json"
                   target="_blank"
                   >JSON</a
                 >
+                @if (isGhostfolioAiEnabled) {
+                  <span>, PDF</span>
+                  <span class="mx-1" i18n>or</span>
+                  <span>PNG</span>
+                }
               </small>
             </p>
+            @if (
+              data.deviceType !== 'mobile' &&
+              hasPermissionToImportActivitiesWithAi
+            ) {
+              <div class="align-items-center d-flex mt-4">
+                <mat-checkbox
+                  color="primary"
+                  [checked]="isGhostfolioAiEnabled"
+                  [disabled]="isLoading"
+                  (change)="onGhostfolioAiChange($event)"
+                >
+                  <ng-container i18n
+                    >Smart import with Ghostfolio AI</ng-container
+                  >
+                </mat-checkbox>
+                <span
+                  class="align-items-center d-flex"
+                  matTooltipPosition="above"
+                  [matTooltip]="ghostfolioAiTooltip"
+                >
+                  <ion-icon name="information-circle-outline" />
+                </span>
+              </div>
+            }
           </div>
         }
       </div>
@@ -216,7 +218,7 @@
               (selectedActivities)="updateSelection($event)"
             />
           }
-          <div class="d-flex justify-content-end mt-3">
+          <div class="d-flex justify-content-end mt-4">
             <button mat-button (click)="onReset(stepper)">
               <ng-container i18n>Back</ng-container>
             </button>

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -9,6 +9,13 @@
     }
 
     mat-stepper {
+      @include mat.stepper-overrides(
+        (
+          header-focus-state-layer-color: transparent,
+          header-hover-state-layer-color: transparent
+        )
+      );
+
       ::ng-deep {
         .mat-step-header {
           &[aria-selected='false'] {