add serchOrCreate for chats

src/View/ChatPages/taskPage.tsx

@@ -67,7 +67,7 @@ export function TaskPage(
                                 on:enter={taskPageViewModel.createBoard}
                                 placeholder={
                                     coreViewModel.translations.general
-                                        .filterOrCreateLabel
+                                        .filterOrCreateLabel(coreViewModel.translations.chatPage.task.typeBoard)
                                 }
                             ></input>
                         </div>

src/View/Components/chatEntry.tsx

@@ -4,7 +4,7 @@ import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 export function ChatEntry(chatViewModel: ChatViewModel) {
     const view = (
         <button
-            class="tile colored-tile chat-entry animate-highlight"
+            class="tile colored-tile chat-entry animate-highlight slide-up"
             set:color={chatViewModel.settingsPageViewModel.color}
             style="height: 8rem"
             on:click={chatViewModel.open}

src/View/homePage.css

@@ -29,15 +29,19 @@
     flex-direction: column;
     justify-content: start;
 
-    gap: var(--gap-between-tiles);
-
     width: 100%;
     min-width: 100%;
 }
 
-#home-page #chat-grid {
+#home-page #overview-section {
-    margin-top: var(--content-padding);
+    gap: var(--gap-between-tiles);
+}
 
+#home-page #chat-section > button {
+    margin-bottom: var(--gap-between-tiles);
+}
+
+#home-page #chat-grid {
     display: grid;
     gap: var(--gap-between-tiles);
 

src/View/homePage.tsx

@@ -9,6 +9,7 @@ import FileTransferViewModel from "../ViewModel/Global/fileTransferViewModel";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
 import ConnectionViewModel from "../ViewModel/Global/connectionViewModel";
 import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
