expose placeholder

Author: soujay

src/Frontend/src/components/FilterInput.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 const model = defineModel<string>({ required: true });
+defineProps({
+  placeholder: {
+    type: String,
+    default: "Filter by name...", // Default value
+  },
+});
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" placeholder="Filter by name..." aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
+    <input type="search" :placeholder="placeholder" aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
   </div>
 </template>
 

src/Frontend/src/components/messages/HeadersView.vue

@@ -28,7 +28,7 @@ const filteredHeaders = computed(() => {
         <div class="text-search-container">
           <div class="text-search">
             <div class="filter-group">
-              <FilterInput v-model="searchTerm" />
+              <FilterInput v-model="searchTerm" aria-label="Filter by name" :placeholder="'Search for a header key or value...'" />
             </div>
           </div>
         </div>