Merge branch 'develop'

.github/workflows/build-app-beta.yaml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [macOS-10.15, windows-2022, ubuntu-18.04]
+        os: [macOS-10.15, windows-2022, ubuntu-22.04]
         # os: [macOS-10.15]
 
     steps:
@@ -46,7 +46,7 @@ jobs:
         run: |
           yarn fillPackagedPlugins
       - name: Install Snapcraft
-        if: matrix.os == 'ubuntu-18.04'
+        if: matrix.os == 'ubuntu-22.04'
         uses: samuelmeuli/action-snapcraft@v1
       - name: Publish
         run: |
@@ -66,7 +66,7 @@ jobs:
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
 
       - name: publishSnap
-        if: matrix.os == 'ubuntu-18.04'
+        if: matrix.os == 'ubuntu-22.04'
         run: |
           snapcraft upload --release=beta app/dist/*.snap
         env:

.github/workflows/build-app.yaml

@@ -16,8 +16,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # os: [ubuntu-18.04, windows-2016]
+        # os: [ubuntu-22.04, windows-2016]
-        os: [macOS-10.15, windows-2022, ubuntu-18.04]
+        os: [macOS-10.15, windows-2022, ubuntu-22.04]
 
     steps:
       - name: Context
@@ -52,7 +52,7 @@ jobs:
         run: |
           yarn fillPackagedPlugins
       - name: Install Snapcraft
-        if: matrix.os == 'ubuntu-18.04'
+        if: matrix.os == 'ubuntu-22.04'
         uses: samuelmeuli/action-snapcraft@v1
       - name: Publish
         run: |
@@ -76,7 +76,7 @@ jobs:
           yarn generatePadFile
 
       - name: publishSnap
-        if: matrix.os == 'ubuntu-18.04'
+        if: matrix.os == 'ubuntu-22.04'
         run: |
           snapcraft upload --release=stable app/dist/*.snap
         env:
@@ -134,7 +134,7 @@ jobs:
           mv app/dist/dbgate-pad.xml artifacts/ || true
 
       - name: Copy latest-linux.yml
-        if: matrix.os == 'ubuntu-18.04'
+        if: matrix.os == 'ubuntu-22.04'
         run: |
           mv app/dist/latest-linux.yml artifacts/latest-linux.yml || true
 

.github/workflows/build-docker.yaml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-18.04]
+        os: [ubuntu-22.04]
 
     steps:
       - name: Context

.github/workflows/build-npm.yaml

@@ -20,7 +20,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-18.04]
+        os: [ubuntu-22.04]
 
     steps:
       - name: Context

app/package.json

@@ -21,7 +21,7 @@
     "afterSign": "electron-builder-notarize",
     "mac": {
       "category": "database",
-      "icon": "icon512.png",
+      "icon": "icon512-mac.png",
       "hardenedRuntime": true,
       "entitlements": "entitlements.mac.plist",
       "entitlementsInherit": "entitlements.mac.plist",

misc/convert-icons.sh

@@ -104,3 +104,6 @@ magick icon.png -resize 16x16! ../app/icons/16x16.png
 magick icon.png -resize 192x192! ../packages/web/public/logo192.png
 magick icon.png -resize 512x512! ../packages/web/public/logo512.png
 magick icon.png -define icon:auto-resize="256,128,96,64,48,32,16" ../packages/web/public/favicon.ico
+
+convert icon.png -resize 800x800 -background transparent -gravity center -extent 1000x1000 iconmac.png
+magick composite  iconmac.png macbg.png -resize 600x600! ../app/icon512-mac.png

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "5.2.4",
+  "version": "5.2.5-beta.14",
   "name": "dbgate-all",
   "workspaces": [
     "packages/*",

packages/web/public/dimensions.css

@@ -22,7 +22,6 @@
   --dim-header-top: calc(
     var(--dim-titlebar-height) * var(--dim-visible-titlebar) + var(--dim-toolbar-height) * var(--dim-visible-toolbar)
   );
-  --dim-content-top: calc(var(--dim-header-top) + var(--dim-tabs-panel-height));
 
   --dim-large-form-margin: 20px;
 }

packages/web/src/Screen.svelte

@@ -13,8 +13,8 @@
     visibleTitleBar,
     visibleToolbar,
   } from './stores';
-  import TabsPanel from './widgets/TabsPanel.svelte';
+  import TabsPanel from './tabpanel/TabsPanel.svelte';
-  import TabRegister from './TabRegister.svelte';
+  import TabRegister from './tabpanel/TabRegister.svelte';
   import CommandPalette from './commands/CommandPalette.svelte';
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
@@ -27,6 +27,8 @@
   import TitleBar from './widgets/TitleBar.svelte';
   import FontIcon from './icons/FontIcon.svelte';
   import getElectron from './utility/getElectron';
+  import TabsContainer from './tabpanel/TabsContainer.svelte';
+  import MultiTabsContainer from './tabpanel/MultiTabsContainer.svelte';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
@@ -69,11 +71,8 @@
       <WidgetContainer />
     </div>
   {/if}
-  <div class="tabs">
+  <div class="tabs-container">
-    <TabsPanel />
+    <MultiTabsContainer />
-  </div>
-  <div class="content">
-    <TabRegister />
   </div>
   {#if $selectedWidget && $visibleWidgetSideBar}
     <div
@@ -135,23 +134,6 @@
     background-color: var(--theme-bg-1);
     display: flex;
   }
-  .tabs {
-    position: fixed;
-    top: var(--dim-header-top);
-    left: var(--dim-content-left);
-    height: var(--dim-tabs-panel-height);
-    right: 0;
-    background-color: var(--theme-bg-1);
-    border-top: 1px solid var(--theme-border);
-  }
-  .content {
-    position: fixed;
-    top: var(--dim-content-top);
-    left: var(--dim-content-left);
-    bottom: var(--dim-statusbar-height);
-    right: 0;
-    background-color: var(--theme-bg-1);
-  }
   .commads {
     position: fixed;
     top: var(--dim-header-top);
@@ -207,4 +189,13 @@
   .big-icon {
     font-size: 20pt;
   }
+
+  .tabs-container {
+    position: fixed;
+    top: var(--dim-header-top);
+    left: var(--dim-content-left);
+    bottom: var(--dim-statusbar-height);
+    right: 0;
+    background-color: var(--theme-bg-1);
+  }
 </style>

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -103,7 +103,7 @@
   import { getLocalStorage } from '../utility/storageCache';
   import { apiCall, removeVolatileMapping } from '../utility/api';
   import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
-  import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
+  import { closeMultipleTabs } from '../tabpanel/TabsPanel.svelte';
   import AboutModal from '../modals/AboutModal.svelte';
   import { tick } from 'svelte';
 

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -371,7 +371,7 @@
   import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
   import ExportDatabaseDumpModal from '../modals/ExportDatabaseDumpModal.svelte';
   import ConfirmModal from '../modals/ConfirmModal.svelte';
-  import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
+  import { closeMultipleTabs } from '../tabpanel/TabsPanel.svelte';
 
   export let data;
   export let passProps;

packages/web/src/buttons/ToolStripButton.svelte

@@ -31,6 +31,7 @@
     align-self: stretch;
     display: flex;
     user-select: none;
+    margin: 2px 0px;
   }
   .button.disabled {
     color: var(--theme-font-3);

packages/web/src/buttons/ToolStripContainer.svelte

@@ -1,29 +1,29 @@
-<div class="toolstrip">
+<div class="wrapper">
-  <slot name="toolstrip" />
-</div>
-
   <div class="content">
     <slot />
   </div>
 
+  <div class="toolstrip">
+    <slot name="toolstrip" />
+  </div>
+</div>
+
 <style>
-  .content {
+  .wrapper {
-    position: absolute;
+    flex: 1;
-    left: 0;
-    top: 0;
-    border-bottom: 1px solid var(--theme-border);
-    right: 0;
-    bottom: var(--dim-toolstrip-height);
     display: flex;
+    flex-direction: column;
+  }
+  .content {
+    border-bottom: 1px solid var(--theme-border);
+    display: flex;
+    flex: 1;
+    position: relative;
   }
 
   .toolstrip {
-    position: absolute;
-    left: 0;
-    height: var(--dim-toolstrip-height);
-    right: 0;
-    bottom: 0;
     display: flex;
+    flex-wrap: wrap;
     background: var(--theme-bg-1);
   }
 </style>

packages/web/src/buttons/ToolStripSplitButton.svelte

@@ -39,6 +39,7 @@
     align-self: stretch;
     display: flex;
     user-select: none;
+    margin: 2px 0px;
   }
   .button.disabled {
     color: var(--theme-font-3);

packages/web/src/elements/HorizontalSplitter.svelte

@@ -1,5 +1,8 @@
 <script context="module">
-  export function computeSplitterSize(initialValue, clientSize) {
+  export function computeSplitterSize(initialValue, clientSize, customRatio) {
+    if (customRatio != null) {
+      return clientSize * customRatio;
+    }
     if (_.isString(initialValue) && initialValue.startsWith('~') && initialValue.endsWith('px'))
       return clientSize - parseInt(initialValue.slice(1, -2));
     if (_.isString(initialValue) && initialValue.endsWith('px')) return parseInt(initialValue.slice(0, -2));
@@ -27,8 +30,9 @@
 
   export let size = 0;
   let clientWidth;
+  let customRatio = null;
 
-  $: size = computeSplitterSize(initialValue, clientWidth);
+  $: size = computeSplitterSize(initialValue, clientWidth, customRatio);
 </script>
 
 <div class="container" bind:clientWidth>
@@ -52,7 +56,10 @@
         class="horizontal-split-handle"
         style={collapsed1 || collapsed2 ? 'display:none' : ''}
         use:splitterDrag={'clientX'}
-        on:resizeSplitter={e => (size += e.detail)}
+        on:resizeSplitter={e => {
+          size += e.detail;
+          if (clientWidth > 0) customRatio = size / clientWidth;
+        }}
       />
     {/if}
     <div

packages/web/src/elements/VerticalSplitter.svelte

@@ -16,8 +16,9 @@
 
   let collapsed1 = false;
   let collapsed2 = false;
+  let customRatio = null;
 
-  $: size = computeSplitterSize(initialValue, clientHeight);
+  $: size = computeSplitterSize(initialValue, clientHeight, customRatio);
 </script>
 
 <div class="container" bind:clientHeight>
@@ -38,7 +39,10 @@
       class={'vertical-split-handle'}
       style={collapsed1 || collapsed2 ? 'display:none' : ''}
       use:splitterDrag={'clientY'}
-      on:resizeSplitter={e => (size += e.detail)}
+      on:resizeSplitter={e => {
+        size += e.detail;
+        if (clientHeight > 0) customRatio = size / clientHeight;
+      }}
     />
     <div
       class={collapsed1 ? 'child1' : 'child2'}

packages/web/src/icons/FontIcon.svelte

@@ -127,6 +127,7 @@
     'icon compare': 'mdi mdi-compare',
     'icon no-color': 'mdi mdi-format-color-marker-cancel',
     'icon palette': 'mdi mdi-palette',
+    'icon split': 'mdi mdi-view-split-vertical',
 
     'icon num-0': 'mdi mdi-numeric-0-circle',
     'icon num-1': 'mdi mdi-numeric-1-circle',

packages/web/src/query/newQuery.ts

@@ -1,6 +1,5 @@
 import _ from 'lodash';
-import { get } from 'svelte/store';
+import { getCurrentDatabase } from '../stores';
-import { currentDatabase } from '../stores';
 import getConnectionLabel from '../utility/getConnectionLabel';
 import openNewTab from '../utility/openNewTab';
 
@@ -9,11 +8,12 @@ export default function newQuery({
   icon = 'img sql-file',
   title = undefined,
   initialData = undefined,
+  multiTabIndex = undefined,
   ...props
 } = {}) {
-  const $currentDatabase = get(currentDatabase);
+  const currentDb = getCurrentDatabase();
-  const connection = _.get($currentDatabase, 'connection') || {};
+  const connection = currentDb?.connection || {};
-  const database = _.get($currentDatabase, 'name');
+  const database = currentDb?.name;
 
   const tooltip = `${getConnectionLabel(connection)}\n${database}`;
 
@@ -23,6 +23,7 @@ export default function newQuery({
       icon,
       tooltip,
       tabComponent,
+      multiTabIndex,
       props: {
         ...props,
         conid: connection._id,

packages/web/src/stores.ts

@@ -1,4 +1,5 @@
 import { writable, derived, readable } from 'svelte/store';
+import localforage from 'localforage';
 import type { ExtensionsDirectory } from 'dbgate-types';
 import invalidateCommands from './commands/invalidateCommands';
 import getElectron from './utility/getElectron';
@@ -17,6 +18,7 @@ export interface TabDefinition {
   tabid: string;
   tabComponent: string;
   tabOrder?: number;
+  multiTabIndex?: number;
 }
 
 export function writableWithStorage<T>(defaultValue: T, storageName) {
@@ -28,6 +30,27 @@ export function writableWithStorage<T>(defaultValue: T, storageName) {
   return res;
 }
 
+export function writableWithForage<T>(defaultValue: T, storageName) {
+  const res = writable<T>(defaultValue);
+  res.subscribe(value => {
+    localforage.setItem(storageName, value);
+  });
+  localforage.getItem(storageName).then(value => {
+    if (value == null) {
+      const migrated = localStorage.getItem(storageName);
+      if (migrated) {
+        localStorage.removeItem(storageName);
+        const parsed = safeJsonParse(migrated, defaultValue, true);
+        localforage.setItem(storageName, parsed);
+        res.set(parsed as T);
+      }
+    } else {
+      res.set(value as T);
+    }
+  });
+  return res;
+}
+
 export function writableSettingsValue<T>(defaultValue: T, storageName) {
   const res = derived(useSettings(), $settings => {
     const obj = $settings || {};
@@ -62,7 +85,7 @@ export const openedConnections = writable([]);
 export const openedSingleDatabaseConnections = writable([]);
 export const expandedConnections = writable([]);
 export const currentDatabase = writable(null);
-export const openedTabs = writableWithStorage<TabDefinition[]>([], 'openedTabs');
+export const openedTabs = writableWithForage<TabDefinition[]>([], 'openedTabs');
 export const copyRowsFormat = writableWithStorage('textWithoutHeaders', 'copyRowsFormat');
 export const extensions = writable<ExtensionsDirectory>(null);
 export const visibleCommandPalette = writable(null);
@@ -92,6 +115,11 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
   }))
 );
 
+export const draggingTab = writable(null);
+export const draggingTabTarget = writable(null);
+export const draggingDbGroup = writable(null);
+export const draggingDbGroupTarget = writable(null);
+
 // export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
 export const visibleToolbar = writable(false);
 export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');

packages/web/src/tabpanel/MultiTabsContainer.svelte

@@ -0,0 +1,19 @@
+<script>
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import { currentDatabase, lockedDatabaseMode, openedTabs } from '../stores';
+  import TabsContainer from './TabsContainer.svelte';
+  import { shouldShowTab } from './TabsPanel.svelte';
+
+  $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x, $lockedDatabaseMode, $currentDatabase));
+  $: isLeft = !!filteredTabsFromAllParts.find(x => !x.multiTabIndex);
+  $: isRight = !!filteredTabsFromAllParts.find(x => x.multiTabIndex == 1);
+</script>
+
+<HorizontalSplitter hideFirst={!isLeft && isRight} isSplitter={isRight} allowCollapseChild1 allowCollapseChild2>
+  <div class="container" slot="1">
+    <TabsContainer multiTabIndex={0} />
+  </div>
+  <div class="container" slot="2">
+    <TabsContainer multiTabIndex={1} />
+  </div>
+</HorizontalSplitter>

packages/web/src/tabpanel/TabRegister.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { openedTabs } from './stores';
+  import { openedTabs } from '../stores';
   import TabContent from './TabContent.svelte';
-  import tabs from './tabs';
+  import tabs from '../tabs';
+
+  export let multiTabIndex;
+  export let shownTab;
 
   let mountedTabs = {};
-  $: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
 
   // cleanup closed tabs
   $: {
@@ -13,21 +15,23 @@
       _.difference(
         _.keys(mountedTabs),
         _.map(
-          $openedTabs.filter(x => x.closedTime == null),
+          $openedTabs.filter(x => x.closedTime == null && (x.multiTabIndex || 0) == multiTabIndex),
           'tabid'
         )
       ).length > 0
     ) {
-      mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
+      mountedTabs = _.pickBy(mountedTabs, (v, k) =>
+        $openedTabs.find(x => x.tabid == k && x.closedTime == null && (x.multiTabIndex || 0) == multiTabIndex)
+      );
     }
   }
 
   // open missing tabs
   $: {
-    if (selectedTab) {
+    if (shownTab) {
-      const { tabid } = selectedTab;
+      const { tabid } = shownTab;
       if (tabid && !mountedTabs[tabid]) {
-        const newTab = tabs[selectedTab.tabComponent]?.default;
+        const newTab = tabs[shownTab.tabComponent]?.default;
         if (newTab) {
           mountedTabs = {
             ...mountedTabs,
@@ -46,6 +50,6 @@
     tabComponent={mountedTabs[tabid]}
     {...openedTabsByTabId[tabid]?.props}
     {tabid}
-    tabVisible={tabid == (selectedTab && selectedTab.tabid)}
+    tabVisible={tabid == shownTab?.tabid}
   />
 {/each}

packages/web/src/tabpanel/TabsContainer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import TabRegister from './TabRegister.svelte';
+  import TabsPanel from './TabsPanel.svelte';
+  import _ from 'lodash';
+  import { currentDatabase, lockedDatabaseMode, openedTabs, TabDefinition } from '../stores';
+  import { shouldShowTab } from './TabsPanel.svelte';
+
+  export let multiTabIndex;
+
+  function findShownTab(tabs: TabDefinition[], multiTabIndex, lockedDbMode, currentDb) {
+    const selectedTab = tabs.find(
+      x =>
+        x.selected &&
+        x.closedTime == null &&
+        (x.multiTabIndex || 0) == multiTabIndex &&
+        shouldShowTab(x, lockedDbMode, currentDb)
+    );
+    if (selectedTab) {
+      return selectedTab;
+    }
+
+    const selectedIndex = _.findLastIndex(
+      tabs,
+      x => (x.multiTabIndex || 0) == multiTabIndex && shouldShowTab(x, lockedDbMode, currentDb)
+    );
+
+    return tabs[selectedIndex];
+  }
+
+  $: shownTab = findShownTab($openedTabs, multiTabIndex, $lockedDatabaseMode, $currentDatabase);
+</script>
+
+<div class="tabs">
+  <TabsPanel {multiTabIndex} {shownTab} />
+</div>
+<div class="content">
+  <TabRegister {multiTabIndex} {shownTab} />
+</div>
+
+<style>
+  .tabs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--dim-tabs-panel-height);
+    right: 0;
+    background-color: var(--theme-bg-1);
+    border-top: 1px solid var(--theme-border);
+  }
+  .content {
+    position: absolute;
+    top: var(--dim-tabs-panel-height);
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: var(--theme-bg-1);
+  }
+</style>

packages/web/src/tabpanel/TabsPanel.svelte

@@ -43,6 +43,7 @@
       const newFiles = files.map(x => ({
         ...x,
         closedTime: shouldShowTab(x) && closeCondition(x, active) ? new Date().getTime() : x.closedTime,
+        selected: false,
       }));
 
       if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -72,6 +73,7 @@
         : files.map(x => ({
             ...x,
             closedTime: shouldShowTab(x) && closeCondition(x) ? new Date().getTime() : x.closedTime,
+            selected: false,
           }));
 
       if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -87,8 +89,26 @@
     });
   };
 
+  function splitTab(multiTabIndex) {
+    openedTabs.update(tabs =>
+      tabs.map(x => ({
+        ...x,
+        multiTabIndex: x.selected ? 1 - multiTabIndex : x.multiTabIndex,
+      }))
+    );
+  }
+
+  function splitTabGroup(tabGroupTabs, multiTabIndex) {
+    openedTabs.update(tabs =>
+      tabs.map(x => ({
+        ...x,
+        multiTabIndex: tabGroupTabs.find(y => x.tabid == y.tabid) ? 1 - multiTabIndex : x.multiTabIndex,
+      }))
+    );
+  }
+
   const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
-  const closeAll = async () => {
+  const closeAll = async multiTabIndex => {
     const closeCandidates = getOpenedTabs()
       .filter(x => x.unsaved)
       .filter(x => shouldShowTab(x));
@@ -99,8 +119,12 @@
     openedTabs.update(tabs =>
       tabs.map(tab => ({
         ...tab,
-        closedTime: shouldShowTab(tab) ? closedTime : tab.closedTime,
+        closedTime:
+          shouldShowTab(tab) && (multiTabIndex == null || multiTabIndex == (tab.multiTabIndex || 0))
+            ? closedTime
+            : tab.closedTime,
         selected: false,
+        visibleSecondary: false,
       }))
     );
   };
@@ -129,7 +153,8 @@
       _.get(x, 'props.conid') != _.get(active, 'props.conid') ||
       _.get(x, 'props.database') != _.get(active, 'props.database')
   );
-  const closeOthers = closeTabFunc((x, active) => x.tabid != active.tabid);
+  const closeOthersInMultiTab = multiTabIndex =>
+    closeTabFunc((x, active) => x.tabid != active.tabid && (x.multiTabIndex || 0) == multiTabIndex);
 
   function getTabDbName(tab, connectionList) {
     if (tab.tabComponent == 'ConnectionTab') return 'Connections';
@@ -252,6 +277,10 @@
     getCurrentDatabase,
     lockedDatabaseMode,
     getLockedDatabaseMode,
+    draggingDbGroup,
+    draggingDbGroupTarget,
+    draggingTab,
+    draggingTabTarget,
   } from '../stores';
   import tabs from '../tabs';
   import { setSelectedTab } from '../utility/common';
@@ -264,7 +293,11 @@
   import TabCloseButton from '../elements/TabCloseButton.svelte';
   import CloseTabModal from '../modals/CloseTabModal.svelte';
 
-  $: showTabFilterFunc = tab => shouldShowTab(tab, $lockedDatabaseMode, $currentDatabase);
+  export let multiTabIndex;
+  export let shownTab;
+
+  $: showTabFilterFunc = tab =>
+    shouldShowTab(tab, $lockedDatabaseMode, $currentDatabase) && (tab.multiTabIndex || 0) == multiTabIndex;
   $: connectionList = useConnectionList();
 
   $: currentDbKey =
@@ -287,10 +320,9 @@
 
   $: scrollInViewTab($activeTabId);
 
-  let draggingTab = null;
+  $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x, $lockedDatabaseMode, $currentDatabase));
-  let draggingTabTarget = null;
+  $: allowSplitTab =
-  let draggingDbGroup = null;
+    _.uniq(filteredTabsFromAllParts.map(x => x.multiTabIndex || 0)).length == 1 && filteredTabsFromAllParts.length >= 2;
-  let draggingDbGroupTarget = null;
 
   const connectionColorFactory = useConnectionColorFactory(3, null, true);
 
@@ -320,11 +352,11 @@
       },
       {
         text: 'Close all',
-        onClick: closeAll,
+        onClick: () => closeAll(multiTabIndex),
       },
       {
         text: 'Close others',
-        onClick: () => closeOthers(tabid),
+        onClick: () => closeOthersInMultiTab(multiTabIndex)(tabid),
       },
       {
         text: 'Duplicate',
@@ -390,7 +422,7 @@
     }
   }
 
-  function dragDropTabs(draggingTabs, targetTabs) {
+  function dragDropTabs(draggingTabs, targetTabs, multiTabIndex) {
     if (draggingTabs.find(x => targetTabs.find(y => x.tabid == y.tabid))) return;
 
     const items = sortTabs($openedTabs.filter(x => x.closedTime == null));
@@ -422,11 +454,17 @@
           return {
             ...x,
             tabOrder: index + 1,
+            multiTabIndex: draggingTabs.find(y => y.tabid == x.tabid) ? multiTabIndex : x.multiTabIndex,
           };
         }
         return x;
       })
     );
+
+    draggingDbGroup.set(null);
+    draggingDbGroupTarget.set(null);
+    draggingTab.set(null);
+    draggingTabTarget.set(null);
   }
 
   let domTabs;
@@ -440,14 +478,14 @@
 </script>
 
 <div class="root">
-  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
+  <div class="tabs" class:can-split={allowSplitTab} on:wheel={handleTabsWheel} bind:this={domTabs}>
     {#each groupedTabs as tabGroup}
       <div class="db-wrapper">
         {#if !$lockedDatabaseMode}
           <div
             class="db-name"
-            class:selected={draggingDbGroup
+            class:selected={$draggingDbGroup
-              ? tabGroup.grpid == draggingDbGroupTarget?.grpid
+              ? tabGroup.grpid == $draggingDbGroupTarget?.grpid
               : tabGroup.tabDbKey == currentDbKey}
             on:mouseup={e => {
               if (e.button == 1) {
@@ -459,23 +497,23 @@
             use:contextMenu={getDatabaseContextMenu(tabGroup.tabs)}
             style={$connectionColorFactory(
               tabGroup.tabs[0].props,
-              (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
+              ($draggingDbGroup ? tabGroup.grpid == $draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
                 ? 2
                 : 3
             )}
             draggable={true}
             on:dragstart={e => {
-              draggingDbGroup = tabGroup;
+              $draggingDbGroup = tabGroup;
             }}
             on:dragenter={e => {
-              draggingDbGroupTarget = tabGroup;
+              $draggingDbGroupTarget = tabGroup;
             }}
             on:drop={e => {
-              dragDropTabs(draggingDbGroup.tabs, tabGroup.tabs);
+              dragDropTabs($draggingDbGroup.tabs, tabGroup.tabs, multiTabIndex);
             }}
             on:dragend={e => {
-              draggingDbGroup = null;
+              $draggingDbGroup = null;
-              draggingDbGroupTarget = null;
+              $draggingDbGroupTarget = null;
             }}
           >
             <div class="db-name-inner">
@@ -485,45 +523,57 @@
                 <FontIcon icon="icon lock" />
               {/if}
             </div>
+            <div class="tab-group-buttons">
+              {#if allowSplitTab && groupedTabs.length > 1}
                 <div
-              class="close-button-right tabCloseButton"
+                  class="tab-group-button tabCloseButton"
+                  on:click={e => splitTabGroup(tabGroup.tabs, multiTabIndex)}
+                >
+                  <FontIcon icon="icon split" />
+                </div>
+              {/if}
+              <div
+                class="tab-group-button tabCloseButton"
                 on:click={e => closeMultipleTabs(tab => tabGroup.tabs.find(x => x.tabid == tab.tabid))}
               >
                 <FontIcon icon="icon close" />
               </div>
             </div>
+          </div>
         {/if}
         <div class="db-group">
           {#each tabGroup.tabs as tab}
             <div
               id={`file-tab-item-${tab.tabid}`}
               class="file-tab-item"
-              class:selected={draggingTab || draggingDbGroup ? tab.tabid == draggingTabTarget?.tabid : tab.selected}
+              class:selected={$draggingTab || $draggingDbGroup
+                ? tab.tabid == $draggingTabTarget?.tabid
+                : tab.tabid == shownTab?.tabid}
               on:click={e => handleTabClick(e, tab.tabid)}
               on:mouseup={e => handleMouseUp(e, tab.tabid)}
               use:contextMenu={getContextMenu(tab)}
               draggable={true}
               on:dragstart={async e => {
-                draggingTab = tab;
+                $draggingTab = tab;
                 await tick();
                 setSelectedTab(tab.tabid);
                 // console.log('START', tab.tabid);
                 // e.dataTransfer.setData('tab_drag_data', tab.tabid);
               }}
               on:dragenter={e => {
-                draggingTabTarget = tab;
+                $draggingTabTarget = tab;
               }}
               on:drop={e => {
-                if (draggingTab) {
+                if ($draggingTab) {
-                  dragDropTabs([draggingTab], [tab]);
+                  dragDropTabs([$draggingTab], [tab], multiTabIndex);
                 }
-                if (draggingDbGroup) {
+                if ($draggingDbGroup) {
-                  dragDropTabs(draggingDbGroup.tabs, [tab]);
+                  dragDropTabs($draggingDbGroup.tabs, [tab], multiTabIndex);
                 }
               }}
               on:dragend={e => {
-                draggingTab = null;
+                $draggingTab = null;
-                draggingTabTarget = null;
+                $draggingTabTarget = null;
               }}
             >
               <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
@@ -540,7 +590,16 @@
       </div>
     {/each}
   </div>
-  <div class="add-icon" on:click={() => newQuery({})} title="New query"><FontIcon icon="icon add" /></div>
+  <div class="icons-wrapper">
+    {#if allowSplitTab}
+      <div class="icon-button" on:click={() => splitTab(multiTabIndex)} title="Split window">
+        <FontIcon icon="icon split" />
+      </div>
+    {/if}
+    <div class="icon-button" on:click={() => newQuery({ multiTabIndex })} title="New query">
+      <FontIcon icon="icon add" />
+    </div>
+  </div>
 </div>
 
 <style>
@@ -551,7 +610,7 @@
     right: 0;
     bottom: 0;
   }
-  .add-icon {
+  .icons-wrapper {
     position: absolute;
     right: 5px;
     font-size: 20pt;
@@ -559,10 +618,13 @@
     bottom: 0;
     display: flex;
     align-items: center;
+    display: flex;
+  }
+  .icon-button {
     color: var(--theme-font-2);
     cursor: pointer;
   }
-  .add-icon:hover {
+  .icon-button:hover {
     color: var(--theme-font-1);
   }
   .tabs {
@@ -575,6 +637,9 @@
     right: 35px;
     bottom: 0;
   }
+  .tabs.can-split {
+    right: 60px;
+  }
   .tabs::-webkit-scrollbar {
     height: 7px;
   }
@@ -634,13 +699,14 @@
     white-space: nowrap;
     flex-grow: 1;
   }
-  .close-button-right {
+  .tab-group-buttons {
     margin-left: 5px;
     margin-right: 5px;
     color: var(--theme-font-3);
+    display: flex;
   }
 
-  .close-button-right:hover {
+  .tab-group-button:hover {
     color: var(--theme-font-1);
   }
 </style>

packages/web/src/tabs/ConnectionTab.svelte

@@ -31,7 +31,6 @@
   import getConnectionLabel from '../utility/getConnectionLabel';
   import { onMount } from 'svelte';
   import { disconnectServerConnection, openConnection } from '../appobj/ConnectionAppObject.svelte';
-  import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
   import { disconnectDatabaseConnection } from '../appobj/DatabaseAppObject.svelte';
 
   export let connection;

packages/web/src/tabs/TableDataTab.svelte

@@ -101,6 +101,7 @@
   import { getBoolSettingsValue, getIntSettingsValue } from '../settings/settingsTools';
   import useEditorData from '../query/useEditorData';
   import { markTabSaved, markTabUnsaved } from '../utility/common';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
 
   export let tabid;
   export let conid;
@@ -281,14 +282,10 @@
     <ToolStripCommandButton command="dataGrid.switchToForm" hideDisabled />
     <ToolStripCommandButton command="dataGrid.switchToTable" hideDisabled />
     <ToolStripExportButton {quickExportHandlerRef} />
-  </svelte:fragment>
-</ToolStripContainer>
 
-<StatusBarTabItem
+    <ToolStripButton
-  text="Open structure"
       icon="icon structure"
-  clickable
+      on:click={() => {
-  onClick={() => {
         openNewTab({
           title: pureName,
           icon: 'img table-structure',
@@ -301,12 +298,12 @@
             objectTypeField: 'tables',
           },
         });
-  }}
+      }}>Open structure</ToolStripButton
-/>
+    >
 
-<StatusBarTabItem
+    <ToolStripButton
-  text="View columns"
       icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
-  clickable
+      on:click={() => collapsedLeftColumnStore.update(x => !x)}>View columns</ToolStripButton
-  onClick={() => collapsedLeftColumnStore.update(x => !x)}
+    >
-/>
+  </svelte:fragment>
+</ToolStripContainer>

packages/web/src/tabs/TableStructureTab.svelte

@@ -60,6 +60,7 @@
   import { apiCall } from '../utility/api';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+  import ToolStripButton from '../buttons/ToolStripButton.svelte';
 
   export let tabid;
   export let conid;
@@ -190,15 +191,11 @@
     <ToolStripCommandButton command="tableStructure.reset" />
     <ToolStripCommandButton command="tableEditor.addColumn" />
     <ToolStripCommandButton command="tableEditor.addIndex" />
-  </svelte:fragment>
-</ToolStripContainer>
 
     {#if objectTypeField == 'tables'}
-  <StatusBarTabItem
+      <ToolStripButton
-    text="Open data"
         icon="icon table"
-    clickable
+        on:click={() => {
-    onClick={() => {
           openNewTab({
             title: pureName,
             icon: 'img table',
@@ -211,6 +208,8 @@
               objectTypeField: 'tables',
             },
           });
-    }}
+        }}>Open data</ToolStripButton
-  />
+      >
     {/if}
+  </svelte:fragment>
+</ToolStripContainer>

packages/web/src/utility/ErrorHandler.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import localforage from 'localforage';
   import _ from 'lodash';
+  import { TabDefinition } from '../stores';
   import getElectron from './getElectron';
-  import { getLocalStorage, setLocalStorage } from './storageCache';
 
   let counter = 0;
   $: counterCopy = counter;
@@ -26,15 +26,15 @@
             )
           ) {
             try {
-              let openedTabs = getLocalStorage('openedTabs') || [];
+              let openedTabs = (await localforage.getItem<TabDefinition[]>('openedTabs')) || [];
               if (!_.isArray(openedTabs)) openedTabs = [];
               openedTabs = openedTabs
                 .map(tab => (tab.closedTime ? tab : { ...tab, closedTime: new Date().getTime() }))
                 .map(tab => ({ ...tab, selected: false }));
-              setLocalStorage('openedTabs', openedTabs);
+              await localforage.setItem('openedTabs', openedTabs);
-              setLocalStorage('selectedWidget', 'history');
+              await localStorage.setItem('selectedWidget', 'history');
             } catch (err) {
-              localStorage.removeItem('openedTabs');
+              localforage.removeItem('openedTabs');
             }
             // try {
             //   await localforage.clear();

packages/web/src/utility/changeCurrentDbByTab.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { currentDatabase, getCurrentDatabase, getLockedDatabaseMode, openedTabs } from '../stores';
-import { shouldShowTab } from '../widgets/TabsPanel.svelte';
+import { shouldShowTab } from '../tabpanel/TabsPanel.svelte';
 import { callWhenAppLoaded, getAppLoaded } from './appLoadManager';
 import { getConnectionInfo } from './metadataLoaders';
 

packages/web/src/utility/localStorageGarbageCollector.js

@@ -2,13 +2,13 @@ import moment from 'moment';
 import localforage from 'localforage';
 
 export default async function localStorageGarbageCollector() {
-  const openedTabsJson = localStorage.getItem('openedTabs');
+  const openedTabsJson = await localforage.getItem('openedTabs');
   let openedTabs = openedTabsJson ? JSON.parse(openedTabsJson) : [];
 
   const closeLimit = moment().add(-7, 'day').valueOf();
 
   openedTabs = openedTabs.filter(x => !x.closedTime || x.closedTime > closeLimit);
-  localStorage.setItem('openedTabs', JSON.stringify(openedTabs));
+  await localforage.setItem('openedTabs', JSON.stringify(openedTabs));
 
   const toRemove = [];
   for (const key in localStorage) {

packages/web/src/utility/openNewTab.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import uuidv1 from 'uuid/v1';
-import { get } from 'svelte/store';
+import { getActiveTab, getOpenedTabs, openedTabs } from '../stores';
-import { getOpenedTabs, openedTabs } from '../stores';
 import tabs from '../tabs';
 import { setSelectedTabFunc } from './common';
 import localforage from 'localforage';
@@ -17,7 +16,8 @@ function findFreeNumber(numbers: number[]) {
 }
 
 export default async function openNewTab(newTab, initialData = undefined, options = undefined) {
-  const oldTabs = get(openedTabs);
+  const oldTabs = getOpenedTabs();
+  const activeTab = getActiveTab();
 
   let existing = null;
 
@@ -98,6 +98,7 @@ export default async function openNewTab(newTab, initialData = undefined, option
         ...newTab,
         tabid,
         selected: true,
+        multiTabIndex: newTab?.multiTabIndex ?? activeTab?.multiTabIndex ?? 0,
         tabOrder: _.findIndex(items, y => y.tabid == tabid),
       },
     ];

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -26,10 +26,11 @@
   $: computeDynamicProps(definitions);
 
   function computeDynamicProps(defs: any[]) {
+    const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
     for (let index = 0; index < defs.length; index++) {
       const definition = defs[index];
       const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip);
-      dynamicPropsCollection[index].set({ splitterVisible });
+      dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
     }
   }
 </script>

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -22,6 +22,7 @@
 
   const dynamicProps = writable({
     splitterVisible: false,
+    visibleItemsCount: 0,
   });
 
   const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
@@ -62,10 +63,12 @@
     storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
       ? getLocalStorage(storageName).visible
       : !collapsed;
+
+  $: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
 </script>
 
 {#if !skip && show}
-  <WidgetTitle on:click={() => (visible = !visible)}>{title}</WidgetTitle>
+  <WidgetTitle clickable={collapsible} on:click={collapsible ? () => (visible = !visible) : null}>{title}</WidgetTitle>
 
   {#if visible}
     <div class="wrapper" style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}>

packages/web/src/widgets/WidgetTitle.svelte

@@ -1,4 +1,8 @@
-<div on:click>
+<script lang="ts">
+  export let clickable = false;
+</script>
+
+<div on:click class:clickable>
   <slot />
 </div>
 
@@ -10,7 +14,7 @@
     background-color: var(--theme-bg-1);
     border: 2px solid var(--theme-border);
   }
-  div:hover {
+  div.clickable:hover {
     background-color: var(--theme-bg-2);
   }
 </style>

plugins/dbgate-plugin-postgres/src/backend/Analyser.js

@@ -199,7 +199,9 @@ class Analyser extends DatabaseAnalyser {
                 x.schema_name == table.schema_name &&
                 !uniqueNames.rows.find(y => y.constraint_name == x.index_name)
             )
-            .map(idx => ({
+            .map(idx => {
+              const indOptionSplit = idx.indoption.split(' ');
+              return {
                 constraintName: idx.index_name,
                 isUnique: idx.is_unique,
                 columns: _.compact(
@@ -207,11 +209,13 @@ class Analyser extends DatabaseAnalyser {
                     .split(' ')
                     .map(colid => indexcols.rows.find(col => col.oid == idx.oid && col.attnum == colid))
                     .filter(col => col != null)
-                  .map(col => ({
+                    .map((col, colIndex) => ({
                       columnName: col.column_name,
+                      isDescending: parseInt(indOptionSplit[colIndex]) > 0,
                     }))
                 ),
-            })),
+              };
+            }),
           uniques: indexes.rows
             .filter(
               x =>

plugins/dbgate-plugin-postgres/src/backend/sql/indexes.js

@@ -6,6 +6,7 @@ module.exports = `
         ix.indisprimary as "is_primary",
         ix.indisunique as "is_unique",
         ix.indkey as "indkey",
+        ix.indoption as "indoption",
         t.oid as "oid"
     from
         pg_class t,