implement message filter by reactions

src/View/Components/chatMessage.tsx

@@ -30,6 +30,7 @@ export function ChatMessage(
         <div
             class="message-bubble"
             toggle:sentbyuser={chatMessageViewModel.sentByUser}
+            toggle:hidden={chatMessageViewModel.isHidden}
         >
             <div class="main tile">
                 <div class="text-container">

src/View/Components/messageReactionFilterButton.tsx

@@ -0,0 +1,32 @@
+import * as React from "bloatless-react";
+import {
+    ChatMessageReaction,
+    ReactionSymbols,
+} from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
+
+export function MessageReactionFilterButton(
+    messagePageViewModel: MessagePageViewModel,
+    content: ReactionSymbols,
+) {
+    const select = () => {
+        messagePageViewModel.setReactionFilter(content);
+    };
+
+    const isSelected = React.createProxyState(
+        [messagePageViewModel.reactionFilter],
+        () => messagePageViewModel.reactionFilter.value == content,
+    );
+
+    return (
+        <button
+            class="flex justify-center"
+            on:click={select}
+            toggle:selected={isSelected}
+        >
+            {content}
+        </button>
+    );
+}