Add keyboard shortcut settings button and handler for opening VS Code keybindings

Author: robertpiosik

apps/editor/src/views/settings/backend/message-handlers/handle-open-keybindings.ts

@@ -0,0 +1,11 @@
+import * as vscode from 'vscode'
+import { OpenKeybindingsMessage } from '@/views/settings/types/messages'
+
+export const handle_open_keybindings = async (
+  message: OpenKeybindingsMessage
+): Promise<void> => {
+  await vscode.commands.executeCommand(
+    'workbench.action.openGlobalKeybindings',
+    message.search
+  )
+}

apps/editor/src/views/settings/backend/message-handlers/index.ts

@@ -36,3 +36,4 @@ export * from './handle-delete-configuration'
 export * from './handle-get-configurations'
 export * from './handle-get-fix-all-automatically'
 export * from './handle-update-fix-all-automatically'
+export * from './handle-open-keybindings'

apps/editor/src/views/settings/backend/settings-provider.ts

@@ -41,7 +41,8 @@ import {
   handle_open_ignore_patterns_settings,
   handle_open_allow_patterns_settings,
   handle_get_fix_all_automatically,
-  handle_update_fix_all_automatically
+  handle_update_fix_all_automatically,
+  handle_open_keybindings
 } from './message-handlers'
 
 export class SettingsProvider {
@@ -293,6 +294,8 @@ export class SettingsProvider {
           await handle_get_fix_all_automatically(this)
         } else if (message.command == 'UPDATE_FIX_ALL_AUTOMATICALLY') {
           await handle_update_fix_all_automatically(message)
+        } else if (message.command == 'OPEN_KEYBINDINGS') {
+          await handle_open_keybindings(message)
         }
       },
       null,

apps/editor/src/views/settings/frontend/Home/Home.tsx

@@ -11,6 +11,7 @@ import { Input } from '@ui/components/editor/common/Input'
 import { Textarea } from '@ui/components/editor/common/Textarea'
 import { Toggler } from '@ui/components/editor/common/Toggler'
 import { Button } from '@ui/components/editor/common/Button'
+import { TextButton } from '@ui/components/editor/settings/TextButton'
 import {
   ConfigurationForClient,
   ProviderForClient,
@@ -115,6 +116,7 @@ type Props = {
     value: 'ignore-open-editors' | 'uncheck-all'
   ) => void
   on_fix_all_automatically_change: (enabled: boolean) => void
+  on_open_keybindings: (search?: string) => void
   on_open_editor_settings: () => void
   on_open_ignore_patterns_settings: () => void
   on_open_allow_patterns_settings: () => void
@@ -532,6 +534,19 @@ export const Home: React.FC<Props> = (props) => {
                 props.on_unset_default_config('CODE_AT_CURSOR')
               }
             />
+            <Item
+              title="Keyboard Shortcut"
+              description="Setup tool triggering key combinations."
+              slot_right={
+                <TextButton
+                  on_click={() =>
+                    props.on_open_keybindings('codeWebChat.codeAtCursor')
+                  }
+                >
+                  Open Keyboard Shortcuts
+                </TextButton>
+              }
+            />
           </Group>
         </Section>
         <Section

apps/editor/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -175,7 +175,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             description="Glob patterns that you don't want to place in .gitignore files."
             slot_right={
               <TextButton on_click={props.on_open_ignore_patterns_settings}>
-                Open settings file
+                Open Settings File
               </TextButton>
             }
           />
@@ -184,7 +184,7 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             description="Glob patterns that you want to include despite being ignored by .gitignore."
             slot_right={
               <TextButton on_click={props.on_open_allow_patterns_settings}>
-                Open settings file
+                Open Settings File
               </TextButton>
             }
           />

apps/editor/src/views/settings/frontend/Settings.tsx

@@ -132,6 +132,7 @@ export const Settings = () => {
       on_fix_all_automatically_change={
         settings_hook.handle_fix_all_automatically_change
       }
+      on_open_keybindings={settings_hook.handle_open_keybindings}
       on_open_editor_settings={settings_hook.handle_open_editor_settings}
       on_open_ignore_patterns_settings={
         settings_hook.handle_open_ignore_patterns_settings

apps/editor/src/views/settings/frontend/hooks/use-settings.ts

@@ -423,6 +423,13 @@ export const use_settings = (vscode: any) => {
     })
   }
 
+  const handle_open_keybindings = (search?: string) => {
+    post_message(vscode, {
+      command: 'OPEN_KEYBINDINGS',
+      search
+    })
+  }
+
   return {
     providers,
     set_providers,
@@ -475,6 +482,7 @@ export const use_settings = (vscode: any) => {
     handle_send_with_shift_enter_change,
     handle_check_new_files_change,
     handle_clear_checks_in_workspace_behavior_change,
-    handle_fix_all_automatically_change
+    handle_fix_all_automatically_change,
+    handle_open_keybindings
   }
 }

apps/editor/src/views/settings/types/messages.ts

@@ -285,6 +285,11 @@ export interface UpdateFixAllAutomaticallyMessage {
   enabled: boolean
 }
 
+export interface OpenKeybindingsMessage {
+  command: 'OPEN_KEYBINDINGS'
+  search?: string
+}
+
 export type FrontendMessage =
   | GetModelProvidersMessage
   | ReorderModelProvidersMessage
@@ -341,6 +346,7 @@ export type FrontendMessage =
   | OpenAllowPatternsSettingsMessage
   | GetFixAllAutomaticallyMessage
   | UpdateFixAllAutomaticallyMessage
+  | OpenKeybindingsMessage
 
 // === FROM BACKEND TO FRONTEND ===
 export interface ModelProvidersMessage {