From d3d13781eed7998b6b1b6ee0b7cae59145269cc9 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Tue, 2 Apr 2024 11:58:20 +0100
Subject: [PATCH 1/7] feat: adds keyboard shortcuts

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |   1 +
 src/App.vue                                   |  27 +++-
 .../common/KeyboardShortcutsDialog.vue        | 125 ++++++++++++++++++
 src/components/layout/AppBar.vue              |  12 +-
 src/components/settings/GeneralSettings.vue   |  23 ++++
 src/components/ui/AppNavItem.vue              |  82 ++++++++----
 src/globals.ts                                |  13 ++
 src/locales/en.yaml                           |   8 ++
 src/scss/misc.scss                            |   4 +
 src/store/config/state.ts                     |   1 +
 src/store/config/types.ts                     |   1 +
 src/util/event-target-is-content-editable.ts  |  25 ++++
 12 files changed, 295 insertions(+), 27 deletions(-)
 create mode 100644 src/components/common/KeyboardShortcutsDialog.vue
 create mode 100644 src/util/event-target-is-content-editable.ts

diff --git a/components.d.ts b/components.d.ts
index 65afaf4310..dd1589584a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -49,6 +49,7 @@ declare module 'vue' {
     BedScrewsAdjustDialog: typeof import('./src/components/common/BedScrewsAdjustDialog.vue')['default']
     CollapsableCard: typeof import('./src/components/common/CollapsableCard.vue')['default']
     FlashMessage: typeof import('./src/components/common/FlashMessage.vue')['default']
+    KeyboardShortcutsDialog: typeof import('./src/components/common/KeyboardShortcutsDialog.vue')['default']
     KlippyStatusCard: typeof import('./src/components/common/KlippyStatusCard.vue')['default']
     ManualProbeDialog: typeof import('./src/components/common/ManualProbeDialog.vue')['default']
     PeripheralsDialog: typeof import('./src/components/common/PeripheralsDialog.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 8295f71857..c7cf982242 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -85,6 +85,7 @@
       <updating-dialog />
       <spool-selection-dialog />
       <action-command-prompt-dialog />
+      <keyboard-shortcuts-dialog />
     </v-main>
 
     <app-footer />
@@ -110,6 +111,7 @@ import type { FlashMessage } from '@/types'
 import { getFilesFromDataTransfer, hasFilesInDataTransfer } from './util/file-system-entry'
 import type { ThemeConfig } from '@/store/config/types'
 import ActionCommandPromptDialog from './components/common/ActionCommandPromptDialog.vue'
+import KeyboardShortcutsDialog from './components/common/KeyboardShortcutsDialog.vue'
 
 @Component<App>({
   metaInfo () {
@@ -122,13 +124,13 @@ import ActionCommandPromptDialog from './components/common/ActionCommandPromptDi
   components: {
     SpoolSelectionDialog,
     FileSystemDownloadDialog,
-    ActionCommandPromptDialog
+    ActionCommandPromptDialog,
+    KeyboardShortcutsDialog
   }
 })
 export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
   toolsdrawer: boolean | null = null
   navdrawer: boolean | null = null
-  showUpdateUI = false
   dragState = false
   customBackgroundImageStyle: Record<string, string> = {}
 
@@ -317,11 +319,16 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     }
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
   mounted () {
     window.addEventListener('dragover', this.handleDragOver)
     window.addEventListener('dragenter', this.handleDragEnter)
     window.addEventListener('dragleave', this.handleDragLeave)
     window.addEventListener('drop', this.handleDrop)
+    window.addEventListener('keydown', this.handleKeyDown, false)
 
     // this.onLoadLocale(this.$i18n.locale)
     EventBus.bus.$on('flashMessage', (payload: FlashMessage) => {
@@ -354,6 +361,7 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     window.removeEventListener('dragenter', this.handleDragEnter)
     window.removeEventListener('dragleave', this.handleDragLeave)
     window.removeEventListener('drop', this.handleDrop)
+    window.removeEventListener('keydown', this.handleKeyDown)
   }
 
   handleToolsDrawerChange () {
@@ -425,6 +433,21 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
       }
     }
   }
+
+  handleKeyDown (event: KeyboardEvent) {
+    const { key, shiftKey, ctrlKey } = event
+
+    if (
+      this.enableKeyboardShortcuts &&
+      key === 'F12' &&
+      shiftKey &&
+      ctrlKey
+    ) {
+      event.preventDefault()
+
+      this.emergencyStop()
+    }
+  }
 }
 </script>
 
diff --git a/src/components/common/KeyboardShortcutsDialog.vue b/src/components/common/KeyboardShortcutsDialog.vue
new file mode 100644
index 0000000000..45281b0092
--- /dev/null
+++ b/src/components/common/KeyboardShortcutsDialog.vue
@@ -0,0 +1,125 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.keyboard_shortcuts.title.keyboard_shortcuts')"
+    max-width="400"
+    no-actions
+  >
+    <v-card-text class="pa-0">
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.navigation') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.general.title.home') }}</th>
+              <td><kbd>{{ keyboardShortcuts.home }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.console') }}</th>
+              <td><kbd>{{ keyboardShortcuts.console }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.gcode_preview') }}</th>
+              <td><kbd>{{ keyboardShortcuts.preview }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.jobs') }}</th>
+              <td><kbd>{{ keyboardShortcuts.jobs }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.history') }}</th>
+              <td><kbd>{{ keyboardShortcuts.history }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.timelapse') }}</th>
+              <td><kbd>{{ keyboardShortcuts.timelapse }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.tune') }}</th>
+              <td><kbd>{{ keyboardShortcuts.tune }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.diagnostics') }}</th>
+              <td><kbd>{{ keyboardShortcuts.diagnostics }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.configure') }}</th>
+              <td><kbd>{{ keyboardShortcuts.configure }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.system') }}</th>
+              <td><kbd>{{ keyboardShortcuts.system }}</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.title.settings') }}</th>
+              <td><kbd>{{ keyboardShortcuts.settings }}</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.actions') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.general.tooltip.estop') }}</th>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.keyboard_shortcuts.label.open_keyboard_shortcut_help') }}</th>
+              <td><kbd>?</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Globals } from '@/globals'
+import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class KeyboardShortcutsDialog extends Vue {
+  open = false
+
+  get keyboardShortcuts () {
+    return Globals.KEYBOARD_SHORTCUTS
+  }
+
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  handleKeyDown (event: KeyboardEvent) {
+    if (!this.enableKeyboardShortcuts) {
+      return
+    }
+
+    const { key, ctrlKey } = event
+
+    if (
+      key === '?' &&
+      !ctrlKey &&
+      !eventTargetIsContentEditable(event)
+    ) {
+      event.preventDefault()
+
+      this.open = true
+    }
+  }
+
+  created () {
+    window.addEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  }
+}
+</script>
diff --git a/src/components/layout/AppBar.vue b/src/components/layout/AppBar.vue
index 1086759dab..b4d6dcfabb 100644
--- a/src/components/layout/AppBar.vue
+++ b/src/components/layout/AppBar.vue
@@ -65,7 +65,13 @@
               </v-icon>
             </app-btn>
           </template>
-          <span>{{ $t('app.general.tooltip.estop') }}</span>
+          <span>
+            {{ $t('app.general.tooltip.estop') }}
+            <template v-if="enableKeyboardShortcuts">
+              <br>
+              <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd>
+            </template>
+          </span>
         </v-tooltip>
       </div>
 
@@ -335,6 +341,10 @@ export default class AppBar extends Mixins(StateMixin, ServicesMixin, FilesMixin
     return true
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
   handleExitLayout () {
     this.$store.commit('config/setLayoutMode', false)
   }
diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
index ae31ef875f..292928a99c 100644
--- a/src/components/settings/GeneralSettings.vue
+++ b/src/components/settings/GeneralSettings.vue
@@ -66,6 +66,17 @@
 
       <v-divider />
 
+      <app-setting :title="$t('app.setting.label.keyboard_shortcuts')">
+        <v-switch
+          v-model="enableKeyboardShortcuts"
+          hide-details
+          class="mb-5"
+          @click.native.stop
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting :title="$t('app.setting.label.confirm_on_estop')">
         <v-switch
           v-model="confirmOnEstop"
@@ -302,6 +313,18 @@ export default class GeneralSettings extends Mixins(StateMixin) {
       }))
   }
 
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  set enableKeyboardShortcuts (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.enableKeyboardShortcuts',
+      value,
+      server: true
+    })
+  }
+
   get confirmOnEstop () {
     return this.$store.state.config.uiSettings.general.confirmOnEstop
   }
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
index aa4cfa4188..38d4fb04e1 100644
--- a/src/components/ui/AppNavItem.vue
+++ b/src/components/ui/AppNavItem.vue
@@ -21,30 +21,14 @@
         </v-list-item-content>
       </v-list-item>
     </template>
-    <span><slot /></span>
+    <span>
+      <slot />
+      <kbd
+        v-if="accelerator && enableKeyboardShortcuts"
+        class="ml-2"
+      >{{ accelerator }}</kbd>
+    </span>
   </v-tooltip>
-
-  <!-- <v-tooltip right :disabled="isMobileViewport">
-    <template v-slot:activator="{ attrs, on }">
-      <router-link
-        :to="to"
-        :exact="exact"
-        custom
-        v-slot="{ navigate, isActive }"
-      >
-        <button
-          v-bind="attrs"
-          v-on="on"
-          v-ripple
-          @click="navigate"
-          :class="{ 'active': isActive }"
-        >
-          <v-icon>{{ icon }}</v-icon>
-        </button>
-      </router-link>
-    </template>
-    <slot></slot>
-  </v-tooltip> -->
 </template>
 
 <script lang="ts">
@@ -52,6 +36,9 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import StateMixin from '@/mixins/state'
 import BrowserMixin from '@/mixins/browser'
+import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { Globals } from '@/globals'
+import isKeyOf from '@/util/is-key-of'
 
 @Component({})
 export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
@@ -59,13 +46,60 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
   readonly title!: string
 
   @Prop({ type: String })
-  readonly to?: string
+  readonly to!: string
 
   @Prop({ type: Boolean })
   readonly exact?: boolean
 
   @Prop({ type: String })
   readonly icon?: string
+
+  get accelerator (): string | undefined {
+    if (this.to) {
+      const destination = this.to === '/'
+        ? 'home'
+        : this.to.substring(1)
+
+      return isKeyOf(destination, Globals.KEYBOARD_SHORTCUTS)
+        ? Globals.KEYBOARD_SHORTCUTS[destination]
+        : undefined
+    }
+  }
+
+  get enableKeyboardShortcuts (): boolean {
+    return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
+  }
+
+  handleKeyDown (event: KeyboardEvent) {
+    if (
+      !this.enableKeyboardShortcuts ||
+      !this.accelerator
+    ) {
+      return
+    }
+
+    const { key, shiftKey, ctrlKey } = event
+
+    if (
+      key === this.accelerator &&
+      !shiftKey &&
+      !ctrlKey &&
+      !eventTargetIsContentEditable(event) &&
+      this.$router.currentRoute.path !== this.to
+    ) {
+      event.preventDefault()
+
+      this.$router.push(this.to)
+    }
+  }
+
+  mounted () {
+    window.addEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  }
 }
 
 </script>