+import {NewItemEntry} from "./Components/newItemEntry";
 
 export function HomePage(
     coreViewModel: CoreViewModel,
@@ -126,32 +127,22 @@ export function HomePage(
             <div class="flex-row width-input">
                 <input
                                 placeholder={
-                        coreViewModel.translations.homePage.addChatPlaceholder
+                                    coreViewModel.translations.general
+                                        .filterOrCreateLabel(coreViewModel.translations.homePage.typeChat)
                                 }
-                    aria-label={
+                    bind:value={chatListViewModel.chatQuery}
-                        coreViewModel.translations.homePage.addChatAudioLabel
-                    }
-                    bind:value={chatListViewModel.newChatPrimaryChannel}
                     on:enter={chatListViewModel.createChat}
                 ></input>
-                <button
-                    class="primary"
-                    aria-label={
-                        coreViewModel.translations.homePage.addChatButton
-                    }
-                    on:click={chatListViewModel.createChat}
-                    toggle:disabled={chatListViewModel.cannotCreateChat}
-                >
-                    <span class="icon">add</span>
-                </button>
 	    </div>
 
 	    <hr></hr>
 
+	    {NewItemEntry(coreViewModel, chatListViewModel.chatQuery, chatListViewModel.createChat)}
+
             <div
                 id="chat-grid"
                 children:append={[
-                    chatListViewModel.chatViewModels,
+                    chatListViewModel.chatMatches,
                     ChatViewModelToChatEntry,
                 ]}
 	    ></div>

src/View/translations.ts

@@ -22,7 +22,7 @@ const englishTranslations = {
         saveButton: "Save",
         setButton: "Set",
 
-        filterOrCreateLabel: "Search or create",
+        filterOrCreateLabel: (type: string) => `Search or create ${type}`,
         createLabel: (query: string) => `Create "${query}"`,
 
         reloadAppButton: "Reload App",
@@ -72,7 +72,8 @@ const englishTranslations = {
 
         ///
 
-        addChatAudioLabel: "name of new chat",
+	typeChat: "chat",
+
         addChatPlaceholder: "Add chat",
         addChatButton: "Add chat",
     },
@@ -292,6 +293,8 @@ const englishTranslations = {
             noBoardSelected: "No board selected",
             boardNotFound: "Board not found",
 
+	    typeBoard: "board",
+
             ///
 
             closeBoardButtonAudioLabel: "close board",
@@ -400,7 +403,7 @@ export const allTranslations: {
             saveButton: "Speichern",
             setButton: "OK",
 
-            filterOrCreateLabel: "Suchen oder erstellen",
+        filterOrCreateLabel: (type: string) => `${type} suchen oder erstellen`,
             createLabel: (query: string) => `"${query}" erstellen`,
 
             reloadAppButton: "Neu laden",
@@ -446,7 +449,8 @@ export const allTranslations: {
 
 	    updateButton: (version: string) => `Aktualisieren: ${version}`,
 	
-	    addChatAudioLabel: "Name des neuen Chats",
+	    typeChat: "Chat",
+
 	    addChatPlaceholder: "Chat hinzufügen",
 	    addChatButton: "Chat hinzufügen",
 	},
@@ -655,6 +659,8 @@ export const allTranslations: {
 		noBoardSelected: "Kein Board ausgewählt",
 		boardNotFound: "Board nicht gefunden",
 	    
+		typeBoard: "Board",
+
 		closeBoardButtonAudioLabel: "board schließen",
 		toggleBoardButtonAudioLabel: "board-liste ein/ausblenden",
 		showBoardSettingsButtonAudioLabel:
@@ -742,7 +748,7 @@ export const allTranslations: {
 	    saveButton: "Guardar",
 	    setButton: "OK",
 
-	    filterOrCreateLabel: "Buscar o crear",
+        filterOrCreateLabel: (type: string) => `Buscar o crear ${type}`,
 	    createLabel: (query: string) => `Crear "${query}"`,
 
 	    reloadAppButton: "Recargar app",
@@ -788,7 +794,8 @@ export const allTranslations: {
 
 	    updateButton: (version: string) => `Actualizar a ${version}`,
 	
-	    addChatAudioLabel: "nombre del nuevo chat",
+	    typeChat: "chat",
+
 	    addChatPlaceholder: "Añadir chat",
 	    addChatButton: "Añadir chat",
 	},
@@ -998,6 +1005,8 @@ export const allTranslations: {
 		noBoardSelected: "Ningún tablero seleccionado",
 		boardNotFound: "Tablero no encontrado",
 	    
+		typeBoard: "board",
+
 		closeBoardButtonAudioLabel: "cerrar tablero",
 		toggleBoardButtonAudioLabel:
 		"mostrar o ocultar lista de tableros",

src/ViewModel/Chat/chatListViewModel.ts

@@ -5,7 +5,7 @@ import CoreViewModel from "../Global/coreViewModel";
 import ContactListViewModel from "../Global/contactViewModel";
 import ConnectionViewModel from "../Global/connectionViewModel";
 import * as React from "../../react";
-import { IndexManager } from "../../Model/Utility/utility";
+import implementFilter, { IndexManager } from "../../Model/Utility/utility";
 import ChatModel from "../../Model/Chat/chatModel";
 
 export default class ChatListViewModel {
@@ -18,8 +18,9 @@ export default class ChatListViewModel {
     );
 
     // state
-    newChatPrimaryChannel: React.State<string> = new React.State("");
+    chatQuery: React.State<string> = new React.State("");
     chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+    chatMatches: React.ListState<ChatViewModel> = new React.ListState();
 
     selectedChat: React.State<ChatViewModel | undefined> = new React.State<any>(
         undefined,
@@ -27,17 +28,17 @@ export default class ChatListViewModel {
 
     // guards
     cannotCreateChat = React.createProxyState(
-        [this.newChatPrimaryChannel],
+        [this.chatQuery],
-        () => this.newChatPrimaryChannel.value == "",
+        () => this.chatQuery.value == "",
     );
 
     // methods
     createChat = (): void => {
         const chatModel: ChatModel =
             this.coreViewModel.chatListModel.createChat(
-                this.newChatPrimaryChannel.value,
+                this.chatQuery.value,
             );
-        this.newChatPrimaryChannel.value = "";
+        this.chatQuery.value = "";
 
         const chatViewModel: ChatViewModel =
             this.createChatViewModel(chatModel);
@@ -107,6 +108,8 @@ export default class ChatListViewModel {
         );
 
         this.loadChats();
+	
+	implementFilter(this.chatViewModels, this.chatMatches, this.chatQuery, chat => chat.chatModel.info.name)
     }
 
     // utility