add input to rename kanban boards

src/Views/Objects/kanbanView.tsx

@@ -59,6 +59,23 @@ function KanbanBoardView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
+  const editingBoardTitle = new React.State(kanbanBoard.title);
+  const isEditing = new React.State(false);
+  const cannotRename = React.createProxyState(
+    [editingBoardTitle],
+    () =>
+      editingBoardTitle.value == kanbanBoard.title ||
+      editingBoardTitle.value == ""
+  );
+
+  function renameBoard() {
+    kanbanBoard.items.forEach((messageObject) => {
+      const latest = chat.getMostRecentContent(messageObject);
+      latest.categoryName = editingBoardTitle.value;
+      chat.addObjectAndSend(messageObject);
+    });
+  }
+
   function dragOver(event: DragEvent) {
     event.preventDefault();
   }
@@ -73,10 +90,13 @@ function KanbanBoardView(
 
     const latest = chat.getMostRecentContent(messageObject);
     latest.categoryName = kanbanBoard.title;
-
     chat.addObjectAndSend(messageObject);
   }
 
+  const titleInput = (
+    <input bind:value={editingBoardTitle} on:enter={renameBoard}></input>
+  );
+
   return (
     <div
       class="flex-column flex-no"
@@ -84,7 +104,17 @@ function KanbanBoardView(
       on:dragover={dragOver}
       on:drop={drop}
     >
-      <b class="flex-row width-100">{kanbanBoard.title}</b>
+      <div class="flex-row align-center justify-apart">
+        {titleInput}
+        <button
+          class="primary"
+          aria-label={translation.rename}
+          on:click={renameBoard}
+          toggle:disabled={cannotRename}
+        >
+          <span class="icon">edit</span>
+        </button>
+      </div>
       <hr></hr>
       <div class="flex-column gap padding-bottom">
         {...kanbanBoard.items.map((messageObject) =>

src/translations.ts

@@ -6,6 +6,7 @@ const englishTranslations = {
   undoChanges: "Undo changes",
   close: "Close",
   discard: "Discard",
+  rename: "Rename",
 
   zoomOut: "zoom out",
   zoomIn: "zoom in",
@@ -119,6 +120,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     undoChanges: "Deshacer",
     close: "Cerrar",
     discard: "Descartar",
+    rename: "Renombrar",
 
     zoomOut: "alejar",
     zoomIn: "acercar",
@@ -229,6 +231,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     undoChanges: "Änderungen verwerfen",
     close: "Schließen",
     discard: "Verwerfen",
+    rename: "Umbenennen",
 
     zoomOut: "verkleinern",
     zoomIn: "vergrößern",