From 782d131b0da724347960314a39375f80f393ad0c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 12 May 2024 09:42:27 +0200
Subject: [PATCH] Feature/add indicator for active filters (#3398)

* Add indicator for active filters

* Update changelog
---
 CHANGELOG.md                                          |  4 ++++
 .../src/app/components/header/header.component.html   |  5 +++++
 .../src/app/components/header/header.component.scss   | 11 +++++++++++
 .../src/app/components/header/header.component.ts     |  3 +++
 .../client/src/app/components/header/header.module.ts |  2 ++
 apps/client/src/app/services/user/user.service.ts     |  6 +++---
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b4c2f6d6..ec4cc6769 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 37305a397..c30161030 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/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()"
         >
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 04d634d3b..6a1521795 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/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;
 
diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts
index dd1e3cc3c..0007c1612 100644
--- a/apps/client/src/app/components/header/header.component.ts
+++ b/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
diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts
index 797ff7b6e..402960b74 100644
--- a/apps/client/src/app/components/header/header.module.ts
+++ b/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,
diff --git a/apps/client/src/app/services/user/user.service.ts b/apps/client/src/app/services/user/user.service.ts
index ed389e81e..4366c4e6a 100644
--- a/apps/client/src/app/services/user/user.service.ts
+++ b/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'