From fae454f96a06209078c8a2d48f0a0bbccd625fb3 Mon Sep 17 00:00:00 2001
From: "Spencer.Chang" <zhangnet14@gmail.com>
Date: Thu, 18 Jun 2026 13:13:45 +0800
Subject: [PATCH] feat: add sidebar type-to-search

---
 .../src/components/sidebar/ConnectionTree.vue | 40 ++++++++++++++++++-
 apps/desktop/src/lib/sidebarTypeSearch.ts     | 25 ++++++++++++
 packages/app-tests/sidebarTypeSearch.test.ts  | 20 ++++++++++
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 apps/desktop/src/lib/sidebarTypeSearch.ts
 create mode 100644 packages/app-tests/sidebarTypeSearch.test.ts

diff --git a/apps/desktop/src/components/sidebar/ConnectionTree.vue b/apps/desktop/src/components/sidebar/ConnectionTree.vue
index 543d307904..1389de6bed 100644
--- a/apps/desktop/src/components/sidebar/ConnectionTree.vue
+++ b/apps/desktop/src/components/sidebar/ConnectionTree.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, watch, provide, type Component } from "vue";
+import { ref, computed, nextTick, watch, provide, onMounted, onUnmounted, type Component } from "vue";
 import { useI18n } from "vue-i18n";
 import { Search, X, ListFilter, Crosshair, Server, Database, FolderTree, Table2, Eye, RotateCcw } from "@lucide/vue";
 import { useConnectionStore } from "@/stores/connectionStore";
@@ -8,6 +8,7 @@ import { useSettingsStore } from "@/stores/settingsStore";
 import type { TreeNode, TreeNodeType } from "@/types/database";
 import { filterSidebarSearchRootsByConnectionState, filterSidebarTree } from "@/lib/sidebarSearchTree";
 import { isCancelSearchShortcut } from "@/lib/keyboardShortcuts";
+import { isEditableSidebarTypeSearchTarget, sidebarTypeSearchNextQuery } from "@/lib/sidebarTypeSearch";
 import { usesTreeSchemaMode } from "@/lib/databaseFeatureSupport";
 import { connectionUsesDatabaseObjectTreeMode, effectiveDatabaseTypeForConnection } from "@/lib/jdbcDialect";
 import { activeTabSidebarTarget, findSidebarNodeForActiveTab, findSidebarNodeForTarget, findNodePathForTarget, scrollTopForSidebarNode, shouldScrollActiveSidebarSelection, type ActiveTabSidebarTarget } from "@/lib/sidebarActiveTabTarget";
@@ -26,6 +27,7 @@ const settingsStore = useSettingsStore();
 const searchQuery = ref("");
 const deferredSearchQuery = ref("");
 const searchInputRef = ref<HTMLInputElement>();
+const pointerInsideTree = ref(false);
 const treeScrollerRef = ref<InstanceType<typeof RecycleScroller> | null>(null);
 const plainTreeScrollerRef = ref<HTMLElement | null>(null);
 type SearchScope = "connection" | "database" | "schema" | "table" | "view";
@@ -525,11 +527,45 @@ function onSearchKeydown(event: KeyboardEvent) {
   searchQuery.value = "";
 }
 
+function focusSearchAtEnd() {
+  nextTick(() => {
+    const input = searchInputRef.value;
+    if (!input) return;
+    input.focus();
+    const end = input.value.length;
+    input.setSelectionRange(end, end);
+  });
+}
+
+function onWindowKeydown(event: KeyboardEvent) {
+  if (!pointerInsideTree.value || event.defaultPrevented || isEditableSidebarTypeSearchTarget(event.target)) return;
+  if (isCancelSearchShortcut(event)) {
+    if (!searchQuery.value) return;
+    event.preventDefault();
+    searchQuery.value = "";
+    focusSearchAtEnd();
+    return;
+  }
+  const nextQuery = sidebarTypeSearchNextQuery(searchQuery.value, event);
+  if (nextQuery == null) return;
+  event.preventDefault();
+  searchQuery.value = nextQuery;
+  focusSearchAtEnd();
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", onWindowKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", onWindowKeydown);
+});
+
 defineExpose({ focusSearch, createNewGroup });
 </script>
 
 <template>
-  <div class="h-full min-h-0 flex flex-col text-sm select-none">
+  <div class="h-full min-h-0 flex flex-col text-sm select-none" @pointerenter="pointerInsideTree = true" @pointerleave="pointerInsideTree = false">
     <div class="sticky top-0 z-10 bg-background px-2 py-1">
       <div class="relative flex items-center gap-1">
         <div class="relative flex-1">
diff --git a/apps/desktop/src/lib/sidebarTypeSearch.ts b/apps/desktop/src/lib/sidebarTypeSearch.ts
new file mode 100644
index 0000000000..2b14e39e5e
--- /dev/null
+++ b/apps/desktop/src/lib/sidebarTypeSearch.ts
@@ -0,0 +1,25 @@
+export interface SidebarTypeSearchKeyEvent {
+  key: string;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  altKey?: boolean;
+  isComposing?: boolean;
+}
+
+export function isEditableSidebarTypeSearchTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return !!target.closest("input, textarea, select, [contenteditable='true'], .cm-editor");
+}
+
+export function sidebarTypeSearchNextQuery(currentQuery: string, event: SidebarTypeSearchKeyEvent): string | null {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return null;
+
+  if (event.key === "Backspace") {
+    if (!currentQuery) return null;
+    return currentQuery.slice(0, -1);
+  }
+
+  if (event.key.length !== 1) return null;
+  if (event.key === " " && !currentQuery.trim()) return null;
+  return `${currentQuery}${event.key}`;
+}
diff --git a/packages/app-tests/sidebarTypeSearch.test.ts b/packages/app-tests/sidebarTypeSearch.test.ts
new file mode 100644
index 0000000000..152d5c4dbe
--- /dev/null
+++ b/packages/app-tests/sidebarTypeSearch.test.ts
@@ -0,0 +1,20 @@
+import { strict as assert } from "node:assert";
+import { test } from "vitest";
+import { sidebarTypeSearchNextQuery } from "../../apps/desktop/src/lib/sidebarTypeSearch.ts";
+
+test("starts sidebar search from printable keys", () => {
+  assert.equal(sidebarTypeSearchNextQuery("", { key: "e" }), "e");
+  assert.equal(sidebarTypeSearchNextQuery("ec", { key: "m" }), "ecm");
+});
+
+test("removes one search character with Backspace", () => {
+  assert.equal(sidebarTypeSearchNextQuery("ecm", { key: "Backspace" }), "ec");
+  assert.equal(sidebarTypeSearchNextQuery("", { key: "Backspace" }), null);
+});
+
+test("ignores shortcuts and non-searchable initial space", () => {
+  assert.equal(sidebarTypeSearchNextQuery("", { key: "f", metaKey: true }), null);
+  assert.equal(sidebarTypeSearchNextQuery("", { key: "ArrowDown" }), null);
+  assert.equal(sidebarTypeSearchNextQuery("", { key: " " }), null);
+  assert.equal(sidebarTypeSearchNextQuery("order", { key: " " }), "order ");
+});