command palette control

packages/web/src/Screen.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import WidgetContainer from './widgets/WidgetContainer.svelte';
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
-  import { selectedWidget } from './stores';
+  import { currentTheme, selectedWidget, visibleCommandPalette } from './stores';
   import TabsPanel from './widgets/TabsPanel.svelte';
-import TabContent from './TabContent.svelte';
+  import TabContent from './TabContent.svelte';
+  import CommandPalette from './commands/CommandPalette.svelte';
 </script>
 
-<div class="theme-light">
+<div class={$currentTheme}>
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
@@ -22,6 +23,11 @@ import TabContent from './TabContent.svelte';
   <div class="content">
     <TabContent />
   </div>
+  {#if $visibleCommandPalette}
+    <div class="commads">
+      <CommandPalette />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -73,4 +79,9 @@ import TabContent from './TabContent.svelte';
     right: 0;
     background-color: var(--theme-bg-1);
   }
+  .commads {
+    position: fixed;
+    top: 0;
+    left: var(--dim-widget-icon-size);
+  }
 </style>

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'),
+      },
+    ],
+});

packages/web/src/main.ts

@@ -1,5 +1,6 @@
 import App from './App.svelte';
 import './utility/connectionsPinger';
+import './commands/stdCommands';
 
 const app = new App({
   target: document.body,

packages/web/src/stores.ts

@@ -25,5 +25,8 @@ export const openedConnections = writable([]);
 export const currentDatabase = writable(null);
 export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
 export const extensions = writable<ExtensionsDirectory>(null);
+export const visibleCommandPalette = writable(false);
+export const commands = writable({});
+export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 
 // export const leftPanelWidth = writable(300);

packages/web/src/utility/clickOutside.ts

@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+  const handleClick = event => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('clickOutside', node));
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    },
+  };
+}

packages/web/src/utility/keycodes.js

@@ -0,0 +1,99 @@
+export default {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pauseBreak: 19,
+  capsLock: 20,
+  escape: 27,
+  pageUp: 33,
+  pageDown: 34,
+  end: 35,
+  home: 36,
+  leftArrow: 37,
+  upArrow: 38,
+  rightArrow: 39,
+  downArrow: 40,
+  insert: 45,
+  delete: 46,
+  n0: 48,
+  n1: 49,
+  n2: 50,
+  n3: 51,
+  n4: 52,
+  n5: 53,
+  n6: 54,
+  n7: 55,
+  n8: 56,
+  n9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftWindowKey: 91,
+  rightWindowKey: 92,
+  selectKey: 93,
+  numPad0: 96,
+  numPad1: 97,
+  numPad2: 98,
+  numPad3: 99,
+  numPad4: 100,
+  numPad5: 101,
+  numPad6: 102,
+  numPad7: 103,
+  numPad8: 104,
+  numPad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalPoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f12: 123,
+  numLock: 144,
+  scrollLock: 145,
+  semiColon: 186,
+  equalSign: 187,
+  comma: 188,
+  dash: 189,
+  period: 190,
+  forwardSlash: 191,
+  graveAccent: 192,
+  openBracket: 219,
+  backSlash: 220,
+  closeBracket: 221,
+  singleQuote: 222,
+};

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
-  import { selectedWidget } from '../stores';
+  import { selectedWidget, visibleCommandPalette } from '../stores';
 
   const widgets = [
     {
@@ -48,6 +48,9 @@
   //const handleChangeWidget= e => (selectedWidget.set(item.name))
 </script>
 
+<div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
+  <FontIcon icon="icon menu" />
+</div>
 {#each widgets as item}
   <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
     <FontIcon icon={item.icon} />