feat: placement option (center, top) in modals

components/app/Search.vue

@@ -1,8 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" placement="top" @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"
+        v-model="search"
         v-focus
         type="text"
         name="command"
@@ -30,7 +31,10 @@
           hide-scrollbar
         "
       >
-        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+        <div
+          v-for="(map, mapIndex) in filteredMappings"
+          :key="`map-${mapIndex}`"
+        >
           <h5 class="font-normal my-2 text-secondaryLight py-2 px-4">
             {{ map.section }}
           </h5>
@@ -83,9 +87,21 @@ export default {
   },
   data() {
     return {
+      search: "",
       mappings: spotlight,
     }
   },
+  computed: {
+    filteredMappings() {
+      return this.mappings.filter((map) =>
+        map.shortcuts.find((shortcut) =>
+          shortcut.keywords.find((key) =>
+            key.includes(this.search.toLowerCase())
+          )
+        )
+      )
+    },
+  },
   methods: {
     hideModal() {
       this.$emit("hide-modal")

components/app/Support.vue

@@ -2,6 +2,7 @@
   <SmartModal
     v-if="show"
     :title="$t('support.title')"
+    placement="top"
     @close="$emit('hide-modal')"
   >
     <template #body>

components/smart/Modal.vue

@@ -17,6 +17,7 @@
           ></div>
         </transition>
         <span
+          v-if="placement === 'center'"
           class="hidden sm:h-screen sm:inline-block sm:align-middle"
           aria-hidden="true"
           >&#8203;</span
@@ -44,8 +45,8 @@
               align-bottom
               overflow-hidden
               sm:max-w-md sm:align-middle
-              md:m-4
             "
+            :class="{ 'mt-24': placement === 'top' }"
           >
             <div
               v-if="title"
@@ -109,6 +110,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    placement: {
+      type: String,
+      default: "center",
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()