Feature/improve usability of account and tag selector of assistant (#2955)

* Change radio button to select

* account
* tag

* Update changelog

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`
 

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-form-field appearance="outline" class="w-100 without-hint">
-              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+              <mat-select formControlName="account">
-                >No account</mat-radio-button
+                <mat-option [value]="null"></mat-option>
-              >
+                @for (account of accounts; track account.id) {
-              @for (account of accounts; track account.id) {
+                <mat-option [value]="account.id">
-              <mat-radio-button class="d-flex flex-column" [value]="account.id"
+                  <div class="d-flex">
-                >{{ account.name }}</mat-radio-button
+                    <gf-symbol-icon
-              >
+                      *ngIf="account.Platform?.url"
-              }
+                      class="mr-1"
-            </mat-radio-group>
+                      [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-form-field appearance="outline" class="w-100 without-hint">
-              <mat-radio-button class="d-flex flex-column" i18n [value]="null"
+              <mat-select formControlName="tag">
-                >No tag</mat-radio-button
+                <mat-option [value]="null"></mat-option>
-              >
+                @for (tag of tags; track tag.id) {
-              @for (tag of tags; track tag.id) {
+                <mat-option [value]="tag.id">{{ tag.name }}</mat-option>
-              <mat-radio-button class="d-flex flex-column" [value]="tag.id"
+                }
-                >{{ tag.name }}</mat-radio-button
+              </mat-select>
-              >
+            </mat-form-field>
-              }
-            </mat-radio-group>
           </div>
         </mat-tab>
       </mat-tab-group>
-      <div class="p-3">
+      <div class="pb-3 px-3">
         <button
           class="w-100"
           color="primary"

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,