dropdown menu implementation

packages/web/src/Screen.svelte

@@ -7,7 +7,7 @@
   import CommandPalette from './commands/CommandPalette.svelte';
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
-  import { update } from 'lodash';
+  import CurrentDropDownMenu from '../modals/CurrentDropDownMenu.svelte';
 </script>
 
 <div class={`${$currentTheme} root`}>
@@ -43,6 +43,7 @@
       <Toolbar />
     </div>
   {/if}
+  <CurrentDropDownMenu />
 </div>
 
 <style>

packages/web/src/commands/CommandPalette.svelte

@@ -46,6 +46,7 @@
     if (command.getSubCommands) {
       parentCommand = command;
       domInput.focus();
+      filter = '';
       selectedIndex = 0;
     } else {
       $visibleCommandPalette = false;

packages/web/src/stores.ts

@@ -35,6 +35,7 @@ export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const visibleToolbar = writableWithStorage(1, 'visibleToolbar');
 export const leftPanelWidth = writable(300);
+export const currentDropDownMenu = writable(null);
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');

packages/web/src/utility/contextMenu.ts

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { currentDropDownMenu } from '../stores';
+
+export default function contextMenu(node, items) {
+  const handleContextMenu = e => {
+    e.preventDefault();
+    const left = e.pageX;
+    const top = e.pageY;
+    currentDropDownMenu.set({ left, top, items: _.isFunction(items) ? items() : items });
+  };
+
+  node.addEventListener('contextmenu', handleContextMenu);
+
+  return {
+    destroy() {
+      node.removeEventListener('contextmenu', handleContextMenu);
+    },
+  };
+}

packages/web/src/widgets/TabsPanel.svelte

@@ -25,6 +25,7 @@
 
   import { currentDatabase, openedTabs } from '../stores';
   import { setSelectedTab } from '../utility/common';
+  import contextMenu from '../utility/contextMenu';
 
   $: currentDbKey =
     $currentDatabase && $currentDatabase.name && $currentDatabase.connection
@@ -100,6 +101,13 @@
       closeTab(tabid);
     }
   };
+
+  const tabContextMenu = tabid => () => [
+    {
+      text: 'Close',
+      onClick: () => closeTab(tabid),
+    },
+  ];
 </script>
 
 {#each dbKeys as dbKey}
@@ -115,6 +123,7 @@
           class:selected={tab.selected}
           on:click={e => handleTabClick(e, tab.tabid)}
           on:mouseup={e => handleMouseUp(e, tab.tabid)}
+          use:contextMenu={tabContextMenu(tab.tabid)}
         >
           <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
           <span class="file-name">