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
-                                        .newBoardNamePlaceholder
+                                    coreViewModel.translations.general.filterOrCreateLabel
                                 }
                             ></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>
+}

src/View/translations.ts

@@ -22,6 +22,9 @@ const englishTranslations = {
         saveButton: "Save",
         setButton: "Set",
 
+	filterOrCreateLabel: "Search or create",
+	createLabel: (query: string) => `Create "${query}"`,
+
         reloadAppButton: "Reload App",
 
         fileVersionLabel: "Version",
@@ -248,11 +251,6 @@ const englishTranslations = {
         },
 
         task: {
-            newBoardNamePlaceholder: "Create a board",
-            createBoardButtonAudioLabel: "create board",
-
-            ///
-
             noBoardSelected: "No board selected",
             boardNotFound: "Board not found",
 
@@ -360,6 +358,9 @@ export const allTranslations: {
             saveButton: "Speichern",
             setButton: "OK",
 	
+	    filterOrCreateLabel: "Suchen oder erstellen",
+	    createLabel: (query: string) => `"${query}" erstellen`,
+
 	    reloadAppButton: "Neu laden",
 
 	    fileVersionLabel: "Version",
@@ -571,9 +572,6 @@ export const allTranslations: {
 	    },
 
 	    task: {
-                newBoardNamePlaceholder: "Board erstellen",
-                createBoardButtonAudioLabel: "board erstellen",
-
 		noBoardSelected: "Kein Board ausgewählt",
 		boardNotFound: "Board nicht gefunden",
 
@@ -662,6 +660,9 @@ export const allTranslations: {
 	    saveButton: "Guardar",
 	    setButton: "OK",
 
+	    filterOrCreateLabel: "Buscar o crear",
+	    createLabel: (query: string) => `Crear "${query}"`,
+
 	    reloadAppButton: "Recargar app",
 
 	    fileVersionLabel: "Versión",
@@ -873,9 +874,6 @@ export const allTranslations: {
 	    },
 
 	    task: {
-                newBoardNamePlaceholder: "Crear un tablero",
-                createBoardButtonAudioLabel: "crear tablero",
-
 		noBoardSelected: "Ningún tablero seleccionado",
 		boardNotFound: "Tablero no encontrado",