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/components/@settings/tabs/settings/SettingsTab.tsx

@@ -7,6 +7,32 @@ import { themeStore, kTheme } from '~/lib/stores/theme';
 import type { UserProfile } from '~/components/@settings/core/types';
 import { useStore } from '@nanostores/react';
 import { shortcutsStore } from '~/lib/stores/settings';
+import { isMac } from '~/utils/os';
+
+// Helper to format shortcut key display
+const formatShortcutKey = (key: string) => {
+  if (key === '`') {
+    return '`';
+  }
+
+  return key.toUpperCase();
+};
+
+// Helper to get modifier key symbols/text
+const getModifierSymbol = (modifier: string): string => {
+  switch (modifier) {
+    case 'meta':
+      return isMac ? '⌘' : 'Win';
+    case 'alt':
+      return isMac ? '⌥' : 'Alt';
+    case 'ctrl':
+      return isMac ? '⌃' : 'Ctrl';
+    case 'shift':
+      return '⇧';
+    default:
+      return modifier;
+  }
+};
 
 export default function SettingsTab() {
   const [currentTimezone, setCurrentTimezone] = useState('');
@@ -237,37 +263,42 @@ export default function SettingsTab() {
               key={name}
               className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
             >
-              <span className="text-sm text-bolt-elements-textPrimary capitalize">
+              <div className="flex flex-col">
-                {name.replace(/([A-Z])/g, ' $1').toLowerCase()}
+                <span className="text-sm text-bolt-elements-textPrimary capitalize">
-              </span>
+                  {name.replace(/([A-Z])/g, ' $1').toLowerCase()}
+                </span>
+                {shortcut.description && (
+                  <span className="text-xs text-bolt-elements-textSecondary">{shortcut.description}</span>
+                )}
+              </div>
               <div className="flex items-center gap-1">
                 {shortcut.ctrlOrMetaKey && (
                   <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
+                    {getModifierSymbol(isMac ? 'meta' : 'ctrl')}
                   </kbd>
                 )}
                 {shortcut.ctrlKey && (
                   <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    Ctrl
+                    {getModifierSymbol('ctrl')}
                   </kbd>
                 )}
                 {shortcut.metaKey && (
                   <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    ⌘
+                    {getModifierSymbol('meta')}
                   </kbd>
                 )}
                 {shortcut.altKey && (
                   <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {navigator.platform.includes('Mac') ? '⌥' : 'Alt'}
+                    {getModifierSymbol('alt')}
                   </kbd>
                 )}
                 {shortcut.shiftKey && (
                   <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    ⇧
+                    {getModifierSymbol('shift')}
                   </kbd>
                 )}
                 <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                  {shortcut.key.toUpperCase()}
+                  {formatShortcutKey(shortcut.key)}
                 </kbd>
               </div>
             </div>

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
+      // Don't trigger shortcuts when typing in input fields
-      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
-       */
       if (
-        event.code === 'KeyD' &&
+        document.activeElement &&
-        event.metaKey && // Command (Mac) or Windows key
+        INPUT_ELEMENTS.includes(document.activeElement.tagName.toLowerCase()) &&
-        event.altKey && // Option (Mac) or Alt (Windows)
+        !event.altKey && // Allow Alt combinations even in input fields
-        event.shiftKey &&
+        !event.metaKey && // Allow Cmd/Win combinations even in input fields
-        !event.ctrlKey
+        !event.ctrlKey // Allow Ctrl combinations even in input fields
       ) {
-        event.preventDefault();
-        event.stopPropagation();
-        shortcuts.toggleTheme.action();
-
         return;
       }
 
-      // Handle other shortcuts
+      // Debug logging in development only
-      for (const name in shortcuts) {
+      if (process.env.NODE_ENV === 'development') {
-        const shortcut = shortcuts[name as keyof Shortcuts];
+        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') {
+      // Handle shortcuts
-          continue;
+      for (const [name, shortcut] of Object.entries(shortcuts)) {
-        } // Skip theme toggle as it's handled above
-
-        // For other shortcuts, check both key and code
         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();
+          // Prevent default browser behavior if specified
-          event.stopPropagation();
+          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
+    metaKey: true,
-    altKey: true, // Option key on Mac, Alt key on Windows
+    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,
   },
 });
 

app/utils/os.ts

@@ -0,0 +1,4 @@
+// Helper to detect OS
+export const isMac = typeof navigator !== 'undefined' ? navigator.platform.toLowerCase().includes('mac') : false;
+export const isWindows = typeof navigator !== 'undefined' ? navigator.platform.toLowerCase().includes('win') : false;
+export const isLinux = typeof navigator !== 'undefined' ? navigator.platform.toLowerCase().includes('linux') : false;