keyboard settings saved to server

packages/web/src/modals/CommandModal.svelte

@@ -10,7 +10,8 @@
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { customKeyboardShortcuts } from '../stores';
+  import { commandsSettings } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
   import KeyboardModal from './KeyboardModal.svelte';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal, showModal } from './modalTools';
@@ -41,13 +42,15 @@
         value="OK"
         on:click={e => {
           closeCurrentModal();
-          customKeyboardShortcuts.update(list => ({
-            ...list,
-            [command.id]: {
-              keyText: e.detail.keyText,
-              customKeyboardShortcut: true,
+          axiosInstance.post('config/update-settings', {
+            commands: {
+              ...$commandsSettings,
+              [command.id]: {
+                keyText: e.detail.keyText,
+                customKeyboardShortcut: true,
+              },
             },
-          }));
+          });
         }}
       />
       <FormStyledButton
@@ -55,7 +58,9 @@
         value="Reset"
         on:click={() => {
           closeCurrentModal();
-          customKeyboardShortcuts.update(list => _.omit(list, [command.id]));
+          axiosInstance.post('config/update-settings', {
+            commands: _.omit($commandsSettings, [command.id]),
+          });
         }}
       />
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />

packages/web/src/modals/DropDownMenu.svelte

@@ -30,9 +30,12 @@
       const command = commands[item.command];
       if (command) {
         return {
-          text: command.name,
+          text: command.menuName || command.toolbarName || command.name,
           keyText: command.keyText || command.keyTextFromGroup,
-          onClick: command.onClick,
+          onClick: () => {
+            if (command.getSubCommands) visibleCommandPalette.set(command);
+            else if (command.onClick) command.onClick();
+          },
           disabled: !command.enabled,
           hideDisabled: item.hideDisabled,
         };
@@ -48,7 +51,7 @@
   import clickOutside from '../utility/clickOutside';
   import { createEventDispatcher } from 'svelte';
   import { onMount } from 'svelte';
-  import { commands, commandsCustomized } from '../stores';
+  import { commandsCustomized, visibleCommandPalette } from '../stores';
   import { extractMenuItems } from '../utility/contextMenu';
 
   export let items;