diff --git a/src/globals.ts b/src/globals.ts
index 64e1ce6bf5..29add50680 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -236,6 +236,19 @@ export const Globals = Object.freeze({
   FILTERED_FOLDER_NAMES: ['.git'],
   FILTERED_FILES_PREFIX: ['.thumbs', 'thumbs'],
   FILTERED_FILES_EXTENSION: ['.ignoreme'],
+  KEYBOARD_SHORTCUTS: {
+    home: 'h',
+    console: 'c',
+    preview: 'p',
+    jobs: 'j',
+    history: 'i',
+    timelapse: 'l',
+    tune: 't',
+    diagnostics: 'g',
+    configure: 'x',
+    system: 'q',
+    settings: 's'
+  },
   DOCS_ROOT: 'https://docs.fluidd.xyz',
   DOCS_REQUIRED_CONFIGURATION: 'https://docs.fluidd.xyz/configuration/initial_setup',
   DOCS_MULTIPLE_INSTANCES: 'https://docs.fluidd.xyz/configuration/multiple_printers',
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 1160510971..99725a41ad 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -574,6 +574,7 @@ app:
       invert_x_control: Invert X control
       invert_y_control: Invert Y control
       invert_z_control: Invert Z control
+      keyboard_shortcuts: Keyboard Shortcuts
       language: Display Language
       last_result: Last result
       left_y: Left Y-Axis
@@ -898,3 +899,10 @@ app:
   sensors:
     title:
       sensors: Sensors
+  keyboard_shortcuts:
+    title:
+      keyboard_shortcuts: Keyboard Shortcuts
+    label:
+      actions: Actions
+      navigation: Navigation
+      open_keyboard_shortcut_help: Open keyboard shortcut help
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index df014a1d07..a7c937b91f 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -75,3 +75,7 @@ input[type=number] {
 .theme--dark .spool-icon {
   stroke: rgba(0,0,0, 0.5);
 }
+
+.theme--dark.v-application kbd {
+  background: #4A4A4F !important;
+}
diff --git a/src/store/config/state.ts b/src/store/config/state.ts
index 7fffb92ac0..e6b8fdf29f 100644
--- a/src/store/config/state.ts
+++ b/src/store/config/state.ts
@@ -46,6 +46,7 @@ export const defaultState = (): ConfigState => {
         sectionsToIgnorePendingConfigurationChanges: [],
         dateFormat: 'iso',
         timeFormat: 'iso',
+        enableKeyboardShortcuts: true,
         textSortOrder: 'default',
         showRateOfChange: false,
         showRelativeHumidity: true,
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index 410b15dd2f..2122cdb014 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -82,6 +82,7 @@ export interface GeneralConfig {
   sectionsToIgnorePendingConfigurationChanges: string[];
   dateFormat: string;
   timeFormat: string;
+  enableKeyboardShortcuts: boolean;
   textSortOrder: TextSortOrder;
   showRateOfChange: boolean;
   showRelativeHumidity: boolean;
diff --git a/src/util/event-target-is-content-editable.ts b/src/util/event-target-is-content-editable.ts
new file mode 100644
index 0000000000..7f1a1fb8c9
--- /dev/null
+++ b/src/util/event-target-is-content-editable.ts
@@ -0,0 +1,25 @@
+const eventTargetIsContentEditable = (event: KeyboardEvent): boolean => {
+  if (event.target) {
+    const { isContentEditable, tagName, type, readOnly } = event.target as HTMLInputElement
+
+    if (isContentEditable) {
+      return true
+    }
+
+    return (
+      !readOnly &&
+      (
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT' ||
+        (
+          tagName === 'INPUT' &&
+          !['checkbox', 'radio', 'range', 'button', 'file', 'reset', 'submit', 'color'].includes(type)
+        )
+      )
+    )
+  }
+
+  return false
+}
+
+export default eventTargetIsContentEditable

From e9f284ab88378379062c3d59688fb9caf14e0cf8 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Thu, 4 Apr 2024 22:38:06 +0100
Subject: [PATCH 2/7] refactor: show only available keyboard shortcuts

Replaced Ctrl+Shift+F12 with Ctrl+Alt+F12 for Emergency Stop
Adds Ctrl+Shift+P for Pause and Ctrl+Shift+C for Cancel

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/App.vue                                   | 39 +++++++++++++++---
 .../common/KeyboardShortcutsDialog.vue        | 40 ++++++++++++++++---
 src/components/layout/AppBar.vue              |  2 +-
 src/components/layout/AppNavDrawer.vue        |  4 --
 src/components/ui/AppNavItem.vue              |  5 ++-
 .../widgets/status/StatusControls.vue         | 23 -----------
 src/locales/en.yaml                           |  1 +
 src/mixins/state.ts                           | 22 ++++++++++
 8 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7cf982242..08e6507025 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -435,17 +435,46 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
   }
 
   handleKeyDown (event: KeyboardEvent) {
-    const { key, shiftKey, ctrlKey } = event
+    if (!this.enableKeyboardShortcuts) {
+      return
+    }
+
+    const { key, ctrlKey, altKey, shiftKey } = event
 
     if (
-      this.enableKeyboardShortcuts &&
-      key === 'F12' &&
-      shiftKey &&
-      ctrlKey
+      ctrlKey &&
+      altKey &&
+      key === 'F12'
     ) {
       event.preventDefault()
 
       this.emergencyStop()
+
+      return
+    }
+
+    if (
+      ctrlKey &&
+      shiftKey &&
+      !altKey
+    ) {
+      if (
+        key === 'C' && (
+          this.printerPrinting ||
+          this.printerPaused
+        )
+      ) {
+        event.preventDefault()
+
+        this.cancelPrint()
+      } else if (
+        key === 'P' &&
+        this.printerPrinting
+      ) {
+        event.preventDefault()
+
+        this.pausePrint()
+      }
     }
   }
 }
diff --git a/src/components/common/KeyboardShortcutsDialog.vue b/src/components/common/KeyboardShortcutsDialog.vue
index 45281b0092..f3d4b22c87 100644
--- a/src/components/common/KeyboardShortcutsDialog.vue
+++ b/src/components/common/KeyboardShortcutsDialog.vue
@@ -27,11 +27,11 @@
               <th>{{ $t('app.general.title.jobs') }}</th>
               <td><kbd>{{ keyboardShortcuts.jobs }}</kbd></td>
             </tr>
-            <tr>
+            <tr v-if="supportsHistory">
               <th>{{ $t('app.general.title.history') }}</th>
               <td><kbd>{{ keyboardShortcuts.history }}</kbd></td>
             </tr>
-            <tr>
+            <tr v-if="supportsTimelapse">
               <th>{{ $t('app.general.title.timelapse') }}</th>
               <td><kbd>{{ keyboardShortcuts.timelapse }}</kbd></td>
             </tr>
@@ -39,7 +39,7 @@
               <th>{{ $t('app.general.title.tune') }}</th>
               <td><kbd>{{ keyboardShortcuts.tune }}</kbd></td>
             </tr>
-            <tr>
+            <tr v-if="enableDiagnostics">
               <th>{{ $t('app.general.title.diagnostics') }}</th>
               <td><kbd>{{ keyboardShortcuts.diagnostics }}</kbd></td>
             </tr>
@@ -59,6 +59,23 @@
         </v-simple-table>
       </v-card>
 
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.printing') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.general.btn.pause') }}</th>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
+            </tr>
+            <tr>
+              <th>{{ $t('app.general.btn.cancel') }}</th>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+
       <v-card flat>
         <v-card-title>{{ $t('app.keyboard_shortcuts.label.actions') }}</v-card-title>
 
