From 04f54b91358c5ffbdf549b3dfc1406c1615c7d81 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Wed, 2 Apr 2025 21:32:02 -0700
Subject: [PATCH 1/2] Use filter component

---
 src/Frontend/src/components/messages/HeadersView.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index aed43e024..7a2d82fea 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/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" />
+            </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;

From 709a65ae2a65d486f201b0e54f1bea8f5d16b097 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Sat, 5 Apr 2025 07:39:58 -0700
Subject: [PATCH 2/2] expose placeholder

---
 src/Frontend/src/components/FilterInput.vue          | 8 +++++++-
 src/Frontend/src/components/messages/HeadersView.vue | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/FilterInput.vue b/src/Frontend/src/components/FilterInput.vue
index 55b310db4..d02c587bd 100644
--- a/src/Frontend/src/components/FilterInput.vue
+++ b/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>
 
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index 7a2d82fea..dc9e185a2 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/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>