Feature/add indicator for active filters (#3398)

* Add indicator for active filters

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added an indicator for active filters (experimental)
+
 ### Changed
 
 - Disabled the button to delete all activities on the portfolio activities page if there are active filters

apps/client/src/app/components/header/header.component.html

@@ -116,7 +116,12 @@
           #assistantTrigger="matMenuTrigger"
           class="h-100 no-min-width px-2"
           mat-button
+          matBadge="✓"
+          matBadgeSize="small"
           [mat-menu-trigger-for]="assistantMenu"
+          [matBadgeHidden]="
+            !hasFilters || !user?.settings?.isExperimentalFeatures
+          "
           [matMenuTriggerRestoreFocus]="false"
           (menuOpened)="onOpenAssistant()"
         >

apps/client/src/app/components/header/header.component.scss

@@ -28,6 +28,17 @@
         text-underline-offset: 0.25rem;
       }
 
+      &.mat-badge {
+        ::ng-deep {
+          .mat-badge-content {
+            --mat-badge-small-size-container-overlap-offset: -0.9rem;
+            --mat-badge-small-size-text-size: 0;
+
+            transform: scale(0.45);
+          }
+        }
+      }
+
       ion-icon {
         font-size: 1.5rem;
 

apps/client/src/app/components/header/header.component.ts

@@ -65,6 +65,7 @@ export class HeaderComponent implements OnChanges {
   @ViewChild('assistant') assistantElement: GfAssistantComponent;
   @ViewChild('assistantTrigger') assistentMenuTriggerElement: MatMenuTrigger;
 
+  public hasFilters: boolean;
   public hasPermissionForSocialLogin: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
@@ -106,6 +107,8 @@ export class HeaderComponent implements OnChanges {
   }
 
   public ngOnChanges() {
+    this.hasFilters = this.userService.hasFilters();
+
     this.hasPermissionForSocialLogin = hasPermission(
       this.info?.globalPermissions,
       permissions.enableSocialLogin

apps/client/src/app/components/header/header.module.ts

@@ -5,6 +5,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -21,6 +22,7 @@ import { HeaderComponent } from './header.component';
     GfLogoComponent,
     GfPremiumIndicatorComponent,
     LoginWithAccessTokenDialogModule,
+    MatBadgeModule,
     MatButtonModule,
     MatMenuModule,
     MatToolbarModule,

apps/client/src/app/services/user/user.service.ts

@@ -51,21 +51,21 @@ export class UserService extends ObservableStore<UserStoreState> {
     const filters: Filter[] = [];
     const user = this.getState().user;
 
-    if (user.settings['filters.accounts']) {
+    if (user?.settings['filters.accounts']) {
       filters.push({
         id: user.settings['filters.accounts'][0],
         type: 'ACCOUNT'
       });
     }
 
-    if (user.settings['filters.assetClasses']) {
+    if (user?.settings['filters.assetClasses']) {
       filters.push({
         id: user.settings['filters.assetClasses'][0],
         type: 'ASSET_CLASS'
       });
     }
 
-    if (user.settings['filters.tags']) {
+    if (user?.settings['filters.tags']) {
       filters.push({
         id: user.settings['filters.tags'][0],
         type: 'TAG'