@@ -66,7 +83,7 @@
           <tbody>
             <tr>
               <th>{{ $t('app.general.tooltip.estop') }}</th>
-              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd></td>
+              <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F12</kbd></td>
             </tr>
             <tr>
               <th>{{ $t('app.keyboard_shortcuts.label.open_keyboard_shortcut_help') }}</th>
@@ -96,16 +113,29 @@ export default class KeyboardShortcutsDialog extends Vue {
     return this.$store.state.config.uiSettings.general.enableKeyboardShortcuts
   }
 
+  get supportsHistory (): boolean {
+    return this.$store.getters['server/componentSupport']('history')
+  }
+
+  get supportsTimelapse (): boolean {
+    return this.$store.getters['server/componentSupport']('timelapse')
+  }
+
+  get enableDiagnostics (): boolean {
+    return this.$store.state.config.uiSettings.general.enableDiagnostics
+  }
+
   handleKeyDown (event: KeyboardEvent) {
     if (!this.enableKeyboardShortcuts) {
       return
     }
 
-    const { key, ctrlKey } = event
+    const { key, ctrlKey, altKey } = event
 
     if (
       key === '?' &&
       !ctrlKey &&
+      !altKey &&
       !eventTargetIsContentEditable(event)
     ) {
       event.preventDefault()
diff --git a/src/components/layout/AppBar.vue b/src/components/layout/AppBar.vue
index b4d6dcfabb..b7589c10e2 100644
--- a/src/components/layout/AppBar.vue
+++ b/src/components/layout/AppBar.vue
@@ -69,7 +69,7 @@
             {{ $t('app.general.tooltip.estop') }}
             <template v-if="enableKeyboardShortcuts">
               <br>
-              <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F12</kbd>
+              <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F12</kbd>
             </template>
           </span>
         </v-tooltip>
diff --git a/src/components/layout/AppNavDrawer.vue b/src/components/layout/AppNavDrawer.vue
index 3cdd82505d..f7837f511e 100644
--- a/src/components/layout/AppNavDrawer.vue
+++ b/src/components/layout/AppNavDrawer.vue
@@ -141,10 +141,6 @@ export default class AppNavDrawer extends Mixins(StateMixin, BrowserMixin) {
     return this.$store.getters['server/componentSupport']('timelapse')
   }
 
-  get supportsVersions () {
-    return this.$store.getters['server/componentSupport']('update_manager')
-  }
-
   get enableDiagnostics () {
     return this.$store.state.config.uiSettings.general.enableDiagnostics
   }
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
index 38d4fb04e1..93f9be78f0 100644
--- a/src/components/ui/AppNavItem.vue
+++ b/src/components/ui/AppNavItem.vue
@@ -78,12 +78,13 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
       return
     }
 
-    const { key, shiftKey, ctrlKey } = event
+    const { key, ctrlKey, altKey, shiftKey } = event
 
     if (
       key === this.accelerator &&
-      !shiftKey &&
       !ctrlKey &&
+      !altKey &&
+      !shiftKey &&
       !eventTargetIsContentEditable(event) &&
       this.$router.currentRoute.path !== this.to
     ) {
diff --git a/src/components/widgets/status/StatusControls.vue b/src/components/widgets/status/StatusControls.vue
index 5e76dea8b1..5c64a4c5f1 100644
--- a/src/components/widgets/status/StatusControls.vue
+++ b/src/components/widgets/status/StatusControls.vue
@@ -93,7 +93,6 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import { SocketActions } from '@/api/socketActions'
 import JobHistoryItemStatus from '@/components/widgets/history/JobHistoryItemStatus.vue'
 import ExcludeObjectsDialog from '@/components/widgets/exclude-objects/ExcludeObjectsDialog.vue'
 import PauseResumeBtn from './PauseResumeBtn.vue'
@@ -123,28 +122,6 @@ export default class StatusControls extends Mixins(StateMixin) {
     return Object.keys(this.$store.getters['parts/getParts']).length > 0
   }
 
-  async cancelPrint () {
-    const result = await this.$confirm(
-      this.$tc('app.general.simple_form.msg.confirm_cancel_print'),
-      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
-    )
-
-    if (result) {
-      SocketActions.printerPrintCancel()
-      this.addConsoleEntry('CANCEL_PRINT')
-    }
-  }
-
-  pausePrint () {
-    SocketActions.printerPrintPause()
-    this.addConsoleEntry('PAUSE')
-  }
-
-  resumePrint () {
-    SocketActions.printerPrintResume()
-    this.addConsoleEntry('RESUME')
-  }
-
   resetFile () {
     this.sendGcode('SDCARD_RESET_FILE')
   }
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 99725a41ad..8edf054a3d 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -906,3 +906,4 @@ app:
       actions: Actions
       navigation: Navigation
       open_keyboard_shortcut_help: Open keyboard shortcut help
+      printing: Printing
diff --git a/src/mixins/state.ts b/src/mixins/state.ts
index 719e97bc5e..ee4cc3bc1b 100644
--- a/src/mixins/state.ts
+++ b/src/mixins/state.ts
@@ -118,4 +118,26 @@ export default class StateMixin extends Vue {
       SocketActions.printerEmergencyStop()
     }
   }
+
+  async cancelPrint () {
+    const result = await this.$confirm(
+      this.$tc('app.general.simple_form.msg.confirm_cancel_print'),
+      { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+    )
+
+    if (result) {
+      SocketActions.printerPrintCancel()
+      this.addConsoleEntry('CANCEL_PRINT')
+    }
+  }
+
+  pausePrint () {
+    SocketActions.printerPrintPause()
+    this.addConsoleEntry('PAUSE')
+  }
+
+  resumePrint () {
+    SocketActions.printerPrintResume()
+    this.addConsoleEntry('RESUME')
+  }
 }

From c88d47f62f7c48c5f3edb47e8494efc9708def7c Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 5 Apr 2024 12:53:53 +0100
Subject: [PATCH 3/7] refactor: minor changes

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/common/KeyboardShortcutsDialog.vue | 4 ++--
 src/components/settings/GeneralSettings.vue       | 5 ++++-
 src/components/ui/AppNavItem.vue                  | 5 ++---
 src/locales/en.yaml                               | 3 ++-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/common/KeyboardShortcutsDialog.vue b/src/components/common/KeyboardShortcutsDialog.vue
index f3d4b22c87..89725d2a94 100644
--- a/src/components/common/KeyboardShortcutsDialog.vue
+++ b/src/components/common/KeyboardShortcutsDialog.vue
@@ -66,11 +66,11 @@
           <tbody>
             <tr>
               <th>{{ $t('app.general.btn.pause') }}</th>
-              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd></td>
             </tr>
             <tr>
               <th>{{ $t('app.general.btn.cancel') }}</th>
-              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>c</kbd></td>
             </tr>
           </tbody>
         </v-simple-table>
diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
index 292928a99c..b52dd185ba 100644
--- a/src/components/settings/GeneralSettings.vue
+++ b/src/components/settings/GeneralSettings.vue
@@ -66,7 +66,10 @@
 
       <v-divider />
 
-      <app-setting :title="$t('app.setting.label.keyboard_shortcuts')">
+      <app-setting
+        :title="$t('app.setting.label.keyboard_shortcuts')"
+        :sub-title="$t('app.setting.tooltip.keyboard_shortcuts')"
+      >
         <v-switch
           v-model="enableKeyboardShortcuts"
           hide-details
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
index 93f9be78f0..b89e037e59 100644
--- a/src/components/ui/AppNavItem.vue
+++ b/src/components/ui/AppNavItem.vue
@@ -78,13 +78,12 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
       return
     }
 
