From a72641b32e3c8cd1296200c27d340fe033cf522a Mon Sep 17 00:00:00 2001
From: "Patrick Lehner (he/him)" <1099818+lehnerpat@users.noreply.github.com>
Date: Sat, 17 Jan 2026 00:52:11 +0900
Subject: [PATCH] feat: Use toggle button for switching any/all mode for search
 filters (#6833)

---
 frontend/components/Domain/SearchFilter.vue | 30 ++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Domain/SearchFilter.vue b/frontend/components/Domain/SearchFilter.vue
index 1572b8dc0..f5488efd0 100644
--- a/frontend/components/Domain/SearchFilter.vue
+++ b/frontend/components/Domain/SearchFilter.vue
@@ -37,21 +37,27 @@
             :label="$t('search.search')"
             clearable
           />
-          <div class="d-flex py-4 px-1">
-            <v-switch
+          <div />
+          <div class="d-flex py-4 px-1 align-center">
+            <v-btn-toggle
               v-if="requireAll != undefined"
-              v-model="requireAllValue"
+              v-model="combinator"
+              mandatory
               density="compact"
-              hide-details
-              class="my-auto"
+              variant="outlined"
               color="primary"
-              :label="requireAllValue ? $t('search.has-all') : $t('search.has-any')"
-            />
+            >
+              <v-btn value="hasAll">
+                {{ $t('search.has-all') }}
+              </v-btn>
+              <v-btn value="hasAny">
+                {{ $t('search.has-any') }}
+              </v-btn>
+            </v-btn-toggle>
             <v-spacer />
             <v-btn
               size="small"
               color="accent"
-              class="mr-2 my-auto"
               @click="clearSelection"
             >
               {{ $t("search.clear-selection") }}
@@ -174,10 +180,10 @@ export default defineNuxtComponent({
     // Use shallowRef for better performance with arrays
     const debouncedSearch = shallowRef("");
 
-    const requireAllValue = computed({
-      get: () => props.requireAll,
+    const combinator = computed({
+      get: () => (props.requireAll ? "hasAll" : "hasAny"),
       set: (value) => {
-        context.emit("update:requireAll", value);
+        context.emit("update:requireAll", value === "hasAll");
       },
     });
 
@@ -246,7 +252,7 @@ export default defineNuxtComponent({
     }
 
     return {
-      requireAllValue,
+      combinator,
       state,
       selected,
       selectedRadio,