From 20078c7a8cbb02dff147845ce43ea7349848d651 Mon Sep 17 00:00:00 2001
From: yavon007 <shiyu.weilan@gmail.com>
Date: Mon, 4 May 2026 13:33:26 +0800
Subject: [PATCH 1/3] feat: improve tab bar scrolling and sidebar interaction

- Add left/right scroll buttons with gradient overlay for tab overflow
- Sync scroll button visibility on resize and tab changes
- Use invisible pin button to prevent tab width jump on hover
- Simplify tab layout by removing mode icon, reordering badge
- Change sidebar table/view to open on double-click instead of single-click
---
 src/App.vue                         | 99 +++++++++++++++++++++++------
 src/components/sidebar/TreeItem.vue | 12 +++-
 src/i18n/locales/en.ts              |  2 +
 src/i18n/locales/zh-CN.ts           |  2 +
 src/lib/treeNodeClick.ts            |  2 +-
 5 files changed, 93 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4a90b1a46..a3bb14411 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, defineAsyncComponent, type Ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { DatabaseZap, FilePlus2, Play, Loader2, Square, X, Globe, Moon, Sun, Upload, Download, Plus, History, Table2, Database, Search, ShieldCheck, Bot, Pin, AlignLeft, CloudDownload, ArrowLeftRight, FileCode, Settings, Sparkles, GitBranch } from "lucide-vue-next";
+import { DatabaseZap, FilePlus2, Play, Loader2, Square, X, Globe, Moon, Sun, Upload, Download, Plus, History, Table2, Database, Search, ShieldCheck, Bot, Pin, AlignLeft, CloudDownload, ArrowLeftRight, FileCode, Settings, Sparkles, GitBranch, ChevronRight } from "lucide-vue-next";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
 import { Button } from "@/components/ui/button";
@@ -633,6 +633,44 @@ async function openConnectionQuery(connectionId: string) {
   queryStore.createTab(connectionId, database);
 }
 
+const tabsContainerRef = ref<HTMLElement | null>(null);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+
+function updateScrollButtons() {
+  const el = tabsContainerRef.value;
+  if (!el) {
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
+  }
+  canScrollLeft.value = el.scrollLeft > 0;
+  canScrollRight.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+}
+
+function scrollTabs(direction: "left" | "right") {
+  const el = tabsContainerRef.value;
+  if (!el) return;
+  const scrollAmount = el.clientWidth * 0.8;
+  el.scrollBy({ left: direction === "left" ? -scrollAmount : scrollAmount, behavior: "smooth" });
+}
+
+watch(() => queryStore.tabs.length, () => {
+  nextTick(updateScrollButtons);
+});
+
+watch(() => queryStore.activeTabId, () => {
+  nextTick(() => {
+    const container = tabsContainerRef.value;
+    if (!container) return;
+    const activeEl = container.querySelector('[data-active-tab="true"]');
+    if (activeEl) {
+      activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    }
+    updateScrollButtons();
+  });
+});
+
 const DANGER_RE = /\b(DROP|DELETE|TRUNCATE|ALTER|UPDATE|MERGE|REPLACE)\b/i;
 
 function stripSqlComments(sql: string): string {
@@ -901,6 +939,7 @@ onMounted(() => {
   });
   settingsStore.initAiConfig();
   window.addEventListener("keydown", handleKeydown, true);
+  window.addEventListener("resize", updateScrollButtons);
   if (isTauriRuntime()) {
     setupFileDrop().catch(() => {});
     checkUpdates({ silent: true });
@@ -947,6 +986,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener("keydown", handleKeydown, true);
+  window.removeEventListener("resize", updateScrollButtons);
 });
 
 const DB_EXTENSIONS = [".db", ".sqlite", ".sqlite3", ".duckdb"];
