web: add keyboard shortcut for opening settings (#7701)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/common/key-map.ts

@@ -22,6 +22,7 @@ import { useEditorStore } from "../stores/editor-store";
 import { useStore as useSearchStore } from "../stores/search-store";
 import { useEditorManager } from "../components/editor/manager";
 import { CommandPaletteDialog } from "../dialogs/command-palette";
+import { hashNavigate } from "../navigation";
 
 function isInEditor(e: KeyboardEvent) {
   return (
@@ -198,6 +199,11 @@ const KEYMAP = [
         isCommandMode: e.key === "k"
       }).catch(() => {});
     }
+  },
+  {
+    keys: ["ctrl+,", "command+,"],
+    description: "Open settings",
+    action: () => hashNavigate("/settings", { replace: true })
   }
 ];
 

apps/web/src/dialogs/settings/index.tsx

@@ -275,6 +275,7 @@ function SettingsSideBar(props: SettingsSideBarProps) {
           <Input
             id="search"
             name="search"
+            autoFocus
             placeholder={strings.search()}
             data-test-id="settings-search"
             sx={{