From d845343e97fb276e99fbf1370da077154d56c308 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 6 Oct 2025 17:48:08 +0300
Subject: [PATCH] feat(collections/board): basic keyboard interaction

---
 apps/client/src/widgets/collections/board/card.tsx   | 10 ++++++++++
 apps/client/src/widgets/collections/board/column.tsx |  7 +++++++
 apps/client/src/widgets/collections/board/index.css  |  6 ++++++
 3 files changed, 23 insertions(+)

diff --git a/apps/client/src/widgets/collections/board/card.tsx b/apps/client/src/widgets/collections/board/card.tsx
index 5b663e141..4317d829c 100644
--- a/apps/client/src/widgets/collections/board/card.tsx
+++ b/apps/client/src/widgets/collections/board/card.tsx
@@ -63,6 +63,14 @@ export default function Card({
         setBranchIdToEdit?.(branch.branchId);
     }, [ setBranchIdToEdit, branch ]);
 
+    const handleKeyUp = useCallback((e: KeyboardEvent) => {
+        if (e.key === "Enter") {
+            api.openNote(note.noteId);
+        } else if (e.key === "F2") {
+            setBranchIdToEdit?.(branch.branchId);
+        }
+    }, [ setBranchIdToEdit, note ]);
+
     useEffect(() => {
         editorRef.current?.focus();
     }, [ isEditing ]);
@@ -83,9 +91,11 @@ export default function Card({
             onDragEnd={handleDragEnd}
             onContextMenu={handleContextMenu}
             onClick={!isEditing ? handleOpen : undefined}
+            onKeyUp={handleKeyUp}
             style={{
                 display: !isVisible ? "none" : undefined
             }}
+            tabIndex={300}
         >
             {!isEditing ? (
                 <>
diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx
index 01e71c8ff..6d704bbe7 100644
--- a/apps/client/src/widgets/collections/board/column.tsx
+++ b/apps/client/src/widgets/collections/board/column.tsx
@@ -146,11 +146,18 @@ export default function Column({
 function AddNewItem({ column, api }: { column: string, api: BoardApi }) {
     const [ isCreatingNewItem, setIsCreatingNewItem ] = useState(false);
     const addItemCallback = useCallback(() => setIsCreatingNewItem(true), []);
+    const handleKeyDown = useCallback((e: KeyboardEvent) => {
+        if (!isCreatingNewItem && e.key === "Enter") {
+            setIsCreatingNewItem(true);
+        }
+    }, []);
 
     return (
         <div
             className={`board-new-item ${isCreatingNewItem ? "editing" : ""}`}
             onClick={addItemCallback}
+            onKeyDown={handleKeyDown}
+            tabIndex={300}
         >
             {!isCreatingNewItem ? (
                 <>
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index a89a6c5ff..42eefd858 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -121,6 +121,12 @@
   font-size: var(--card-font-size);
 }
 
+.board-view-container .board-note:focus,
+.board-view-container .board-new-item:focus {
+  outline: 3px solid var(--input-focus-outline-color);
+  outline-offset: 0;
+}
+
 .board-view-container .board-note {
   transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
 }