From dfbda843628c817a48523b1a4a28a6ef232d1d65 Mon Sep 17 00:00:00 2001
From: Andrew Barnes <bortstheboat@gmail.com>
Date: Mon, 20 Jul 2026 04:33:43 -0400
Subject: [PATCH] fix(web): handle sidebar shortcut before editors (#3921)

---
 apps/web/src/components/AppSidebarLayout.tsx          | 11 +++++++++--
 .../src/components/settings/KeybindingsSettings.tsx   |  2 ++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx
index 587ec65cbc98e213ac997b514bb36484d0105422..4d0486aa866b23ecb02765d7d0d6fcf410ba80d9 100644
--- a/apps/web/src/components/AppSidebarLayout.tsx
+++ b/apps/web/src/components/AppSidebarLayout.tsx
@@ -33,6 +33,12 @@ function SidebarControl() {
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented) return;
+      if (
+        event.target instanceof HTMLElement &&
+        event.target.closest("[data-keybinding-capture]")
+      ) {
+        return;
+      }
       if (resolveShortcutCommand(event, keybindings) !== "sidebar.toggle") return;
 
       event.preventDefault();
@@ -40,8 +46,9 @@ function SidebarControl() {
       toggleSidebar();
     };
 
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
+    // Capture before focused editors consume commands such as Mod+B for rich-text formatting.
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
   }, [keybindings, toggleSidebar]);
 
   return (
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index b7dbbd3575bca573b3649cf64c4f715e95980276..67c33c9b9423a451b5cd9505f16ffa3a744acdc1 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -846,6 +846,7 @@ function KeybindingTableRow({
           </button>
         ) : (
           <Input
+            data-keybinding-capture=""
             autoFocus={isRecording}
             aria-label={`Keybinding for ${commandLabel(row.command)}`}
             value={isRecording ? "" : keyDraft}
@@ -1011,6 +1012,7 @@ function NewKeybindingTableRow({
       </div>
       <div className="flex min-w-0 items-center gap-2 pr-4">
         <Input
+          data-keybinding-capture=""
           aria-label={`Keybinding for ${commandLabelText}`}
           value={isRecording ? "" : keyDraft}
           placeholder={isRecording ? "Press shortcut" : "Unassigned"}
-- 
2.54.0