-    const { key, ctrlKey, altKey, shiftKey } = event
+    const { key, ctrlKey, altKey } = event
 
     if (
-      key === this.accelerator &&
+      key.toLowerCase() === this.accelerator &&
       !ctrlKey &&
       !altKey &&
-      !shiftKey &&
       !eventTargetIsContentEditable(event) &&
       this.$router.currentRoute.path !== this.to
     ) {
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 8edf054a3d..0466299f27 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -574,7 +574,7 @@ app:
       invert_x_control: Invert X control
       invert_y_control: Invert Y control
       invert_z_control: Invert Z control
-      keyboard_shortcuts: Keyboard Shortcuts
+      keyboard_shortcuts: Keyboard shortcuts
       language: Display Language
       last_result: Last result
       left_y: Left Y-Axis
@@ -654,6 +654,7 @@ app:
       average_calculation: If more than one option is select, an average will be calculated
       diagnostics_performance: '[BETA] Logging diagnostics info may impact performance'
       gcode_coords: Use GCode position instead of toolhead position on dashboard
+      keyboard_shortcuts: Once enabled, press '?' to view the list of available keyboard shortcuts
       show_manual_probe_dialog_automatically: Automatically shows helper dialog if running a Manual Probe tool
       show_bed_screws_adjust_dialog_automatically: Automatically shows helper dialog if running BED_SCREWS_ADJUST tool
       show_screws_tilt_adjust_dialog_automatically: Automatically shows helper dialog if running SCREWS_TILT_CALCULATE tool

From e54815fa98250a636b885097f088618425b7c2e5 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 5 Apr 2024 14:55:55 +0100
Subject: [PATCH 4/7] style: <kbd> background color same on all themes

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/scss/misc.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index a7c937b91f..aee56f8f5c 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -76,6 +76,6 @@ input[type=number] {
   stroke: rgba(0,0,0, 0.5);
 }
 
-.theme--dark.v-application kbd {
+.v-application kbd {
   background: #4A4A4F !important;
 }

From 8f3a53ced24158e1cf16150ee58f463c608fd2a9 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 5 Apr 2024 21:30:56 +0100
Subject: [PATCH 5/7] refactor: updates keyboard shortcuts

Replaced Ctrl+Shift+P with Shift+P for Pause Print
Replaced Ctrl+Shift+C with Shift+C for Cancel Print

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/App.vue                                       | 2 +-
 src/components/common/KeyboardShortcutsDialog.vue | 4 ++--
 src/components/ui/AppNavItem.vue                  | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 08e6507025..1e81994e5d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -454,8 +454,8 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     }
 
     if (
-      ctrlKey &&
       shiftKey &&
+      !ctrlKey &&
       !altKey
     ) {
       if (
diff --git a/src/components/common/KeyboardShortcutsDialog.vue b/src/components/common/KeyboardShortcutsDialog.vue
index 89725d2a94..183c487481 100644
--- a/src/components/common/KeyboardShortcutsDialog.vue
+++ b/src/components/common/KeyboardShortcutsDialog.vue
@@ -66,11 +66,11 @@
           <tbody>
             <tr>
               <th>{{ $t('app.general.btn.pause') }}</th>
-              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd></td>
+              <td><kbd>Shift</kbd> + <kbd>p</kbd></td>
             </tr>
             <tr>
               <th>{{ $t('app.general.btn.cancel') }}</th>
-              <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>c</kbd></td>
+              <td><kbd>Shift</kbd> + <kbd>c</kbd></td>
             </tr>
           </tbody>
         </v-simple-table>
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
index b89e037e59..93f9be78f0 100644
--- a/src/components/ui/AppNavItem.vue
+++ b/src/components/ui/AppNavItem.vue
@@ -78,12 +78,13 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
       return
     }
 
-    const { key, ctrlKey, altKey } = event
+    const { key, ctrlKey, altKey, shiftKey } = event
 
     if (
-      key.toLowerCase() === this.accelerator &&
+      key === this.accelerator &&
       !ctrlKey &&
       !altKey &&
+      !shiftKey &&
       !eventTargetIsContentEditable(event) &&
       this.$router.currentRoute.path !== this.to
     ) {

From 5a953e3ab6798e142786b667a445ea33f9abaeed Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 5 Apr 2024 22:01:50 +0100
Subject: [PATCH 6/7] feat(FileEditor): Adds estop keybinding support

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/widgets/filesystem/FileEditor.vue       | 9 +++++++++
 src/components/widgets/filesystem/FileEditorDialog.vue | 1 +
 2 files changed, 10 insertions(+)

diff --git a/src/components/widgets/filesystem/FileEditor.vue b/src/components/widgets/filesystem/FileEditor.vue
index adbda6528b..94bfd37b9f 100644
--- a/src/components/widgets/filesystem/FileEditor.vue
+++ b/src/components/widgets/filesystem/FileEditor.vue
@@ -110,6 +110,15 @@ export default class FileEditor extends Mixins(BrowserMixin) {
       }
     })
 
+    this.editor.addAction({
+      id: 'action-emergency-stop',
+      label: this.$tc('app.general.tooltip.estop'),
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.F12],
+      run: () => {
+        this.$emit('emergency-stop')
+      }
+    })
+
     const filename = this.path ? `${this.path}/${this.filename}` : this.filename
     const apiFileUrl = `${this.activeInstance.apiUrl}/server/files/${filename}`
 
