Replace the message header search with the filter component (#2300)

* Use filter component

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
+import FilterInput from "@/components/FilterInput.vue";
 import { computed, ref } from "vue";
 const props = defineProps<{
   message: ExtendedFailedMessage;
@@ -26,7 +27,9 @@ const filteredHeaders = computed(() => {
       <div class="col">
         <div class="text-search-container">
           <div class="text-search">
-            <input type="search" aria-label="Filter by name" v-model="searchTerm" class="form-control format-text" placeholder="Search for a header key or value..." />
+            <div class="filter-group">
+              <FilterInput v-model="searchTerm" aria-label="Filter by name" :placeholder="'Search for a header key or value...'" />
+            </div>
           </div>
         </div>
       </div>
@@ -76,11 +79,7 @@ const filteredHeaders = computed(() => {
   width: 100%;
   max-width: 40rem;
 }
-.format-text {
-  font-weight: unset;
-  font-size: 14px;
-  min-width: 120px;
-}
+
 .filters {
   background-color: #f3f3f3;
   margin-top: 5px;