refactor(collections/board): use same title editor for new columns

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

@@ -43,6 +43,27 @@ export default class BoardApi {
         await attributes.setLabel(noteId, this.statusAttribute, newColumn);
     }
 
+    async addNewColumn(columnName: string) {
+        if (!columnName.trim()) {
+            return;
+        }
+
+        if (!this.viewConfig) {
+            this.viewConfig = {};
+        }
+
+        if (!this.viewConfig.columns) {
+            this.viewConfig.columns = [];
+        }
+
+        // Add the new column to persisted data if it doesn't exist
+        const existingColumn = this.viewConfig.columns.find(col => col.value === columnName);
+        if (!existingColumn) {
+            this.viewConfig.columns.push({ value: columnName });
+            this.saveConfig(this.viewConfig);
+        }
+    }
+
     async removeColumn(column: string) {
         // Remove the value from the notes.
         const noteIds = this.byColumn?.get(column)?.map(item => item.note.noteId) || [];

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

@@ -189,46 +189,20 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
                         <div className="column-drop-placeholder show" />
                     )}
 
-                    <AddNewColumn viewConfig={viewConfig} saveConfig={saveConfig} />
+                    <AddNewColumn api={api} />
                 </div>
             </BoardViewContext.Provider>
         </div>
     )
 }
 
-function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, saveConfig: (data: BoardViewData) => void }) {
+function AddNewColumn({ api }: { api: BoardApi }) {
     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);
-        }
-
-        setIsCreatingNewColumn(false);
-    }, [ viewConfig, saveConfig ]);
-
     return (
         <div className={`board-add-column ${isCreatingNewColumn ? "editing" : ""}`} onClick={addColumnCallback}>
             {!isCreatingNewColumn
@@ -236,33 +210,25 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
                 <Icon icon="bx bx-plus" />{" "}
                 {t("board_view.add-column")}
             </>
-            : <>
+            : (
-                <FormTextBox
+                <TitleEditor
-                    inputRef={columnNameRef}
-                    type="text"
                     placeholder={t("board_view.add-column-placeholder")}
-                    onBlur={() => finishEdit(true)}
+                    save={(columnName) => api.addNewColumn(columnName)}
-                    onKeyDown={(e: KeyboardEvent) => {
+                    dismiss={() => setIsCreatingNewColumn(false)}
-                        if (e.key === "Enter") {
+                    isNewItem
-                            e.preventDefault();
-                            finishEdit(true);
-                        } else if (e.key === "Escape") {
-                            e.preventDefault();
-                            finishEdit(false);
-                        }
-                    }}
                 />
-            </>}
+            )}
         </div>
     )
 }
 
-export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem }: {
+export function TitleEditor({ currentValue, placeholder, save, dismiss, multiline, isNewItem }: {
-    currentValue: string,
+    currentValue?: string;
-    save: (newValue: string) => void,
+    placeholder?: string;
-    dismiss: () => void,
+    save: (newValue: string) => void;
-    multiline?: boolean,
+    dismiss: () => void;
-    isNewItem?: boolean
+    multiline?: boolean;
+    isNewItem?: boolean;
 }) {
     const inputRef = useRef<any>(null);
 
@@ -276,7 +242,8 @@ export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem
     return (
         <Element
             inputRef={inputRef}
-            currentValue={currentValue}
+            currentValue={currentValue ?? ""}
+            placeholder={placeholder}
             rows={multiline ? 4 : undefined}
             onKeyDown={(e) => {
                 if (e.key === "Enter") {
@@ -298,5 +265,5 @@ export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem
                 dismiss();
             }}
         />
-    )
+    );
 }