fix(ux): add Escape listener on Modal

src/components/Modal.vue

@@ -25,14 +25,38 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     openModal: {
       default: false,
       type: Boolean,
     },
+    setCloseListener: {
+      default: true,
+      type: Boolean,
+    },
   },
   emits: ['closemodal'],
-};
+  watch: {
+    openModal(value: boolean) {
+      if (value) {
+        document.addEventListener('keyup', this.escapeEventListener);
+      } else {
+        document.removeEventListener('keyup', this.escapeEventListener);
+      }
+    },
+  },
+  methods: {
+    escapeEventListener(event: KeyboardEvent) {
+      if (event.code !== 'Escape') {
+        return;
+      }
+
+      this.$emit('closemodal');
+    },
+  },
+});
 </script>

src/components/SearchBar.vue

@@ -11,7 +11,7 @@
   </div>
 
   <!-- Search Modal -->
-  <Modal :open-modal="openModal" @closemodal="close">
+  <Modal :open-modal="openModal" @closemodal="close" :set-close-listener="false">
     <!-- Search Input -->
     <div class="p-1">
       <input