Make panel legend chips toggle status filters.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/PluginPanelPage.vue

@@ -24,11 +24,14 @@ const router = useRouter()
 const loadingList = ref(false)
 const tenants = ref<TenantRow[]>([])
 const q = ref('')
+const toneFilter = ref<'healthy' | 'warning' | 'critical' | 'unknown' | null>(null)
 
 const filteredTenants = computed(() => {
   const term = q.value.trim().toLowerCase()
-  if (!term) return tenants.value
   return tenants.value.filter((t) => {
+    const tone = toneClass(t.summary?.expiryLevel)
+    if (toneFilter.value && tone !== toneFilter.value) return false
+    if (!term) return true
     const blob = [t.nameFa, t.domain, t.slug || '', t.summary?.expiryLabel || '']
       .join(' ')
       .toLowerCase()
@@ -45,6 +48,10 @@ function toneClass(level?: ExpiryLevel) {
   return level && level !== 'none' ? level : 'unknown'
 }
 
+function toggleToneFilter(level: 'healthy' | 'warning' | 'critical' | 'unknown') {
+  toneFilter.value = toneFilter.value === level ? null : level
+}
+
 function openTenant(id: string) {
   router.push({ name: 'plugin-tenant', params: { tenantId: id } })
 }
@@ -90,11 +97,39 @@ onMounted(loadTenants)
       </a-input>
     </div>
 
-    <div class="legend">
-      <span class="chip healthy">اعتبار کافی</span>
-      <span class="chip warning">نزدیک هشدار</span>
-      <span class="chip critical">۳ روز یا کمتر / منقضی</span>
-      <span class="chip unknown">بدون افزونه یا بدون تاریخ</span>
+    <div class="legend" role="group" aria-label="فیلتر وضعیت افزونه">
+      <button
+        type="button"
+        class="chip healthy"
+        :class="{ active: toneFilter === 'healthy' }"
+        @click="toggleToneFilter('healthy')"
+      >
+        اعتبار کافی
+      </button>
+      <button
+        type="button"
+        class="chip warning"
+        :class="{ active: toneFilter === 'warning' }"
+        @click="toggleToneFilter('warning')"
+      >
+        نزدیک هشدار
+      </button>
+      <button
+        type="button"
+        class="chip critical"
+        :class="{ active: toneFilter === 'critical' }"
+        @click="toggleToneFilter('critical')"
+      >
+        ۳ روز یا کمتر / منقضی
+      </button>
+      <button
+        type="button"
+        class="chip unknown"
+        :class="{ active: toneFilter === 'unknown' }"
+        @click="toggleToneFilter('unknown')"
+      >
+        بدون افزونه یا بدون تاریخ
+      </button>
     </div>
 
     <section class="sms-selector">
@@ -159,16 +194,28 @@ onMounted(loadTenants)
 }
 
 .chip {
+  appearance: none;
+  border: 2px solid transparent;
   border-radius: 999px;
   padding: 6px 12px;
+  font: inherit;
   font-size: 0.8rem;
   font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
+.chip:hover { transform: translateY(-1px); }
+.chip.active { box-shadow: 0 0 0 2px rgba(23, 50, 77, 0.18); }
+
 .chip.healthy { background: #dff8ea; color: #0f7a45; }
+.chip.healthy.active { border-color: #0f7a45; }
 .chip.warning { background: #fff4c7; color: #9a6b00; }
+.chip.warning.active { border-color: #9a6b00; }
 .chip.critical { background: #ffd8d8; color: #b42318; }
+.chip.critical.active { border-color: #b42318; }
 .chip.unknown { background: #eef2f7; color: #64748b; }
+.chip.unknown.active { border-color: #64748b; }
 
 .sms-selector {
   border-radius: 22px;