refactor: unify keyboard handling on @opentui/keymap useBindings

package.json

@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "@opentui/core": "0.2.0",
+    "@opentui/keymap": "0.2.0",
     "@opentui/solid": "0.2.0",
+    "docx": "^9.7.1",
     "mupdf": "1.27.0",
     "pdf-lib": "1.17.1",
     "solid-js": "1.9.9"

src/components/organise.tsx

@@ -1,11 +1,6 @@
-import {
-  RGBA,
-  TextAttributes,
-  type BoxRenderable,
-  type CliRenderer,
-  type KeyEvent,
-} from "@opentui/core";
-import { onResize, useKeyboard, useRenderer } from "@opentui/solid";
+import { RGBA, TextAttributes, type BoxRenderable, type CliRenderer } from "@opentui/core";
+import { onResize, useRenderer } from "@opentui/solid";
+import { useBindings } from "@opentui/keymap/solid";
 import {
   Show,
   type Accessor,
@@ -733,6 +728,13 @@ export function OrganiseUI() {
       });
     });
 
+    nav.registerElement({
+      id: "open-organise-btn",
+      type: "button",
+      onEnter: openToolWindow,
+      canFocus: () => fl.fileCount() > 0,
+    });
+
     nav.registerElement({
       id: "open-output-btn",
       type: "button",
@@ -741,13 +743,6 @@ export function OrganiseUI() {
           fl.setStatus({ msg: "Failed to open folder", type: "error" }),
         ),
     });
-
-    nav.registerElement({
-      id: "open-organise-btn",
-      type: "button",
-      onEnter: openToolWindow,
-      canFocus: () => fl.fileCount() > 0,
-    });
   });
 
   createEffect(() => {
@@ -1061,19 +1056,17 @@ export function OrganiseUI() {
     }
   };
 
-  useKeyboard((event: KeyEvent) => {
-    if (!isToolWindowOpen() || nav.isInputMode() || !fl.selectedFile()) {
-      return;
-    }
-
-    if (event.name === "left") {
-      goPrev();
-      return;
-    }
-
-    if (event.name === "right") {
-      goNext();
-    }
+  useBindings(() => {
+    const active = isToolWindowOpen() && !nav.isInputMode() && !!fl.selectedFile();
+    return {
+      priority: 50,
+      bindings: active
+        ? [
+            { key: "left", cmd: goPrev },
+            { key: "right", cmd: goNext },
+          ]
+        : [],
+    };
   });
 
   return (

src/hooks/useKeyboardNav.ts

@@ -1,6 +1,5 @@
 import { createSignal, createMemo } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import { type KeyEvent } from "@opentui/core";
+import { useBindings } from "@opentui/keymap/solid";
 import type { FocusableElement } from "../model/models";
 
 export type { FocusableElement };
@@ -67,43 +66,41 @@ export function useKeyboardNav() {
     setFocusIndex(0);
   };
 
-  useKeyboard((event: KeyEvent) => {
-    // Allow Escape and Tab to exit input mode
-    if (isInputMode()) {
-      if (event.name === "escape") {
-        setIsInputMode(false);
-      } else if (event.name === "tab") {
-        setIsInputMode(false);
-        if (event.shift) {
-          focusPrev();
-        } else {
-          focusNext();
-        }
-      }
-      return;
-    }
-
-    switch (event.name) {
-      case "tab":
-        if (event.shift) {
-          focusPrev();
-        } else {
-          focusNext();
-        }
-        break;
-      case "return":
-        executeCurrentAction();
-        break;
-      case "down":
-      case "j":
-        focusNext();
-        break;
-      case "up":
-      case "k":
-        focusPrev();
-        break;
-    }
-  });
+  useBindings(() => ({
+    priority: 100,
+    bindings: isInputMode()
+      ? [
+          // Let escape bubble to the app-level double-esc handler in src/index.tsx
+          {
+            key: "escape",
+            cmd: () => setIsInputMode(false),
+            preventDefault: false,
+          },
+          {
+            key: "tab",
+            cmd: () => {
+              setIsInputMode(false);
+              focusNext();
+            },
+          },
+          {
+            key: "shift+tab",
+            cmd: () => {
+              setIsInputMode(false);
+              focusPrev();
+            },
+          },
+        ]
+      : [
+          { key: "tab", cmd: focusNext },
+          { key: "shift+tab", cmd: focusPrev },
+          { key: "return", cmd: executeCurrentAction },
+          { key: "down", cmd: focusNext },
+          { key: "j", cmd: focusNext },
+          { key: "up", cmd: focusPrev },
+          { key: "k", cmd: focusPrev },
+        ],
+  }));
 
   return {
     registerElement,