feat: use physical key as hotkey

Closes will-stone#469

Author: will-stone

Diff for: __fixtures__/key-layout.ts

@@ -0,0 +1,52 @@
+export const keyLayout = {
+  KeyE: 'e',
+  KeyD: 'd',
+  Minus: '-',
+  KeyH: 'h',
+  KeyZ: 'z',
+  Equal: '=',
+  KeyP: 'p',
+  BracketRight: ']',
+  BracketLeft: '[',
+  Digit8: '8',
+  Digit9: '9',
+  KeyS: 's',
+  Semicolon: ';',
+  Digit5: '5',
+  KeyQ: 'q',
+  KeyO: 'o',
+  Period: '.',
+  Digit6: '6',
+  KeyV: 'v',
+  Digit3: '3',
+  KeyL: 'l',
+  Backquote: '`',
+  KeyG: 'g',
+  KeyJ: 'j',
+  KeyT: 't',
+  Quote: "'",
+  KeyY: 'y',
+  Digit0: '0',
+  IntlBackslash: '§',
+  KeyR: 'r',
+  Backslash: '\\',
+  KeyU: 'u',
+  KeyK: 'k',
+  Slash: '/',
+  KeyF: 'f',
+  KeyI: 'i',
+  KeyX: 'x',
+  KeyA: 'a',
+  Digit2: '2',
+  Digit7: '7',
+  KeyM: 'm',
+  Digit4: '4',
+  KeyW: 'w',
+  IntlYen: '§',
+  Digit1: '1',
+  KeyN: 'n',
+  KeyB: 'b',
+  IntlRo: '`',
+  KeyC: 'c',
+  Comma: ',',
+}

Diff for: src/renderers/picker/components/hooks/use-keyboard-events.ts

@@ -16,8 +16,7 @@ const keyboardEvent =
     const { apps } = getState().storage
 
     const virtualKey = event.key.toLowerCase()
-    // Not needed at the moment but useful to know
-    // const physicalKey = event.code.toLowerCase()
+    const physicalKey = event.code
 
     // Escape
     if (virtualKey === 'escape') {
@@ -39,12 +38,13 @@ const keyboardEvent =
       }
     }
 
