From 87addd0c6591540144e8fce5cee5b4c40f48e73e Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 28 Apr 2026 12:13:42 +0200
Subject: [PATCH] feat(MembersOverviewSection): add quick filter for training
 groups and improve layout

- Introduced a new quick filter dropdown for selecting training groups, enhancing user experience in the MembersOverviewSection.
- Removed the previous training group filter from the advanced filters section to streamline the interface.
- Updated styles for the quick filter group to improve layout and responsiveness.
---
 .../members/MembersOverviewSection.vue        | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/members/MembersOverviewSection.vue b/frontend/src/components/members/MembersOverviewSection.vue
index d0fa15cc..d4d137d8 100644
--- a/frontend/src/components/members/MembersOverviewSection.vue
+++ b/frontend/src/components/members/MembersOverviewSection.vue
@@ -34,6 +34,20 @@
                         <span class="scope-chip-count">{{ scope.count }}</span>
                     </button>
                 </div>
+                <div class="members-quick-filter-group">
+                    <label for="members-quick-training-group">{{ $t('members.trainingGroups') }}</label>
+                    <select
+                        id="members-quick-training-group"
+                        :value="selectedTrainingGroup"
+                        class="filter-select"
+                        @change="$emit('update:selected-training-group', $event.target.value)"
+                    >
+                        <option value="">{{ $t('common.all') }}</option>
+                        <option v-for="group in trainingGroupOptions" :key="group.id" :value="group.id">
+                            {{ group.name }}
+                        </option>
+                    </select>
+                </div>
             </div>
 
             <details class="members-advanced-filters">
@@ -137,15 +151,6 @@
                             <option value="unknown">{{ $t('members.genderUnknown') }}</option>
                         </select>
                     </div>
-                    <div class="filter-group">
-                        <label>{{ $t('members.trainingGroups') }}:</label>
-                        <select :value="selectedTrainingGroup" class="filter-select" @change="$emit('update:selected-training-group', $event.target.value)">
-                            <option value="">{{ $t('common.all') }}</option>
-                            <option v-for="group in trainingGroupOptions" :key="group.id" :value="group.id">
-                                {{ group.name }}
-                            </option>
-                        </select>
-                    </div>
                     <div class="filter-group">
                         <label>{{ $t('members.lastTrainingFilter') }}</label>
                         <select
@@ -431,6 +436,13 @@ export default {
     align-items: center;
 }
 
+.members-quick-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 16rem;
+}
+
 .members-advanced-filters {
     margin-top: 0.75rem;
     border-top: 1px solid var(--border-color);
@@ -511,6 +523,11 @@ export default {
     .members-results-actions {
         justify-content: flex-start;
     }
+
+    .members-quick-filter-group {
+        width: 100%;
+        min-width: 0;
+    }
 }
 
 @media (max-width: 640px) {