fix(ui): preserve tab scroll positions

apps/desktop/src/components/layout/ContentArea.vue

@@ -73,7 +73,7 @@ import type { DataGridSortMode } from "@/lib/dataGrid/dataGridSort";
 import { useTabScroll } from "@/composables/useTabScroll";
 import { formatElapsedSeconds } from "@/lib/common/elapsedTime";
 import type { CustomSaveHandler } from "@/composables/useDataGridEditor";
-import type { QueryTab, ConnectionConfig, TableInfoTab, TreeNode, VectorCollectionMeta } from "@/types/database";
+import type { QueryTab, ConnectionConfig, TableInfoTab, TreeNode, VectorCollectionMeta, ObjectBrowserViewport } from "@/types/database";
 import { sqlFormatDialectForDbType, type SqlFormatDialect } from "@/lib/sql/sqlFormatter";
 
 type DataGridHandle = {
@@ -144,6 +144,7 @@ const emit = defineEmits<{
   editTableStructure: [tableName: string];
   openObjectTable: [target: { tableName: string; schema?: string; tableType?: string }];
   objectSchemaChange: [schema: string | undefined];
+  objectBrowserViewportChange: [tabId: string, viewport: ObjectBrowserViewport];
   structureEditorSaved: [commentChanged: boolean];
   structureEditorClose: [];
   openSettings: [initialTab?: string, initialSection?: string];
@@ -1496,8 +1497,10 @@ defineExpose({ focusSearch, refreshData, handleModRTarget, requestQueryEditorExe
           :connection="activeConnection"
           :database="activeTab.database"
           :schema="activeTab.objectBrowser?.schema"
+          :viewport="activeTab.objectBrowser?.viewport"
           @open-table="emit('openObjectTable', $event)"
           @schema-change="emit('objectSchemaChange', $event)"
+          @viewport-change="emit('objectBrowserViewportChange', activeTab.id, $event)"
         />
       </div>
     </template>

apps/desktop/src/components/objects/ObjectBrowser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { computed, nextTick, onActivated, onBeforeUnmount, ref, watch } from "vue";
 import { RecycleScroller } from "vue-virtual-scroller";
 import { useSqlHighlighter } from "@/composables/useSqlHighlighter";
 import {
@@ -48,7 +48,7 @@ import CustomContextMenu, { type ContextMenuItem } from "@/components/ui/CustomC
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import ProcedureExecutionDialog from "@/components/objects/ProcedureExecutionDialog.vue";
 import * as api from "@/lib/backend/api";
-import type { ConnectionConfig, ForeignKeyInfo, ObjectInfo, ObjectSourceKind, ObjectStatistics } from "@/types/database";
+import type { ConnectionConfig, ForeignKeyInfo, ObjectBrowserViewMode, ObjectBrowserViewport, ObjectInfo, ObjectSourceKind, ObjectStatistics } from "@/types/database";
 import { sortTablesByFkDependency, type TableWithFk } from "@/lib/table/tableDependencySort";
 import { isSchemaAware } from "@/lib/database/databaseCapabilities";
 import { supportsSchemaDiagram, supportsTableImport, supportsTableStructureEditing, supportsTableTruncate } from "@/lib/database/databaseFeatureSupport";
@@ -94,11 +94,13 @@ const props = defineProps<{
   connection: ConnectionConfig;
   database: string;
   schema?: string;
+  viewport?: ObjectBrowserViewport;
 }>();
 
 const emit = defineEmits<{
   openTable: [target: { tableName: string; schema?: string; tableType?: string }];
   schemaChange: [schema: string | undefined];
+  viewportChange: [viewport: ObjectBrowserViewport];
 }>();
 
 const { t } = useI18n();
@@ -180,6 +182,7 @@ const objectColumnWidths = ref<Record<ObjectBrowserColumnKey, number>>({
 });
 let loadId = 0;
 let stopColumnResize: (() => void) | null = null;
+let preserveObjectFilterScrollOnce = false;
 
 // Export via background tracker
 const { addTask: addExportTask } = useExportTracker();
@@ -222,20 +225,107 @@ const hasUpdatedAt = computed(() => rows.value.some((row) => row.updated_at?.tri
 const hasAnyComment = computed(() => rows.value.some((row) => row.comment?.trim()));
 const isListView = computed(() => settingsStore.editorSettings.objectBrowserViewMode !== "grid");
 
-// RecycleScroller exposes scrollToItem on its component instance (see
-// vue-virtual-scroller). Typed loosely to match the DataGrid usage pattern.
-const listScrollerRef = ref<{ scrollToItem?: (index: number) => void } | null>(null);
-const gridScrollerRef = ref<{ scrollToItem?: (index: number) => void } | null>(null);
+type ObjectBrowserScroller =
+  | HTMLElement
+  | {
+      scrollToItem?: (index: number) => void;
+      scrollToPosition?: (position: number) => void;
+      $el?: HTMLElement;
+      el?: HTMLElement | { value?: HTMLElement | null };
+    };
+
+// RecycleScroller exposes scroll helpers on its component instance. Keep the
+// type loose because vue-virtual-scroller does not ship complete ref typings.
+const listScrollerRef = ref<ObjectBrowserScroller | null>(null);
+const gridScrollerRef = ref<ObjectBrowserScroller | null>(null);
+let viewportFrame = 0;
+let restoreViewportFrame = 0;
+
+function objectBrowserViewMode(): ObjectBrowserViewMode {
+  return isListView.value ? "list" : "grid";
+}
+
+function activeScroller() {
+  return isListView.value ? listScrollerRef.value : gridScrollerRef.value;
+}
+
+function scrollerElement(scroller: ObjectBrowserScroller | null = activeScroller()): HTMLElement | null {
+  if (!scroller) return null;
+  if (scroller instanceof HTMLElement) return scroller;
+  if (scroller.$el instanceof HTMLElement) return scroller.$el;
+  if (scroller.el instanceof HTMLElement) return scroller.el;
+  if (scroller.el?.value instanceof HTMLElement) return scroller.el.value;
+  return null;
+}
+
+function emitViewportChange(scrollTop: number) {
+  const viewport: ObjectBrowserViewport = {
+    scrollTop: Math.max(0, Math.round(scrollTop)),
+    viewMode: objectBrowserViewMode(),
+  };
+  if (props.viewport?.scrollTop === viewport.scrollTop && props.viewport.viewMode === viewport.viewMode) return;
+  emit("viewportChange", viewport);
+}
+
+function onObjectsScroll() {
+  if (viewportFrame) return;
+  viewportFrame = window.requestAnimationFrame(() => {
+    viewportFrame = 0;
+    const el = scrollerElement();
+    if (!el) return;
+    emitViewportChange(el.scrollTop);
+  });
+}
+
+function applyObjectBrowserScrollTop(scrollTop: number) {
+  const scroller = activeScroller();
+  if (scroller && !(scroller instanceof HTMLElement)) {
+    scroller.scrollToPosition?.(scrollTop);
+    if (scrollTop === 0) scroller.scrollToItem?.(0);
+  }
+  const el = scrollerElement(scroller);
+  if (el) el.scrollTop = scrollTop;
+}
+
+function restoreObjectBrowserViewport() {
+  const viewport = props.viewport;
+  if (!viewport || viewport.viewMode !== objectBrowserViewMode()) return;
+  if (restoreViewportFrame) window.cancelAnimationFrame(restoreViewportFrame);
+  const scrollTop = Math.max(0, viewport.scrollTop);
+  nextTick(() => {
+    applyObjectBrowserScrollTop(scrollTop);
+    restoreViewportFrame = window.requestAnimationFrame(() => {
+      applyObjectBrowserScrollTop(scrollTop);
+      restoreViewportFrame = 0;
+    });
+  });
+}
 
 function scrollObjectsToTop() {
   // Read the active scroller inside nextTick so that after a list <-> grid
   // switch the (re)mounted scroller is the one we reset.
+  emitViewportChange(0);
   nextTick(() => {
-    const scroller = isListView.value ? listScrollerRef.value : gridScrollerRef.value;
-    scroller?.scrollToItem?.(0);
+    applyObjectBrowserScrollTop(0);
   });
 }
 
+watch(
+  [listScrollerRef, gridScrollerRef, isListView],
+  (_value, _oldValue, onCleanup) => {
+    const el = scrollerElement();
+    if (!el) return;
+    el.addEventListener("scroll", onObjectsScroll, { passive: true });
+    restoreObjectBrowserViewport();
+    onCleanup(() => el.removeEventListener("scroll", onObjectsScroll));
+  },
+  { flush: "post" },
+);
+
+onActivated(() => {
+  restoreObjectBrowserViewport();
+});
+
 function setViewMode(mode: "list" | "grid") {
   settingsStore.updateEditorSettings({ objectBrowserViewMode: mode });
   scrollObjectsToTop();
@@ -251,7 +341,13 @@ watch([sortKey, sortDirection], () => scrollObjectsToTop());
 // Also jump to the top when the search query or object-type filter changes —
 // filtered results bear no relation to the previous scroll position.
 watch(search, () => scrollObjectsToTop());
-watch(objectFilter, () => scrollObjectsToTop());
+watch(objectFilter, () => {
+  if (preserveObjectFilterScrollOnce) {
+    preserveObjectFilterScrollOnce = false;
+    return;
+  }
+  scrollObjectsToTop();
+});
 
 const showCheckboxColumn = computed(() => settingsStore.editorSettings.objectBrowserShowCheckbox || selectedTableCount.value > 0);
 
@@ -356,6 +452,8 @@ watch(
 onBeforeUnmount(() => {
   gridResizeObserver?.disconnect();
   gridResizeObserver = null;
+  if (viewportFrame) window.cancelAnimationFrame(viewportFrame);
+  if (restoreViewportFrame) window.cancelAnimationFrame(restoreViewportFrame);
 });
 
 const gridRows = computed(() => {
@@ -1498,8 +1596,12 @@ async function loadObjects() {
     if (id === loadId) {
       loadingObjects.value = false;
       if (!userHasSelectedFilter.value && tableCount.value > 0) {
+        // The default table filter is a presentation choice, not a user query
+        // change, so preserve the tab's saved scroll offset across remounts.
+        preserveObjectFilterScrollOnce = objectFilter.value !== "tables";
         objectFilter.value = "tables";
       }
+      restoreObjectBrowserViewport();
     }
   }
 }

apps/desktop/src/components/structure/TableStructureEditor.vue

@@ -28,7 +28,7 @@ import { PRESET_FIELDS_TEMPLATE_ID, createTableColumnTemplateDrafts } from "@/li
 import { getTableMetadataCapabilities } from "@/lib/table/tableMetadataCapabilities";
 import { canAddTableStructureColumn, getTableStructureCapabilities } from "@/lib/table/tableStructureCapabilities";
 import { connectionObjectTreeQuerySchema, tableStructureDatabaseTypeForConnection } from "@/lib/database/jdbcDialect";
-import type { TableInfoTab, TableStructureEditorDraft, TableStructureEditorTarget } from "@/types/database";
+import type { TableInfoTab, TableStructureEditorDraft, TableStructureEditorTarget, TableStructureEditorViewport } from "@/types/database";
 import {
   buildStructureTargetLabel,
   combineDataTypeForDatabase,
@@ -62,6 +62,12 @@ const historyStore = useHistoryStore();
 const settingsStore = useSettingsStore();
 const { toast } = useToast();
 const rootRef = ref<HTMLElement>();
+type StructureScrollerRef = HTMLElement | { $el?: HTMLElement };
+const columnsScrollerRef = ref<StructureScrollerRef>();
+const indexesScrollerRef = ref<StructureScrollerRef>();
+const foreignKeysScrollerRef = ref<StructureScrollerRef>();
+const triggersScrollerRef = ref<StructureScrollerRef>();
+const ddlScrollerRef = ref<StructureScrollerRef>();
 const dynamicDataTypeOptionsCache = new Map<string, string[]>();
 
 const sqlHighlighter = ref<SqlHighlighter>();
@@ -734,6 +740,7 @@ let restoringDraft = false;
 let syncingDraft = false;
 let draftHydrated = false;
 let hydratingRestoredDraft = false;
+let structureScrollFrame = 0;
 // A context-menu target may arrive before metadata rows render, so search text
 // and row scrolling are tracked separately for each request.
 let appliedInitialTargetSearchKey = "";
@@ -743,6 +750,54 @@ function cloneDraftValue<T>(value: T): T {
   return JSON.parse(JSON.stringify(value)) as T;
 }
 
+const structureScrollPositions = ref<Partial<Record<TableInfoTab, TableStructureEditorViewport>>>({});
+
+function structureScrollerElement(scroller: StructureScrollerRef | undefined): HTMLElement | undefined {
+  if (!scroller) return undefined;
+  if (scroller instanceof HTMLElement) return scroller;
+  return scroller.$el instanceof HTMLElement ? scroller.$el : undefined;
+}
+
+function structureScrollerForTab(tab: TableInfoTab): HTMLElement | undefined {
+  if (tab === "columns") return structureScrollerElement(columnsScrollerRef.value);
+  if (tab === "indexes") return structureScrollerElement(indexesScrollerRef.value);
+  if (tab === "foreignKeys") return structureScrollerElement(foreignKeysScrollerRef.value);
+  if (tab === "triggers") return structureScrollerElement(triggersScrollerRef.value);
+  if (tab === "ddl") return structureScrollerElement(ddlScrollerRef.value);
+  return undefined;
+}
+
+function restoreStructureScrollPosition(tab = activeTab.value) {
+  const position = structureScrollPositions.value[tab];
+  if (!position) return;
+  nextTick(() => {
+    const scroller = structureScrollerForTab(tab);
+    if (!scroller) return;
+    scroller.scrollTop = Math.max(0, position.scrollTop);
+    scroller.scrollLeft = Math.max(0, position.scrollLeft);
+  });
+}
+
+function onStructureContentScroll(tab: TableInfoTab, event: Event) {
+  const target = event.currentTarget;
+  if (!(target instanceof HTMLElement)) return;
+  const position: TableStructureEditorViewport = {
+    scrollTop: Math.max(0, Math.round(target.scrollTop)),
+    scrollLeft: Math.max(0, Math.round(target.scrollLeft)),
+  };
+  const previous = structureScrollPositions.value[tab];
+  if (previous?.scrollTop === position.scrollTop && previous.scrollLeft === position.scrollLeft) return;
+  structureScrollPositions.value = {
+    ...structureScrollPositions.value,
+    [tab]: position,
+  };
+  if (structureScrollFrame) return;
+  structureScrollFrame = window.requestAnimationFrame(() => {
+    structureScrollFrame = 0;
+    syncDraftToParent();
+  });
+}
+
 function createCurrentDraft(initialized = true): TableStructureEditorDraft {
   return {
     activeTab: activeTab.value as TableStructureEditorDraft["activeTab"],
@@ -753,6 +808,7 @@ function createCurrentDraft(initialized = true): TableStructureEditorDraft {
     indexes: cloneDraftValue(indexes.value),
     foreignKeys: cloneDraftValue(foreignKeys.value),
     triggers: cloneDraftValue(triggers.value),
+    scrollPositions: cloneDraftValue(structureScrollPositions.value),
     initialized,
   };
 }
@@ -776,8 +832,10 @@ function restoreDraft(draft: TableStructureEditorDraft) {
   indexes.value = cloneDraftValue(draft.indexes || []);
   foreignKeys.value = cloneDraftValue(draft.foreignKeys || []);
   triggers.value = cloneDraftValue(draft.triggers || []);
+  structureScrollPositions.value = cloneDraftValue(draft.scrollPositions || {});
   restoringDraft = false;
   draftHydrated = !needsColumnDraftMetadataHydration();
+  restoreStructureScrollPosition();
 }
 
 function needsColumnDraftMetadataHydration() {
@@ -1930,6 +1988,7 @@ onActivated(() => {
     applyInitialStructureTarget();
     void hydrateRestoredDraftFromDatabase().then(() => applyInitialStructureTarget());
   }
+  restoreStructureScrollPosition();
 });
 onDeactivated(unregisterStructureEditorShortcuts);
 onBeforeUnmount(() => {
@@ -1938,6 +1997,7 @@ onBeforeUnmount(() => {
   clearSqlPreviewState();
   if (columnHighlightTimer) window.clearTimeout(columnHighlightTimer);
   if (indexHighlightTimer) window.clearTimeout(indexHighlightTimer);
+  if (structureScrollFrame) window.cancelAnimationFrame(structureScrollFrame);
   persistStructureDensity();
 });
 
@@ -2029,6 +2089,7 @@ watch(
 watch(activeTab, () => {
   highlightedColumnId.value = null;
   highlightedIndexId.value = null;
+  restoreStructureScrollPosition();
   syncDraftToParent();
 });
 
@@ -2200,7 +2261,7 @@ watch(activeTab, (tab) => {
             </div>
           </div>
 
-          <TabsContent v-if="tableMetadataCapabilities.columns" value="columns" class="m-0 min-h-0 flex-1 overflow-auto p-0">
+          <TabsContent ref="columnsScrollerRef" v-if="tableMetadataCapabilities.columns" value="columns" class="m-0 min-h-0 flex-1 overflow-auto p-0" @scroll.passive="onStructureContentScroll('columns', $event)">
             <table class="border-separate border-spacing-0 text-[length:var(--structure-font-size)] leading-[var(--structure-line-height)]" :style="{ minWidth: visibleColWidths.reduce((a, w) => a + w, 0) + 'px' }">
               <thead class="sticky top-0 z-10 bg-background">
                 <tr>
@@ -2471,7 +2532,7 @@ watch(activeTab, (tab) => {
             </table>
           </TabsContent>
 
-          <TabsContent v-if="tableMetadataCapabilities.indexes" value="indexes" class="m-0 min-h-0 flex-1 overflow-auto p-0">
+          <TabsContent ref="indexesScrollerRef" v-if="tableMetadataCapabilities.indexes" value="indexes" class="m-0 min-h-0 flex-1 overflow-auto p-0" @scroll.passive="onStructureContentScroll('indexes', $event)">
             <div v-if="indexesLoading" class="flex items-center justify-center gap-2 py-10 text-muted-foreground">
               <Loader2 class="h-4 w-4 animate-spin" />
               {{ t("common.loading") }}
@@ -2575,7 +2636,7 @@ watch(activeTab, (tab) => {
             </table>
           </TabsContent>
 
-          <TabsContent v-if="tableMetadataCapabilities.foreignKeys" value="foreignKeys" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]">
+          <TabsContent ref="foreignKeysScrollerRef" v-if="tableMetadataCapabilities.foreignKeys" value="foreignKeys" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]" @scroll.passive="onStructureContentScroll('foreignKeys', $event)">
             <div v-if="foreignKeysLoading" class="flex items-center justify-center gap-2 py-10 text-muted-foreground">
               <Loader2 class="h-4 w-4 animate-spin" />
               {{ t("common.loading") }}
@@ -2625,7 +2686,7 @@ watch(activeTab, (tab) => {
             </div>
           </TabsContent>
 
-          <TabsContent v-if="tableMetadataCapabilities.triggers" value="triggers" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]">
+          <TabsContent ref="triggersScrollerRef" v-if="tableMetadataCapabilities.triggers" value="triggers" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]" @scroll.passive="onStructureContentScroll('triggers', $event)">
             <div v-if="triggersLoading" class="flex items-center justify-center gap-2 py-10 text-muted-foreground">
               <Loader2 class="h-4 w-4 animate-spin" />
               {{ t("common.loading") }}
@@ -2674,7 +2735,7 @@ watch(activeTab, (tab) => {
             </div>
           </TabsContent>
 
-          <TabsContent v-if="tableMetadataCapabilities.ddl" value="ddl" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]">
+          <TabsContent ref="ddlScrollerRef" v-if="tableMetadataCapabilities.ddl" value="ddl" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]" @scroll.passive="onStructureContentScroll('ddl', $event)">
             <div v-if="ddlLoading" class="flex items-center justify-center gap-2 py-10 text-muted-foreground">
               <Loader2 class="h-4 w-4 animate-spin" />
               {{ t("common.loading") }}