implement task filter

src/View/ChatPages/boardKanbanPage.tsx

@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
 import { PropertyValueList } from "../Components/propertyList";
-import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Pages/taskPropertyBulkChangeViewModel";
+import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
@@ -34,7 +34,7 @@ function KanbanBoard(categoryName: string, boardViewModel: BoardViewModel) {
   return FilteredList(
     { category: categoryName },
     (taskViewModel: TaskViewModel) => taskViewModel.task,
-    boardViewModel.taskViewModels,
+    boardViewModel.filteredTaskViewModels,
     (taskViewModels: React.ListState<TaskViewModel>) => {
       const viewModel: TaskCategoryBulkChangeViewModel =
         new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);

src/View/ChatPages/boardPage.tsx

@@ -8,13 +8,16 @@ import { BoardKanbanPage } from "./boardKanbanPage";
 import { BoardSettingsModal } from "../Modals/boardSettingsModal";
 import { BoardStatusGridPage } from "./boardStatusGridPage";
 import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
+import { SearchModal } from "../Modals/searchModal";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
   boardViewModel.loadData();
 
+  // main content
   const mainContent = React.createProxyState(
     [boardViewModel.selectedPage],
     () => {
@@ -30,7 +33,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
             <div
               class="task-grid"
               children:append={[
-                boardViewModel.taskViewModels,
+                boardViewModel.filteredTaskViewModels,
                 TaskViewModelToEntry,
               ]}
             ></div>
@@ -40,6 +43,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
     }
   );
 
+  // task modal
   const taskSettingsModal = React.createProxyState(
     [boardViewModel.selectedTaskViewModel],
     () => {
@@ -110,6 +114,14 @@ export function BoardPage(boardViewModel: BoardViewModel) {
       <div class="content main-content" children:set={mainContent}></div>
 
       {BoardSettingsModal(boardViewModel)}
+      {SearchModal(
+        translations.chatPage.task.filterTasksHeadline,
+        boardViewModel.taskViewModels,
+        boardViewModel.filteredTaskViewModels,
+        TaskViewModelToEntry,
+        boardViewModel.getStringsFromTaskViewModel,
+        boardViewModel.isPresentingFilterModal
+      )}
       <div children:set={taskSettingsModal}></div>
     </div>
   );

src/View/ChatPages/boardStatusGridPage.tsx

@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
 import {
   TaskCategoryBulkChangeViewModel,
   TaskStatusBulkChangeViewModel,
-} from "../../ViewModel/Pages/taskPropertyBulkChangeViewModel";
+} from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
@@ -46,7 +46,7 @@ export function BoardStatusGridPage(boardViewModel: BoardViewModel) {
       {PropertyValueList(
         "category",
         (taskViewModel: TaskViewModel) => taskViewModel.task,
-        boardViewModel.taskViewModels,
+        boardViewModel.filteredTaskViewModels,
         (categories: React.ListState<string>) => {
           return (
             <div