chore(react/collections/board): add columns without refresh yet

apps/client/src/widgets/collections/board/index.css

@@ -247,6 +247,18 @@
   font-size: 1.2em;
 }
 
+.board-add-column input {
+  background: var(--main-background-color);
+  border: 1px solid var(--main-text-color);
+  border-radius: 4px;
+  padding: 0.5em;
+  color: var(--main-text-color);
+  font-family: inherit;
+  font-size: inherit;
+  width: 100%;
+  text-align: center;
+}
+
 .board-drag-preview {
   position: fixed;
   z-index: 10000;

apps/client/src/widgets/collections/board/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
 import "./index.css";
 import { ColumnMap, getBoardData } from "./data";
@@ -8,6 +8,7 @@ import FBranch from "../../../entities/fbranch";
 import Icon from "../../react/Icon";
 import { t } from "../../../services/i18n";
 import { createNewItem } from "./api";
+import FormTextBox from "../../react/FormTextBox";
 
 export interface BoardViewData {
     columns?: BoardColumnData[];
@@ -76,6 +77,8 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
                         parentNote={parentNote}
                     />
                 ))}
+
+                <AddNewColumn viewConfig={viewConfig} saveConfig={saveConfig} />
             </div>
         </div>
     )
@@ -113,3 +116,62 @@ function Card({ note }: { note: FNote, branch: FBranch, column: string }) {
         </div>
     )
 }
+
+function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, saveConfig: (data: BoardViewData) => void }) {
+    const [ isCreatingNewColumn, setIsCreatingNewColumn ] = useState(false);
+    const columnNameRef = useRef<HTMLInputElement>(null);
+
+    const addColumnCallback = useCallback(() => {
+        setIsCreatingNewColumn(true);
+    }, []);
+
+    const finishEdit = useCallback((save: boolean) => {
+        const columnName = columnNameRef.current?.value;
+        if (!columnName || !save) {
+            setIsCreatingNewColumn(false);
+            return;
+        }
+
+        // Add the new column to persisted data if it doesn't exist
+        if (!viewConfig) {
+            viewConfig = {};
+        }
+
+        if (!viewConfig.columns) {
+            viewConfig.columns = [];
+        }
+
+        const existingColumn = viewConfig.columns.find(col => col.value === columnName);
+        if (!existingColumn) {
+            viewConfig.columns.push({ value: columnName });
+            saveConfig(viewConfig);
+        }
+    }, []);
+
+    return (
+        <div className={`board-add-column ${isCreatingNewColumn ? "editing" : ""}`} onClick={addColumnCallback}>
+            {!isCreatingNewColumn
+            ? <>
+                <Icon icon="bx bx-plus" />{" "}
+                {t("board_view.add-column")}
+            </>
+            : <>
+                <FormTextBox
+                    inputRef={columnNameRef}
+                    type="text"
+                    placeholder="Enter column name..."
+                    onBlur={() => finishEdit(true)}
+                    onKeyDown={(e: KeyboardEvent) => {
+                        if (e.key === "Enter") {
+                            e.preventDefault();
+                            finishEdit(true);
+                        } else if (e.key === "Escape") {
+                            e.preventDefault();
+                            finishEdit(false);
+                        }
+                    }}
+                />
+            </>}
+        </div>
+    )
+}

apps/client/src/widgets/view_widgets/board_view/api.ts

@@ -91,21 +91,6 @@ export default class BoardApi {
         this.viewStorage.store(this.persistedData);
     }
 
-    async createColumn(columnValue: string) {
-        // Add the new column to persisted data if it doesn't exist
-        if (!this.persistedData.columns) {
-            this.persistedData.columns = [];
-        }
-
-        const existingColumn = this.persistedData.columns.find(col => col.value === columnValue);
-        if (!existingColumn) {
-            this.persistedData.columns.push({ value: columnValue });
-            await this.viewStorage.store(this.persistedData);
-        }
-
-        return columnValue;
-    }
-
     async reorderColumns(newColumnOrder: string[]) {
         // Update the column order in persisted data
         if (!this.persistedData.columns) {

apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts

@@ -95,8 +95,6 @@ export class DifferentialBoardRenderer {
             const $columnEl = this.createColumn(column, columnItems);
             this.$container.append($columnEl);
         }
-
-        this.addAddColumnButton();
     }
 
     private async differentialRender(oldState: BoardState, newState: BoardState): Promise<void> {
@@ -366,16 +364,6 @@ export class DifferentialBoardRenderer {
         return $noteEl;
     }
 
-    private addAddColumnButton(): void {
-        if (this.$container.find('.board-add-column').length === 0) {
-            const $addColumnEl = $("<div>")
-                .addClass("board-add-column")
-                .html(`<span class="icon bx bx-plus"></span> ${t("board_view.add-column")}`);
-
-            this.$container.append($addColumnEl);
-        }
-    }
-
     forceFullRender(): void {
         this.lastState = null;
         if (this.updateTimeout) {

apps/client/src/widgets/view_widgets/board_view/index.ts

@@ -246,27 +246,6 @@ export default class BoardView extends ViewMode<BoardData> {
     }
 
     private startCreatingNewColumn($addColumnEl: JQuery<HTMLElement>) {
-        if ($addColumnEl.hasClass("editing")) {
-            return; // Already editing
-        }
-
-        $addColumnEl.addClass("editing");
-
-        const $input = $("<input>")
-            .attr("type", "text")
-            .attr("placeholder", "Enter column name...")
-            .css({
-                background: "var(--main-background-color)",
-                border: "1px solid var(--main-text-color)",
-                borderRadius: "4px",
-                padding: "0.5em",
-                color: "var(--main-text-color)",
-                fontFamily: "inherit",
-                fontSize: "inherit",
-                width: "100%",
-                textAlign: "center"
-            });
-
         $addColumnEl.empty().append($input);
         $input.focus();
 
@@ -283,21 +262,7 @@ export default class BoardView extends ViewMode<BoardData> {
                     await this.createNewColumn(columnName.trim());
                 }
             }
-
-            // Restore the add button
-            $addColumnEl.html('<span class="icon bx bx-plus"></span>Add Column');
         };
-
-        $input.on("blur", () => finishEdit(true));
-        $input.on("keydown", (e) => {
-            if (e.key === "Enter") {
-                e.preventDefault();
-                finishEdit(true);
-            } else if (e.key === "Escape") {
-                e.preventDefault();
-                finishEdit(false);
-            }
-        });
     }
 
     private async createNewColumn(columnName: string) {