implemented group member search

ui/src/components/roles/roleView.vue

@@ -2,12 +2,14 @@
 import { getRoleDetails, getRoleMembers } from '@/api/roles'
 import type { MemberLight } from '@shared/types/member'
 import type { Role } from '@shared/types/roles'
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import Button from '@/components/ui/button/Button.vue'
 import Separator from '@/components/ui/separator/Separator.vue'
-import { Plus, X } from 'lucide-vue-next'
+import { Plus, SearchIcon, X } from 'lucide-vue-next'
 import MemberCard from '../members/MemberCard.vue'
+import InputGroup from '../ui/input-group/InputGroup.vue'
+import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue'
 
 const route = useRoute()
 
@@ -25,6 +27,16 @@ async function loadRole() {
     loading.value = false
 }
 
+const searchQuery = ref('')
+const roleMembersFiltered = computed(() => {
+    if (!searchQuery.value) return roleMembers.value
+    const query = searchQuery.value.toLowerCase()
+    return roleMembers.value.filter(member =>
+        member.displayName?.toLowerCase().includes(query) ||
+        member.username?.toLowerCase().includes(query)
+    )
+})
+
 // const availableMembers = computed(() => {
 //     if (!activeRole.value) return [];
 //     return allMembers.value.filter(
@@ -81,11 +93,20 @@ watch(() => route.params.id, loadRole)
                     <h3 class="text-sm font-medium">
                         Members ({{ roleMembers.length }})
                     </h3>
+                    <div class="flex items-center gap-5">
+                        <InputGroup class="w-64">
+                            <InputGroupAddon>
+                                <SearchIcon class="h-4 w-4 text-muted-foreground" />
+                            </InputGroupAddon>
 
-                    <Button size="sm" variant="secondary">
-                        <Plus class="mr-2 h-4 w-4" />
-                        Add Member
-                    </Button>
+                            <input v-model="searchQuery" type="text" placeholder="Search members…"
+                                class="flex-1 bg-transparent outline-none text-sm" />
+                        </InputGroup>
+                        <Button     variant="secondary">
+                            <Plus class="mr-2 h-4 w-4" />
+                            Add Member
+                        </Button>
+                    </div>
                 </div>
 
                 <!-- Empty state -->
@@ -95,11 +116,11 @@ watch(() => route.params.id, loadRole)
 
                 <div class="overflow-y-auto pr-1">
                     <ul class="space-y-1">
-                        <li v-for="member in roleMembers" :key="member.id"
-                            class="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted">
+                        <li v-for="member in roleMembersFiltered" :key="member.id"
+                            class="flex items-center justify-between rounded-md px-3 py-2 hover:bg-muted/50">
                             <MemberCard :member-id="member.id" />
 
-                            <Button variant="ghost" size="icon" class="text-muted-foreground hover:text-destructive">
+                            <Button variant="ghost" size="icon" class="text-muted-foreground">
                                 <X class="h-4 w-4" />
                             </Button>
                         </li>