Bug fix for the Keyboard Shortcuts

MAC OS SHORTCUTS:
- Toggle Terminal: ⌘ + `
- Toggle Theme: ⌘ + ⌥ + ⇧ + D
- Toggle Chat: ⌘ + ⌥ + J
- Toggle Settings: ⌘ + ⌥ + S

WINDOWS/LINUX SHORTCUTS:
- Toggle Terminal: Ctrl + `
- Toggle Theme: Win + Alt + Shift + D
- Toggle Chat: Ctrl + Alt + J
- Toggle Settings: Ctrl + Alt + S

app/lib/hooks/useShortcuts.ts

@@ -1,6 +1,10 @@
 import { useStore } from '@nanostores/react';
 import { useEffect } from 'react';
 import { shortcutsStore, type Shortcuts } from '~/lib/stores/settings';
+import { isMac } from '~/utils/os';
+
+// List of keys that should not trigger shortcuts when typing in input/textarea
+const INPUT_ELEMENTS = ['input', 'textarea'];
 
 class ShortcutEventEmitter {
   #emitter = new EventTarget();
@@ -25,55 +29,54 @@ export function useShortcuts(): void {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent): void => {
-      // Debug logging
-      console.log('Key pressed:', {
-        key: event.key,
-        code: event.code, // This gives us the physical key regardless of modifiers
-        ctrlKey: event.ctrlKey,
-        shiftKey: event.shiftKey,
-        altKey: event.altKey,
-        metaKey: event.metaKey,
-      });
-
-      /*
-       * Check for theme toggle shortcut first (Option + Command + Shift + D)
-       * Use event.code to check for the physical D key regardless of the character produced
-       */
+      // Don't trigger shortcuts when typing in input fields
       if (
-        event.code === 'KeyD' &&
-        event.metaKey && // Command (Mac) or Windows key
-        event.altKey && // Option (Mac) or Alt (Windows)
-        event.shiftKey &&
-        !event.ctrlKey
+        document.activeElement &&
+        INPUT_ELEMENTS.includes(document.activeElement.tagName.toLowerCase()) &&
+        !event.altKey && // Allow Alt combinations even in input fields
+        !event.metaKey && // Allow Cmd/Win combinations even in input fields
+        !event.ctrlKey // Allow Ctrl combinations even in input fields
       ) {
-        event.preventDefault();
-        event.stopPropagation();
-        shortcuts.toggleTheme.action();
-
         return;
       }
 
-      // Handle other shortcuts
-      for (const name in shortcuts) {
-        const shortcut = shortcuts[name as keyof Shortcuts];
+      // Debug logging in development only
+      if (process.env.NODE_ENV === 'development') {
+        console.log('Key pressed:', {
+          key: event.key,
+          code: event.code,
+          ctrlKey: event.ctrlKey,
+          shiftKey: event.shiftKey,
+          altKey: event.altKey,
+          metaKey: event.metaKey,
+          target: event.target,
+        });
+      }
 
-        if (name === 'toggleTheme') {
-          continue;
-        } // Skip theme toggle as it's handled above
-
-        // For other shortcuts, check both key and code
+      // Handle shortcuts
+      for (const [name, shortcut] of Object.entries(shortcuts)) {
         const keyMatches =
           shortcut.key.toLowerCase() === event.key.toLowerCase() || `Key${shortcut.key.toUpperCase()}` === event.code;
 
+        // Handle ctrlOrMetaKey based on OS
+        const ctrlOrMetaKeyMatches = shortcut.ctrlOrMetaKey
+          ? (isMac && event.metaKey) || (!isMac && event.ctrlKey)
+          : true;
+
         const modifiersMatch =
+          ctrlOrMetaKeyMatches &&
           (shortcut.ctrlKey === undefined || shortcut.ctrlKey === event.ctrlKey) &&
           (shortcut.metaKey === undefined || shortcut.metaKey === event.metaKey) &&
           (shortcut.shiftKey === undefined || shortcut.shiftKey === event.shiftKey) &&
           (shortcut.altKey === undefined || shortcut.altKey === event.altKey);
 
         if (keyMatches && modifiersMatch) {
-          event.preventDefault();
-          event.stopPropagation();
+          // Prevent default browser behavior if specified
+          if (shortcut.isPreventDefault) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+
           shortcutEventEmitter.dispatch(name as keyof Shortcuts);
           shortcut.action();
           break;

app/lib/stores/settings.ts

@@ -21,6 +21,8 @@ export interface Shortcut {
   metaKey?: boolean;
   ctrlOrMetaKey?: boolean;
   action: () => void;
+  description?: string; // Description of what the shortcut does
+  isPreventDefault?: boolean; // Whether to prevent default browser behavior
 }
 
 export interface Shortcuts {
@@ -35,32 +37,41 @@ export const LOCAL_PROVIDERS = ['OpenAILike', 'LMStudio', 'Ollama'];
 
 export type ProviderSetting = Record<string, IProviderConfig>;
 
+// Define safer shortcuts that don't conflict with browser defaults
 export const shortcutsStore = map<Shortcuts>({
   toggleTerminal: {
     key: '`',
     ctrlOrMetaKey: true,
     action: () => workbenchStore.toggleTerminal(),
+    description: 'Toggle terminal',
+    isPreventDefault: true,
   },
   toggleTheme: {
     key: 'd',
-    metaKey: true, // Command key on Mac, Windows key on Windows
-    altKey: true, // Option key on Mac, Alt key on Windows
+    metaKey: true,
+    altKey: true,
     shiftKey: true,
     action: () => toggleTheme(),
+    description: 'Toggle theme',
+    isPreventDefault: true,
   },
   toggleChat: {
-    key: 'k',
+    key: 'j', // Changed from 'k' to 'j' to avoid conflicts
     ctrlOrMetaKey: true,
+    altKey: true, // Added alt key to make it more unique
     action: () => chatStore.setKey('showChat', !chatStore.get().showChat),
+    description: 'Toggle chat',
+    isPreventDefault: true,
   },
   toggleSettings: {
     key: 's',
     ctrlOrMetaKey: true,
     altKey: true,
     action: () => {
-      // This will be connected to the settings panel toggle
       document.dispatchEvent(new CustomEvent('toggle-settings'));
     },
+    description: 'Toggle settings',
+    isPreventDefault: true,
   },
 });