chore(react/collections/table): reintroduce editing of newly added item

apps/client/src/widgets/collections/board/api.ts

@@ -3,6 +3,7 @@ import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
 import { executeBulkActions } from "../../../services/bulk_action";
 import note_create from "../../../services/note_create";
+import server from "../../../services/server";
 import { ColumnMap } from "./data";
 
 export default class BoardApi {
@@ -13,7 +14,8 @@ export default class BoardApi {
         private parentNote: FNote,
         private statusAttribute: string,
         private viewConfig: BoardViewData,
-        private saveConfig: (newConfig: BoardViewData) => void
+        private saveConfig: (newConfig: BoardViewData) => void,
+        private setBranchIdToEdit: (branchId: string | undefined) => void
     ) {};
 
     async createNewItem(column: string) {
@@ -22,17 +24,14 @@ export default class BoardApi {
             const parentNotePath = this.parentNote.noteId;
 
             // Create a new note as a child of the parent note
-            const { note: newNote } = await note_create.createNote(parentNotePath, {
+            const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, {
                 activate: false,
                 title: "New item"
             });
 
             if (newNote) {
-                // Set the status label to place it in the correct column
                 await this.changeColumn(newNote.noteId, column);
-
-                // Start inline editing of the newly created card
-                //this.startInlineEditingCard(newNote.noteId);
+                this.setBranchIdToEdit(newBranch?.branchId);
             }
         } catch (error) {
             console.error("Failed to create new item:", error);
@@ -57,5 +56,13 @@ export default class BoardApi {
         this.saveConfig(this.viewConfig);
     }
 
+    dismissEditingTitle() {
+        this.setBranchIdToEdit(undefined);
+    }
+
+    renameCard(noteId: string, newTitle: string) {
+        return server.put(`notes/${noteId}/title`, { title: newTitle.trim() });
+    }
+
 }
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
 import "./index.css";
 import { ColumnMap, getBoardData } from "./data";
@@ -12,6 +12,7 @@ import FormTextBox from "../../react/FormTextBox";
 import branchService from "../../../services/branches";
 import { openColumnContextMenu, openNoteContextMenu } from "./context_menu";
 import { ContextMenuEvent } from "../../../menus/context_menu";
+import { createContext } from "preact";
 
 export interface BoardViewData {
     columns?: BoardColumnData[];
@@ -21,6 +22,12 @@ export interface BoardColumnData {
     value: string;
 }
 
+interface BoardViewContextData {
+    branchIdToEdit?: string;
+}
+
+const BoardViewContext = createContext<BoardViewContextData>({});
+
 export default function BoardView({ note: parentNote, noteIds, viewConfig, saveConfig }: ViewModeProps<BoardViewData>) {
     const [ statusAttribute ] = useNoteLabelWithDefault(parentNote, "board:groupBy", "status");
     const [ byColumn, setByColumn ] = useState<ColumnMap>();
@@ -30,9 +37,13 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
     const [ dropPosition, setDropPosition ] = useState<{ column: string, index: number } | null>(null);
     const [ draggedColumn, setDraggedColumn ] = useState<{ column: string, index: number } | null>(null);
     const [ columnDropPosition, setColumnDropPosition ] = useState<number | null>(null);
+    const [ branchIdToEdit, setBranchIdToEdit ] = useState<string>();
     const api = useMemo(() => {
-        return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig);
-    }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig ]);
+        return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig, setBranchIdToEdit );
+    }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]);
+    const boardViewContext = useMemo<BoardViewContextData>(() => ({
+        branchIdToEdit
+    }), [ branchIdToEdit ]);
 
     function refresh() {
         getBoardData(parentNote, statusAttribute, viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {
@@ -126,41 +137,43 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
 
     return (
         <div className="board-view">
-            <div
-                className="board-view-container"
-                onDragOver={handleColumnDragOver}
-                onDrop={handleContainerDrop}
-            >
-                {byColumn && columns?.map((column, index) => (
-                    <>
-                        {columnDropPosition === index && draggedColumn?.column !== column && (
-                            <div className="column-drop-placeholder show" />
-                        )}
-                        <Column
-                            api={api}
-                            column={column}
-                            columnIndex={index}
-                            columnItems={byColumn.get(column)}
-                            statusAttribute={statusAttribute ?? "status"}
-                            draggedCard={draggedCard}
-                            setDraggedCard={setDraggedCard}
-                            dropTarget={dropTarget}
-                            setDropTarget={setDropTarget}
-                            dropPosition={dropPosition}
-                            setDropPosition={setDropPosition}
-                            onCardDrop={refresh}
-                            draggedColumn={draggedColumn}
-                            setDraggedColumn={setDraggedColumn}
-                            isDraggingColumn={draggedColumn?.column === column}
-                        />
-                    </>
-                ))}
-                {columnDropPosition === columns?.length && draggedColumn && (
-                    <div className="column-drop-placeholder show" />
-                )}
+            <BoardViewContext.Provider value={boardViewContext}>
+                <div
+                    className="board-view-container"
+                    onDragOver={handleColumnDragOver}
+                    onDrop={handleContainerDrop}
+                >
+                    {byColumn && columns?.map((column, index) => (
+                        <>
+                            {columnDropPosition === index && draggedColumn?.column !== column && (
+                                <div className="column-drop-placeholder show" />
+                            )}
+                            <Column
+                                api={api}
+                                column={column}
+                                columnIndex={index}
+                                columnItems={byColumn.get(column)}
+                                statusAttribute={statusAttribute ?? "status"}
+                                draggedCard={draggedCard}
+                                setDraggedCard={setDraggedCard}
+                                dropTarget={dropTarget}
+                                setDropTarget={setDropTarget}
+                                dropPosition={dropPosition}
+                                setDropPosition={setDropPosition}
+                                onCardDrop={refresh}
+                                draggedColumn={draggedColumn}
+                                setDraggedColumn={setDraggedColumn}
+                                isDraggingColumn={draggedColumn?.column === column}
+                            />
+                        </>
+                    ))}
+                    {columnDropPosition === columns?.length && draggedColumn && (
+                        <div className="column-drop-placeholder show" />
+                    )}
 
-                <AddNewColumn viewConfig={viewConfig} saveConfig={saveConfig} />
-            </div>
+                    <AddNewColumn viewConfig={viewConfig} saveConfig={saveConfig} />
+                </div>
+            </BoardViewContext.Provider>
         </div>
     )
 }
@@ -359,6 +372,7 @@ function Card({
     setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
     isDragging: boolean
 }) {
+    const { branchIdToEdit } = useContext(BoardViewContext);
     const colorClass = note.getColorClass() || '';
 
     const handleDragStart = useCallback((e: DragEvent) => {
@@ -383,8 +397,26 @@ function Card({
             onDragEnd={handleDragEnd}
             onContextMenu={handleContextMenu}
         >
-            <span class={`icon ${note.getIcon()}`} />
-            {note.title}
+            {branch.branchId !== branchIdToEdit ? (
+                <>
+                    <span class={`icon ${note.getIcon()}`} />
+                    {note.title}
+                </>
+            ) : (
+                <FormTextBox
+                    value={note.title}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            api.renameCard(note.noteId, e.currentTarget.value);
+                            api.dismissEditingTitle();
+                        }
+
+                        if (e.key === "Escape") {
+                            api.dismissEditingTitle();
+                        }
+                    }}
+                />
+            )}
         </div>
     )
 }

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

@@ -447,8 +447,7 @@ export class DifferentialBoardRenderer {
                     try {
                         // Update the note title using the board view's server call
                         import('../../../services/server').then(async ({ default: server }) => {
-                            await server.put(`notes/${noteId}/title`, { title: newTitle.trim() });
-                            finalTitle = newTitle.trim();
+
                         });
                     } catch (error) {
                         console.error("Failed to update note title:", error);