style(collections/board): better new item that creates only after enter

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

@@ -20,7 +20,7 @@ export default class BoardApi {
         private setBranchIdToEdit: (branchId: string | undefined) => void
     ) {};
 
-    async createNewItem(column: string) {
+    async createNewItem(column: string, title: string) {
         try {
             // Get the parent note path
             const parentNotePath = this.parentNote.noteId;
@@ -28,12 +28,11 @@ export default class BoardApi {
             // Create a new note as a child of the parent note
             const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, {
                 activate: false,
-                title: "New item"
+                title
             });
 
             if (newNote && newBranch) {
                 await this.changeColumn(newNote.noteId, column);
-                this.startEditing(newBranch?.branchId);
             }
         } catch (error) {
             console.error("Failed to create new item:", error);

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

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
+import { useCallback, useContext, useEffect, useRef, useState } from "preact/hooks";
 import FBranch from "../../../entities/fbranch";
 import FNote from "../../../entities/fnote";
 import { BoardViewContext, TitleEditor } from ".";
@@ -117,14 +117,37 @@ export default function Column({
                 <div className="board-drop-placeholder show" />
             )}
 
-            <div className="board-new-item" onClick={() => api.createNewItem(column)}>
+            <AddNewItem api={api} column={column} />
-                <Icon icon="bx bx-plus" />{" "}
-                {t("board_view.new-item")}
-            </div>
         </div>
     )
 }
 
+function AddNewItem({ column, api }: { column: string, api: BoardApi }) {
+    const [ isCreatingNewItem, setIsCreatingNewItem ] = useState(false);
+    const addItemCallback = useCallback(() => setIsCreatingNewItem(true), []);
+
+    return (
+        <div
+            className={`board-new-item ${isCreatingNewItem ? "editing" : ""}`}
+            onClick={addItemCallback}
+        >
+            {!isCreatingNewItem ? (
+                <>
+                    <Icon icon="bx bx-plus" />{" "}
+                    {t("board_view.new-item")}
+                </>
+            ) : (
+                <TitleEditor
+                    currentValue={t("board_view.new-item")}
+                    save={(title) => api.createNewItem(column, title)}
+                    dismiss={() => setIsCreatingNewItem(false)}
+                    multiline isNewItem
+                />
+            )}
+        </div>
+    );
+}
+
 function useDragging({ column, columnIndex, columnItems }: DragContext) {
     const { api, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, draggedCard, dropPosition, setDraggedCard } = useContext(BoardViewContext);
 

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

@@ -111,7 +111,8 @@
 }
 
 
-.board-view-container .board-note {
+.board-view-container .board-note,
+.board-view-container .board-new-item.editing {
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
   margin: 0.65em 0;
   padding: var(--card-padding);
@@ -120,7 +121,6 @@
   position: relative;
   background-color: var(--main-background-color);
   border: 1px solid var(--main-border-color);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
   opacity: 1;
   line-height: var(--card-line-height);
   overflow-wrap: break-word;
@@ -128,6 +128,10 @@
   font-size: var(--card-font-size);
 }
 
+.board-view-container .board-note {
+  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
+}
+
 .board-view-container .board-note .icon {
   margin-right: 0.25em;
   display: inline;
@@ -179,16 +183,17 @@
   box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
 }
 
-.board-view-container .board-note.editing {
+.board-view-container .board-note.editing,
-  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35);
+.board-view-container .board-new-item.editing {
+  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
   border-color: var(--main-text-color);
   display: flex;
   align-items: center;
   padding: 0;
 }
 
-.board-view-container .board-note.editing input,
+.board-view-container .board-note.editing textarea,
-.board-view-container .board-note.editing textarea {
+.board-view-container .board-new-item textarea.form-control {
   background: transparent;
   border: none;
   outline: none;

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

@@ -257,11 +257,12 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
     )
 }
 
-export function TitleEditor({ currentValue, save, dismiss, multiline }: {
+export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem }: {
     currentValue: string,
     save: (newValue: string) => void,
     dismiss: () => void,
-    multiline?: boolean
+    multiline?: boolean,
+    isNewItem?: boolean
 }) {
     const inputRef = useRef<any>(null);
 
@@ -280,7 +281,7 @@ export function TitleEditor({ currentValue, save, dismiss, multiline }: {
             onKeyDown={(e) => {
                 if (e.key === "Enter") {
                     const newValue = e.currentTarget.value;
-                    if (newValue !== currentValue) {
+                    if (newValue !== currentValue || isNewItem) {
                         save(newValue);
                     }
                     dismiss();