update search type badges

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;
 }

src/locales/en/main.json

@@ -720,6 +720,7 @@
       "groupBy": "Group By",
       "sortMode": "Sort Mode",
       "resetView": "Reset View to Default",
+      "filterCategory": "Filter category",
       "groupStrategies": {
         "category": "Category",
         "categoryDesc": "Group by node category",