add separate message filter modal, clean styles

src/View/ChatPages/messagePage.tsx

@@ -6,7 +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";
+import { MessageFilterModal } from "../Modals/messageFilterModal";
 
 export function MessagePage(
     coreViewModel: CoreViewModel,
@@ -114,13 +114,10 @@ export function MessagePage(
                 </div>
             </div>
 
-            {SearchModal(
+            {MessageFilterModal(
                 coreViewModel,
-                messagePageViewModel.searchViewModel,
-                coreViewModel.translations.chatPage.message
-                    .messageFilterHeadline,
+                messagePageViewModel,
                 ChatMessageViewModelToView,
-                messagePageViewModel.isFilterModalOpen,
             )}
         </div>
     );

src/View/Modals/messageFilterModal.tsx

@@ -0,0 +1,49 @@
+import * as React from "bloatless-react";
+
+import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
+import { StringToOption } from "../Components/option";
+import { v4 } from "uuid";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
+
+export function MessageFilterModal<T>(
+    coreViewModel: CoreViewModel,
+    messagePageViewModel: MessagePageViewModel,
+    converter: React.StateItemConverter<T>,
+) {
+    return (
+        <div class="modal" toggle:open={messagePageViewModel.isFilterModalOpen}>
+            <div>
+                <main>
+                    <h2>{coreViewModel.translations.chatPage.message.messageFilterHeadline}</h2>
+                    <div class="flex-row width-input">
+                        <input
+                            placeholder={
+                                coreViewModel.translations.general.searchLabel
+                            }
+                            bind:value={messagePageViewModel.searchViewModel.searchInput}
+                            on:enter={messagePageViewModel.searchViewModel.applySearch}
+                        ></input>
+                        <button
+                            class="primary"
+                            aria-label={
+                                coreViewModel.translations.general
+                                    .searchButtonAudioLabel
+                            }
+                            on:click={messagePageViewModel.searchViewModel.applySearch}
+                            toggle:disabled={messagePageViewModel.searchViewModel.cannotApplySearch}
+                        >
+                            <span class="icon">search</span>
+                        </button>
+                    </div>
+
+                    <hr></hr>
+                </main>
+                <button on:click={messagePageViewModel.closeFilterModal}>
+                    {coreViewModel.translations.general.closeButton}
+                    <span class="icon">close</span>
+                </button>
+            </div>
+        </div>
+    );
+}

src/View/Modals/searchModal.tsx

@@ -19,8 +19,8 @@ export function SearchModal<T>(
     const suggestionId = v4();
 
     return (
-        <div class="modal" toggle:open={isOpen}>
-            <div style="max-width: 64rem">
+        <div class="modal" toggle:open={isOpen} extended>
+            <div>
                 <main>
                     <h2>{headline}</h2>
                     <div class="flex-row width-input">

src/ViewModel/Pages/messagePageViewModel.ts

@@ -90,6 +90,10 @@ export default class MessagePageViewModel {
         this.isFilterModalOpen.value = true;
     };
 
+    closeFilterModal = (): void => {
+        this.isFilterModalOpen.value = false;
+    };
+
     // load
     loadData = (): void => {
         this.chatMessageViewModels.clear();