-    // App hotkey -- no modifier key held AND is alphanumeric
-    else if (!event.metaKey && /^[a-z0-9]$/u.test(virtualKey)) {
-      event.preventDefault()
-      const foundApp = apps.find((app) => app.hotkey === virtualKey)
+    // App hotkey
+    else {
+      const foundApp = apps.find((app) => app.hotCode === physicalKey)
+
+      if (!event.metaKey && foundApp) {
+        event.preventDefault()
 
-      if (foundApp) {
         dispatch(
           pressedAppKey({
             url,

Diff for: src/renderers/picker/components/layout.tsx

@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux'
 import { pickerStarted } from '../../../shared/state/actions'
 import { useInstalledApps } from '../../../shared/state/hooks'
 import { Spinner } from '../../shared/components/atoms/spinner'
+import { useKeyCodeMap } from '../../shared/state/hooks'
 import { favAppRef } from '../refs'
 import AppLogo from './atoms/app-logo'
 import Kbd from './atoms/kbd'
@@ -32,6 +33,8 @@ const App: React.FC = () => {
 
   const [favApp, ...normalApps] = useInstalledApps()
 
+  const keyCodeMap = useKeyCodeMap()
+
   return (
     <div className="h-screen w-screen select-none flex flex-col items-center relative dark:text-white">
       {!favApp && (
@@ -49,7 +52,9 @@ const App: React.FC = () => {
             >
               <AppLogo app={favApp} className="h-20 w-20 mb-2" />
               <span>{favApp.name}</span>
-              {favApp.hotkey && <Kbd className="mt-2">{favApp.hotkey}</Kbd>}
+              {favApp.hotCode && (
+                <Kbd className="mt-2">{keyCodeMap[favApp.hotCode]}</Kbd>
+              )}
             </AppButton>
           )}
         </div>
@@ -64,8 +69,8 @@ const App: React.FC = () => {
                 className="flex-shrink-0 flex items-center text-left px-4 py-3 space-x-4 w-full"
               >
                 <AppLogo app={app} className="flex-shrink-0 h-8 w-8" />
-                {app.hotkey && (
-                  <Kbd className="flex-shrink-0">{app.hotkey}</Kbd>
+                {app.hotCode && (
+                  <Kbd className="flex-shrink-0">{keyCodeMap[app.hotCode]}</Kbd>
                 )}
                 <span>{app.name}</span>
               </AppButton>

Diff for: src/renderers/picker/components/organisms/apps.test.tsx

@@ -2,8 +2,10 @@ import '../../../shared/preload'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import electron from 'electron'
+import cloneDeep from 'lodash/cloneDeep'
 import React from 'react'
 
+import { keyLayout } from '../../../../../__fixtures__/key-layout'
 import {
   clickedApp,
   installedAppsRetrieved,
@@ -13,8 +15,26 @@ import {
   urlOpened,
 } from '../../../../shared/state/actions'
 import { Channel } from '../../../../shared/state/channels'
+import { customWindow } from '../../../shared/custom.window'
 import Wrapper from '../_bootstrap'
 
+const originalNavigator = cloneDeep(customWindow.navigator)
+
+beforeAll(() => {
+  customWindow.navigator = {
+    ...customWindow.navigator,
+    keyboard: {
+      getLayoutMap: jest
+        .fn()
+        .mockResolvedValue({ entries: jest.fn().mockReturnValue(keyLayout) }),
+    },
+  }
+})
+
+afterAll(() => {
+  customWindow.navigator = originalNavigator
+})
+
 test('apps', () => {
   render(<Wrapper />)
   const win = new electron.BrowserWindow()
@@ -42,9 +62,9 @@ test('apps', () => {
     Channel.MAIN,
     syncStorage({
       apps: [
-        { id: 'org.mozilla.firefox', hotkey: null },
-        { id: 'com.apple.Safari', hotkey: null },
-        { id: 'com.brave.Browser.nightly', hotkey: null },
+        { id: 'org.mozilla.firefox', hotkey: null, hotCode: null },
+        { id: 'com.apple.Safari', hotkey: null, hotCode: null },
+        { id: 'com.brave.Browser.nightly', hotkey: null, hotCode: null },
       ],
       supportMessage: -1,
       height: 200,
@@ -91,7 +111,7 @@ test('use hotkey', () => {
   win.webContents.send(
     Channel.MAIN,
     syncStorage({
-      apps: [{ id: 'com.apple.Safari', hotkey: 's' }],
+      apps: [{ id: 'com.apple.Safari', hotkey: 's', hotCode: 'KeyS' }],
       supportMessage: -1,
       height: 200,
       firstRun: false,
@@ -123,7 +143,7 @@ test('use hotkey with alt', () => {
   win.webContents.send(
     Channel.MAIN,
     syncStorage({
-      apps: [{ id: 'com.apple.Safari', hotkey: 's' }],
+      apps: [{ id: 'com.apple.Safari', hotkey: 's', hotCode: 'KeyS' }],
       supportMessage: -1,
       height: 200,
       firstRun: false,

Diff for: src/renderers/picker/components/organisms/url-bar.test.tsx

@@ -3,10 +3,13 @@ import '../../../shared/preload'
 import type { MatcherFunction } from '@testing-library/react'
 import { act, render, screen } from '@testing-library/react'
 import electron from 'electron'
+import cloneDeep from 'lodash/cloneDeep'
 import React from 'react'
 
+import { keyLayout } from '../../../../../__fixtures__/key-layout'
 import { urlOpened } from '../../../../shared/state/actions'
 import { Channel } from '../../../../shared/state/channels'
+import { customWindow } from '../../../shared/custom.window'
 import Wrapper from '../_bootstrap'
 
 const multiElementText =
@@ -20,6 +23,23 @@ const multiElementText =
     return nodeHasText && childrenDontHaveText
   }
 
+const originalNavigator = cloneDeep(customWindow.navigator)
+
+beforeAll(() => {
+  customWindow.navigator = {
+    ...customWindow.navigator,
+    keyboard: {
+      getLayoutMap: jest
+        .fn()
+        .mockResolvedValue({ entries: jest.fn().mockReturnValue(keyLayout) }),
+    },
+  }
+})
+
+afterAll(() => {
+  customWindow.navigator = originalNavigator
+})
+
 test('url bar', () => {
   render(<Wrapper />)
   const win = new electron.BrowserWindow()

Diff for: src/renderers/picker/state/middleware.ts

@@ -6,28 +6,37 @@ import {
   installedAppsRetrieved,
   urlOpened,
 } from '../../../shared/state/actions'
+import type { Channel } from '../../../shared/state/channels'
 import type { Middleware } from '../../../shared/state/model'
+import { getKeyLayout } from '../../shared/state/thunk.get-key-layout-map'
 import { favAppRef } from '../refs'
 
 /**
  * Pass actions between main and renderers
  */
-export const pickerMiddleware = (): Middleware => () => (next) => (action) => {
-  /**
-   * Move to next middleware
-   */
-  // eslint-disable-next-line node/callback-return -- must flush to get nextState
-  const result = next(action)
+export const pickerMiddleware =
+  (channel: Channel): Middleware =>
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
+    // eslint-disable-next-line node/callback-return -- Move to next middleware
+    const result = next(action)
 
-  if (
-    urlOpened.match(action) ||
-    clickedRestorePicker.match(action) ||
-    installedAppsRetrieved.match(action) ||
-    clickedDonate.match(action) ||
-    clickedMaybeLater.match(action)
-  ) {
-    favAppRef.current?.focus()
-  }
+    const doesActionOpenPicker =
+      urlOpened.match(action) || clickedRestorePicker.match(action)
+
+    if (
+      doesActionOpenPicker ||
+      installedAppsRetrieved.match(action) ||
+      clickedDonate.match(action) ||
+      clickedMaybeLater.match(action)
+    ) {
+      favAppRef.current?.focus()
+    }
 
-  return result
-}
+    if (doesActionOpenPicker) {
+      dispatch(getKeyLayout(channel))
+    }
+
+    return result
+  }

Diff for: src/renderers/picker/state/store.ts

@@ -6,7 +6,10 @@ import { customWindow } from '../../shared/custom.window'
 import { busMiddleware } from '../../shared/state/middleware.bus'
 import { pickerMiddleware } from './middleware'
 
-const store = createStore([busMiddleware(Channel.PICKER), pickerMiddleware()])
+const store = createStore([
+  busMiddleware(Channel.PICKER),
+  pickerMiddleware(Channel.PICKER),
+])
 
 export default store
 

Diff for: src/renderers/prefs/components/organisms/pane-apps.tsx

@@ -11,10 +11,11 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'
 import { useDispatch } from 'react-redux'
 
 import { apps } from '../../../../config/apps'
-import { changedHotkey, reorderedApps } from '../../../../shared/state/actions'
+import { changedHotCode, reorderedApps } from '../../../../shared/state/actions'
 import { useInstalledApps } from '../../../../shared/state/hooks'
 import Input from '../../../shared/components/atoms/input'
 import { Spinner } from '../../../shared/components/atoms/spinner'
+import { useKeyCodeMap } from '../../../shared/state/hooks'
 import { Pane } from '../molecules/pane'
 
 interface DragDirectionArrowProps {
@@ -61,6 +62,8 @@ export function AppsPane(): JSX.Element {
     )
   }
 
+  const keyCodeMap = useKeyCodeMap()
+
   return (
     <Pane pane="apps">
       {installedApps.length === 0 && (
@@ -77,7 +80,7 @@ export function AppsPane(): JSX.Element {
               className="overflow-y-auto p-2"
               {...droppableProvided.droppableProps}
             >
-              {installedApps.map(({ id, name, hotkey }, index) => (
+              {installedApps.map(({ id, name, hotCode }, index) => (
                 <Draggable key={id} draggableId={id} index={index}>
                   {(draggableProvided, draggableSnapshot) => (
                     <div
@@ -127,20 +130,20 @@ export function AppsPane(): JSX.Element {
                           data-app-id={id}
                           maxLength={1}
                           minLength={0}
-                          onChange={(event) => {
+                          onFocus={(event) => {
+                            event.target.select()
+                          }}
+                          onKeyPress={(event) => {
                             dispatch(
-                              changedHotkey({
+                              changedHotCode({
                                 appId: id,
-                                value: event.currentTarget.value,
+                                value: event.code,
                               }),
                             )
                           }}
-                          onFocus={(event) => {
-                            event.target.select()
-                          }}
                           placeholder="Key"
                           type="text"
-                          value={hotkey || ''}
+                          value={keyCodeMap[hotCode || ''] || ''}
                         />
                       </div>
                     </div>

Diff for: src/renderers/prefs/state/middleware.ts

@@ -0,0 +1,23 @@
+/* eslint-disable unicorn/prefer-regexp-test */
+import { clickedOpenPrefs } from '../../../shared/state/actions'
+import type { Channel } from '../../../shared/state/channels'
+import type { Middleware } from '../../../shared/state/model'
+import { getKeyLayout } from '../../shared/state/thunk.get-key-layout-map'
+
+/**
+ * Pass actions between main and renderers
+ */
+export const prefsMiddleware =
+  (channel: Channel): Middleware =>
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
+    // eslint-disable-next-line node/callback-return -- Move to next middleware
+    const result = next(action)
+
+    if (clickedOpenPrefs.match(action)) {
+      dispatch(getKeyLayout(channel))
+    }
+
+    return result
+  }

Diff for: src/renderers/prefs/state/store.ts

@@ -4,8 +4,12 @@ import { Channel } from '../../../shared/state/channels'
 import createStore from '../../../shared/state/create-store'
 import { customWindow } from '../../shared/custom.window'
 import { busMiddleware } from '../../shared/state/middleware.bus'
+import { prefsMiddleware } from './middleware'
 
-const store = createStore([busMiddleware(Channel.PREFS)])
+const store = createStore([
+  busMiddleware(Channel.PREFS),
+  prefsMiddleware(Channel.PREFS),
+])
 
 export default store