add message filter

src/View/ChatPages/messagePage.css

@@ -149,6 +149,14 @@
     word-break: break-word;
 }
 
+.modal .message-bubble .tile.main .body {
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+}
+
 .message-bubble[sentbyuser] {
     justify-content: flex-end;
 }

src/View/ChatPages/messagePage.tsx

@@ -6,6 +6,7 @@ import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ChatMessage } from "../Components/chatMessage";
+import { SearchModal } from "../Modals/searchModal";
 
 export function MessagePage(
     coreViewModel: CoreViewModel,
@@ -22,7 +23,7 @@ export function MessagePage(
         <div
             id="message-container"
             children:append={[
-                messagePageViewModel.chatMessageViewModels,
+                messagePageViewModel.filteredMessageViewModels,
                 ChatMessageViewModelToView,
             ]}
         ></div>
@@ -43,7 +44,7 @@ export function MessagePage(
 
         scrollDown();
     }
-    messagePageViewModel.chatMessageViewModels.subscribeSilent(
+    messagePageViewModel.filteredMessageViewModels.subscribeSilent(
         scrollDownIfApplicable,
     );
     setTimeout(() => scrollDown(true), 100);
@@ -59,6 +60,18 @@ export function MessagePage(
                                     .messagesHeadline
                             }
                         </span>
+                        <span>
+                            <button
+                                class="ghost"
+                                on:click={messagePageViewModel.openFilterModal}
+                                aria-label={
+                                    coreViewModel.translations.chatPage.message
+                                        .filterMessagesButtonAudioLabel
+                                }
+                            >
+                                <span class="icon">filter_alt</span>
+                            </button>
+                        </span>
                     </div>
                     <div class="content">
                         {messageContainer}
@@ -100,6 +113,15 @@ export function MessagePage(
                     </div>
                 </div>
             </div>
+
+            {SearchModal(
+                coreViewModel,
+                messagePageViewModel.searchViewModel,
+                coreViewModel.translations.chatPage.message
+                    .messageFilterHeadline,
+                ChatMessageViewModelToView,
+                messagePageViewModel.isFilterModalOpen,
+            )}
         </div>
     );
 }

src/View/Components/messageReactionButton.tsx

@@ -13,7 +13,10 @@ export function MessageReactionButton(
 ) {
     let audioLabel: string;
     let count: React.State<number>;
-    let isActive = React.createProxyState([chatMessageViewModel.userReaction], (() => chatMessageViewModel.userReaction.value == content))
+    let isActive = React.createProxyState(
+        [chatMessageViewModel.userReaction],
+        () => chatMessageViewModel.userReaction.value == content,
+    );
 
     function sendReaction() {
         chatMessageViewModel.sendReaction(content, isActive.value);

src/View/translations.ts

@@ -184,11 +184,13 @@ const englishTranslations = {
 
         message: {
             messagesHeadline: "Messages",
+            messageFilterHeadline: "Filter messages",
 
             ///
 
             composerInputPlaceholder: "Type a message...",
             sendMessageButtonAudioLabel: "send message",
+            filterMessagesButtonAudioLabel: "filter messages",
 
             ///
 
@@ -480,9 +482,11 @@ export const allTranslations: {
 
             message: {
                 messagesHeadline: "Nachrichten",
+                messageFilterHeadline: "Nachrichten filtern",
 
                 composerInputPlaceholder: "Schreib eine Nachricht...",
                 sendMessageButtonAudioLabel: "nachricht senden",
+                filterMessagesButtonAudioLabel: "nachrichten filtern",
 
                 showMessageInfoButtonAudioLabel: "nachrichteninfo anzeigen",
                 messageInfoHeadline: "Nachrichteninfo",
@@ -750,9 +754,11 @@ export const allTranslations: {
 
             message: {
                 messagesHeadline: "Mensajes",
+                messageFilterHeadline: "Filtrar mensajes",
 
                 composerInputPlaceholder: "Escribe un mensaje...",
                 sendMessageButtonAudioLabel: "enviar mensaje",
+                filterMessagesButtonAudioLabel: "filtrar mensajes",
 
                 showMessageInfoButtonAudioLabel:
                     "mostrar información del mensaje",