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,9 +95,38 @@
                 </div>
               </button>
             }
-            @if (hasPermissionToImportActivitiesWithAi) {
+            <p class="mb-0 mt-3 text-center">
-              <div class="mt-3 text-center">
+              <small>
-                <div class="align-items-center d-flex justify-content-center">
+                <span class="mr-1" i18n
+                  >The following file formats are supported:</span
+                >
+                <a
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok/sample.csv"
+                  target="_blank"
+                  >CSV</a
+                >
+                @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"
@@ -115,37 +145,9 @@
                   <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
-                  >The following file formats are supported:</span
-                >
-                <a
-                  href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok/sample.csv"
-                  target="_blank"
-                  >CSV</a
-                >
-                <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
-                >
-              </small>
-            </p>
-          </div>
-        }
       </div>
     </mat-step>
 
@@ -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'] {