implement searchOrCreate for boards

src/Model/Utility/utility.ts

@@ -106,7 +106,7 @@ export default function implementFilter<T>(
     function update() {
         matches.clear();
         allItems.value.forEach((item: T) => {
-            if (!itemToString(item).includes(query.value)) return;
+            if (!itemToString(item).toLowerCase().includes(query.value.toLowerCase())) return;
             matches.add(item);
             allItems.handleRemoval(item, () => {
                 matches.remove(item);

src/View/ChatPages/taskPage.tsx

@@ -6,6 +6,7 @@ import { BoardViewModelToEntry } from "../Components/boardEntry";
 import * as React from "../../react";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import {NewItemEntry} from "../Components/newItemEntry";
 
 export function TaskPage(
     coreViewModel: CoreViewModel,
@@ -65,26 +66,13 @@ export function TaskPage(
                                 bind:value={taskPageViewModel.boardQuery}
                                 on:enter={taskPageViewModel.createBoard}
                                 placeholder={
-                                    coreViewModel.translations.chatPage.task
+                                    coreViewModel.translations.general.filterOrCreateLabel
-                                        .newBoardNamePlaceholder
                                 }
                             ></input>
-                            <button
-                                class="primary"
-                                aria-label={
-                                    coreViewModel.translations.chatPage.task
-                                        .createBoardButtonAudioLabel
-                                }
-                                on:click={taskPageViewModel.createBoard}
-                                toggle:disabled={
-                                    taskPageViewModel.cannotCreateBoard
-                                }
-                            >
-                                <span class="icon">add</span>
-                            </button>
                         </div>
                     </div>
-                    <div class="content">
+		    <div class="content gap">
+			{NewItemEntry(coreViewModel, taskPageViewModel.boardQuery, taskPageViewModel.createBoard)}
                         <div
                             class="grid gap"
                             style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"

src/View/Components/boardEntry.tsx

@@ -6,7 +6,7 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
     const view = (
         <button
             set:color={boardViewModel.color}
-            class="tile colored-tile"
+            class="tile colored-tile slide-up"
             toggle:selected={boardViewModel.isSelected}
             on:click={boardViewModel.select}
             on:dragover={ViewController.allowDrop}

src/View/Components/newItemEntry.tsx

@@ -0,0 +1,16 @@
+import * as React from "../../react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+
+export function NewItemEntry(coreViewModel: CoreViewModel, query: React.State<string>, fn: ()=>void) {
+    const isHidden = React.createProxyState([query],()=>query.value == "");
+    const label = React.createProxyState([query],()=>coreViewModel.translations.general.createLabel(query.value));
+
+    return <button
+	class="standard slide-up"
+	toggle:hidden={isHidden}
+	on:click={fn}
+    >
+	<span subscribe:innerText={label}></span>
+	<span class="icon">add</span>
+    </button>
+}