From 13e0babc75923788f2b4d9b30531fde5e93b3d47 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Thu, 22 Jan 2026 22:11:32 -0800
Subject: [PATCH] update search type badges

---
 src/components/searchbox/NodeSearchFilter.vue | 49 +++++++++++++++----
 src/locales/en/main.json                      |  3 +-
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 0f54248268..0a252d87f6 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -1,13 +1,27 @@
 <template>
   <div class="_content">
-    <SelectButton
-      v-model="selectedFilter"
-      class="filter-type-select"
-      :options="filters"
-      :allow-empty="false"
-      option-label="name"
-      @change="updateSelectedFilterValue"
-    />
+    <div
+      class="filter-type-group"
+      role="tablist"
+      :aria-label="$t('sideToolbar.nodeLibraryTab.filterCategory')"
+    >
+      <Button
+        v-for="filterOption in filters"
+        :key="filterOption.id"
+        type="button"
+        size="sm"
+        :variant="
+          selectedFilter?.id === filterOption.id
+            ? 'secondary'
+            : 'muted-textonly'
+        "
+        class="filter-type-button"
+        :aria-pressed="selectedFilter?.id === filterOption.id"
+        @click="selectFilterOption(filterOption)"
+      >
+        {{ filterOption.name }}
+      </Button>
+    </div>
     <Select
       v-model="selectedFilterValue"
       class="filter-value-select"
@@ -23,7 +37,6 @@
 
 <script setup lang="ts">
 import Select from 'primevue/select'
-import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -57,6 +70,16 @@ const updateSelectedFilterValue = () => {
   selectedFilterValue.value = filterValues.value[0]
 }
 
+const selectFilterOption = (
+  filterOption: FuseFilter<ComfyNodeDefImpl, string>
+) => {
+  if (selectedFilter.value?.id === filterOption.id) {
+    return
+  }
+  selectedFilter.value = filterOption
+  updateSelectedFilterValue()
+}
+
 const submit = () => {
   if (!selectedFilter.value) {
     return
@@ -75,6 +98,14 @@ const submit = () => {
   @apply flex flex-col space-y-2;
 }
 
+.filter-type-group {
+  @apply flex flex-wrap gap-2;
+}
+
+.filter-type-button {
+  @apply flex-1 justify-center px-3 py-2 text-sm;
+}
+
 ._footer {
   @apply flex flex-col pt-4 items-end;
 }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index fa557ee96b..d959500ae4 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -710,6 +710,7 @@
       "groupBy": "Group By",
       "sortMode": "Sort Mode",
       "resetView": "Reset View to Default",
+      "filterCategory": "Filter category",
       "groupStrategies": {
         "category": "Category",
         "categoryDesc": "Group by node category",
@@ -2619,4 +2620,4 @@
       "tokenExchangeFailed": "Failed to authenticate with workspace: {error}"
     }
   }
-}
\ No newline at end of file
+}