Remove tabs

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

@@ -89,9 +89,9 @@
   <form [formGroup]="filterForm">
     <div
       *ngIf="!(isLoading || searchFormControl.value) && user?.settings?.isExperimentalFeatures"
-      class="filter-container"
+      class="filter-container p-3"
     >
-      <div class="p-3">
+      <div class="mb-3">
         <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-label i18n>Date Range</mat-label>
           <mat-select
@@ -104,81 +104,51 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <mat-tab-group
+      <div class="mb-3">
-        animationDuration="0"
+        <mat-form-field appearance="outline" class="w-100 without-hint">
-        mat-align-tabs="start"
+          <mat-label i18n>Accounts</mat-label>
-        [mat-stretch-tabs]="false"
+          <mat-select formControlName="account">
-      >
+            <mat-option [value]="null"></mat-option>
-        <mat-tab>
+            @for (account of accounts; track account.id) {
-          <ng-template mat-tab-label
+            <mat-option [value]="account.id">
-            ><ion-icon name="albums-outline" /><span
+              <div class="d-flex">
-              class="d-none d-sm-block ml-2"
+                <gf-symbol-icon
-              i18n
+                  *ngIf="account.Platform?.url"
-              >Accounts</span
+                  class="mr-1"
-            >
+                  [tooltip]="account.Platform?.name"
-          </ng-template>
+                  [url]="account.Platform?.url"
-          <div class="p-3">
+                /><span>{{ account.name }}</span>
-            <mat-form-field appearance="outline" class="w-100 without-hint">
+              </div>
-              <mat-select formControlName="account">
+            </mat-option>
-                <mat-option [value]="null"></mat-option>
+            }
-                @for (account of accounts; track account.id) {
+          </mat-select>
-                <mat-option [value]="account.id">
+        </mat-form-field>
-                  <div class="d-flex">
+      </div>
-                    <gf-symbol-icon
+      <div class="mb-3">
-                      *ngIf="account.Platform?.url"
+        <mat-form-field appearance="outline" class="w-100 without-hint">
-                      class="mr-1"
+          <mat-label i18n>Tags</mat-label>
-                      [tooltip]="account.Platform?.name"
+          <mat-select formControlName="tag">
-                      [url]="account.Platform?.url"
+            <mat-option [value]="null"></mat-option>
-                    /><span>{{ account.name }}</span>
+            @for (tag of tags; track tag.id) {
-                  </div>
+            <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
-                </mat-option>
+            }
-                }
+          </mat-select>
-              </mat-select>
+        </mat-form-field>
-            </mat-form-field>
+      </div>
-          </div>
+      <div class="mb-3">
-        </mat-tab>
+        <mat-form-field appearance="outline" class="w-100 without-hint">
-        <mat-tab>
+          <mat-label i18n>Asset Classes</mat-label>
-          <ng-template mat-tab-label
+          <mat-select formControlName="assetClass">
-            ><ion-icon name="pricetag-outline" /><span
+            <mat-option [value]="null"></mat-option>
-              class="d-none d-sm-block ml-2"
+            @for (assetClass of assetClasses; track assetClass.id) {
-              i18n
+            <mat-option [value]="assetClass.id"
-              >Tags</span
+              >{{ assetClass.label }}</mat-option
-            >
-          </ng-template>
-          <div class="p-3">
-            <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.label }}</mat-option>
-                }
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </mat-tab>
-        <mat-tab>
-          <ng-template mat-tab-label
-            ><ion-icon name="folder-open-outline" /><span
-              class="d-none d-sm-block ml-2"
-              i18n
-              >Asset Classes</span
             >
-          </ng-template>
+            }
-          <div class="p-3">
+          </mat-select>
-            <mat-form-field appearance="outline" class="w-100 without-hint">
+        </mat-form-field>
-              <mat-select formControlName="assetClass">
+      </div>
-                <mat-option [value]="null"></mat-option>
+      <div>
-                @for (assetClass of assetClasses; track assetClass.id) {
-                <mat-option [value]="assetClass.id"
-                  >{{ assetClass.label }}</mat-option
-                >
-                }
-              </mat-select>
-            </mat-form-field>
-          </div>
-        </mat-tab>
-      </mat-tab-group>
-      <div class="pb-3 px-3">
         <button
           class="w-100"
           color="primary"

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

@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 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';
@@ -23,7 +22,6 @@ import { AssistantComponent } from './assistant.component';
     MatButtonModule,
     MatFormFieldModule,
     MatSelectModule,
-    MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,
     RouterModule