feat: add setting to disable hotkeys (#889)

src/routes/_components/ShortcutHelpInfo.html

@@ -1,6 +1,4 @@
 <div class="{inDialog ? 'in-dialog' : ''}">
-  <h1>Hotkeys</h1>
-
   <ul>
     <li><kbd>s</kbd> to search</li>
     <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
@@ -22,9 +20,6 @@
   </ul>
 </div>
 <style>
-  .in-dialog h1 {
-    color: var(--muted-modal-text);
-  }
   li {
     list-style-type: none;
   }

src/routes/_components/dialog/components/ShortcutHelpDialog.html

@@ -4,11 +4,18 @@
   background="var(--muted-modal-bg)"
   muted="true"
   className="shortcut-help-modal-dialog">
-  
+
+  <h1>Hotkeys</h1>
+
   <ShortcutHelpInfo inDialog={true} />
 
   <Shortcut scope='modal' key='h|?' on:pressed='close()'/>
 </ModalDialog>
+<style>
+  h1 {
+    color: var(--muted-modal-text);
+  }
+</style>
 <script>
   import ModalDialog from './ModalDialog.html'
   import ShortcutHelpInfo from '../../ShortcutHelpInfo.html'

src/routes/_pages/settings/hotkeys.html

@@ -1,11 +1,44 @@
 <SettingsLayout page='settings/hotkeys' label="Hotkeys">
+  <h1>Hotkeys</h1>
+
+  <h2 class="sr-only">Preferences</h2>
+  <form class="ui-settings" aria-label="Hotkey settings">
+    <div class="setting-group">
+      <input type="checkbox" id="choice-disable-hotkeys"
+             bind:checked="$disableHotkeys" on:change="onChange()">
+      <label for="choice-disable-hotkeys">Disable hotkeys</label>
+    </div>
+  </form>
+
+  <h2 class="sr-only">Guide</h2>
+
   <ShortcutHelpInfo />
 </SettingsLayout>
+<style>
+  .ui-settings {
+    background: var(--form-bg);
+    border: 1px solid var(--main-border);
+    border-radius: 4px;
+    padding: 20px;
+    line-height: 2em;
+    margin-bottom: 20px;
+  }
+  .setting-group {
+    padding: 5px 0;
+  }
+</style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
+  import { store } from '../../_store/store'
 
   export default {
+    store: () => store,
+    methods: {
+      onChange () {
+        this.store.save()
+      }
+    },
     components: {
       SettingsLayout,
       ShortcutHelpInfo

src/routes/_store/store.js

@@ -11,6 +11,7 @@ const persistedState = {
   currentRegisteredInstanceName: undefined,
   currentRegisteredInstance: undefined,
   disableCustomScrollbars: false,
+  disableHotkeys: false,
   disableLongAriaLabels: false,
   disableTapOnStatus: false,
   largeInlineMedia: false,

src/routes/_utils/shortcuts.js

@@ -1,3 +1,5 @@
+import { store } from '../_store/store'
+
 // A map of scopeKey to KeyMap
 let scopeKeyMaps
 
@@ -119,6 +121,9 @@ function handleEvent (scopeKey, keyMap, key, event) {
 }
 
 function onKeyDown (event) {
+  if (store.get().disableHotkeys) {
+    return
+  }
   if (!acceptShortcutEvent(event)) {
     return
   }