connection tree UX

packages/web/src/widgets/DatabaseWidget.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
-  import { findEngineDriver } from 'dbgate-tools';
+  import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
-  import { currentDatabase, extensions, pinnedDatabases, pinnedTables, focusedConnectionOrDatabase } from '../stores';
+  import {
+    currentDatabase,
+    extensions,
+    pinnedDatabases,
+    pinnedTables,
+    focusedConnectionOrDatabase,
+    openedConnections,
+  } from '../stores';
   import { useConfig, useConnectionInfo } from '../utility/metadataLoaders';
 
   import ConnectionList from './ConnectionList.svelte';
@@ -16,6 +23,7 @@
   import _ from 'lodash';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import { switchCurrentDatabase } from '../utility/common';
+  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
 
   export let hidden = false;
   let domSqlObjectList = null;
@@ -92,6 +100,12 @@
               name: $focusedConnectionOrDatabase?.database,
             })}
         />
+      {:else if $focusedConnectionOrDatabase?.connection && !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
+        <FormStyledButton
+          value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
+          skipWidth
+          on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+        />
       {/if}
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>

packages/web/src/widgets/SqlObjectList.svelte

@@ -41,6 +41,7 @@
     extensions,
     focusedConnectionOrDatabase,
     getSelectedDatabaseObjectAppObject,
+    openedConnections,
     selectedDatabaseObjectAppObject,
   } from '../stores';
   import newQuery from '../query/newQuery';
@@ -230,11 +231,13 @@
         <div class="m-1 ml-3 mb-3">
           <b>{getConnectionLabel($connection)}</b>
         </div>
-        <FormStyledButton
+        {#if !$openedConnections.includes($focusedConnectionOrDatabase?.conid)}
-          value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
+          <FormStyledButton
-          skipWidth
+            value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
-          on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+            skipWidth
-        />
+            on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
+          />
+        {/if}
         <FormStyledButton
           value={`Show ${getConnectionLabel($connection)}`}
           skipWidth