query toolbar

packages/web/src/buttons/ToolStripContainer.svelte

@@ -10,7 +10,8 @@
   .content {
     position: absolute;
     left: 0;
-    top: var(--dim-toolbar-height);
+    top: var(--dim-toolstrip-height);
+    border-top: 1px solid var(--theme-border);
     right: 0;
     bottom: 0;
     display: flex;
@@ -19,9 +20,9 @@
   .toolstrip {
     position: absolute;
     left: 0;
-    height: var(--dim-toolbar-height);
+    height: var(--dim-toolstrip-height);
     right: 0;
     display: flex;
-    background: var(--theme-bg-0);
+    background: var(--theme-bg-1);
   }
 </style>

packages/web/src/buttons/ToolStripExportButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+  import { extensions } from '../stores';
+  import { createQuickExportMenuItems } from '../utility/createQuickExportMenu';
+
+  import createRef from '../utility/createRef';
+
+  export function createQuickExportHandlerRef() {
+    const quickExportHandlerRef = createRef(null);
+    setContext('quickExportHandlerRef', quickExportHandlerRef);
+    return quickExportHandlerRef;
+  }
+
+  export function registerQuickExportHandler(handler) {
+    const quickExportHandlerRef: any = getContext('quickExportHandlerRef');
+    if (quickExportHandlerRef) {
+      quickExportHandlerRef.set(handler);
+    }
+  }
+</script>
+
+<script lang="ts">
+  import getElectron from '../utility/getElectron';
+  import ToolStripCommandButton from './ToolStripCommandButton.svelte';
+  import ToolStripDropDownButton from './ToolStripDropDownButton.svelte';
+
+  const electron = getElectron();
+
+  export let quickExportHandlerRef;
+
+  function getExportMenu() {
+    return [
+      quickExportHandlerRef?.value ? createQuickExportMenuItems($extensions, quickExportHandlerRef?.value) : null,
+      { divider: true },
+      { command: 'sqlDataGrid.export', text: 'Advanced settings' },
+    ];
+  }
+</script>
+
+{#if electron}
+  <ToolStripDropDownButton menu={getExportMenu} label="Export" icon="icon export" />
+{:else}
+  <ToolStripCommandButton command="sqlDataGrid.export" />
+{/if}