From 2a2357e2f17d2a2f30f4fee69d051f51b51952fd Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Wed, 26 Aug 2026 00:25:10 +0800
Subject: [PATCH] feat(sidebar): refine active connection filter indicator

---
 .../sidebar/ActiveConnectionFilterButton.vue     |  9 ++++++---
 .../ActiveConnectionFilterButton.spec.ts         | 16 +++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue b/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
index 7b692f1341..c8925bb63c 100644
--- a/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
+++ b/apps/desktop/src/components/sidebar/ActiveConnectionFilterButton.vue
@@ -1,7 +1,6 @@
 <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<{
@@ -29,8 +28,12 @@ const activeConnectionStatusId = useId();
       :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
+        data-active-connection-filter-icon
+        class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] transition-[width,height,border-color,background-color] duration-200 ease-out"
+        :class="activeConnectionCount > 0 ? 'h-1.5 w-1.5 border-green-500 bg-green-500' : 'h-3 w-3 border-current bg-transparent'"
+        aria-hidden="true"
+      />
       <span :id="activeConnectionStatusId" class="sr-only" aria-live="polite" aria-atomic="true">{{ t("sidebar.activeConnectionsStatus", { count: activeConnectionCount }) }}</span>
     </button>
   </LightTooltip>
diff --git a/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts b/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts
index 6e99aa78bf..d2f51aeb7a 100644
--- a/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts
+++ b/apps/desktop/src/components/sidebar/__tests__/ActiveConnectionFilterButton.spec.ts
@@ -71,23 +71,25 @@ afterEach(() => {
 });
 
 describe("ActiveConnectionFilterButton", () => {
-  it("keeps the filter icon stable while the active connection status changes from 0 to 1 to 0", async () => {
+  it("morphs the centered indicator as 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();
+    const indicator = button.querySelector("[data-active-connection-filter-icon]");
+    expect(indicator).not.toBeNull();
+    expect(indicator?.className).toContain("left-1/2 top-1/2");
+    expect(indicator?.className).toContain("h-3 w-3 border-current bg-transparent");
     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(button.querySelector("[data-active-connection-filter-icon]")).toBe(indicator);
+    expect(indicator?.className).toContain("h-1.5 w-1.5 border-green-500 bg-green-500");
     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(button.querySelector("[data-active-connection-filter-icon]")).toBe(indicator);
+    expect(indicator?.className).toContain("h-3 w-3 border-current bg-transparent");
     expect(describedStatus(button).textContent).toBe("Active connections: 0");
   });