interface: add shortcut customisation

pkg/interface/src/logic/lib/shortcutContext.tsx

@@ -3,26 +3,19 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import _ from 'lodash';
+import { getChord } from '~/logic/lib/util';
 
 type Handler = (e: KeyboardEvent) => void;
 const fallback: ShortcutContextProps = {
   add: () => {},
   remove: () => {},
 };
-const getChord = (e: KeyboardEvent) => {
-  let chord = [e.key];
-  if(e.metaKey) {
-    chord.unshift('meta');
-  }
-  if(e.ctrlKey) {
-    chord.unshift('ctrl');
-  }
-  return chord.join('+');
-}
+
 
 export const ShortcutContext = createContext(fallback);
 export interface ShortcutContextProps {
@@ -58,8 +51,10 @@ export function ShortcutContextProvider({ children }) {
     };
   }, [shortcuts]);
 
+  const value = useMemo(() => ({ add, remove }), [add, remove])
+
   return (
-    <ShortcutContext.Provider value={{ add, remove }}>
+    <ShortcutContext.Provider value={value}>
       {children}
     </ShortcutContext.Provider>
   );

pkg/interface/src/logic/state/settings.ts

@@ -1,6 +1,8 @@
 import f from 'lodash/fp';
 import { RemoteContentPolicy, LeapCategories, leapCategories } from "~/types/local-update";
+import { useShortcut as usePlainShortcut } from '~/logic/lib/shortcutContext';
 import { BaseState, createState } from '~/logic/state/base';
+import {useCallback} from 'react';
 
 export interface ShortcutMapping {
   cycleForward: string;
@@ -79,4 +81,9 @@ const useSettingsState = createState<SettingsState>('Settings', {
   }
 });
 
+export function useShortcut<T extends keyof ShortcutMapping>(name: T, cb: (e: KeyboardEvent) => void) {
+  const key = useSettingsState(useCallback(s => s.keyboard[name], [name]));
+  return usePlainShortcut(key, cb);
+}
+
 export default useSettingsState;

pkg/interface/src/views/landscape/components/Content.js

@@ -14,8 +14,7 @@ import GraphApp from '../../apps/graph/app';
 import { PermalinkRoutes } from '~/views/apps/permalinks/app';
 
 import { useLocalStorageState } from '~/logic/lib/useLocalStorageState';
-import { useShortcuts } from '~/logic/lib/useShortcuts';
-import { useShortcut } from '~/logic/lib/shortcutContext';
+import { useShortcut } from '~/logic/state/settings';
 
 
 export const Container = styled(Box)`
@@ -29,13 +28,13 @@ export const Container = styled(Box)`
 export const Content = (props) => {
   const history = useHistory();
 
-  useShortcut('ctrl+f', useCallback((e) => {
+  useShortcut('navForward', useCallback((e) => {
     e.preventDefault();
     e.stopImmediatePropagation();
     history.goForward();
-  }, [history.goBack]));
+  }, [history.goForward]));
 
-  useShortcut('ctrl+b', useCallback((e) => {
+  useShortcut('navBack', useCallback((e) => {
     e.preventDefault();
     e.stopImmediatePropagation();
     history.goBack();

pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx

@@ -8,7 +8,7 @@ import { Workspace } from '~/types/workspace';
 import useMetadataState from '~/logic/state/metadata';
 import useGraphState from '~/logic/state/graph';
 import {useHistory} from 'react-router';
-import {useShortcut} from '~/logic/lib/shortcutContext';
+import { useShortcut } from '~/logic/state/settings';
 
 function sidebarSort(
   associations: AppAssociations,
@@ -90,12 +90,12 @@ export function SidebarList(props: {
     history.push(path)
   }, [selected, history.push]);
 
-  useShortcut('ctrl+n', useCallback((e: KeyboardEvent) => {
+  useShortcut('cycleForward', useCallback((e: KeyboardEvent) => {
     cycleChannels(false);
     e.preventDefault();
   }, [cycleChannels]));
 
-  useShortcut('ctrl+p', useCallback((e: KeyboardEvent) => {
+  useShortcut('cycleBack', useCallback((e: KeyboardEvent) => {
     cycleChannels(true);
     e.preventDefault();
   }, [cycleChannels]))

pkg/interface/src/views/landscape/components/Skeleton.tsx

@@ -11,7 +11,7 @@ import { Workspace } from '~/types/workspace';
 import useGraphState from '~/logic/state/graph';
 import useHarkState from '~/logic/state/hark';
 import ErrorBoundary from '~/views/components/ErrorBoundary';
-import {useShortcut} from '~/logic/lib/shortcutContext';
+import { useShortcut } from '~/logic/state/settings';
 
 interface SkeletonProps {
   children: ReactNode;
@@ -26,7 +26,7 @@ interface SkeletonProps {
 
 export function Skeleton(props: SkeletonProps): ReactElement {
   const [sidebar, setSidebar] = useState(true)
-  useShortcut('ctrl+h', useCallback(() => {
+  useShortcut('hideSidebar', useCallback(() => {
     setSidebar(s => !s);
   }, []));
   const graphs = useGraphState(state => state.graphs);

pkg/interface/src/wdyr.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-if (process.env.NODE_ENV === 'development') {
+if (false && process.env.NODE_ENV === 'development') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
   whyDidYouRender(React, {
     trackAllPureComponents: true,