initial attempt at shortcut system

app/package.json

@@ -32,5 +32,9 @@
   "engines": {
     "node": ">=14",
     "yarn": ">=1.15"
+  },
+  "dependencies": {
+    "hotkeys-js": "^3.8.7",
+    "react-hotkeys-hook": "^3.4.0"
   }
 }

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -1,11 +1,12 @@
 import { Menu } from '@headlessui/react'
-
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import Svg from 'src/components/Svg/Svg'
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import CadPackage from 'src/components/CadPackage/CadPackage'
+import { EditorMenuConfig, EditorMenuItemConfig, editorMenuConfig } from './menuConfig'
 
 const EditorMenu = () => {
   const handleRender = useRender()
@@ -23,6 +24,12 @@ const EditorMenu = () => {
     fileName: PullTitleFromFirstLine(state.code || ''),
     thunkDispatch,
   })
+
+  editorMenuConfig.forEach(menu => 
+    menu.items.forEach(({shortcut, callback}) => 
+      useHotkeys(shortcut, callback), [state])
+  )
+  
   return (
     <div className="flex justify-between bg-ch-gray-760 text-gray-100">
       <div className="flex items-center h-9 w-full cursor-grab">
@@ -30,16 +37,11 @@ const EditorMenu = () => {
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
         <div className="grid grid-flow-col-dense gap-6 px-5">
-          <FileDropdown
+          { editorMenuConfig.map(menu => (
-            handleRender={onRender}
+            <Dropdown label={menu.label} disabled={menu.disabled}>
-            handleStlDownload={handleStlDownload}
+              { menu.items.map(itemConfig => <DropdownItem config={itemConfig} key={ menu.label +"-"+ itemConfig.label} />) }
-          />
+            </Dropdown>
-          <button className="cursor-not-allowed" disabled>
+          )) }
-            Edit
-          </button>
-          <ViewDropdown
-            handleLayoutReset={() => thunkDispatch({ type: 'resetLayout' })}
-          />
         </div>
         <button
           className="text-ch-gray-300  h-full cursor-not-allowed"
@@ -113,20 +115,40 @@ function ViewDropdown({ handleLayoutReset }) {
   )
 }
 
+function DropdownItem(config) {
+  return (
+    <Menu.Item>
+      {({ active }) => (
+      <button
+        className={`${active && 'bg-gray-600'} px-2 py-1 text-left`}
+        onClick={config.callback}
+      >
+        {config.label}
+        {config.shortcutLabel && <span className="text-gray-400 pl-4">{ config.shortcutLabel }</span> }
+      </button>
+    )}
+    </Menu.Item>
+  )
+}
+
 function Dropdown({
-  name,
+  label,
+  disabled,
   children,
 }: {
-  name: string
+  label: string,
-  children: React.ReactNode
+  disabled: boolean,
+  children: React.ReactNode,
 }) {
   return (
     <div className="relative">
       <Menu>
-        <Menu.Button className="text-gray-100">{name}</Menu.Button>
+        <Menu.Button className={"text-gray-100" + (disabled ? "cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
+        { children &&
         <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
           {children}
         </Menu.Items>
+        }
       </Menu>
     </div>
   )

app/web/src/components/EditorMenu/menuConfig.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import Svg from 'src/components/Svg/Svg'
+
+
+export const fileMenuConfig = [
+    {
+        label: 'Cook Donut',
+        shortcut: 'ctrl+d, command+d',
+        shortcutLabel: <><CmdOrCtrl/> D</>,
+        callback: () => alert('Donut is cooked!'),
+    }
+]
+
+export const viewMenuConfig = [
+    {
+        label: 'Reset layout',
+        shortcut: 'ctrl+alt+r, command+alt+r',
+        shortcutLabel: <><CmdOrCtrl/> Alt R</>,
+        callback: () => alert('Resetting the layout!'),
+    }
+]
+
+export const editorMenuConfig = [
+    {
+        name: 'file',
+        label: 'File',
+        disabled: false,
+        items: fileMenuConfig,
+    },
+    {
+        name: 'edit',
+        label: 'Edit',
+        disabled: true,
+        items: [],
+    },
+    {
+        name: 'view',
+        label: 'View',
+        disabled: false,
+        items: viewMenuConfig,
+    },
+
+]
+
+export interface EditorMenuItemConfig {
+    label: string,
+    shortcut: string,
+    shortcutLabel: React.ReactNode | string,
+    callback: any, // I don't understand how to make this a more specific type
+}
+
+export interface EditorMenuConfig {
+    name: string,
+    label: string,
+    disabled: boolean,
+    items: Array<EditorMenuItemConfig>,
+}
+
+function CmdOrCtrl() {
+    return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? (
+        <Svg
+        name="mac-cmd-key"
+        className="h-3 w-3 inline-block text-left"
+        />
+      ) : (
+        <span>'Ctrl'</span>
+      )
+}