db widget UX

packages/web/src/appobj/AppObjectListItem.svelte

@@ -50,7 +50,7 @@
   <svelte:component
     this={module.default}
     {data}
-    on:click={handleExpand}
+    on:dblclick={handleExpand}
     on:expand={handleExpandButton}
     expandIcon={getExpandIcon(!isExpandedBySearch && expandable, subItemsComponent, isExpanded, expandIconFunc)}
     {checkedObjectsStore}

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -12,6 +12,16 @@
     return filterName(filter, ...databases.map(x => x.name));
   };
   export function openConnection(connection) {
+    if (connection.singleDatabase) {
+      if (getOpenedSingleDatabaseConnections().includes(connection._id)) {
+        return;
+      }
+    } else {
+      if (getOpenedConnections().includes(connection._id)) {
+        return;
+      }
+    }
+
     const config = getCurrentConfig();
     if (connection.singleDatabase) {
       switchCurrentDatabase({ connection, name: connection.defaultDatabase });
@@ -88,6 +98,7 @@
     getCurrentDatabase,
     getCurrentSettings,
     getOpenedConnections,
+    getOpenedSingleDatabaseConnections,
     getOpenedTabs,
     openedConnections,
     openedSingleDatabaseConnections,
@@ -159,8 +170,17 @@
     }
   };
 
-  const handleClick = async (e) => {
+  const handleClick = async e => {
     focusedConnectionOrDatabase.set({ conid: data?._id });
+    openNewTab({
+      title: getConnectionLabel(data),
+      icon: 'img connection',
+      tabComponent: 'ConnectionTab',
+      tabPreviewMode: true,
+      props: {
+        conid: data._id,
+      },
+    });
   };
 
   const handleSqlRestore = () => {
@@ -333,9 +353,8 @@
   {extInfo}
   colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })}
   menu={getContextMenu}
-  on:dblclick={handleDoubleClick}
   on:click={handleClick}
-  on:click
+  on:dblclick
   on:expand
   on:dblclick={handleConnect}
   on:middleclick={() => {

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -515,9 +515,10 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify(
     extractDbNameFromComposite($currentDatabase?.name) == data.name}
   on:dblclick={() => {
     switchCurrentDatabase(data);
-    passProps?.onFocusSqlObjectList?.();
+    // passProps?.onFocusSqlObjectList?.();
   }}
   on:click={() => {
+    // switchCurrentDatabase(data);
     $focusedConnectionOrDatabase = { conid: data.connection?._id, database: data.name };
   }}
   on:dragstart

packages/web/src/elements/SearchInput.svelte

@@ -23,8 +23,12 @@
 
   const debouncedSet = _.debounce(x => (value = x), 500);
 
-  export function focus() {
+  export function focus(text) {
     domInput.focus();
+    if (text) {
+      domInput.value = text;
+      value = text;
+    }
   }
 </script>
 

packages/web/src/stores.ts

@@ -346,3 +346,9 @@ focusedConnectionOrDatabase.subscribe(value => {
   focusedConnectionOrDatabaseValue = value;
 });
 export const getFocusedConnectionOrDatabase = () => focusedConnectionOrDatabaseValue;
+
+let openedSingleDatabaseConnectionsValue = [];
+openedSingleDatabaseConnections.subscribe(value => {
+  openedSingleDatabaseConnectionsValue = value;
+});
+export const getOpenedSingleDatabaseConnections = () => openedSingleDatabaseConnectionsValue;

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -78,6 +78,20 @@
         handleObjectClick?.(listInstance[listInstance.length - 1], { tabPreviewMode: true });
       }
     }
+
+    if (
+      !ev.ctrlKey &&
+      !ev.altKey &&
+      !ev.metaKey &&
+      ((ev.keyCode >= keycodes.a && ev.keyCode <= keycodes.z) ||
+        (ev.keyCode >= keycodes.n0 && ev.keyCode <= keycodes.n9) ||
+        (ev.keyCode >= keycodes.numPad0 && ev.keyCode <= keycodes.numPad9) ||
+        ev.keyCode == keycodes.dash)
+    ) {
+      const text = ev.key;
+      onFocusFilterBox?.(text);
+      ev.preventDefault();
+    }
   }
 
   export function focusFirst() {
@@ -90,6 +104,16 @@
       onScrollTop?.();
     }
   }
+
+  function handleFocus() {
+    isListFocused = true;
+    const listInstance = _.isFunction(list) ? list() : list;
+    const selected = getSelectedObject();
+    const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected));
+    if (index < 0) {
+      focusFirst();
+    }
+  }
 </script>
 
 <div
@@ -97,9 +121,7 @@
   on:keydown={handleKeyDown}
   class="wrapper"
   class:app-object-list-focused={isListFocused}
-  on:focus={() => {
+  on:focus={handleFocus}
-    isListFocused = true;
-  }}
   on:blur={() => {
     isListFocused = false;
   }}

packages/web/src/widgets/ConnectionList.svelte

@@ -1,10 +1,4 @@
 <script lang="ts">
-connectionAppObject.
-
-connectionAppObject.
-
-connectionAppObject.
-
   import _ from 'lodash';
   import InlineButton from '../buttons/InlineButton.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
@@ -41,7 +35,7 @@ connectionAppObject.
   import { getLocalStorage } from '../utility/storageCache';
   import { switchCurrentDatabase } from '../utility/common';
   import openNewTab from '../utility/openNewTab';
-  import {openConnection} from '../appobj/ConnectionAppObject.svelte';
+  import { openConnection } from '../appobj/ConnectionAppObject.svelte';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -212,14 +206,15 @@ connectionAppObject.
     onScrollTop={() => {
       domContainer?.scrollTop();
     }}
-    onFocusFilterBox={() => {
+    onFocusFilterBox={text => {
-      domFilter?.focus();
+      domFilter?.focus(text);
     }}
     handleObjectClick={(data, options) => {
       if (data.database) {
         if (options.focusTab) {
           switchCurrentDatabase(data.dbobj);
-          passProps?.onFocusSqlObjectList?.();
+          // console.log('FOCUSING DB', passProps);
+          // passProps?.onFocusSqlObjectList?.();
         }
       } else {
         if (options.focusTab) {

packages/web/src/widgets/SqlObjectList.svelte

@@ -203,8 +203,8 @@
         onScrollTop={() => {
           domContainer?.scrollTop();
         }}
-        onFocusFilterBox={() => {
+        onFocusFilterBox={text => {
-          domFilter?.focus();
+          domFilter?.focus(text);
         }}
       >
         <AppObjectList