From 86f36e51ad7488a9453a0ab82c83bf6a76efc354 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Tue, 25 Aug 2026 21:54:53 +0800
Subject: [PATCH] fix(sidebar): improve active connection indicator

---
 .../sidebar/ActiveConnectionFilterButton.vue  |  37 ++++++
 .../src/components/sidebar/ConnectionTree.vue |  16 +--
 .../ActiveConnectionFilterButton.spec.ts      | 105 ++++++++++++++++++
 apps/desktop/src/i18n/locales/en.ts           |   1 +
 apps/desktop/src/i18n/locales/es.ts           |   1 +
 apps/desktop/src/i18n/locales/it.ts           |   1 +
 apps/desktop/src/i18n/locales/ja.ts           |   1 +
 apps/desktop/src/i18n/locales/ko.ts           |   1 +
 apps/desktop/src/i18n/locales/pt-BR.ts        |   1 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |   1 +
 apps/desktop/src/i18n/locales/zh-TW.ts        |   1 +
 .../__tests__/legacyWebviewFallback.spec.ts   |   6 +-
 .../app-tests/sidebarToolbarTooltip.test.ts   |   7 +-
 13 files changed, 162 insertions(+), 17 deletions(-)
 create mode 100644 apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
 create mode 100644 apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts

diff --git a/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue b/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
new file mode 100644
index 0000000000..7b692f1341
--- /dev/null
+++ b/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { useI18n } from "vue-i18n";
+import { CircleDot } from "@lucide/vue";
+import LightTooltip from "@/components/ui/LightTooltip.vue";
+
+defineProps<{
+  activeConnectionCount: number;
+  pressed: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+}>();
+
+const { t } = useI18n();
+const activeConnectionStatusId = useId();
+</script>
+
+<template>
+  <LightTooltip :text="t('sidebar.showActiveConnectionsOnly')" side="top" :delay="300" nowrap>
+    <button
+      type="button"
+      data-active-connection-filter
+      class="relative shrink-0 h-6 w-6 flex items-center justify-center rounded border hover:bg-accent"
+      :class="pressed ? 'text-primary bg-primary/10 border-primary/30' : 'border-border text-muted-foreground hover:text-foreground'"
+      :aria-label="t('sidebar.showActiveConnectionsOnly')"
+      :aria-describedby="activeConnectionStatusId"
+      :aria-pressed="pressed"
+      @click="emit('toggle')"
+    >
+      <CircleDot data-active-connection-filter-icon class="h-3.5 w-3.5" />
+      <span v-if="activeConnectionCount > 0" data-active-connection-badge class="pointer-events-none absolute right-0.5 top-0.5 h-1.5 w-1.5 rounded-full bg-green-500 ring-1 ring-background" aria-hidden="true" />
+      <span :id="activeConnectionStatusId" class="sr-only" aria-live="polite" aria-atomic="true">{{ t("sidebar.activeConnectionsStatus", { count: activeConnectionCount }) }}</span>
+    </button>
+  </LightTooltip>
+</template>
diff --git a/apps/desktop/src/components/sidebar/ConnectionTree.vue b/apps/desktop/src/components/sidebar/ConnectionTree.vue
index a5e6f29f28..d3508b58a1 100644
--- a/apps/desktop/src/components/sidebar/ConnectionTree.vue
+++ b/apps/desktop/src/components/sidebar/ConnectionTree.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, shallowRef, computed, nextTick, watch, provide, onMounted, onUnmounted, type Component, type ComponentPublicInstance, type CSSProperties } from "vue";
 import { useI18n } from "vue-i18n";
-import { Search, X, ListFilter, ListOrdered, ArrowDownAZ, ArrowUpZA, CircleDot, Crosshair, Server, Database, FolderTree, Table2, Eye, RotateCcw, Loader2, Unplug } from "@lucide/vue";
+import { Search, X, ListFilter, ListOrdered, ArrowDownAZ, ArrowUpZA, Crosshair, Server, Database, FolderTree, Table2, Eye, RotateCcw, Loader2, Unplug } from "@lucide/vue";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useQueryStore } from "@/stores/queryStore";
 import { useSavedSqlStore } from "@/stores/savedSqlStore";
@@ -55,6 +55,7 @@ import { createSidebarPasteHandlerRegistry } from "@/lib/sidebar/sidebarPasteHan
 import { insertSidebarTableSearchControls, isSidebarTableSearchControlNode } from "@/lib/sidebar/sidebarTableSearchControl";
 import { createSidebarTableSearchDebouncer, invalidateSidebarTableSearchBuild, loadOrBuildSidebarTableSearchIndex, scheduleExclusiveSidebarTableSearchDebounce } from "@/lib/sidebar/sidebarTableSearchIndex";
 import TreeItem from "./TreeItem.vue";
