toolbar

packages/web/src/commands/CommandPalette.svelte

@@ -1,8 +1,12 @@
 <script context="module">
   registerCommand({
     id: 'commandPalette.show',
-    text: 'Command palette: Show',
+    category: 'Command palette',
+    name: 'Show',
     keyText: 'F1',
+    toolbar: true,
+    showDisabled: true,
+    icon: 'icon menu',
     onClick: () => visibleCommandPalette.set(true),
     enabledStore: derived(visibleCommandPalette, $visibleCommandPalette => !$visibleCommandPalette),
   });
@@ -61,7 +65,7 @@
   </div>
   {#each filteredItems as command, index}
     <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
-      <div>{command.text}</div>
+      <div>{command.category}: {command.name}</div>
       {#if command.keyText}
         <div class="shortcut">{command.keyText}</div>
       {/if}

packages/web/src/commands/registerCommand.ts

@@ -7,7 +7,8 @@ export interface SubCommand {
 
 export interface GlobalCommand {
   id: string;
-  text: string;
+  category: string;
+  name: string;
   keyText?: string;
   getSubCommands?: () => SubCommand[];
   onClick?: Function;
@@ -15,6 +16,7 @@ export interface GlobalCommand {
   icon?: string;
   toolbar?: boolean;
   enabled?: boolean;
+  showDisabled?: boolean;
 }
 
 export default function registerCommand(command: GlobalCommand) {

packages/web/src/commands/stdCommands.ts

@@ -1,6 +1,6 @@
-import { currentTheme, extensions } from '../stores';
+import { currentTheme, extensions, visibleToolbar } from '../stores';
 import registerCommand from './registerCommand';
-import { get } from 'svelte/store';
+import { derived, get } from 'svelte/store';
 import { ThemeDefinition } from 'dbgate-types';
 
 function themeCommand(theme: ThemeDefinition) {
@@ -19,6 +19,23 @@ function themeCommand(theme: ThemeDefinition) {
 
 registerCommand({
   id: 'theme.changeTheme',
-  text: 'Theme: Change',
+  category: 'Theme',
+  name: 'Change',
   getSubCommands: () => get(extensions).themes.map(themeCommand),
 });
+
+registerCommand({
+  id: 'toolbar.show',
+  category: 'Toolbar',
+  name: 'Show',
+  onClick: () => visibleToolbar.set(1),
+  enabledStore: derived(visibleToolbar, $visibleToolbar => !$visibleToolbar),
+});
+
+registerCommand({
+  id: 'toolbar.hide',
+  category: 'Toolbar',
+  name: 'Hide',
+  onClick: () => visibleToolbar.set(0),
+  enabledStore: derived(visibleToolbar, $visibleToolbar => $visibleToolbar),
+});