feat(collections/board): basic keyboard interaction

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 ? (
                 <>

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 ? (
                 <>

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;
 }