feat(shortcuts): allow shortcuts to be unassigned (#2510)

Allow users to clear and restore shortcut bindings, persist the explicit unassigned state, and keep shortcut displays and actions aligned with the binding that fires. Includes focused unit coverage and desktop renderer Playwright coverage.

packages/app/src/hooks/use-keyboard-shortcut-overrides.ts

@@ -1,16 +1,21 @@
-import { useCallback } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { type QueryClient, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ShortcutOverrides } from "@/keyboard/keyboard-shortcuts";
+import {
+  createShortcutOverrideStore,
+  type ShortcutOverrideStore,
+} from "@/keyboard/shortcut-override-store";
 
 const STORAGE_KEY = "@paseo:keyboard-shortcut-overrides";
 const QUERY_KEY = ["keyboard-shortcut-overrides"];
 
-const EMPTY_OVERRIDES: Record<string, string> = {};
+const EMPTY_OVERRIDES: ShortcutOverrides = {};
 
 export interface UseKeyboardShortcutOverridesReturn {
-  overrides: Record<string, string>;
+  overrides: ShortcutOverrides;
   isLoading: boolean;
   setOverride: (bindingId: string, comboString: string) => Promise<void>;
+  clearOverride: (bindingId: string) => Promise<void>;
   removeOverride: (bindingId: string) => Promise<void>;
   resetAll: () => Promise<void>;
   hasOverrides: boolean;
@@ -25,48 +30,55 @@ export function useKeyboardShortcutOverrides(): UseKeyboardShortcutOverridesRetu
     gcTime: Infinity,
   });
 
-  const setOverride = useCallback(
-    async (bindingId: string, comboString: string) => {
-      const prev = queryClient.getQueryData<Record<string, string>>(QUERY_KEY) ?? EMPTY_OVERRIDES;
-      const next = { ...prev, [bindingId]: comboString };
-      queryClient.setQueryData<Record<string, string>>(QUERY_KEY, next);
-      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-    },
-    [queryClient],
-  );
-
-  const removeOverride = useCallback(
-    async (bindingId: string) => {
-      const prev = queryClient.getQueryData<Record<string, string>>(QUERY_KEY) ?? EMPTY_OVERRIDES;
-      const { [bindingId]: _, ...next } = prev;
-      queryClient.setQueryData<Record<string, string>>(QUERY_KEY, next);
-      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-    },
-    [queryClient],
-  );
-
-  const resetAll = useCallback(async () => {
-    queryClient.setQueryData<Record<string, string>>(QUERY_KEY, EMPTY_OVERRIDES);
-    await AsyncStorage.removeItem(STORAGE_KEY);
-  }, [queryClient]);
-
+  const store = getStore(queryClient);
   const overrides = data ?? EMPTY_OVERRIDES;
 
   return {
     overrides,
     isLoading: isPending,
-    setOverride,
-    removeOverride,
-    resetAll,
+    setOverride: store.set,
+    clearOverride: store.clear,
+    removeOverride: store.remove,
+    resetAll: store.resetAll,
     hasOverrides: Object.keys(overrides).length > 0,
   };
 }
 
-async function loadOverridesFromStorage(): Promise<Record<string, string>> {
+/**
+ * One store per query client. Every component that calls the hook has to share
+ * a single write queue -- a store per hook instance would give each its own
+ * queue and reintroduce the interleaving the store exists to prevent.
+ */
+const stores = new WeakMap<QueryClient, ShortcutOverrideStore>();
+
+function getStore(queryClient: QueryClient): ShortcutOverrideStore {
+  const existing = stores.get(queryClient);
+  if (existing) return existing;
+
+  const created = createShortcutOverrideStore({
+    cache: {
+      read: () => queryClient.getQueryData<ShortcutOverrides>(QUERY_KEY) ?? EMPTY_OVERRIDES,
+      write: (next) => {
+        queryClient.setQueryData<ShortcutOverrides>(QUERY_KEY, next);
+      },
+    },
+    storage: {
+      write: (serialized) => AsyncStorage.setItem(STORAGE_KEY, serialized),
+      remove: () => AsyncStorage.removeItem(STORAGE_KEY),
+    },
+    onError: (err) => {
+      console.error("[KeyboardShortcutOverrides] Failed to save overrides:", err);
+    },
+  });
+  stores.set(queryClient, created);
+  return created;
+}
+
+async function loadOverridesFromStorage(): Promise<ShortcutOverrides> {
   try {
     const stored = await AsyncStorage.getItem(STORAGE_KEY);
     if (stored) {
-      return JSON.parse(stored) as Record<string, string>;
+      return JSON.parse(stored) as ShortcutOverrides;
     }
   } catch (err) {
     console.error("[KeyboardShortcutOverrides] Failed to load overrides:", err);

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -71,6 +71,7 @@ export function useKeyboardShortcuts({
   const openProjectPickerAction = useOpenAddProject();
   const activeWorkspaceSelection = useActiveWorkspaceSelection();
   const keyboardWorkspaceSelectionRef = useRef<ActiveWorkspaceSelection | null>(null);
+  const badgeModifierKeyRef = useRef<string | null | undefined>(undefined);
 
   const publishBrowserShortcutPolicy = useCallback(
     (chordState?: ChordState) => {
@@ -110,7 +111,13 @@ export function useKeyboardShortcuts({
     // runtime should reveal the sidebar number badges (Alt on web, Cmd on
     // desktop Mac, Ctrl on desktop non-Mac). The store ORs altDown/cmdOrCtrlDown
     // to drive badge visibility, so we set the flag matching this runtime.
-    const badgeModifierKey = getWorkspaceIndexJumpModifierKey({ isMac, isDesktop: isDesktopApp });
+    // Derived from the effective bindings: `null` when the user unassigned or
+    // rebound the jump shortcut, and no `event.key` ever equals null, so the
+    // badges simply never appear.
+    const badgeModifierKey = getWorkspaceIndexJumpModifierKey(
+      { isMac, isDesktop: isDesktopApp },
+      bindings,
+    );
     const setBadgeModifierDown = (down: boolean) => {
       const state = useKeyboardShortcutsStore.getState();
       if (isDesktopApp) {
@@ -120,6 +127,16 @@ export function useKeyboardShortcuts({
       }
     };
 
+    // The keyup listener matches the released key against the modifier derived
+    // when the effect last ran, so a modifier held while the jump binding
+    // changes can never be released -- the badges would stay up until a blur.
+    // Clear on change only: this effect also re-runs on every navigation, and
+    // clearing unconditionally would drop the badges mid Cmd+1, Cmd+2.
+    if (badgeModifierKeyRef.current !== badgeModifierKey) {
+      badgeModifierKeyRef.current = badgeModifierKey;
+      resetModifiers();
+    }
+
     const shouldHandle = () => {
       if (typeof document === "undefined") return false;
       if (document.visibilityState !== "visible") return false;