From 496264d59023b418de8ca0de7e186e2c0ce23fa3 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sun, 7 Jun 2026 15:34:12 +0530
Subject: [PATCH] fix: separate group-remove from per-condition remove in
 filter builder

The group remove button sat inline with the first condition's close button (8px apart, easy to misclick). Move it to a labeled 'Remove group' header button (trash icon) so it's clearly distinct from the per-condition X.
---
 .../src/components/filter/FilterGroupCard.vue | 51 +++++++++++--------
 i18n/en-US.json                               |  1 +
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/apps/main/src/components/filter/FilterGroupCard.vue b/frontend/apps/main/src/components/filter/FilterGroupCard.vue
index 213a5c70..1f88d0da 100644
--- a/frontend/apps/main/src/components/filter/FilterGroupCard.vue
+++ b/frontend/apps/main/src/components/filter/FilterGroupCard.vue
@@ -1,35 +1,42 @@
 <template>
-  <div class="rounded-lg border border-border bg-muted/30 p-3">
-    <div class="flex items-start gap-2">
-      <div class="flex-1 space-y-2">
-        <template v-for="(rule, index) in group.rules" :key="rule.__id">
-          <ConnectorToggle v-if="index > 0" v-model:modelValue="group.logic" />
-          <FilterRow v-model:modelValue="group.rules[index]" :fields="fields" @remove="removeRule(index)" />
-        </template>
-
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          class="text-muted-foreground"
-          @click.stop="addCondition"
-        >
-          <Plus class="w-3 h-3 mr-1" />
-          {{ t('actions.addCondition') }}
-        </Button>
-      </div>
-      <CloseButton v-if="canRemove" type="button" :onClose="() => emit('remove')" />
+  <div class="rounded-lg border border-border bg-muted/30 p-3 space-y-2">
+    <div v-if="canRemove" class="flex justify-end">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        class="text-muted-foreground hover:text-foreground h-7 px-2"
+        @click.stop="emit('remove')"
+      >
+        <Trash2 class="w-3 h-3 mr-1" />
+        {{ t('filter.removeGroup') }}
+      </Button>
     </div>
+
+    <template v-for="(rule, index) in group.rules" :key="rule.__id">
+      <ConnectorToggle v-if="index > 0" v-model:modelValue="group.logic" />
+      <FilterRow v-model:modelValue="group.rules[index]" :fields="fields" @remove="removeRule(index)" />
+    </template>
+
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      class="text-muted-foreground"
+      @click.stop="addCondition"
+    >
+      <Plus class="w-3 h-3 mr-1" />
+      {{ t('actions.addCondition') }}
+    </Button>
   </div>
 </template>
 
 <script setup>
 import { Button } from '@shared-ui/components/ui/button'
-import { Plus } from 'lucide-vue-next'
+import { Plus, Trash2 } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 import FilterRow from '@/components/filter/FilterRow.vue'
 import ConnectorToggle from '@/components/filter/ConnectorToggle.vue'
-import CloseButton from '@/components/button/CloseButton.vue'
 import { createLeaf } from '@/components/filter/filterTree'
 
 defineProps({
diff --git a/i18n/en-US.json b/i18n/en-US.json
index 8d497920..70648abe 100644
--- a/i18n/en-US.json
+++ b/i18n/en-US.json
@@ -544,6 +544,7 @@
   "filter.addGroup": "Add group",
   "filter.containsAnyOf": "contains any of",
   "filter.containsNoneOf": "contains none of",
+  "filter.removeGroup": "Remove group",
   "filter.toggleConnector": "Click to switch between and / or",
   "globals.messages.add": "Add",
   "globals.messages.addAnnouncement": "Add announcement",