diff --git a/src/components/widgets/filesystem/FileEditorDialog.vue b/src/components/widgets/filesystem/FileEditorDialog.vue
index a84566949c..e525104691 100644
--- a/src/components/widgets/filesystem/FileEditorDialog.vue
+++ b/src/components/widgets/filesystem/FileEditorDialog.vue
@@ -135,6 +135,7 @@
         :code-lens="codeLens"
         @ready="editorReady = true"
         @save="emitSave(false)"
+        @emergency-stop="emergencyStop"
       />
 
       <file-editor-text-only

From 542ccebffd19378dce3016559794b580f43a6924 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sat, 6 Apr 2024 00:04:16 +0100
Subject: [PATCH 7/7] fix: ignore shortcuts target is content editable

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/App.vue                                   | 53 +++++++++++--------
 .../common/KeyboardShortcutsDialog.vue        | 27 +++++++---
 src/components/ui/AppNavItem.vue              |  9 ++--
 .../widgets/bedmesh/BedMeshControls.vue       |  2 +-
 .../widgets/status/StatusControls.vue         |  2 +-
 .../widgets/toolhead/ToolheadControlBars.vue  |  2 +-
 .../toolhead/ToolheadControlCircle.vue        |  4 +-
 .../widgets/toolhead/ToolheadControlCross.vue |  2 +-
 src/locales/en.yaml                           |  5 ++
 src/mixins/state.ts                           |  4 ++
 ...s-content-editable.ts => event-helpers.ts} | 22 +++++++-
 11 files changed, 88 insertions(+), 44 deletions(-)
 rename src/util/{event-target-is-content-editable.ts => event-helpers.ts} (54%)

