db widget UX

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -16,7 +16,7 @@
 
   function handleKeyDown(ev) {
     const listInstance = _.isFunction(list) ? list() : list;
-    
+
     function selectByDiff(diff) {
       const selected = getSelectedObject();
       const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected));
@@ -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={() => {
-    isListFocused = true;
-  }}
+  on:focus={handleFocus}
   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={() => {
-      domFilter?.focus();
+    onFocusFilterBox={text => {
+      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={() => {
-          domFilter?.focus();
+        onFocusFilterBox={text => {
+          domFilter?.focus(text);
         }}
       >
         <AppObjectList