From 7197f83edab8450e74a23bb5d8463b1a1e896e40 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 11 May 2026 13:08:57 +0800
Subject: [PATCH] perf(sidebar): fix UI lag with 100+ databases (closes #201)

- Lower virtual scrolling threshold from 400 to 100 nodes so
  RecycleScroller activates earlier with many databases
- Memoize getConfig() with a computed Map to avoid O(n) linear
  search on every TreeItem computed property evaluation
---
 src/composables/useFlatTree.ts | 2 +-
 src/stores/connectionStore.ts  | 6 ++++--
 tests/useFlatTree.test.ts      | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/composables/useFlatTree.ts b/src/composables/useFlatTree.ts
index d759bd9cea..7bf0e8d34a 100644
--- a/src/composables/useFlatTree.ts
+++ b/src/composables/useFlatTree.ts
@@ -23,5 +23,5 @@ export function flattenTree(nodes: TreeNode[]): FlatTreeNode[] {
 }
 
 export function shouldVirtualizeFlatTree(count: number): boolean {
-  return count >= 400;
+  return count >= 100;
 }
diff --git a/src/stores/connectionStore.ts b/src/stores/connectionStore.ts
index bd26c0f436..54aa804e95 100644
--- a/src/stores/connectionStore.ts
+++ b/src/stores/connectionStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { uuid } from "@/lib/utils";
-import { ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import type { ColumnInfo, ConnectionConfig, SidebarLayout, TreeNode } from "@/types/database";
 import { orderPinnedFirst } from "@/lib/pinnedItems";
 import {
@@ -111,8 +111,10 @@ export const useConnectionStore = defineStore("connection", () => {
     newConnectionGroupId.value = null;
   }
 
+  const configById = computed(() => new Map(connections.value.map((c) => [c.id, c])));
+
   function getConfig(connectionId: string) {
-    return connections.value.find((c) => c.id === connectionId);
+    return configById.value.get(connectionId);
   }
 
   function connectionErrorMessage(error: unknown): string {
diff --git a/tests/useFlatTree.test.ts b/tests/useFlatTree.test.ts
index 69a98f7bc6..76919265cc 100644
--- a/tests/useFlatTree.test.ts
+++ b/tests/useFlatTree.test.ts
@@ -37,6 +37,6 @@ test("flattenTree preserves depth and node type for virtualized sidebar rows", (
 });
 
 test("shouldVirtualizeFlatTree only virtualizes very large sidebar trees", () => {
-  assert.equal(shouldVirtualizeFlatTree(399), false);
-  assert.equal(shouldVirtualizeFlatTree(400), true);
+  assert.equal(shouldVirtualizeFlatTree(99), false);
+  assert.equal(shouldVirtualizeFlatTree(100), true);
 });