Add filter and clear button

src/panel/Devtools.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { get } from "lodash-es";
-import { onMounted, onUnmounted, type Ref, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
 type Request = chrome.devtools.network.Request;
 
@@ -15,6 +15,7 @@ interface Entry {
 
 const requests = ref<Entry[]>([]) as Ref<Entry[]>;
 const selectedEntry = ref<Entry>() as Ref<Entry>;
+const filterInput = ref<string>();
 const selectedResponse = ref<unknown>();
 
 const addRequest = (request: Request) => {
@@ -41,6 +42,17 @@ watch(selectedEntry, () => {
   });
 });
 
+const filteredRequests = computed(() => {
+  const searchTerm = filterInput.value;
+  if (!searchTerm) {
+    return requests.value;
+  }
+  return requests.value.filter((request) => {
+    const filterFields = [request.functionKey, request.environmentType, request.environmentId, request.extensionType];
+    return filterFields.some((value) => value.toLowerCase().includes(searchTerm.toLowerCase()));
+  });
+});
+
 onMounted(() => {
   chrome.devtools.network.onRequestFinished.addListener(addRequest);
 });
@@ -51,6 +63,14 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <div class="search-drawer-header">
+    <button class="toolbar-button" @click="requests.splice(0)">Clear</button>
+    <div class="search-toolbar">
+      <div class="toolbar-item-search">
+        <input v-model.trim="filterInput" class="search-toolbar-input" type="text" placeholder="Filter" />
+      </div>
+    </div>
+  </div>
   <div class="shadow-split-widget">
     <div class="shadow-split-widget-contents shadow-split-widget-main vbox">
       <div class="wrapping-container striped">
@@ -64,7 +84,7 @@ onUnmounted(() => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="request in requests" :class="{ selected: request === selectedEntry }" @click="selectedEntry = request">
+            <tr v-for="request in filteredRequests" :class="{ selected: request === selectedEntry }" @click="selectedEntry = request">
               <td :title="request.functionKey">{{ request.functionKey }}</td>
               <td :title="request.environmentType">{{ request.environmentType }}</td>
               <td :title="request.environmentId">{{ request.environmentId }}</td>
@@ -91,7 +111,9 @@ onUnmounted(() => {
 
 <style scoped>
 @import "chrome-devtools-frontend/front_end/ui/components/data_grid/dataGrid.css";
+@import "chrome-devtools-frontend/front_end/ui/components/input/textInput.css";
 @import "chrome-devtools-frontend/front_end/ui/legacy/splitWidget.css";
+@import "chrome-devtools-frontend/front_end/panels/search/searchView.css";
 
 table {
   height: auto;