Revert assistant component

libs/ui/src/lib/assistant/assistant.component.ts

@@ -8,6 +8,7 @@ import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { FocusKeyManager } from '@angular/cdk/a11y';
+import { CommonModule } from '@angular/common';
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
@@ -58,6 +59,7 @@ import {
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    CommonModule,
     FormsModule,
     GfAssetProfileIconComponent,
     GfAssistantListItemComponent,

libs/ui/src/lib/assistant/assistant.html

@@ -15,87 +15,76 @@
         [formControl]="searchFormControl"
         [placeholder]="placeholder"
       />
-      @if (deviceType !== 'mobile' && !searchFormControl.value) {
+      <div
-        <div class="hot-key-hint mx-1 px-1">/</div>
+        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
-      }
+        class="hot-key-hint mx-1 px-1"
-      @if (searchFormControl.value) {
+      >
-        <button
+        /
-          class="h-100 no-min-width px-3 rounded-0"
+      </div>
-          mat-button
+      <button
-          (click)="initialize()"
+        *ngIf="searchFormControl.value"
-        >
+        class="h-100 no-min-width px-3 rounded-0"
-          <ion-icon class="m-0" name="close-circle-outline" />
+        mat-button
-        </button>
+        (click)="initialize()"
-      } @else {
+      >
-        <button
+        <ion-icon class="m-0" name="close-circle-outline" />
-          class="h-100 no-min-width px-3 rounded-0"
+      </button>
-          mat-button
+      <button
-          (click)="onCloseAssistant()"
+        *ngIf="!searchFormControl.value"
-        >
+        class="h-100 no-min-width px-3 rounded-0"
-          <ion-icon class="m-0" name="close-outline" />
+        mat-button
-        </button>
+        (click)="onCloseAssistant()"
-      }
+      >
+        <ion-icon class="m-0" name="close-outline" />
+      </button>
     </div>
-    @if (isLoading || searchFormControl.value) {
+    <div
-      <div class="overflow-auto py-3 result-container">
+      *ngIf="isLoading || searchFormControl.value"
-        <div>
+      class="overflow-auto py-3 result-container"
-          <div class="h6 mb-1 px-2" i18n>Holdings</div>
+    >
-          @for (
+      <div>
-            searchResultItem of searchResults?.holdings;
+        <div class="h6 mb-1 px-2" i18n>Holdings</div>
-            track searchResultItem
+        <gf-assistant-list-item
-          ) {
+          *ngFor="let searchResultItem of searchResults?.holdings"
-            <gf-assistant-list-item
+          mode="holding"
-              mode="holding"
+          [item]="searchResultItem"
-              [item]="searchResultItem"
+          (clicked)="onCloseAssistant()"
-              (clicked)="onCloseAssistant()"
+        />
-            />
+        <ng-container *ngIf="searchResults?.holdings?.length === 0">
-          }
+          <ngx-skeleton-loader
-          @if (searchResults?.holdings?.length === 0) {
+            *ngIf="isLoading"
-            @if (isLoading) {
+            animation="pulse"
-              <ngx-skeleton-loader
+            class="mx-2"
-                animation="pulse"
+            [theme]="{
-                class="mx-2"
+              height: '1.5rem',
-                [theme]="{
+              width: '100%'
-                  height: '1.5rem',
+            }"
-                  width: '100%'
+          />
-                }"
+          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
-              />
+        </ng-container>
-            } @else {
-              <div class="px-2 py-1" i18n>No entries...</div>
-            }
-          }
-        </div>
-        @if (hasPermissionToAccessAdminControl) {
-          <div class="mt-3">
-            <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
-            @for (
-              searchResultItem of searchResults?.assetProfiles;
-              track searchResultItem
-            ) {
-              <gf-assistant-list-item
-                mode="assetProfile"
-                [item]="searchResultItem"
-                (clicked)="onCloseAssistant()"
-              />
-            }
-            @if (searchResults?.assetProfiles?.length === 0) {
-              @if (isLoading) {
-                <ngx-skeleton-loader
-                  animation="pulse"
-                  class="mx-2"
-                  [theme]="{
-                    height: '1.5rem',
-                    width: '100%'
-                  }"
-                />
-              } @else {
-                <div class="px-2 py-1" i18n>No entries...</div>
-              }
-            }
-          </div>
-        }
       </div>
-    }
+      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
+        <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
+        <gf-assistant-list-item
+          *ngFor="let searchResultItem of searchResults?.assetProfiles"
+          mode="assetProfile"
+          [item]="searchResultItem"
+          (clicked)="onCloseAssistant()"
+        />
+        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
+          <ngx-skeleton-loader
+            *ngIf="isLoading"
+            animation="pulse"
+            class="mx-2"
+            [theme]="{
+              height: '1.5rem',
+              width: '100%'
+            }"
+          />
+          <div *ngIf="!isLoading" class="px-2 py-1" i18n>No entries...</div>
+        </ng-container>
+      </div>
+    </div>
   </div>
   <form [formGroup]="filterForm">
     @if (!searchFormControl.value) {
@@ -121,14 +110,12 @@
               @for (account of accounts; track account.id) {
                 <mat-option [value]="account.id">
                   <div class="d-flex">
-                    @if (account.Platform?.url) {
+                    <gf-asset-profile-icon
-                      <gf-asset-profile-icon
+                      *ngIf="account.Platform?.url"
-                        class="mr-1"
+                      class="mr-1"
-                        [tooltip]="account.Platform?.name"
+                      [tooltip]="account.Platform?.name"
-                        [url]="account.Platform?.url"
+                      [url]="account.Platform?.url"
-                      />
+                    /><span>{{ account.name }}</span>
-                    }
-                    <span>{{ account.name }}</span>
                   </div>
                 </mat-option>
               }