tables keyboard navigation

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -8,15 +8,31 @@
   export let selectedObjectMatcher;
   export let module;
 
+  export let onScrollTop = null;
+
   let isListFocused = false;
 
   function handleKeyDown(ev) {
     function selectByDiff(diff) {
       const selected = getSelectedObject();
       const index = _.findIndex(list, x => selectedObjectMatcher(x, selected));
-      if (index >= 0 && list[index + diff]) {
-        selectedObjectStore.set(list[index + diff]);
-        module.handleObjectClick(list[index + diff], { tabPreviewMode: true });
+      if (index >= 0) {
+        let newIndex = index + diff;
+        if (newIndex >= list.length) {
+          newIndex = list.length - 1;
+        }
+        if (newIndex < 0) {
+          newIndex = 0;
+        }
+
+        if (list[newIndex]) {
+          selectedObjectStore.set(list[newIndex]);
+          module.handleObjectClick(list[newIndex], { tabPreviewMode: true });
+        }
+
+        if (newIndex == 0 && onScrollTop) {
+          onScrollTop();
+        }
       }
     }
     if (ev.keyCode == keycodes.upArrow) {
@@ -31,6 +47,27 @@
       module.handleObjectClick(getSelectedObject(), { tabPreviewMode: false, focusTab: true });
       ev.preventDefault();
     }
+    if (ev.keyCode == keycodes.pageDown) {
+      selectByDiff(10);
+      ev.preventDefault();
+    }
+    if (ev.keyCode == keycodes.pageUp) {
+      selectByDiff(-10);
+      ev.preventDefault();
+    }
+    if (ev.keyCode == keycodes.home) {
+      if (list[0]) {
+        selectedObjectStore.set(list[0]);
+        module.handleObjectClick(list[0], { tabPreviewMode: true });
+        onScrollTop?.();
+      }
+    }
+    if (ev.keyCode == keycodes.end) {
+      if (list[list.length - 1]) {
+        selectedObjectStore.set(list[list.length - 1]);
+        module.handleObjectClick(list[list.length - 1], { tabPreviewMode: true });
+      }
+    }
   }
 </script>
 

packages/web/src/widgets/SqlObjectList.svelte

@@ -55,6 +55,7 @@
   export let database;
 
   let filter = '';
+  let domContainer = null;
 
   $: objects = useDatabaseInfo({ conid, database });
   $: status = useDatabaseStatus({ conid, database });
@@ -175,18 +176,19 @@
     negativeMarginTop
   />
 
-  <WidgetsInnerContainer>
+  <WidgetsInnerContainer bind:this={domContainer}>
     {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects}
       <LoadingInfo message={$status?.feedback?.analysingMessage || 'Loading database structure'} />
     {:else}
       <AppObjectListHandler
-        list={objectList
-          .filter(x => ($appliedCurrentSchema ? x.schemaName == $appliedCurrentSchema : true))
-          .map(x => ({ ...x, conid, database }))}
+        list={flatFilteredList.map(x => ({ ...x, conid, database }))}
         selectedObjectStore={selectedDatabaseObjectAppObject}
         getSelectedObject={getSelectedDatabaseObjectAppObject}
         selectedObjectMatcher={matchDatabaseObjectAppObject}
         module={databaseObjectAppObject}
+        onScrollTop={() => {
+          domContainer?.scrollTop();
+        }}
       >
         <AppObjectList
           list={objectList

packages/web/src/widgets/WidgetsInnerContainer.svelte

@@ -1,4 +1,12 @@
-<div on:drop><slot /></div>
+<script lang="ts">
+  let domDiv;
+
+  export function scrollTop() {
+    domDiv.scrollTop = 0;
+  }
+</script>
+
+<div on:drop bind:this={domDiv}><slot /></div>
 
 <style>
   div {