dbappobj highlight

packages/web/src/appobj/AppObjectCore.svelte

@@ -14,6 +14,7 @@
   export let module = null;
 
   export let isBold = false;
+  export let isChoosed = false;
   export let isBusy = false;
   export let statusIcon = undefined;
   export let statusIconBefore = undefined;
@@ -71,11 +72,16 @@
   $: if (isBold && domDiv) {
     domDiv.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
+
+  $: if (isChoosed && domDiv) {
+    domDiv.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }
 </script>
 
 <div
   class="main"
   class:isBold
+  class:isChoosed
   draggable={true}
   on:click={handleClick}
   on:mouseup={handleMouseUp}
@@ -186,6 +192,12 @@
   .isBold {
     font-weight: bold;
   }
+  .isChoosed {
+    background-color: var(--theme-bg-3);
+  }
+  :global(.app-object-list-focused) .isChoosed {
+    background-color: var(--theme-bg-selected);
+  }
   .status {
     margin-left: 5px;
   }

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -921,7 +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)}
+  isChoosed={matchDatabaseObjectAppObject($selectedDatabaseObjectAppObject, data)}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}
   on:dblclick={() => handleClick(false, true)}

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -7,6 +7,8 @@
   export let getSelectedObject;
   export let selectedObjectMatcher;
 
+  let isListFocused = false;
+
   function handleKeyDown(ev) {
     function selectByDiff(diff) {
       const selected = getSelectedObject();
@@ -26,7 +28,18 @@
   }
 </script>
 
-<div tabindex="0" on:keydown={handleKeyDown} class="wrapper">
+<div
+  tabindex="0"
+  on:keydown={handleKeyDown}
+  class="wrapper"
+  class:app-object-list-focused={isListFocused}
+  on:focus={() => {
+    isListFocused = true;
+  }}
+  on:blur={() => {
+    isListFocused = false;
+  }}
+>
   <slot />
 </div>