From c68d113d278dfca8a12a1fee8a05749d086584af Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 4 Feb 2024 12:11:01 +0100
Subject: [PATCH] Feature/improve usability of account and tag selector of
 assistant (#2955)

* Change radio button to select

* account
* tag

* Update changelog
---
 CHANGELOG.md                                  |  2 +
 libs/ui/src/lib/assistant/assistant.html      | 47 ++++++++++---------
 libs/ui/src/lib/assistant/assistant.module.ts |  4 +-
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f72349223..b7ed7ed57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the account selector in the assistant (experimental)
+- Improved the usability of the tag selector in the assistant (experimental)
 - Improved the error logs for a timeout in the data provider services
 - Upgraded `prettier` from version `3.2.4` to `3.2.5`
 
diff --git a/libs/ui/src/lib/assistant/assistant.html b/libs/ui/src/lib/assistant/assistant.html
index 51070a642..ac19c34a8 100644
--- a/libs/ui/src/lib/assistant/assistant.html
+++ b/libs/ui/src/lib/assistant/assistant.html
@@ -118,16 +118,23 @@
             ></ng-template
           >
           <div class="p-3">
-            <mat-radio-group color="primary" formControlName="account">
-              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
-                >No account</mat-radio-button
-              >
-              @for (account of accounts; track account.id) {
-              <mat-radio-button class="d-flex flex-column" [value]="account.id"
-                >{{ account.name }}</mat-radio-button
-              >
-              }
-            </mat-radio-group>
+            <mat-form-field appearance="outline" class="w-100 without-hint">
+              <mat-select formControlName="account">
+                <mat-option [value]="null"></mat-option>
+                @for (account of accounts; track account.id) {
+                <mat-option [value]="account.id">
+                  <div class="d-flex">
+                    <gf-symbol-icon
+                      *ngIf="account.Platform?.url"
+                      class="mr-1"
+                      [tooltip]="account.Platform?.name"
+                      [url]="account.Platform?.url"
+                    /><span>{{ account.name }}</span>
+                  </div>
+                </mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
           </div>
         </mat-tab>
         <mat-tab>
@@ -139,20 +146,18 @@
             ></ng-template
           >
           <div class="p-3">
-            <mat-radio-group color="primary" formControlName="tag">
-              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
-                >No tag</mat-radio-button
-              >
-              @for (tag of tags; track tag.id) {
-              <mat-radio-button class="d-flex flex-column" [value]="tag.id"
-                >{{ tag.name }}</mat-radio-button
-              >
-              }
-            </mat-radio-group>
+            <mat-form-field appearance="outline" class="w-100 without-hint">
+              <mat-select formControlName="tag">
+                <mat-option [value]="null"></mat-option>
+                @for (tag of tags; track tag.id) {
+                <mat-option [value]="tag.id">{{ tag.name }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
           </div>
         </mat-tab>
       </mat-tab-group>
-      <div class="p-3">
+      <div class="pb-3 px-3">
         <button
           class="w-100"
           color="primary"
diff --git a/libs/ui/src/lib/assistant/assistant.module.ts b/libs/ui/src/lib/assistant/assistant.module.ts
index a6b113c69..f2d3bc248 100644
--- a/libs/ui/src/lib/assistant/assistant.module.ts
+++ b/libs/ui/src/lib/assistant/assistant.module.ts
@@ -3,10 +3,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfAssistantListItemModule } from './assistant-list-item/assistant-list-item.module';
@@ -19,9 +19,9 @@ import { AssistantComponent } from './assistant.component';
     CommonModule,
     FormsModule,
     GfAssistantListItemModule,
+    GfSymbolIconModule,
     MatButtonModule,
     MatFormFieldModule,
-    MatRadioModule,
     MatSelectModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,