Update hotkeys initialization

src/App.tsx

@@ -2,7 +2,8 @@ import { Component, Vue } from 'vue-property-decorator'
 import Mousetrap from 'mousetrap'
 import { AppModule } from '@/store/app'
 import { PageModule } from './store/page'
-import { modKey } from './utils/helper'
+import { focusInputPassword } from './utils/helper'
+import { hotkeys } from '@/utils/hotkeys'
 
 @Component
 export default class MainApp extends Vue {
@@ -16,20 +17,7 @@ export default class MainApp extends Vue {
   }
 
   initKeybinds() {
-    Mousetrap.bind(`${modKey}+t`, () => {
+    hotkeys.forEach(({ keys, callback }) => Mousetrap.bind(keys.join('+'), callback))
-      PageModule.openTab({ type: 'themes' })
-      PageModule.openBlock({ id: 'settings' })
-    })
-
-    Mousetrap.bind(`${modKey}+c`, () => {
-      PageModule.openTab({ type: 'custom' })
-      PageModule.openBlock({ id: 'settings' })
-    })
-
-    Mousetrap.bind(`${modKey}+s`, () => {
-      PageModule.openTab({ type: 'settings' })
-      PageModule.openBlock({ id: 'settings' })
-    })
 
     Mousetrap.bind('escape', () => {
       const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
@@ -48,29 +36,13 @@ export default class MainApp extends Vue {
 
     Mousetrap.bind('enter', () => {
       const isFocusPassword = document.querySelector('#password:focus')
-      const inputPassword = document.querySelector('#password') as HTMLInputElement
 
       if (isFocusPassword) {
         AppModule.login()
-      } else if (inputPassword) {
+      } else {
-        inputPassword.focus()
+        focusInputPassword()
       }
     })
-
-    // keyPress(event: KeyboardEvent) {
-    //   if (PageModule.activeBlocks.length === 0) {
-    //     PageModule.openBlock({ id: 'login' })
-    //   }
-    // }
-
-    Mousetrap.bind(`${modKey}+h`, () => {
-      console.log('hide all windows')
-      PageModule.CLOSE_ALL_ACTIVE_BLOCK()
-    })
-
-    Mousetrap.bind(`${modKey}+R`, () => {
-      AppModule.randomizeSettingsTheme()
-    })
   }
 
   render() {

src/components/base/ShutdownButton.tsx

@@ -1,10 +1,8 @@
 import { Component, Vue } from 'vue-property-decorator'
-
 import { PageModule } from '@/store/page'
 import AppIcon from '@/components/app/AppIcon.vue'
 import ShutdownMenu from '@/components/base/ShutdownMenu'
-import Mousetrap from 'mousetrap'
+import { systemActionsObject } from '@/utils/helper'
-import { modKey, systemActionsObject } from '@/utils/helper'
 
 @Component({
   components: { AppIcon, ShutdownMenu }
@@ -14,19 +12,10 @@ export default class ShutdownBlock extends Vue {
     return !!PageModule.activeBlock
   }
 
-  mounted() {
-    Mousetrap.bind(`${modKey}+p`, systemActionsObject.shutdown)
-  }
-
-  shutdown(event: MouseEvent) {
-    event.stopPropagation()
-    systemActionsObject.shutdown()
-  }
-
   render() {
     const button = <div class="shutdown-block active-block">
       <ShutdownMenu />
-      <div class="shutdown-button" onClick={ this.shutdown }>
+      <div class="shutdown-button" onClick={ systemActionsObject.shutdown }>
         <AppIcon name="shutdown" />
       </div>
     </div>

src/utils/helper.ts

@@ -135,6 +135,14 @@ export function preventDefault(event: Event, callback?: Function) {
   callback && callback()
 }
 
+export function focusInputPassword() {
+  const inputPassword = document.querySelector('#password') as HTMLInputElement
+
+  if (inputPassword) {
+    inputPassword.focus()
+  }
+}
+
 export function stopPropagation(event: Event, callback?: Function) {
   event.stopPropagation()
   callback && callback()

src/utils/hotkeys.ts

@@ -0,0 +1,62 @@
+import { PageModule } from '@/store/page'
+import { AppModule } from '@/store/app'
+import { systemActionsObject, modKey } from '@/utils/helper'
+
+const prefixTitle = 'settings.keyboard.'
+export const hotkeys = [
+  {
+    keys: [modKey, 't'],
+    title: `${prefixTitle}open-themes`,
+    callback: () => {
+      PageModule.openTab({ type: 'themes' })
+      PageModule.openBlock({ id: 'settings' })
+    }
+  },
+  {
+    keys: [modKey, 'c'],
+    title: `${prefixTitle}open-custom`,
+    callback: () => {
+      PageModule.openTab({ type: 'custom' })
+      PageModule.openBlock({ id: 'settings' })
+    }
+  },
+  {
+    keys: [modKey, 's'],
+    title: `${prefixTitle}open-settings`,
+    callback: () => {
+      PageModule.openTab({ type: 'settings' })
+      PageModule.openBlock({ id: 'settings' })
+    }
+  },
+  {
+    keys: [modKey, 'h'],
+    title: `${prefixTitle}hide-windows`,
+    callback: () => {
+      PageModule.CLOSE_ALL_ACTIVE_BLOCK()
+    }
+  },
+  {
+    keys: [modKey, 'r'],
+    title: `${prefixTitle}randomize-theme`,
+    callback: () => {
+      AppModule.randomizeSettingsTheme()
+    }
+  },
+  {
+    keys: [modKey, 'P'],
+    title: `${prefixTitle}poweroff`,
+    callback: systemActionsObject.shutdown
+  },
+  {
+    keys: [modKey, 'R'],
+    title: `${prefixTitle}restart`,
+    callback: systemActionsObject.restart
+  },
+  {
+    keys: [modKey, 'S'],
+    title: `${prefixTitle}suspend`,
+    callback: systemActionsObject.suspend
+  }
+]
+
+export type hotkeysType = typeof hotkeys[number]