command palette control

packages/web/src/commands/CommandPalette.svelte

@@ -0,0 +1,84 @@
+<script context="module">
+  registerCommand({
+    id: 'commandPalette.show',
+    text: 'Command palette: Show',
+    onClick: () => visibleCommandPalette.set(true),
+  });
+</script>
+
+<script>
+  import { filterName } from 'dbgate-datalib';
+
+  import _ from 'lodash';
+  import { onMount } from 'svelte';
+  import { commands, visibleCommandPalette } from '../stores';
+  import { clickOutside } from '../utility/clickOutside';
+  import keycodes from '../utility/keycodes';
+  import registerCommand from './registerCommand';
+
+  let domInput;
+  let parentCommand;
+  let filter = '';
+  $: selectedIndex = true ? 0 : filter;
+
+  onMount(() => domInput.focus());
+
+  $: sortedComands = _.sortBy(Object.values($commands), 'text');
+
+  $: filteredItems = (parentCommand ? parentCommand.getSubCommands() : sortedComands).filter(x =>
+    filterName(filter, x.text)
+  );
+
+  function handleCommand(command) {
+    if (command.getSubCommands) {
+      parentCommand = command;
+      domInput.focus();
+      selectedIndex = 0;
+    } else {
+      $visibleCommandPalette = false;
+      command.onClick();
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.keyCode == keycodes.upArrow && selectedIndex > 0) selectedIndex--;
+    if (e.keyCode == keycodes.downArrow && selectedIndex < filteredItems.length - 1) selectedIndex++;
+    if (e.keyCode == keycodes.enter) handleCommand(filteredItems[selectedIndex]);
+    if (e.keyCode == keycodes.escape) $visibleCommandPalette = false;
+  }
+</script>
+
+<div class="main" use:clickOutside on:clickOutside={() => ($visibleCommandPalette = false)}>
+  <div class="search">
+    <input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} />
+  </div>
+  {#each filteredItems as command, index}
+    <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
+      {command.text}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .main {
+    width: 500px;
+    max-height: 500px;
+    background: var(--theme-bg-2);
+    padding: 4px;
+  }
+  .search {
+    display: flex;
+  }
+  input {
+    width: 100%;
+  }
+  .command {
+    padding: 3px;
+  }
+  .command:hover {
+    background: var(--theme-bg-3);
+  }
+  .command.selected {
+    background: var(--theme-bg-selected);
+  }
+</style>

packages/web/src/commands/registerCommand.ts

@@ -0,0 +1,39 @@
+import { commands } from '../stores';
+
+export interface SubCommand {
+  text: string;
+  onClick: Function;
+}
+
+export interface GlobalCommand {
+  id: string;
+  text: string;
+  getSubCommands?: () => SubCommand[];
+  onClick?: Function;
+  enabledStore?: any;
+  icon?: string;
+  toolbar?: boolean;
+  enabled?: boolean;
+}
+
+export default function registerCommand(command: GlobalCommand) {
+  const { enabledStore } = command;
+  commands.update(x => ({
+    ...x,
+    [command.id]: {
+      ...command,
+      enabled: !enabledStore,
+    },
+  }));
+  if (enabledStore) {
+    enabledStore.subscribe(value => {
+      commands.update(x => ({
+        ...x,
+        [command.id]: {
+          ...x[command.id],
+          enabled: value,
+        },
+      }));
+    });
+  }
+}

packages/web/src/commands/runCommand.ts

@@ -0,0 +1,9 @@
+import { get } from 'svelte/store';
+import { commands } from '../stores';
+import { GlobalCommand } from './registerCommand';
+
+export default function runCommand(commandId: string) {
+  const commandsValue = get(commands);
+  const command: GlobalCommand = commandsValue[commandId];
+  if (command.enabled) command.onClick();
+}

packages/web/src/commands/stdCommands.ts

@@ -0,0 +1,17 @@
+import { currentTheme } from '../stores';
+import registerCommand from './registerCommand';
+
+registerCommand({
+  id: 'theme.changeTheme',
+  text: 'Theme: Change',
+  getSubCommands: () => [
+    {
+      text: 'Light',
+      onClick: () => currentTheme.set('theme-light'),
+    },
+    {
+        text: 'Dark',
+        onClick: () => currentTheme.set('theme-dark'),
+      },
+    ],
+});