@@ -1153,7 +1193,21 @@ async function setupFileDrop() {
         <div class="flex-1 min-w-0">
           <div class="h-full flex flex-col min-w-0">
           <!-- Tabs Bar -->
-          <div v-if="queryStore.tabs.length > 0" class="h-9 flex items-center border-b bg-muted/20 overflow-x-auto shrink-0" style="-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch">
+          <div v-if="queryStore.tabs.length > 0" class="relative h-9 flex items-center border-b bg-muted/20 shrink-0">
+            <button
+              v-if="canScrollLeft"
+              class="absolute left-0 z-10 h-full px-1 bg-linear-to-r from-background via-background/80 to-transparent text-muted-foreground hover:text-foreground"
+              :aria-label="t('tabs.scrollLeft')"
+              @click="scrollTabs('left')"
+            >
+              <ChevronRight class="h-4 w-4 rotate-180" />
+            </button>
+            <div
+              ref="tabsContainerRef"
+              class="flex-1 flex items-center overflow-x-auto min-w-0"
+              style="-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch"
+              @scroll="updateScrollButtons"
+            >
             <ContextMenu
               v-for="tab in queryStore.tabs"
               :key="tab.id"
@@ -1162,37 +1216,33 @@ async function setupFileDrop() {
                 <Tooltip>
                 <TooltipTrigger as-child>
                 <div
-                  class="group flex min-w-36 items-center gap-1 px-3 h-full text-xs cursor-pointer border-r hover:bg-accent transition-colors whitespace-nowrap"
-                  :class="{ 'bg-background font-medium': tab.id === queryStore.activeTabId }"
+                  class="group flex min-w-38 items-center gap-1 px-1 h-full text-xs cursor-pointer border-r hover:bg-accent transition-colors whitespace-nowrap"
+                  :class="tab.id === queryStore.activeTabId ? 'bg-background font-medium' : 'font-normal'"
+                  :data-active-tab="tab.id === queryStore.activeTabId"
                   @click="queryStore.activeTabId = tab.id"
                 >
                   <span class="h-4 w-1 rounded-full shrink-0" :style="{ backgroundColor: connectionColor(tab.connectionId) || '#9ca3af' }" />
-                  <component
-                    :is="tab.mode === 'data' ? Table2 : FileCode"
-                    class="h-3.5 w-3.5 shrink-0"
-                    :class="tab.mode === 'data' ? 'text-emerald-600' : 'text-blue-600'"
-                  />
-                  <span class="min-w-0 truncate">{{ tabDisplayTitle(tab) }}</span>
-                  <span
-                    class="shrink-0 rounded border px-1 text-[10px] leading-4"
-                    :class="tab.mode === 'data' ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300' : 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300'"
-                  >
-                    {{ tabModeLabel(tab) }}
-                  </span>
+                  <span class="min-w-0 truncate flex-1">{{ tabDisplayTitle(tab) }}</span>
                   <Tooltip>
                     <TooltipTrigger as-child>
                       <button
-                        class="rounded p-0.5 text-muted-foreground hover:bg-muted-foreground/20 hover:text-foreground focus:opacity-100"
-                        :class="tab.pinned ? 'opacity-100 text-primary' : 'hidden group-hover:inline-flex'"
-                        @click.stop="queryStore.togglePinnedTab(tab.id)"
+                          class="inline-flex rounded p-0.5 text-muted-foreground hover:bg-muted-foreground/20 hover:text-foreground focus:opacity-100"
+                          :class="tab.pinned ? 'visible text-primary' : 'invisible group-hover:visible'"
+                          @click.stop="queryStore.togglePinnedTab(tab.id)"
                       >
                         <Pin class="h-3 w-3" :class="{ 'fill-current': tab.pinned }" />
                       </button>
                     </TooltipTrigger>
                     <TooltipContent>{{ tab.pinned ? t('contextMenu.unpin') : t('contextMenu.pin') }}</TooltipContent>
                   </Tooltip>
+                  <span
+                    class="shrink-0 rounded border px-1 text-[10px] leading-4"
+                    :class="tab.mode === 'data' ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300' : 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300'"
+                  >
+                    {{ tabModeLabel(tab) }}
+                  </span>
                   <button
-                    class="rounded hover:bg-muted-foreground/20 p-0.5"
+                    class="rounded hover:bg-muted-foreground/20 p-0.5 shrink-0"
                     @click.stop="queryStore.closeTab(tab.id)"
                   >
                     <X class="h-3 w-3" />
@@ -1231,6 +1281,15 @@ async function setupFileDrop() {
                 </ContextMenuItem>
               </ContextMenuContent>
             </ContextMenu>
+            </div>
+            <button
+              v-if="canScrollRight"
+              class="absolute right-0 z-10 h-full px-1 bg-linear-to-l from-background via-background/80 to-transparent text-muted-foreground hover:text-foreground"
+              :aria-label="t('tabs.scrollRight')"
+              @click="scrollTabs('right')"
+            >
+              <ChevronRight class="h-4 w-4" />
+            </button>
           </div>
 
           <!-- Editor Panel -->
diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index b9a7430c6..901fd2877 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -181,13 +181,18 @@ async function toggle() {
 function onClick() {
   const node = props.node;
   const action = treeNodeRowAction(node.type, canExpand);
-  if (action === "open-data") {
-    openData();
-  } else if (action === "toggle") {
+  if (action === "toggle") {
     toggle();
   }
 }
 
+function onDblClick() {
+  const node = props.node;
+  if (node.type === "table" || node.type === "view") {
+    openData();
+  }
+}
+
 async function openData() {
   const node = props.node;
   if (!(node.type === "table" || node.type === "view") || !node.connectionId || !node.database) return;
@@ -639,6 +644,7 @@ async function showMore() {
           class="group flex min-w-0 items-center gap-1.5 py-1 px-2 rounded-sm cursor-pointer hover:bg-accent transition-colors"
           :style="{ paddingLeft }"
           @click="onClick"
+          @dblclick="onDblClick"
         >
           <template v-if="canExpand">
             <button
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 197e20f27..7d3cb11eb 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -97,6 +97,8 @@ export default {
     tooltipTable: "Table:",
     tooltipCollection: "Collection:",
     resultN: "Result {n}",
+    scrollLeft: "Scroll tabs left",
+    scrollRight: "Scroll tabs right",
   },
   grid: {
     rows: "{count} rows",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 3bc2966a9..a9e59688e 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -99,6 +99,8 @@ export default {
     tooltipTable: "表：",
     tooltipCollection: "集合：",
     resultN: "结果 {n}",
+    scrollLeft: "向左滚动标签页",
+    scrollRight: "向右滚动标签页",
   },
   grid: {
     rows: "{count} 行",
diff --git a/src/lib/treeNodeClick.ts b/src/lib/treeNodeClick.ts
index 55ca95c49..8dc547480 100644
--- a/src/lib/treeNodeClick.ts
+++ b/src/lib/treeNodeClick.ts
@@ -6,7 +6,7 @@ const dataNodeTypes = new Set<TreeNodeType>(["table", "view"]);
 const toggleLeafNodeTypes = new Set<TreeNodeType>(["redis-db", "mongo-collection"]);
 
 export function treeNodeRowAction(type: TreeNodeType, canExpand: boolean): TreeNodeRowAction {
-  if (dataNodeTypes.has(type)) return "open-data";
+  if (dataNodeTypes.has(type)) return "none";
   if (toggleLeafNodeTypes.has(type)) return "toggle";
   if (canExpand) return "toggle";
   return "none";

From a3396f1601221469a4637863d0c630c93265ac04 Mon Sep 17 00:00:00 2001
From: yavon007 <shiyu.weilan@gmail.com>
Date: Mon, 4 May 2026 14:26:34 +0800
Subject: [PATCH 2/3] revert: restore single-click to open table data in
 sidebar

---
 src/components/sidebar/TreeItem.vue | 12 +++---------
 src/lib/treeNodeClick.ts            |  2 +-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index e76744b17..5e7a49254 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -199,15 +199,10 @@ async function toggle() {
 function onClick() {
   const node = props.node;
   const action = treeNodeRowAction(node.type, canExpand);
-  if (action === "toggle") {
-    toggle();
-  }
-}
-
-function onDblClick() {
-  const node = props.node;
-  if (node.type === "table" || node.type === "view") {
+  if (action === "open-data") {
     openData();
+  } else if (action === "toggle") {
+    toggle();
   }
 }
 
@@ -772,7 +767,6 @@ const isDragging = computed(() =>
           @mousedown="isDraggable ? startDrag($event, node.id, node.type) : undefined"
           @mousemove="isDropTarget ? updateTarget($event, node.id, node.type) : undefined"
           @mouseleave="clearTarget(node.id)"
-          @dblclick="onDblClick"
         >
           <div v-if="showDropBefore" class="absolute right-2 top-0 h-0.5 bg-primary rounded-full pointer-events-none" :style="{ left: paddingLeft }" />
           <div v-if="showDropAfter" class="absolute right-2 bottom-0 h-0.5 bg-primary rounded-full pointer-events-none" :style="{ left: paddingLeft }" />
diff --git a/src/lib/treeNodeClick.ts b/src/lib/treeNodeClick.ts
index 8dc547480..55ca95c49 100644
--- a/src/lib/treeNodeClick.ts
+++ b/src/lib/treeNodeClick.ts
@@ -6,7 +6,7 @@ const dataNodeTypes = new Set<TreeNodeType>(["table", "view"]);
 const toggleLeafNodeTypes = new Set<TreeNodeType>(["redis-db", "mongo-collection"]);
 
 export function treeNodeRowAction(type: TreeNodeType, canExpand: boolean): TreeNodeRowAction {
-  if (dataNodeTypes.has(type)) return "none";
+  if (dataNodeTypes.has(type)) return "open-data";
   if (toggleLeafNodeTypes.has(type)) return "toggle";
   if (canExpand) return "toggle";
   return "none";

From a7161ac8210caebab3c16b055a584731c0884a69 Mon Sep 17 00:00:00 2001
From: yavon007 <shiyu.weilan@gmail.com>
Date: Mon, 4 May 2026 14:29:55 +0800
Subject: [PATCH 3/3] feat: improve active tab visual distinction with bottom
 border accent

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7c980f277..b3b71e961 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1226,8 +1226,8 @@ async function setupFileDrop() {
                 <Tooltip>
                 <TooltipTrigger as-child>
                 <div
-                  class="group flex min-w-38 items-center gap-1 px-1 h-full text-xs cursor-pointer border-r hover:bg-accent transition-colors whitespace-nowrap"
-                  :class="tab.id === queryStore.activeTabId ? 'bg-background font-medium' : 'font-normal'"
+                  class="group flex min-w-38 items-center gap-1 px-1 h-full text-xs cursor-pointer border-r border-b-2 hover:bg-accent transition-colors whitespace-nowrap"
+                  :class="tab.id === queryStore.activeTabId ? 'bg-background font-medium border-b-primary' : 'font-normal text-muted-foreground border-b-transparent'"
                   :data-active-tab="tab.id === queryStore.activeTabId"
                   @click="queryStore.activeTabId = tab.id"
                 >