change message filter icon when filter active

src/View/ChatPages/messagePage.tsx

@@ -19,6 +19,14 @@ export function MessagePage(
         return ChatMessage(coreViewModel, chatMessageViewModel);
     };
 
+    const filterIcon = React.createProxyState(
+        [messagePageViewModel.isFilterActive],
+        () =>
+            messagePageViewModel.isFilterActive.value
+                ? "filter_alt"
+                : "filter_alt_off",
+    );
+
     const messageContainer = (
         <div
             id="message-container"
@@ -69,7 +77,10 @@ export function MessagePage(
                                         .filterMessagesButtonAudioLabel
                                 }
                             >
-                                <span class="icon">filter_alt</span>
+                                <span
+                                    class="icon"
+                                    subscribe:innerText={filterIcon}
+                                ></span>
                             </button>
                         </span>
                     </div>

src/View/Modals/messageFilterModal.tsx

@@ -68,7 +68,10 @@ export function MessageFilterModal<T>(
                     </h3>
 
                     <div class="flex-column gap">
-                        <button toggle:selected={noFilter} on:click={messagePageViewModel.revokeReactionFilter}>
+                        <button
+                            toggle:selected={noFilter}
+                            on:click={messagePageViewModel.revokeReactionFilter}
+                        >
                             {
                                 coreViewModel.translations.chatPage.message
                                     .messageFilterAllReactionsButton

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>;