new query button

packages/web/src/Screen.svelte

@@ -28,15 +28,6 @@
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
-  let domTabs;
-
-  function handleTabsWheel(e) {
-    if (!e.shiftKey) {
-      e.preventDefault();
-      domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
-    }
-  }
-
   $: themeStyle = `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`;
 </script>
 
@@ -67,7 +58,7 @@
       <WidgetContainer />
     </div>
   {/if}
-  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
+  <div class="tabs">
     <TabsPanel />
   </div>
   <div class="content">
@@ -134,7 +125,6 @@
     display: flex;
   }
   .tabs {
-    display: flex;
     position: fixed;
     top: var(--dim-header-top);
     left: var(--dim-content-left);
@@ -142,8 +132,6 @@
     right: 0;
     background-color: var(--theme-bg-1);
     border-top: 1px solid var(--theme-border);
-
-    overflow-x: auto;
   }
   .tabs::-webkit-scrollbar {
     height: 7px;

packages/web/src/widgets/TabsPanel.svelte

@@ -141,6 +141,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import FavoriteModal from '../modals/FavoriteModal.svelte';
   import { showModal } from '../modals/modalTools';
+  import newQuery from '../query/newQuery';
 
   import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs, activeTabId, getActiveTabId } from '../stores';
   import tabs from '../tabs';
@@ -307,8 +308,19 @@
       })
     );
   }
+
+  let domTabs;
+
+  function handleTabsWheel(e) {
+    if (!e.shiftKey) {
+      e.preventDefault();
+      domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
+    }
+  }
 </script>
 
+<div class="root">
+  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
     {#each groupedTabs as tabGroup}
       <div class="db-wrapper">
         <div
@@ -320,7 +332,9 @@
           use:contextMenu={getDatabaseContextMenu(tabGroup.tabs)}
           style={$connectionColorFactory(
             tabGroup.tabs[0].props,
-        (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey) ? 2 : 3
+            (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
+              ? 2
+              : 3
           )}
           draggable={true}
           on:dragstart={e => {
@@ -394,8 +408,42 @@
         </div>
       </div>
     {/each}
+  </div>
+  <div class="add-icon" on:click={() => newQuery({})} title="New query"><FontIcon icon="icon add" /></div>
+</div>
 
 <style>
+  .root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .add-icon {
+    position: absolute;
+    right: 5px;
+    font-size: 20pt;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    color: var(--theme-font-2);
+    cursor: pointer;
+  }
+  .add-icon:hover {
+    color: var(--theme-font-1);
+  }
+  .tabs {
+    height: var(--dim-tabs-panel-height);
+    display: flex;
+    overflow-x: auto;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 35px;
+    bottom: 0;
+  }
   .db-group {
     display: flex;
     flex: 1;
@@ -428,6 +476,7 @@
   }
   .file-tab-item {
     border-right: 1px solid var(--theme-border);
+    border-bottom: 2px solid var(--theme-border);
     padding-left: 15px;
     padding-right: 15px;
     flex-shrink: 1;