From 53a81b3c2bc330faae342d8af04050fce72ef06a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 23 Apr 2025 20:15:31 +0200
Subject: [PATCH] Feature/migrate assistant component to control flow (#4591)

* Migrate to control flow

* Update changelog
---
 CHANGELOG.md                             |  1 +
 libs/ui/src/lib/assistant/assistant.html | 86 ++++++++++++------------
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e1c5cb4b..f0f000afa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Renamed `User` to `user` in the `Subscription` database schema
+- Migrated the `@ghostfolio/ui/assistant` component to control flow
 
 ### Fixed
 
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 33b4db3ff..fa6738532 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -15,28 +15,26 @@
         [formControl]="searchFormControl"
         [placeholder]="placeholder"
       />
-      <div
-        *ngIf="deviceType !== 'mobile' && !searchFormControl.value"
-        class="hot-key-hint mx-1 px-1"
-      >
-        /
-      </div>
-      <button
-        *ngIf="searchFormControl.value"
-        class="h-100 no-min-width px-3 rounded-0"
-        mat-button
-        (click)="initialize()"
-      >
-        <ion-icon class="m-0" name="close-circle-outline" />
-      </button>
-      <button
-        *ngIf="!searchFormControl.value"
-        class="h-100 no-min-width px-3 rounded-0"
-        mat-button
-        (click)="onCloseAssistant()"
-      >
-        <ion-icon class="m-0" name="close-outline" />
-      </button>
+      @if (deviceType !== 'mobile' && !searchFormControl.value) {
+        <div class="hot-key-hint mx-1 px-1">/</div>
+      }
+      @if (searchFormControl.value) {
+        <button
+          class="h-100 no-min-width px-3 rounded-0"
+          mat-button
+          (click)="initialize()"
+        >
+          <ion-icon class="m-0" name="close-circle-outline" />
+        </button>
+      } @else {
+        <button
+          class="h-100 no-min-width px-3 rounded-0"
+          mat-button
+          (click)="onCloseAssistant()"
+        >
+          <ion-icon class="m-0" name="close-outline" />
+        </button>
+      }
     </div>
     <div
       *ngIf="isLoading || searchFormControl.value"
@@ -51,16 +49,18 @@
           (clicked)="onCloseAssistant()"
         />
         <ng-container *ngIf="searchResults?.holdings?.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>
+          @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>
+          }
         </ng-container>
       </div>
       <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
@@ -72,16 +72,18 @@
           (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>
+          @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>
+          }
         </ng-container>
       </div>
     </div>