+import ActiveConnectionFilterButton from "./ActiveConnectionFilterButton.vue";
 import SidebarTreeRuntimeHost from "./SidebarTreeRuntimeHost.vue";
 import SidebarTreeItemDialogs from "./SidebarTreeItemDialogs.vue";
 import InstallExtensionDialog from "@/components/objects/InstallExtensionDialog.vue";
@@ -2454,18 +2455,7 @@ defineExpose({ focusSearch, createNewGroup, collapseAllTreeNodes, locateTabInSid
             />
           </span>
         </LightTooltip>
-        <LightTooltip :text="t('sidebar.showActiveConnectionsOnly')" side="top" :delay="300" nowrap>
-          <button
-            type="button"
-            class="shrink-0 h-6 w-6 flex items-center justify-center rounded border hover:bg-accent"
-            :class="showConnectedConnectionsOnly ? 'text-primary bg-primary/10 border-primary/30' : 'border-border text-muted-foreground hover:text-foreground'"
-            :aria-label="t('sidebar.showActiveConnectionsOnly')"
-            :aria-pressed="showConnectedConnectionsOnly"
-            @click="showConnectedConnectionsOnly = !showConnectedConnectionsOnly"
-          >
-            <CircleDot class="h-3.5 w-3.5" />
-          </button>
-        </LightTooltip>
+        <ActiveConnectionFilterButton :active-connection-count="store.connectedIds.size" :pressed="showConnectedConnectionsOnly" @toggle="showConnectedConnectionsOnly = !showConnectedConnectionsOnly" />
       </div>
     </div>
     <CustomContextMenu ref="sidebarContextMenuRef" :items="sidebarContextMenuItems" v-slot="contextMenuSlot">
diff --git a/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts b/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts
new file mode 100644
index 0000000000..6e99aa78bf
--- /dev/null
+++ b/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts
@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+
+import { createApp, defineComponent, h, nextTick, reactive, type App } from "vue";
+import { createI18n } from "vue-i18n";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ActiveConnectionFilterButton from "../ActiveConnectionFilterButton.vue";
+
+vi.mock("@/components/ui/LightTooltip.vue", async () => {
+  const { defineComponent, h } = await import("vue");
+  return {
+    default: defineComponent({
+      name: "LightTooltipStub",
+      setup:
+        (_, { slots }) =>
+        () =>
+          h("div", slots.default?.()),
+    }),
+  };
+});
+
+const mountedApps: App[] = [];
+
+async function mountFilter(activeConnectionCount: number) {
+  const state = reactive({ activeConnectionCount, pressed: false });
+  const host = defineComponent({
+    setup: () => () =>
+      h(ActiveConnectionFilterButton, {
+        activeConnectionCount: state.activeConnectionCount,
+        pressed: state.pressed,
+        onToggle: () => {
+          state.pressed = !state.pressed;
+        },
+      }),
+  });
+  const container = document.createElement("div");
+  document.body.append(container);
+  const app = createApp(host);
+  app.use(
+    createI18n({
+      legacy: false,
+      locale: "en",
+      messages: {
+        en: {
+          sidebar: {
+            activeConnectionsStatus: "Active connections: {count}",
+            showActiveConnectionsOnly: "Show active connections only",
+          },
+        },
+      },
+    }),
+  );
+  mountedApps.push(app);
+  app.mount(container);
+  await nextTick();
+  const button = container.querySelector("[data-active-connection-filter]");
+  if (!(button instanceof HTMLButtonElement)) throw new Error("Active connection filter button was not rendered");
+  return { button, state };
+}
+
+function describedStatus(button: HTMLButtonElement) {
+  const statusId = button.getAttribute("aria-describedby");
+  if (!statusId) throw new Error("Active connection status description is missing");
+  const status = document.getElementById(statusId);
+  if (!(status instanceof HTMLSpanElement)) throw new Error("Active connection status element was not rendered");
+  return status;
+}
+
+afterEach(() => {
+  for (const app of mountedApps.splice(0)) app.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("ActiveConnectionFilterButton", () => {
+  it("keeps the filter icon stable while the active connection status changes from 0 to 1 to 0", async () => {
+    const { button, state } = await mountFilter(0);
+
+    expect(button.querySelector("[data-active-connection-filter-icon]")).not.toBeNull();
+    expect(button.querySelector("[data-active-connection-badge]")).toBeNull();
+    expect(describedStatus(button).textContent).toBe("Active connections: 0");
+
+    state.activeConnectionCount = 1;
+    await nextTick();
+    expect(button.querySelector("[data-active-connection-filter-icon]")).not.toBeNull();
+    expect(button.querySelector("[data-active-connection-badge]")).not.toBeNull();
+    expect(describedStatus(button).textContent).toBe("Active connections: 1");
+
+    state.activeConnectionCount = 0;
+    await nextTick();
+    expect(button.querySelector("[data-active-connection-filter-icon]")).not.toBeNull();
+    expect(button.querySelector("[data-active-connection-badge]")).toBeNull();
+    expect(describedStatus(button).textContent).toBe("Active connections: 0");
+  });
+
+  it("preserves the pressed and unpressed filter states", async () => {
+    const { button } = await mountFilter(1);
+
+    expect(button.getAttribute("aria-pressed")).toBe("false");
+    button.click();
+    await nextTick();
+    expect(button.getAttribute("aria-pressed")).toBe("true");
+    button.click();
+    await nextTick();
+    expect(button.getAttribute("aria-pressed")).toBe("false");
+  });
+});
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 6b02cb64bd..0e876a6971 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -322,6 +322,7 @@ export default {
     showMore: "Show {count} more...",
     filterByType: "Filter by type",
     showActiveConnectionsOnly: "Show active connections only",
+    activeConnectionsStatus: "Active connections: {count}",
     disconnectAllActiveConnections: "Disconnect all active connections",
     sortConnections: "Sort connections",
     sortConnectionsManual: "Manual order",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 2bdb66f408..659d646b75 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -324,6 +324,7 @@ export default withEnglishFallback({
     showMore: "Mostrar {count} más...",
     filterByType: "Filtrar por tipo",
     showActiveConnectionsOnly: "Mostrar solo conexiones activas",
+    activeConnectionsStatus: "Conexiones activas: {count}",
     disconnectAllActiveConnections: "Desconectar todas las conexiones activas",
     sortConnections: "Ordenar conexiones",
     sortConnectionsManual: "Orden manual",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 3f28636f9d..284eada77a 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -323,6 +323,7 @@ export default withEnglishFallback({
     showMore: "Mostra altri {count}...",
     filterByType: "Filtra per tipo",
     showActiveConnectionsOnly: "Mostra solo connessioni attive",
+    activeConnectionsStatus: "Connessioni attive: {count}",
     disconnectAllActiveConnections: "Disconnetti tutte le connessioni attive",
     sortConnections: "Ordina connessioni",
     sortConnectionsManual: "Ordine manuale",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index 10d19e19b0..9ea57c0e0f 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -324,6 +324,7 @@ export default withEnglishFallback({
     showMore: "さらに{count}件表示...",
     filterByType: "タイプでフィルター",
     showActiveConnectionsOnly: "アクティブな接続のみを表示",
+    activeConnectionsStatus: "アクティブな接続: {count}",
     disconnectAllActiveConnections: "すべてのアクティブな接続を切断",
     sortConnections: "接続を並べ替え",
     sortConnectionsManual: "手動順",
diff --git a/apps/desktop/src/i18n/locales/ko.ts b/apps/desktop/src/i18n/locales/ko.ts
index 58353dda22..4bffeba914 100644
--- a/apps/desktop/src/i18n/locales/ko.ts
+++ b/apps/desktop/src/i18n/locales/ko.ts
@@ -322,6 +322,7 @@ export default withEnglishFallback({
     showMore: "{count}개 더 보기...",
     filterByType: "유형별로 필터",
     showActiveConnectionsOnly: "활성 연결만 표시",
+    activeConnectionsStatus: "활성 연결: {count}",
     disconnectAllActiveConnections: "모든 활성 연결 끊기",
     sortConnections: "연결 정렬",
     sortConnectionsManual: "수동 순서",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index 0c87c582c0..8eaa397fcf 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -324,6 +324,7 @@ export default withEnglishFallback({
     showMore: "Mostrar mais {count}...",
     filterByType: "Filtrar por tipo",
     showActiveConnectionsOnly: "Mostrar apenas conexões ativas",
+    activeConnectionsStatus: "Conexões ativas: {count}",
     disconnectAllActiveConnections: "Desconectar todas as conexões ativas",
     sortConnections: "Ordenar conexões",
     sortConnectionsManual: "Ordem manual",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 5f604ead3b..4bbf620b9d 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -247,6 +247,7 @@ export default withEnglishFallback({
     showMore: "加载更多 ({count})...",
     filterByType: "按类型筛选",
     showActiveConnectionsOnly: "仅显示活跃连接",
+    activeConnectionsStatus: "活跃连接：{count}",
     disconnectAllActiveConnections: "关闭所有活跃连接",
     sortConnections: "连接排序",
     sortConnectionsManual: "手动排序",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index 3c0870dd5f..2f483fc4cb 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -324,6 +324,7 @@ export default withEnglishFallback({
     showMore: "再顯示 {count} 個……",
     filterByType: "依類型篩選",
     showActiveConnectionsOnly: "僅顯示作用中連線",
+    activeConnectionsStatus: "作用中連線：{count}",
     disconnectAllActiveConnections: "關閉所有作用中連線",
     sortConnections: "連線排序",
     sortConnectionsManual: "手動排序",
diff --git a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
index eb123e7a8a..d76e15b34d 100644
--- a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
+++ b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
@@ -9,6 +9,7 @@ const dialogOverlaySource = readFileSync(new URL("../../components/ui/dialog/Dia
 const dataTransferDialogSource = readFileSync(new URL("../../components/transfer/DataTransferDialog.vue", import.meta.url), "utf8");
 const connectionDialogSource = readFileSync(new URL("../../components/connection/ConnectionDialog.vue", import.meta.url), "utf8");
 const connectionTreeSource = readFileSync(new URL("../../components/sidebar/ConnectionTree.vue", import.meta.url), "utf8");
+const activeConnectionFilterSource = readFileSync(new URL("../../components/sidebar/ActiveConnectionFilterButton.vue", import.meta.url), "utf8");
 const scheduledDatabaseBackupSource = readFileSync(new URL("../../components/backup/ScheduledDatabaseBackupSettings.vue", import.meta.url), "utf8");
 const driverStoreDialogSource = readFileSync(new URL("../../components/config/DriverStoreDialog.vue", import.meta.url), "utf8");
 const tunnelProfileManagerSource = readFileSync(new URL("../../components/connection/TunnelProfileManager.vue", import.meta.url), "utf8");
@@ -97,9 +98,10 @@ describe("legacy WebView CSS fallbacks", () => {
     expect(globalsCss).toContain(".border-primary\\/30");
     expect(globalsCss).toContain("border-color: rgba(var(--dbx-primary-rgb), 0.3) !important;");
     expect(globalsCss).toContain(".hover\\:bg-primary\\/15:hover");
-    expect(connectionTreeSource).toContain("showActiveConnectionsOnly");
+    const activeConnectionSources = `${connectionTreeSource}\n${activeConnectionFilterSource}`;
+    expect(activeConnectionSources).toContain("showActiveConnectionsOnly");
     // Three pre-existing usages plus the sidebar regex-search toggle.
-    expect(connectionTreeSource.match(/bg-primary\/10 border-primary\/30/g)?.length).toBe(4);
+    expect(activeConnectionSources.match(/bg-primary\/10 border-primary\/30/g)?.length).toBe(4);
   });
 
   it("keeps legacy tab triggers connected to the configured corner style", () => {
diff --git a/packages/app-tests/sidebarToolbarTooltip.test.ts b/packages/app-tests/sidebarToolbarTooltip.test.ts
index 97005585cb..7c8bb2fe76 100644
--- a/packages/app-tests/sidebarToolbarTooltip.test.ts
+++ b/packages/app-tests/sidebarToolbarTooltip.test.ts
@@ -3,20 +3,23 @@ import { readFileSync } from "node:fs";
 import { test } from "vitest";
 
 const connectionTreeSource = readFileSync("apps/desktop/src/components/sidebar/ConnectionTree.vue", "utf8");
+const activeConnectionFilterSource = readFileSync("apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue", "utf8");
 const toolbarStart = connectionTreeSource.indexOf('<div class="connection-tree-search');
 const toolbarEnd = connectionTreeSource.indexOf("<CustomContextMenu", toolbarStart);
 const toolbarSource = connectionTreeSource.slice(toolbarStart, toolbarEnd);
+const toolbarActionSource = `${toolbarSource}\n${activeConnectionFilterSource}`;
 
 test("connection tree toolbar uses app tooltips for icon-only actions", () => {
   for (const tooltip of [
     `<LightTooltip :text="t('sidebar.locateActiveTab')" side="top" :delay="300" nowrap>`,
     `<LightTooltip :text="t('sidebar.sortConnections')" side="top" :delay="300" nowrap>`,
     `<LightTooltip v-if="searchScopeOptions.length > 0" :text="t('sidebar.filterByType')" side="top" :delay="300" nowrap>`,
-    `<LightTooltip :text="t('sidebar.showActiveConnectionsOnly')" side="top" :delay="300" nowrap>`,
   ]) {
     assert.ok(toolbarSource.includes(tooltip));
   }
+  assert.ok(toolbarSource.includes("<ActiveConnectionFilterButton"));
+  assert.ok(activeConnectionFilterSource.includes(`<LightTooltip :text="t('sidebar.showActiveConnectionsOnly')" side="top" :delay="300" nowrap>`));
 
-  assert.doesNotMatch(toolbarSource, /:title="t\('sidebar\.(?:locateActiveTab|showActiveConnectionsOnly)'\)"/);
+  assert.doesNotMatch(toolbarActionSource, /:title="t\('sidebar\.(?:locateActiveTab|showActiveConnectionsOnly)'\)"/);
   assert.doesNotMatch(toolbarSource, /:trigger-title="t\('sidebar\.(?:sortConnections|filterByType)'\)"/);
 });