Feature/Experimental/ Add more date ranges to pick from

- Add `Week to date` and `Month to date` to the list of possible
  date ranges to pick from.
- Instead of using toggle buttons, the date range is picked using
  a drop down selection.

Fixes #2903

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

@@ -17,7 +17,6 @@ import {
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
-import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { User } from '@ghostfolio/common/interfaces';
@@ -91,8 +90,26 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   assistantListItems: QueryList<AssistantListItemComponent>;
 
   public static readonly SEARCH_RESULTS_DEFAULT_LIMIT = 5;
-
-  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
+  public dateRangeFormControl = new FormControl<string>(undefined);
+
+  public readonly dateRangeOptions = [
+    { label: $localize`Today`, value: '1d' },
+    {
+      label: $localize`Week to date` + ' (' + $localize`WTD` + ')',
+      value: 'wtd'
+    },
+    {
+      label: $localize`Month to date` + ' (' + $localize`MTD` + ')',
+      value: 'mtd'
+    },
+    {
+      label: $localize`Year to date` + ' (' + $localize`YTD` + ')',
+      value: 'ytd'
+    },
+    { label: $localize`1Y`, value: '1y' },
+    { label: $localize`5Y`, value: '5y' },
+    { label: $localize`Max`, value: 'max' }
+  ];
   public isLoading = false;
   public isOpen = false;
   public placeholder = $localize`Find holding...`;
@@ -163,6 +180,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public ngOnChanges() {
+    this.dateRangeFormControl.setValue(this.user?.settings?.dateRange ?? null);
     this.tagsFormControl.setValue(
       this.user?.settings?.['filters.tags']?.[0] ?? null
     );

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

@@ -102,12 +102,17 @@
           >Date Range</span
         ></ng-template
       >
-      <div class="d-flex justify-content-center py-3">
-        <gf-toggle
-          [defaultValue]="user?.settings?.dateRange"
-          [options]="dateRangeOptions"
-          (change)="onChangeDateRange($event.value)"
-        ></gf-toggle>
+      <div class="p-3">
+        <mat-form-field appearance="outline" class="w-100 without-hint">
+          <mat-select
+            [formControl]="dateRangeFormControl"
+            (selectionChange)="onChangeDateRange($event.value)"
+          >
+            @for (range of dateRangeOptions; track range) {
+            <mat-option [value]="range.value">{{ range.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
       </div>
     </mat-tab>
     <mat-tab>

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

@@ -11,6 +11,9 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { GfAssistantListItemModule } from './assistant-list-item/assistant-list-item.module';
 import { AssistantComponent } from './assistant.component';
 
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
 @NgModule({
   declarations: [AssistantComponent],
   exports: [AssistantComponent],
@@ -20,7 +23,9 @@ import { AssistantComponent } from './assistant.component';
     GfAssistantListItemModule,
     GfToggleModule,
     MatButtonModule,
+    MatFormFieldModule,
     MatRadioModule,
+    MatSelectModule,
     MatTabsModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,