execute query

packages/web/src/tabs/QueryTab.svelte

@@ -1,4 +1,24 @@
+<script lang="ts" context="module">
+  const currentQuery = writable(null);
+
+  registerCommand({
+    id: 'query.execute',
+    category: 'Query',
+    name: 'Execute',
+    icon: 'icon run',
+    toolbar: true,
+    keyText: 'F5 | Ctrl+Enter',
+    enabledStore: derived(currentQuery, query => query != null),
+    onClick: () => get(currentQuery).execute(),
+  });
+</script>
+
 <script lang="ts">
+  import { get_current_component } from 'svelte/internal';
+
+  import { writable, derived, get } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
@@ -11,6 +31,8 @@
   export let database;
   export let initialArgs;
 
+  const instance = get_current_component();
+
   $: connection = useConnectionInfo({ conid });
 
   const { editorState, setEditorData } = useEditorData({
@@ -28,6 +50,7 @@
       engine={$connection && $connection.engine}
       value={$editorState.value || ''}
       on:input={e => setEditorData(e.detail)}
+      on:focus={() => currentQuery.set(instance)}
     />
   </svelte:fragment>
 </VerticalSplitter>