From 62452b61b1b28b890fe151e7c99dec1cc0d24aa7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 11 Sep 2025 21:51:02 +0300
Subject: [PATCH] refactor(react/collections/table): deduplicate editing

---
 .../src/widgets/collections/board/card.tsx    | 27 ++-----------
 .../src/widgets/collections/board/column.tsx  | 33 +++-------------
 .../src/widgets/collections/board/index.tsx   | 39 +++++++++++++++++++
 3 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/apps/client/src/widgets/collections/board/card.tsx b/apps/client/src/widgets/collections/board/card.tsx
index 3dda7fd89..842af7ebd 100644
--- a/apps/client/src/widgets/collections/board/card.tsx
+++ b/apps/client/src/widgets/collections/board/card.tsx
@@ -2,10 +2,9 @@ import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
 import FBranch from "../../../entities/fbranch";
 import FNote from "../../../entities/fnote";
 import BoardApi from "./api";
-import { BoardViewContext } from ".";
+import { BoardViewContext, TitleEditor } from ".";
 import { ContextMenuEvent } from "../../../menus/context_menu";
 import { openNoteContextMenu } from "./context_menu";
-import FormTextBox from "../../react/FormTextBox";
 
 export default function Card({
     api,
@@ -59,28 +58,10 @@ export default function Card({
             {!isEditing ? (
                 <>{note.title}</>
             ) : (
-                <FormTextBox
-                    inputRef={editorRef}
+                <TitleEditor
                     currentValue={note.title}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                            const newTitle = e.currentTarget.value;
-                            if (newTitle !== note.title) {
-                                api.renameCard(note.noteId, newTitle);
-                            }
-                            api.dismissEditingTitle();
-                        }
-
-                        if (e.key === "Escape") {
-                            api.dismissEditingTitle();
-                        }
-                    }}
-                    onBlur={(newTitle) => {
-                        if (newTitle !== note.title) {
-                            api.renameCard(note.noteId, newTitle);
-                        }
-                        api.dismissEditingTitle();
-                    }}
+                    save={newTitle => api.renameCard(note.noteId, newTitle)}
+                    dismiss={() => api.dismissEditingTitle()}
                 />
             )}
         </div>
diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx
index 08da9c97b..a64ed4afb 100644
--- a/apps/client/src/widgets/collections/board/column.tsx
+++ b/apps/client/src/widgets/collections/board/column.tsx
@@ -1,11 +1,10 @@
 import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
 import FBranch from "../../../entities/fbranch";
 import FNote from "../../../entities/fnote";
-import { BoardViewContext } from ".";
+import { BoardViewContext, TitleEditor } from ".";
 import branches from "../../../services/branches";
 import { openColumnContextMenu } from "./context_menu";
 import { ContextMenuEvent } from "../../../menus/context_menu";
-import FormTextBox from "../../react/FormTextBox";
 import Icon from "../../react/Icon";
 import { t } from "../../../services/i18n";
 import BoardApi from "./api";
@@ -171,31 +170,11 @@ export default function Column({
                         />
                     </>
                 ) : (
-                    <>
-                        <FormTextBox
-                            inputRef={editorRef}
-                            currentValue={column}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") {
-                                    const newTitle = e.currentTarget.value;
-                                    if (newTitle !== column) {
-                                        api.renameColumn(column, newTitle);
-                                    }
-                                    context.setColumnNameToEdit?.(undefined);
-                                }
-
-                                if (e.key === "Escape") {
-                                    context.setColumnNameToEdit?.(undefined);
-                                }
-                            }}
-                            onBlur={(newTitle) => {
-                                if (newTitle !== column) {
-                                    api.renameColumn(column, newTitle);
-                                }
-                                context.setColumnNameToEdit?.(undefined);
-                            }}
-                        />
-                    </>
+                    <TitleEditor
+                        currentValue={column}
+                        save={newTitle => api.renameColumn(column, newTitle)}
+                        dismiss={() => context.setColumnNameToEdit?.(undefined)}
+                    />
                 )}
             </h3>
 
diff --git a/apps/client/src/widgets/collections/board/index.tsx b/apps/client/src/widgets/collections/board/index.tsx
index e7b9a9322..fdb7d2a63 100644
--- a/apps/client/src/widgets/collections/board/index.tsx
+++ b/apps/client/src/widgets/collections/board/index.tsx
@@ -242,3 +242,42 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData,
         </div>
     )
 }
+
+export function TitleEditor({ currentValue, save, dismiss }: {
+    currentValue: string,
+    save: (newValue: string) => void,
+    dismiss: () => void
+}) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [ inputRef ]);
+
+    return (
+        <FormTextBox
+            inputRef={inputRef}
+            currentValue={currentValue}
+            onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                    const newValue = e.currentTarget.value;
+                    if (newValue !== currentValue) {
+                        save(newValue);
+                    }
+                    dismiss();
+                }
+
+                if (e.key === "Escape") {
+                    dismiss();
+                }
+            }}
+            onBlur={(newValue) => {
+                if (newValue !== currentValue) {
+                    save(newValue);
+                }
+                dismiss();
+            }}
+        />
+    )
+}