toolbar ordered

packages/web/src/commands/CommandPalette.svelte

@@ -3,6 +3,8 @@
     id: 'commandPalette.show',
     category: 'Command palette',
     name: 'Show',
+    toolbarName: 'Menu',
+    toolbarOrder: 0,
     keyText: 'F1',
     toolbar: true,
     showDisabled: true,

packages/web/src/commands/registerCommand.ts

@@ -17,6 +17,8 @@ export interface GlobalCommand {
   toolbar?: boolean;
   enabled?: boolean;
   showDisabled?: boolean;
+  toolbarName?: string;
+  toolbarOrder?: number;
 }
 
 export default function registerCommand(command: GlobalCommand) {

packages/web/src/widgets/Toolbar.svelte

@@ -1,14 +1,19 @@
 <script>
-  import { filter } from 'lodash';
+  import _ from 'lodash';
   import App from '../App.svelte';
   import { commands } from '../stores';
   import ToolbarButton from './ToolbarButton.svelte';
+
+  $: list = _.sortBy(
+    Object.values($commands).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick),
+    x => (x.toolbarOrder == null ? 100 : x.toolbarOrder)
+  );
 </script>
 
 <div class="container">
-  {#each Object.values($commands).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick) as command}
+  {#each list as command}
     <ToolbarButton icon={command.icon} on:click={command.onClick} disabled={!command.enabled}
-      >{command.name}</ToolbarButton
+      >{command.toolbarName || command.name}</ToolbarButton
     >
   {/each}
 </div>