add input to rename kanban boards

dist/index.js

@@ -427,6 +427,7 @@
     undoChanges: "Undo changes",
     close: "Close",
     discard: "Discard",
+    rename: "Rename",
     zoomOut: "zoom out",
     zoomIn: "zoom in",
     // overview
@@ -513,6 +514,7 @@
       undoChanges: "Deshacer",
       close: "Cerrar",
       discard: "Descartar",
+      rename: "Renombrar",
       zoomOut: "alejar",
       zoomIn: "acercar",
       // overview
@@ -597,6 +599,7 @@
       undoChanges: "\xC4nderungen verwerfen",
       close: "Schlie\xDFen",
       discard: "Verwerfen",
+      rename: "Umbenennen",
       zoomOut: "verkleinern",
       zoomIn: "vergr\xF6\xDFern",
       // overview
@@ -1487,6 +1490,19 @@
     return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content });
   }
   function KanbanBoardView(chat, kanbanBoard, selectedObject, isShowingObjectModal) {
+    const editingBoardTitle = new State(kanbanBoard.title);
+    const isEditing = new State(false);
+    const cannotRename = 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) {
       event.preventDefault();
     }
@@ -1500,6 +1516,7 @@
       latest.categoryName = kanbanBoard.title;
       chat.addObjectAndSend(messageObject);
     }
+    const titleInput = /* @__PURE__ */ createElement("input", { "bind:value": editingBoardTitle, "on:enter": renameBoard });
     return /* @__PURE__ */ createElement(
       "div",
       {
@@ -1508,7 +1525,16 @@
         "on:dragover": dragOver,
         "on:drop": drop
       },
-      /* @__PURE__ */ createElement("b", { class: "flex-row width-100" }, kanbanBoard.title),
+      /* @__PURE__ */ createElement("div", { class: "flex-row align-center justify-apart" }, titleInput, /* @__PURE__ */ createElement(
+        "button",
+        {
+          class: "primary",
+          "aria-label": translation.rename,
+          "on:click": renameBoard,
+          "toggle:disabled": cannotRename
+        },
+        /* @__PURE__ */ createElement("span", { class: "icon" }, "edit")
+      )),
       /* @__PURE__ */ createElement("hr", null),
       /* @__PURE__ */ createElement("div", { class: "flex-column gap padding-bottom" }, ...kanbanBoard.items.map(
         (messageObject) => ObjectEntryView(

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",