Add desktop only setup of custom keymaps

Fix cloud and desktop app global search shortcut
- Add desktop app changeable shortcut in menu
- Fix cloud having multiple global search shortucts bound

Author: Komediruzecki

src/cloud/components/Application.tsx

@@ -142,9 +142,7 @@ const Application = ({
 
   useEffect(() => {
     const handler = () => {
-      if (usingElectron) {
-        setShowFuzzyNavigation((prev) => !prev)
-      }
+      setShowFuzzyNavigation((prev) => !prev)
     }
     searchEventEmitter.listen(handler)
     return () => {

src/cloud/components/molecules/KeymapItemSection.tsx

@@ -14,6 +14,7 @@ import styled from '../../../design/lib/styled'
 import { inputStyle } from '../../../design/lib/styled/styleFunctions'
 import cc from 'classcat'
 import { useToast } from '../../../design/lib/stores/toast'
+import { useElectron } from '../../lib/stores/electron'
 
 const invalidShortcutInputs = [' ']
 const rejectedShortcutInputs = [' ', 'control', 'alt', 'shift', 'meta']
@@ -28,6 +29,7 @@ interface KeymapItemSectionProps {
   ) => Promise<void>
   removeKeymap: (key: string) => void
   description: string
+  desktopOnly: boolean
 }
 
 const KeymapItemSection = ({
@@ -36,6 +38,7 @@ const KeymapItemSection = ({
   updateKeymap,
   removeKeymap,
   description,
+  desktopOnly,
 }: KeymapItemSectionProps) => {
   const [inputError, setInputError] = useState<boolean>(false)
   const [shortcutInputValue, setShortcutInputValue] = useState<string>('')
@@ -53,6 +56,7 @@ const KeymapItemSection = ({
   const shortcutInputRef = useRef<HTMLInputElement>(null)
 
   const { pushMessage } = useToast()
+  const { usingElectron } = useElectron()
 
   const fetchInputShortcuts: KeyboardEventHandler<HTMLInputElement> = (
     event
@@ -137,6 +141,9 @@ const KeymapItemSection = ({
       ? getGenericShortcutString(currentKeymapItem)
       : ''
   }, [currentKeymapItem, currentShortcut])
+
+  const isEditableKeymap = !desktopOnly || (desktopOnly && usingElectron)
+
   return (
     <KeymapItemSectionContainer>
       <div>{description}</div>
@@ -155,18 +162,22 @@ const KeymapItemSection = ({
             onKeyDown={fetchInputShortcuts}
           />
         )}
-        <Button variant={'primary'} onClick={toggleChangingShortcut}>
-          {currentShortcut == null
-            ? 'Assign'
-            : changingShortcut
-            ? 'Apply'
-            : 'Change'}
-        </Button>
-        {changingShortcut && (
+        {!isEditableKeymap ? (
+          <div>Desktop App Only</div>
+        ) : (
+          <Button variant={'primary'} onClick={toggleChangingShortcut}>
+            {currentShortcut == null
+              ? 'Assign'
+              : changingShortcut
+              ? 'Apply'
+              : 'Change'}
+          </Button>
+        )}
+        {isEditableKeymap && changingShortcut && (
           <Button onClick={handleCancelKeymapChange}>Cancel</Button>
         )}
 
-        {currentShortcut != null && !changingShortcut && (
+        {isEditableKeymap && currentShortcut != null && !changingShortcut && (
           <Button onClick={handleRemoveKeymap}>Un-assign</Button>
         )}
       </KeymapItemInputSection>

src/cloud/components/settings/KeymapTab.tsx

@@ -57,6 +57,11 @@ const KeymapTab = () => {
                               description={keymapEntry[1].description}
                               updateKeymap={updateKeymap}
                               removeKeymap={removeKeymap}
+                              desktopOnly={
+                                keymapEntry[1].desktopOnly == null
+                                  ? false
+                                  : keymapEntry[1].desktopOnly
+                              }
                             />
                           )
                         })}

src/cloud/lib/stores/electron.ts

@@ -272,10 +272,6 @@ const useElectronStore = (): ElectronStore => {
         event.preventDefault()
         toggleSettingsEventEmitter.dispatch()
         return
-      case 'p':
-        event.preventDefault()
-        searchEventEmitter.dispatch()
-        return
       case '0':
         if (event.shiftKey) {
           event.preventDefault()

src/electron/index.ts

@@ -20,12 +20,12 @@ let ready = false
 const singleInstance = app.requestSingleInstanceLock()
 
 export const keymap = new Map<string, string>([
-  ['toggleGlobalSearch', 'CmdOrCtrl + P'],
+  ['toggleGlobalSearch', 'CmdOrCtrl + p'],
   ['toggleSplitEditMode', 'CmdOrCtrl + \\'],
-  ['togglePreviewMode', 'CmdOrCtrl + E'],
-  ['editorSaveAs', 'CmdOrCtrl + S'],
-  ['createNewDoc', 'CmdOrCtrl + N'],
-  ['createNewFolder', 'CmdOrCtrl + Shift + N'],
+  ['togglePreviewMode', 'CmdOrCtrl + e'],
+  ['editorSaveAs', 'CmdOrCtrl + s'],
+  ['createNewDoc', 'CmdOrCtrl + n'],
+  // ['createNewFolder', 'CmdOrCtrl + Shift + N'],
   ['resetZoom', 'CmdOrCtrl + 0'],
   ['zoomOut', 'CmdOrCtrl + -'],
   ['zoomIn', 'CmdOrCtrl + Plus'],

src/electron/menu.ts

@@ -22,7 +22,7 @@ export function getTemplateFromKeymap(
   }
 
   menu.push(getFileMenu(keymap))
-  menu.push(getEditMenu())
+  menu.push(getEditMenu(keymap))
   menu.push(getViewMenu(keymap))
   menu.push(getWindowMenu())
   menu.push(getCommunityMenu())
@@ -154,7 +154,7 @@ function getFileMenu(keymap: Map<string, string>): MenuItemConstructorOptions {
   }
 }
 
-function getEditMenu(): MenuItemConstructorOptions {
+function getEditMenu(keymap: Map<string, string>): MenuItemConstructorOptions {
   const submenuItems: MenuItemConstructorOptions[] = [
     { role: 'undo' },
     { role: 'redo' },
@@ -167,7 +167,7 @@ function getEditMenu(): MenuItemConstructorOptions {
       type: 'normal',
       label: 'Search',
       click: createEmitIpcMenuItemHandler('search'),
-      accelerator: mac ? 'Cmd + P' : 'Ctrl + P',
+      accelerator: keymap.get('toggleGlobalSearch'),
     },
     { type: 'separator' },
     { role: 'delete' },

src/lib/keymap.ts

@@ -18,14 +18,15 @@ export interface KeymapItem {
   shortcutSecondStroke?: KeymapItemEditableProps
   description: string
   isMenuType?: boolean
+  desktopOnly?: boolean
 }
 
 export const defaultKeymap = new Map<string, KeymapItem>([
   [
     'createNewDoc',
     {
       shortcutMainStroke: {
-        key: 'N',
+        key: 'n',
         keycode: 78,
         modifiers:
           osName === 'macos'
@@ -36,26 +37,29 @@ export const defaultKeymap = new Map<string, KeymapItem>([
       },
       description: 'Create new document',
       isMenuType: true,
+      desktopOnly: true,
     },
   ],
-  [
-    'createNewFolder',
-    {
-      shortcutMainStroke: {
-        key: 'N',
-        keycode: 78,
-        modifiers:
-          osName === 'macos'
-            ? { meta: true, shift: true }
-            : {
-                ctrl: true,
-                shift: true,
-              },
-      },
-      description: 'Create new folder',
-      isMenuType: true,
-    },
-  ],
+  // todo: [komediruzecki-2021-12-5] Enable when available
+  // [
+  //   'createNewFolder',
+  //   {
+  //     shortcutMainStroke: {
+  //       key: 'N',
+  //       keycode: 78,
+  //       modifiers:
+  //         osName === 'macos'
+  //           ? { meta: true, shift: true }
+  //           : {
+  //               ctrl: true,
+  //               shift: true,
+  //             },
+  //     },
+  //     description: 'Create new folder',
+  //     isMenuType: true,
+  //     desktopOnly: true,
+  //   },
+  // ],
   [
     'toggleSideNav',
     {
@@ -77,7 +81,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
     'toggleGlobalSearch',
     {
       shortcutMainStroke: {
-        key: 'P',
+        key: 'p',
         keycode: 80,
         modifiers:
           osName === 'macos'
@@ -105,6 +109,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
               },
       },
       description: 'Toggle in-page search modal dialog',
+      desktopOnly: true,
     },
   ],
   // todo: [komediruzecki-2021-11-7] enable once implemented
@@ -163,7 +168,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
     'togglePreviewMode',
     {
       shortcutMainStroke: {
-        key: 'E',
+        key: 'e',
         keycode: 69,
         modifiers:
           osName === 'macos'
@@ -208,6 +213,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
       },
       description: 'Zoom in window',
       isMenuType: true,
+      desktopOnly: true,
     },
   ],
   [
@@ -225,6 +231,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
       },
       description: 'Zoom out window',
       isMenuType: true,
+      desktopOnly: true,
     },
   ],
   [
@@ -242,6 +249,7 @@ export const defaultKeymap = new Map<string, KeymapItem>([
       },
       description: 'Reset window zoom',
       isMenuType: true,
+      desktopOnly: true,
     },
   ],
   // todo: [komediruzecki-2021-11-7] Enable once implemented