focused DB UX

packages/web/src/utility/changeCurrentDbByTab.ts

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import {
   currentDatabase,
+  focusedConnectionOrDatabase,
   getActiveTab,
   getCurrentDatabase,
   getLockedDatabaseMode,
@@ -78,6 +79,16 @@ export async function handleAfterTabClick() {
 }
 
 currentDatabase.subscribe(currentDb => {
+  if (currentDb) {
+    focusedConnectionOrDatabase.set({
+      conid: currentDb.connection?._id,
+      database: currentDb.name,
+      connection: currentDb.connection,
+    });
+  } else {
+    focusedConnectionOrDatabase.set(null);
+  }
+
   if (!getLockedDatabaseMode()) return;
   if (!currentDb && !getAppLoaded()) return;
   openedTabs.update(tabs => {

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import keycodes from '../utility/keycodes';
   import _ from 'lodash';
+  import { sleep } from '../utility/common';
 
   export let list;
   export let selectedObjectStore;
@@ -10,6 +11,7 @@
 
   export let onScrollTop = null;
   export let onFocusFilterBox = null;
+  export let getDefaultFocusedItem = null;
 
   let isListFocused = false;
   let domDiv = null;
@@ -106,12 +108,24 @@
     }
   }
 
-  function handleFocus() {
+  async function handleFocus() {
     isListFocused = true;
+    // await tick();
+    await sleep(100);
+    // console.log('ON FOCUS AFTER SLEEP');
     const listInstance = _.isFunction(list) ? list() : list;
     const selected = getSelectedObject();
     const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected));
     if (index < 0) {
+      const focused = getDefaultFocusedItem?.();
+      if (focused) {
+        const index2 = _.findIndex(listInstance, x => selectedObjectMatcher(x, focused));
+        if (index2 >= 0) {
+          selectedObjectStore.set(focused);
+          handleObjectClick?.(focused, { tabPreviewMode: true });
+          return;
+        }
+      }
       focusFirst();
     }
   }

packages/web/src/widgets/ConnectionList.svelte

@@ -18,6 +18,7 @@
     collapsedConnectionGroupNames,
     focusedConnectionOrDatabase,
     getFocusedConnectionOrDatabase,
+    currentDatabase,
   } from '../stores';
   import runCommand from '../commands/runCommand';
   import { filterName, getConnectionLabel } from 'dbgate-tools';
@@ -200,6 +201,14 @@
     selectedObjectStore={focusedConnectionOrDatabase}
     getSelectedObject={getFocusedConnectionOrDatabase}
     selectedObjectMatcher={(o1, o2) => o1?.conid == o2?.conid && o1?.database == o2?.database}
+    getDefaultFocusedItem={() =>
+      $currentDatabase
+        ? {
+            conid: $currentDatabase?.connection?._id,
+            database: $currentDatabase?.name,
+            connection: $currentDatabase?.connection,
+          }
+        : null}
     onScrollTop={() => {
       domContainer?.scrollTop();
     }}

packages/web/src/widgets/SqlObjectList.svelte

@@ -212,6 +212,17 @@
             name: $focusedConnectionOrDatabase?.database,
           })}
       />
+      <FormStyledButton
+        value={`Show ${database}`}
+        skipWidth
+        on:click={() => {
+          $focusedConnectionOrDatabase = {
+            conid,
+            database,
+            connection: $connection,
+          };
+        }}
+      />
     </div>
   {/if}