change message filter icon when filter active

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -133,7 +133,7 @@ export default class ChatMessageViewModel {
         this.loadData();
 
         this.messagePageViewModel.reactionFilter.subscribe((content) => {
-            console.log(content, content==undefined)
+            console.log(content, content == undefined);
             if (content == undefined) {
                 this.isHidden.value = false;
                 return;
@@ -168,6 +168,6 @@ export default class ChatMessageViewModel {
             }
 
             this.isHidden.value = count == 0;
-        })
+        });
     }
 }

src/ViewModel/Pages/messagePageViewModel.ts

@@ -19,6 +19,7 @@ export default class MessagePageViewModel {
     searchViewModel: SearchViewModel<ChatMessageViewModel>;
     isFilterModalOpen = new React.State<boolean>(false);
     reactionFilter = new React.State<ReactionSymbols | undefined>(undefined);
+    isFilterActive: React.State<boolean>;
 
     composingMessage: React.State<string> = new React.State("");
 
@@ -98,7 +99,7 @@ export default class MessagePageViewModel {
 
     revokeReactionFilter = (): void => {
         this.reactionFilter.value = undefined;
-    }
+    };
 
     setReactionFilter = (content: ReactionSymbols): void => {
         this.reactionFilter.value = content;
@@ -136,5 +137,12 @@ export default class MessagePageViewModel {
             (chatMessageViewModel) => [chatMessageViewModel.body.value],
             new React.ListState(),
         );
+
+        this.isFilterActive = React.createProxyState(
+            [this.searchViewModel.appliedQuery, this.reactionFilter],
+            () =>
+                this.searchViewModel.appliedQuery.value != "" ||
+                this.reactionFilter.value != undefined,
+        );
     }
 }

src/ViewModel/Utility/searchViewModel.ts

@@ -8,8 +8,8 @@ export default class SearchViewModel<T> {
     getStringsOfObject: (object: T) => string[];
 
     // state
-    appliedQuery: React.State<string> = new React.State("");
-    searchInput: React.State<string> = new React.State("");
+    appliedQuery = new React.State<string>("");
+    searchInput = new React.State<string>("");
     matchingObjects: React.ListState<T>;
 
     suggestions: React.ListState<string>;