feat(ui): add ability to globally disable hotkeys

This will both hide the hotkey from the hotkey modal and override any other enabled status it has.

Author: psychedelicious

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -53,6 +53,9 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         hotkeys: [],
       };
       Object.values(category.hotkeys).forEach((item) => {
+        if (!item.isEnabled) {
+          return;
+        }
         if (!trimmedHotkeyFilter.length) {
           filteredGroup.hotkeys.push(item);
         } else if (item.title.toLowerCase().includes(trimmedHotkeyFilter)) {

invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

@@ -13,6 +13,7 @@ export type Hotkey = {
   desc: string;
   hotkeys: string[];
   platformKeys: string[][];
+  isEnabled: boolean;
 };
 
 type HotkeyCategoryData = { title: string; hotkeys: Record<string, Hotkey> };
@@ -60,14 +61,15 @@ export const useHotkeyData = (): HotkeysData => {
       },
     };
 
-    const addHotkey = (category: HotkeyCategory, id: string, keys: string[]) => {
+    const addHotkey = (category: HotkeyCategory, id: string, keys: string[], isEnabled: boolean = true) => {
       data[category].hotkeys[id] = {
         id,
         category,
         title: t(`hotkeys.${category}.${id}.title`),
         desc: t(`hotkeys.${category}.${id}.desc`),
         hotkeys: keys,
         platformKeys: formatKeysForPlatform(keys, isMacOS),
+        isEnabled,
       };
     };
 
@@ -189,17 +191,28 @@ type UseRegisteredHotkeysArg = {
 };
 
 /**
- * A wrapper around `useHotkeys` that registers the hotkey with the hotkey registry.
- *
- * Registered hotkeys will be displayed in the hotkeys modal.
+ * A wrapper around `useHotkeys` that adds a handler for a registered hotkey.
  */
 export const useRegisteredHotkeys = ({ id, category, callback, options, dependencies }: UseRegisteredHotkeysArg) => {
   const hotkeysData = useHotkeyData();
-  const keys = useMemo(() => {
-    const _keys = hotkeysData[category].hotkeys[id]?.hotkeys;
-    assert(_keys !== undefined, `Hotkey ${category}.${id} not found`);
-    return _keys;
+  const data = useMemo(() => {
+    const _data = hotkeysData[category].hotkeys[id];
+    assert(_data !== undefined, `Hotkey ${category}.${id} not found`);
+    return _data;
   }, [category, hotkeysData, id]);
-
-  return useHotkeys(keys, callback, options, dependencies);
+  const _options = useMemo(() => {
+    // If no options are provided, return the default. This includes if the hotkey is globally disabled.
+    if (!options) {
+      return {
+        enabled: data.isEnabled,
+      } satisfies Options;
+    }
+    // Otherwise, return the provided optiosn, but override the enabled state.
+    return {
+      ...options,
+      enabled: data.isEnabled ? options.enabled : false,
+    } satisfies Options;
+  }, [data.isEnabled, options]);
+
+  return useHotkeys(data.hotkeys, callback, _options, dependencies);
 };