table keyboard navigation WIP

packages/web/src/appobj/AppObjectCore.svelte

@@ -66,6 +66,11 @@
   }
 
   // $: console.log(title, indentLevel);
+  let domDiv;
+
+  $: if (isBold && domDiv) {
+    domDiv.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }
 </script>
 
 <div
@@ -83,6 +88,7 @@
   on:dragenter
   on:dragend
   on:drop
+  bind:this={domDiv}
 >
   {#if checkedObjectsStore}
     <CheckboxField

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -509,9 +509,9 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify(
   extInfo={data.extInfo}
   icon="img database"
   colorMark={passProps?.connectionColorFactory &&
-    passProps?.connectionColorFactory({ conid: _.get(data.connection, '_id'), database: data.name }, null, null, false)}
-  isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
-    extractDbNameFromComposite(_.get($currentDatabase, 'name')) == data.name}
+    passProps?.connectionColorFactory({ conid: data?.connection?._id, database: data.name }, null, null, false)}
+  isBold={$currentDatabase?.connection?._id == data?.connection?._id &&
+    extractDbNameFromComposite($currentDatabase?.name) == data.name}
   on:click={() => switchCurrentDatabase(data)}
   on:dragstart
   on:dragenter

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -853,6 +853,7 @@
     getExtensions,
     openedConnections,
     pinnedTables,
+    selectedDatabaseObjectAppObject,
   } from '../stores';
   import openNewTab from '../utility/openNewTab';
   import {
@@ -880,11 +881,13 @@
   import { getDefaultFileFormat } from '../plugins/fileformats';
   import hasPermission from '../utility/hasPermission';
   import { openImportExportTab } from '../utility/importExportTools';
+  import { matchDatabaseObjectAppObject } from './appObjectMatchers';
 
   export let data;
   export let passProps;
 
   function handleClick(forceNewTab = false, preventPreviewMode = false) {
+    $selectedDatabaseObjectAppObject = data;
     handleDatabaseObjectClick(data, forceNewTab, preventPreviewMode);
   }
 
@@ -918,6 +921,7 @@
   onPin={isPinned ? null : () => pinnedTables.update(list => [...list, data])}
   onUnpin={isPinned ? () => pinnedTables.update(list => list.filter(x => !testEqual(x, data))) : null}
   extInfo={getExtInfo(data)}
+  isBold={matchDatabaseObjectAppObject($selectedDatabaseObjectAppObject, data)}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}
   on:dblclick={() => handleClick(false, true)}

packages/web/src/appobj/appObjectMatchers.ts

@@ -0,0 +1,9 @@
+export function matchDatabaseObjectAppObject(obj1, obj2) {
+  return (
+    obj1?.objectTypeField == obj2?.objectTypeField &&
+    obj1?.conid == obj2?.conid &&
+    obj1?.database == obj2?.database &&
+    obj1?.pureName == obj2?.pureName &&
+    obj1?.schemaName == obj2?.schemaName
+  );
+}