change message filter icon when filter active

dist/index.js

@@ -2290,6 +2290,10 @@
         (chatMessageViewModel) => [chatMessageViewModel.body.value],
         new ListState()
       );
+      this.isFilterActive = createProxyState(
+        [this.searchViewModel.appliedQuery, this.reactionFilter],
+        () => this.searchViewModel.appliedQuery.value != "" || this.reactionFilter.value != void 0
+      );
     }
   };
 
@@ -3696,7 +3700,14 @@
         "toggle:disabled": messagePageViewModel.searchViewModel.cannotApplySearch
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "search")
-    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.chatPage.message.messageFilterReactionsHadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "toggle:selected": noFilter, "on:click": messagePageViewModel.revokeReactionFilter }, coreViewModel2.translations.chatPage.message.messageFilterAllReactionsButton), /* @__PURE__ */ createElement("div", { class: "grid gap message-reaction-filter" }, MessageReactionFilterButton(
+    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.chatPage.message.messageFilterReactionsHadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        "toggle:selected": noFilter,
+        "on:click": messagePageViewModel.revokeReactionFilter
+      },
+      coreViewModel2.translations.chatPage.message.messageFilterAllReactionsButton
+    ), /* @__PURE__ */ createElement("div", { class: "grid gap message-reaction-filter" }, MessageReactionFilterButton(
       messagePageViewModel,
       "\u{1F44D}" /* ThumbsUp */
     ), MessageReactionFilterButton(
@@ -3723,6 +3734,10 @@
     const ChatMessageViewModelToView = (chatMessageViewModel) => {
       return ChatMessage4(coreViewModel2, chatMessageViewModel);
     };
+    const filterIcon = createProxyState(
+      [messagePageViewModel.isFilterActive],
+      () => messagePageViewModel.isFilterActive.value ? "filter_alt" : "filter_alt_off"
+    );
     const messageContainer = /* @__PURE__ */ createElement(
       "div",
       {
@@ -3756,7 +3771,13 @@
         "on:click": messagePageViewModel.openFilterModal,
         "aria-label": coreViewModel2.translations.chatPage.message.filterMessagesButtonAudioLabel
       },
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "filter_alt")
+      /* @__PURE__ */ createElement(
+        "span",
+        {
+          class: "icon",
+          "subscribe:innerText": filterIcon
+        }
+      )
     ))), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
       "input",
       {
@@ -5743,7 +5764,7 @@
       this.connectionModel = connectionModel2;
       this.chatListModel = chatListModel2;
       this.fileTransferModel = fileTransferModel2;
-      this.BUILD = "Build 26.04.11.A";
+      this.BUILD = "Build 26.04.11.B";
       // DRAG & DROP
       this.draggedObject = new State(void 0);
       // SUGGESTIONS

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