Extend assistant by tag selector

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

@@ -22,6 +22,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { User } from '@ghostfolio/common/interfaces';
 import { DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
+import { Tag } from '@prisma/client';
 import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
@@ -98,6 +99,7 @@ export class AssistantComponent implements OnDestroy, OnInit {
     assetProfiles: [],
     holdings: []
   };
+  public tags: Tag[] = [];
 
   private keyManager: FocusKeyManager<AssistantListItemComponent>;
   private unsubscribeSubject = new Subject<void>();
@@ -109,6 +111,15 @@ export class AssistantComponent implements OnDestroy, OnInit {
   ) {}
 
   public ngOnInit() {
+    const { tags } = this.dataService.fetchInfo();
+
+    this.tags = tags.map(({ id, name }) => {
+      return {
+        id,
+        name: translate(name)
+      };
+    });
+
     this.searchFormControl.valueChanges
       .pipe(
         map((searchTerm) => {
@@ -181,6 +192,12 @@ export class AssistantComponent implements OnDestroy, OnInit {
     this.closed.emit();
   }
 
+  public onSelectTag(tag: Tag) {
+    console.log(tag);
+
+    this.onCloseAssistant();
+  }
+
   public setIsOpen(aIsOpen: boolean) {
     this.isOpen = aIsOpen;
   }

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

@@ -88,8 +88,14 @@
 </div>
 <div
   *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
+  class="filter-container"
 >
-  <mat-tab-group mat-align-tabs="start" [mat-stretch-tabs]="false">
+  <mat-tab-group
+    animationDuration="0"
+    mat-align-tabs="start"
+    [mat-stretch-tabs]="false"
+    (click)="$event.stopPropagation();"
+  >
     <mat-tab>
       <ng-template mat-tab-label
         ><ion-icon class="mr-2" name="calendar-clear-outline" /><span i18n
@@ -104,5 +110,24 @@
         ></gf-toggle>
       </div>
     </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label
+        ><ion-icon class="mr-2" name="pricetag-outline" /><span i18n
+          >Tags</span
+        ></ng-template
+      >
+      <div>
+        <mat-radio-group color="primary">
+          @for (tag of tags; track tag.id) {
+          <mat-radio-button
+            class="d-flex flex-column"
+            [value]="tag.id"
+            (click)="onSelectTag(tag)"
+            >{{ tag.name }}</mat-radio-button
+          >
+          }
+        </mat-radio-group>
+      </div>
+    </mat-tab>
   </mat-tab-group>
 </div>

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
@@ -19,6 +20,7 @@ import { AssistantComponent } from './assistant.component';
     GfAssistantListItemModule,
     GfToggleModule,
     MatButtonModule,
+    MatRadioModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,

libs/ui/src/lib/assistant/assistant.scss

@@ -1,6 +1,14 @@
 :host {
   display: block;
 
+  .filter-container {
+    ::ng-deep {
+      label {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .result-container {
     max-height: 15rem;
   }