feat: settings shortcut

packages/repl/src/App.tsx

@@ -1,7 +1,7 @@
 import { ColorModeProvider, ColorModeScript } from '@kobalte/core'
 
 import { workerInit } from 'mtcute-repl-worker/client'
-import { createSignal, lazy, onMount, Show } from 'solid-js'
+import { createSignal, lazy, onCleanup, onMount, Show } from 'solid-js'
 import { EditorTabs } from './components/editor/EditorTabs.tsx'
 import { NavbarMenu } from './components/nav/NavbarMenu.tsx'
 import { Runner } from './components/runner/Runner.tsx'
@@ -24,6 +24,16 @@ export function App() {
 
   onMount(() => {
     workerInit(workerIframe)
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.metaKey && e.key === ',') {
+        setShowSettings(true)
+        e.preventDefault()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    onCleanup(() => window.removeEventListener('keydown', handleKeyDown))
   })
 
   return (

packages/repl/src/components/runner/Devtools.tsx

@@ -64,6 +64,21 @@ async function focusConsole(tabbedPane) {
   const injectCss = await waitForElement('#inject-css', document.body);
   const rootView = await waitForElement('.root-view', document.body);
   rootView.appendChild(injectCss);
+
+  // forward some keyboard shortcuts to the parent window
+  document.addEventListener('keydown', (e) => {
+    if (!(e.metaKey && e.key === ',')) return
+
+    const options = {
+      key: e.key,
+      ctrlKey: e.ctrlKey,
+      metaKey: e.metaKey,
+    }
+    const keyboardEvent = new KeyboardEvent('keydown', options)
+    window.parent.dispatchEvent(keyboardEvent)
+
+    e.preventDefault()
+  }, true)
 })();
 `
 

packages/repl/src/components/settings/login/Login.tsx

@@ -299,7 +299,7 @@ function OtpStep(props: StepProps<'otp'>) {
 
   const [innerInputRef, setInnerInputRef] = createSignal<HTMLInputElement | undefined>()
 
-  createEffect(() => {
+  onMount(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key >= '0' && e.key <= '9') {
         innerInputRef()?.focus()