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