diff --git a/src/App.vue b/src/App.vue
index 1e81994e5d..4b13341979 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,6 +112,7 @@ import { getFilesFromDataTransfer, hasFilesInDataTransfer } from './util/file-sy
 import type { ThemeConfig } from '@/store/config/types'
 import ActionCommandPromptDialog from './components/common/ActionCommandPromptDialog.vue'
 import KeyboardShortcutsDialog from './components/common/KeyboardShortcutsDialog.vue'
+import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from './util/event-helpers'
 
 @Component<App>({
   metaInfo () {
@@ -439,13 +440,9 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
       return
     }
 
-    const { key, ctrlKey, altKey, shiftKey } = event
+    const shortcut = keyboardEventToKeyboardShortcut(event)
 
-    if (
-      ctrlKey &&
-      altKey &&
-      key === 'F12'
-    ) {
+    if (shortcut === 'Ctrl+Alt+F12') {
       event.preventDefault()
 
       this.emergencyStop()
@@ -454,27 +451,39 @@ export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {
     }
 
     if (
-      shiftKey &&
-      !ctrlKey &&
-      !altKey
+      !this.klippyReady ||
+      eventTargetIsContentEditable(event)
     ) {
-      if (
-        key === 'C' && (
+      return
+    }
+
+    switch (shortcut) {
+      case 'Shift+C':
+        if (
           this.printerPrinting ||
           this.printerPaused
-        )
-      ) {
-        event.preventDefault()
+        ) {
+          event.preventDefault()
 
-        this.cancelPrint()
-      } else if (
-        key === 'P' &&
-        this.printerPrinting
-      ) {
-        event.preventDefault()
+          this.cancelPrint()
+        }
+        break
 
-        this.pausePrint()
-      }
+      case 'Shift+P':
+        if (this.printerPrinting) {
+          event.preventDefault()
+
+          this.pausePrint()
+        }
+        break
+
+      case 'Shift+H':
+        if (!this.printerPrinting) {
+          event.preventDefault()
+
+          this.homeAll()
+        }
+        break
     }
   }
 }
diff --git a/src/components/common/KeyboardShortcutsDialog.vue b/src/components/common/KeyboardShortcutsDialog.vue
index 183c487481..83993630df 100644
--- a/src/components/common/KeyboardShortcutsDialog.vue
+++ b/src/components/common/KeyboardShortcutsDialog.vue
@@ -59,17 +59,30 @@
         </v-simple-table>
       </v-card>
 
+      <v-card flat>
+        <v-card-title>{{ $t('app.keyboard_shortcuts.label.tool') }}</v-card-title>
+
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <th>{{ $t('app.keyboard_shortcuts.label.home_all') }}</th>
+              <td><kbd>Shift</kbd> + <kbd>h</kbd></td>
+            </tr>
+          </tbody>
+        </v-simple-table>
+      </v-card>
+
       <v-card flat>
         <v-card-title>{{ $t('app.keyboard_shortcuts.label.printing') }}</v-card-title>
 
         <v-simple-table dense>
           <tbody>
             <tr>
-              <th>{{ $t('app.general.btn.pause') }}</th>
+              <th>{{ $t('app.keyboard_shortcuts.label.pause') }}</th>
               <td><kbd>Shift</kbd> + <kbd>p</kbd></td>
             </tr>
             <tr>
-              <th>{{ $t('app.general.btn.cancel') }}</th>
+              <th>{{ $t('app.keyboard_shortcuts.label.cancel') }}</th>
               <td><kbd>Shift</kbd> + <kbd>c</kbd></td>
             </tr>
           </tbody>
@@ -82,7 +95,7 @@
         <v-simple-table dense>
           <tbody>
             <tr>
-              <th>{{ $t('app.general.tooltip.estop') }}</th>
+              <th>{{ $t('app.keyboard_shortcuts.label.emergency_stop') }}</th>
               <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F12</kbd></td>
             </tr>
             <tr>
@@ -98,7 +111,7 @@
 
 <script lang="ts">
 import { Globals } from '@/globals'
-import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from '@/util/event-helpers'
 import { Component, Vue } from 'vue-property-decorator'
 
 @Component({})
@@ -130,12 +143,10 @@ export default class KeyboardShortcutsDialog extends Vue {
       return
     }
 
-    const { key, ctrlKey, altKey } = event
+    const shortcut = keyboardEventToKeyboardShortcut(event)
 
     if (
-      key === '?' &&
-      !ctrlKey &&
-      !altKey &&
+      ['?', 'Shift+?'].includes(shortcut) &&
       !eventTargetIsContentEditable(event)
     ) {
       event.preventDefault()
diff --git a/src/components/ui/AppNavItem.vue b/src/components/ui/AppNavItem.vue
index 93f9be78f0..981af913a8 100644
--- a/src/components/ui/AppNavItem.vue
+++ b/src/components/ui/AppNavItem.vue
@@ -36,7 +36,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 
 import StateMixin from '@/mixins/state'
 import BrowserMixin from '@/mixins/browser'
-import eventTargetIsContentEditable from '@/util/event-target-is-content-editable'
+import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from '@/util/event-helpers'
 import { Globals } from '@/globals'
 import isKeyOf from '@/util/is-key-of'
 
@@ -78,13 +78,10 @@ export default class AppNavItem extends Mixins(StateMixin, BrowserMixin) {
       return
     }
 
-    const { key, ctrlKey, altKey, shiftKey } = event
+    const shortcut = keyboardEventToKeyboardShortcut(event)
 
     if (
-      key === this.accelerator &&
-      !ctrlKey &&
-      !altKey &&
-      !shiftKey &&
+      shortcut === this.accelerator &&
       !eventTargetIsContentEditable(event) &&
       this.$router.currentRoute.path !== this.to
     ) {
diff --git a/src/components/widgets/bedmesh/BedMeshControls.vue b/src/components/widgets/bedmesh/BedMeshControls.vue
index 37ab590caa..c5a89b37a3 100644
--- a/src/components/widgets/bedmesh/BedMeshControls.vue
+++ b/src/components/widgets/bedmesh/BedMeshControls.vue
@@ -165,7 +165,7 @@
             :loading="hasWait($waits.onHomeAll)"
             :disabled="printerBusy"
             :color="(!allHomed) ? 'primary' : undefined"
-            @click="sendGcode('G28', $waits.onHomeAll)"
+            @click="homeAll"
           >
             <v-icon
               small
diff --git a/src/components/widgets/status/StatusControls.vue b/src/components/widgets/status/StatusControls.vue
index 5c64a4c5f1..134fc3b61d 100644
--- a/src/components/widgets/status/StatusControls.vue
+++ b/src/components/widgets/status/StatusControls.vue
@@ -7,7 +7,7 @@
         :disabled="hasWait([$waits.onPrintCancel, $waits.onPrintResume, $waits.onPrintPause])"
         small
         class="ms-1 my-1"
-        @click="cancelPrint()"
+        @click="cancelPrint"
       >
         <v-icon
           small
diff --git a/src/components/widgets/toolhead/ToolheadControlBars.vue b/src/components/widgets/toolhead/ToolheadControlBars.vue
index 847a6b8c1a..dab6f16a2c 100644
--- a/src/components/widgets/toolhead/ToolheadControlBars.vue
+++ b/src/components/widgets/toolhead/ToolheadControlBars.vue
@@ -14,7 +14,7 @@
           :loading="hasWait($waits.onHomeAll)"
           :color="!allHomed ? 'primary' : undefined"
           class="px-2 mr-2"
-          @click="sendGcode('G28', $waits.onHomeAll)"
+          @click="homeAll"
         >
           <v-icon
             small
diff --git a/src/components/widgets/toolhead/ToolheadControlCircle.vue b/src/components/widgets/toolhead/ToolheadControlCircle.vue
index 15d1e900da..b54394b078 100644
--- a/src/components/widgets/toolhead/ToolheadControlCircle.vue
+++ b/src/components/widgets/toolhead/ToolheadControlCircle.vue
@@ -420,7 +420,7 @@
               v-else
               class="cc-btn"
               :class="xyzHomeClasses"
-              @click="sendGcode('G28', $waits.onHomeAll)"
+              @click="homeAll"
             >
               <circle
                 cx="173.5"
@@ -502,7 +502,7 @@
               v-else
               class="cc-btn large"
               :class="xyzHomeClasses"
-              @click="sendGcode('G28', $waits.onHomeAll)"
+              @click="homeAll"
             >
               <path
                 d="m8.5,283.781v48.724c0,3.311,2.684,5.995,5.995,5.995h48.724c5.851,0,8.259-7.555,3.454-10.892-18.441-12.807-34.473-28.839-47.28-47.28-3.337-4.805-10.892-2.397-10.892,3.454Z"
diff --git a/src/components/widgets/toolhead/ToolheadControlCross.vue b/src/components/widgets/toolhead/ToolheadControlCross.vue
index 543297e475..0f3b980882 100644
--- a/src/components/widgets/toolhead/ToolheadControlCross.vue
+++ b/src/components/widgets/toolhead/ToolheadControlCross.vue
@@ -36,7 +36,7 @@
           :disabled="!klippyReady || printerPrinting"
           icon="$home"
           small-icon
-          @click="sendGcode('G28', $waits.onHomeAll)"
+          @click="homeAll"
         >
           {{ $t('app.tool.btn.home_all') }}
         </app-btn-toolhead-move>
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 0466299f27..5d02b47f0a 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -905,6 +905,11 @@ app:
       keyboard_shortcuts: Keyboard Shortcuts
     label:
       actions: Actions
+      cancel: Cancel
+      emergency_stop: Emergency stop
+      home_all: Home all
       navigation: Navigation
       open_keyboard_shortcut_help: Open keyboard shortcut help
+      pause: Pause
       printing: Printing
+      tool: Tool
diff --git a/src/mixins/state.ts b/src/mixins/state.ts
index ee4cc3bc1b..0e5d23a9d2 100644
--- a/src/mixins/state.ts
+++ b/src/mixins/state.ts
@@ -140,4 +140,8 @@ export default class StateMixin extends Vue {
     SocketActions.printerPrintResume()
     this.addConsoleEntry('RESUME')
   }
+
+  homeAll () {
+    this.sendGcode('G28', this.$waits.onHomeAll)
+  }
 }
diff --git a/src/util/event-target-is-content-editable.ts b/src/util/event-helpers.ts
similarity index 54%
rename from src/util/event-target-is-content-editable.ts
rename to src/util/event-helpers.ts
index 7f1a1fb8c9..5ef663bf57 100644
--- a/src/util/event-target-is-content-editable.ts
+++ b/src/util/event-helpers.ts
@@ -1,4 +1,4 @@
-const eventTargetIsContentEditable = (event: KeyboardEvent): boolean => {
+export const eventTargetIsContentEditable = (event: Event): boolean => {
   if (event.target) {
     const { isContentEditable, tagName, type, readOnly } = event.target as HTMLInputElement
 
@@ -22,4 +22,22 @@ const eventTargetIsContentEditable = (event: KeyboardEvent): boolean => {
   return false
 }
 
-export default eventTargetIsContentEditable
+export const keyboardEventToKeyboardShortcut = (event: KeyboardEvent): string => {
+  const keys: string[] = []
+
+  if (event.ctrlKey) {
+    keys.push('Ctrl')
+  }
+
+  if (event.altKey) {
+    keys.push('Alt')
+  }
+
+  if (event.shiftKey) {
+    keys.push('Shift')
+  }
+
+  keys.push(event.key)
+
+  return keys.join('+')
+}